Logotypes Test Orca

orca.md

Logotypes Test Orca

The results of the experiment on the screen readers Orca (within ArchLinux) with the test page 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

<div class="logo logo--fz0">* This is Company Logo (font-size: 0)</div>

Text	“Image”
✔	✖

Hidden text with text-indent

<div class="logo logo--tind">* This is Company Logo (text-indent)</div>

Text	“Image”
✔	✖

Hidden text with text-indent + role img

<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

<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

<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

<div class="logo logo--tind logo--print">* This is Company Logo (text-indent + print)</div>

Text	“Image”
✔	✖

Tag Img

Img without alt

<img src="logo.svg" width="144" height="52" />

“Image”
✔

Img with alt

<img src="logo.svg" alt="* This is Company Logo (img)" width="144" height="52" />

alt	“Image”
✔	✔

SVG

SVG with title and desc (plain)

<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

<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

<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

<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

<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”
✔	✖	✖	✔