# Logotypes Test Orca

The results of the experiment on the screen readers Orca (within ArchLinux) with [the test page](https://yoksel.github.io/ally-for-logo/) by @yoksel in a Firefox.

Abbreviations:
- **Text** — reading of the text from the `<div>`-element.
- **“Image”** — pronunciation of the word “Image”.

## Hidden text

### Hidden text with font-size
```html
<div class="logo logo--fz0">* This is Company Logo (font-size: 0)</div>
```
| Text | “Image” |
| ---- | ------- |
| ✔    | ✖       |

### Hidden text with text-indent
```html
<div class="logo logo--tind">* This is Company Logo (text-indent)</div>
```
| Text | “Image” |
| ---- | ------- |
| ✔    | ✖       |

### Hidden text with text-indent + role img
```html
<div class="logo logo--tind" role="img">* This is Company Logo (text-indent + role img)</div>
```
**The element is missing entirely!**

| Text | “Image” |
| ---- | ------- |
| ✖    | ✖       |

### Hidden text with text-indent + role img + aria
```html
<div class="logo logo--tind" role="img" aria-label="* This is Company Logo (text-indent + role img)">* This is Company Logo (text-indent + role img)</div>
```
| Text | “Image” |
| ---- | ------- |
| ✔    | ✔       |

### Hidden text with visually-hidden
```html
<div class="logo">
  <span class="visually-hidden">Company Name</span>
</div>
```
When switching line by pressing the ↓ said both of the two words, but each separately, as if they were on separate lines.

| Text | “Image” |
| ---- | ------- |
| ✔    | ✖       |

### Hidden text with text-indent + print version
```html
<div class="logo logo--tind logo--print">* This is Company Logo (text-indent + print)</div>
```
| Text | “Image” |
| ---- | ------- |
| ✔    | ✖       |

## Tag Img

### Img without alt
```html
<img src="logo.svg" width="144" height="52" />
```
| “Image” |
| ------- |
| ✔       |

### Img with alt
```html
<img src="logo.svg" alt="* This is Company Logo (img)" width="144" height="52" />
```
| alt | “Image” |
| --- | ------- |
| ✔   | ✔       |

## SVG

### SVG with title and desc (plain)
```html
<svg width="144" height="52" xmlns="http://www.w3.org/2000/svg">
  <title>* This is Company Logo (SVG Title)</title>
  <desc>SVG Logo Description</desc>
  <use xlink:href="#s-logo"></use>
</svg>
```
| title | desc | “Image” |
| ----- | ---- | ------- |
| ✔     | ✖    | ✔       |
Without `role="img"`!

### SVG with title and desc + role
```html
<svg width="144" height="52" xmlns="http://www.w3.org/2000/svg" role="img">
  <title>* This is Company Logo (SVG Title)</title>
  <desc>SVG Logo Description</desc>
  <use xlink:href="#s-logo"></use>
</svg>
```
| title | desc | “Image” |
| ----- | ---- | ------- |
| ✔     | ✖    | ✔       |

### SVG with text
```html
<svg width="144" height="52" xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="#s-logo"></use>
  <text y="-25" x="50" text-anchor="middle">* This is Company Logo (SVG Text)</text>
</svg>
```
| text | “Image” |
| ---- | ------- |
| ✖    | ✔       |
Without `role="img"`!

### SVG with text + title & desc
```html
<svg width="144" height="52" xmlns="http://www.w3.org/2000/svg">
  <title id="svg-title">* This is Company Logo (SVG Title)</title>
  <desc id="svg-desc">SVG Logo Description</desc>
  <text y="-10">* This is Company Logo (SVG Text)</text>
  <use xlink:href="#s-logo"></use>
</svg>
```
| title | desc | text | “Image” |
| ----- | ---- | ---- | ------- |
| ✔     | ✖    | ✖    | ✔       |
Without `role="img"`!

### SVG with text + title & desc + aria-labelledby
```html
<svg width="144" height="52" xmlns="http://www.w3.org/2000/svg" aria-labelledby="svg-title-2 svg-desc-2">
  <title id="svg-title-2">* This is Company Logo (SVG Title)</title>
  <desc id="svg-desc-2">SVG Logo Description</desc>
  <text y="-10">* This is Company Logo (SVG Text)</text>
  <use xlink:href="#s-logo"></use>
</svg>
```
When switching line by pressing the ↓ **the element is missing entirely!**

| title | desc | text | “Image” |
| ----- | ---- | ---- | ------- |
| ✔     | ✖    | ✖    | ✔       |