Web-Design
Wednesday May 26, 2021 By David Quintanilla
Perfect Patterns For Screen Reader Users — Smashing Magazine


About The Writer

Carie Fisher is an creator, speaker, and developer who’s passionate in regards to the intersection of front-end code and UX, digital accessibility, and variety in …
More about
Carie

Uncover which SVG patterns we must always keep away from and which patterns are essentially the most inclusive when evaluating totally different mixtures of OSs, browsers, and display screen readers. Carie can even be operating a web based workshop on Accessible Front-End Patterns throughout front-end accessibility.

Whereas Scalable Vector Graphics (SVGs) had been first launched within the late 90s, they’ve seen a large resurgence in recognition within the final decade because of their excessive flexibility, excessive constancy, and relative lightness in a world the place bandwidth and efficiency matter greater than ever. Developments in JavaScript and the introduction of CSS media queries such @prefers-color-scheme and @prefers-reduced-motion have prolonged the performance of SVGs approach past their preliminary use case of merely displaying vector photographs on an internet site.

As SVG expertise advances, our understanding of how we design and develop SVGs must advance as properly. A part of that development consists of contemplating the impression of such designs and code on precise people, aka our finish customers.

This text outlines twelve distinct SVG patterns discovered “within the wild” and every various description introduced when accessed by totally different mixtures of working methods, browsers, and display screen readers.

After all, the next examples are usually not meant to be an exhaustive record of all of the potential patterns getting used within the digital sphere, however they do spotlight a few of the extra common or ubiquitous SVG patterns you may encounter. Proceed studying to find which SVG patterns you must keep away from and which patterns are essentially the most inclusive!

Fundamental Different Descriptions Utilizing The <img> Tag

The primary group of 4 patterns makes use of the <img> tag linking out to an SVG file. This can be a good selection for primary, uncomplicated photographs in your web site, app, or different digital product. Whereas the disadvantage to utilizing this sample is that you simply can not simply management many visible parts or animations as an inline SVG, this sample ought to render lighter and sooner photographs total and permit for simpler upkeep on SVGs that you simply use in a number of places.

Sample #1: <img> + alt="[words]"

fox illustration presented in the codepen example
<img position="img" class="fox" alt="What does the fox say?" src="https://add.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Sample #2: <img> + position="img" + alt="[words]"

fox illustration presented in the codepen example
<img position="img" class="fox" alt="What does the fox say?" src="https://add.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Sample #3: <img> + position="img" + aria-label="[words]"

fox illustration presented in the codepen example
<img position="img" class="fox" aria-label="What does the fox say?" src="https://add.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Sample #4: <img> + position="img" + aria-labelledby="[ID]"

fox illustration presented in the codepen example
<p id="caption1" class="visually-hidden">What does the fox say?</p>
<img position="img" aria-labelledby="caption1" class="fox" src="https://add.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Fundamental Different Descriptions Utilizing The <svg> Tag

The second group of 4 patterns makes use of the <svg> tag with an inline SVG file. Though including the SVG code instantly into the markup may probably make the web page a bit slower to load, that minor inefficiency will likely be offset by having extra management over the visible parts or animations of your photographs. By including your SVG to the HTML instantly, you even have extra choices in the case of offering picture info to your display screen reader customers.

Sample #5: <svg> + position="img" + <title>

fox illustration presented in the codepen example
<svg position="img" ...>
   <title>What does the fox say?</title>
   [design code]
</svg>

Sample #6: <svg> + position="img" + <textual content>

fox illustration presented in the codepen example
<svg position="img" ...>
   <textual content class="visually-hidden" font-size="0">What does the fox say?</textual content>
   [design code]
</svg>

Sample #7: <svg> + position="img" + <title> + aria-describedby="[ID]"

fox illustration presented in the codepen example
<svg position="img" aria-describedby="fox7" ...>
   <title id="fox7">What does the fox say?</title>
   [design code]
</svg>

Sample #8: <svg> + position="img" + <title> + aria-labelledby="[ID]"

fox illustration presented in the codepen example
<svg position="img" aria-labelledby="fox8" ...>
   <title id="fox8">What does the fox say?</title>
   [design code]
</svg>

Prolonged Different Descriptions Utilizing The <svg> Tag

The final group of 4 patterns makes use of the <svg> tag with an inline SVG file, very similar to the second group. Nonetheless, on this case, we’re extending the easy various descriptions with further info because of the complexity of the picture.

This might be an excellent sample alternative for extra sophisticated photographs that want extra rationalization. Nonetheless, it is very important remember the fact that there are some folks with disabilities — like cognitive issues — who may profit from having this extra picture info available on the display screen as an alternative of buried within the SVG code.

Relying on the kind and quantity of knowledge it’s essential add to your SVG, you may think about taking a special method altogether.

Sample #9: <svg> + position="img" + <title> + <textual content>

fox illustration presented in the codepen example
<svg position="img" ...>
   <title>What does the fox say?</title>
   <textual content class="visually-hidden" font-size="0">Will we ever know?</textual content>
   [design code]
</svg>

Sample #10: <svg> + position="img" + <title> + <desc>

fox illustration presented in the codepen example
<svg position="img" ...>
   <title>What does the fox say?</title>
   <desc>Will we ever know?</desc>
   [design code]
</svg>

Sample #11: <svg> + position="img" + <title> + <desc> + aria-labelledby="[ID]"

fox illustration presented in the codepen example
<svg position="img" aria-labelledby="fox11 description11" ...>
   <title id="fox11">What does the fox say?</title>
   <desc id="description11">Will we ever know?</desc>
   [design code]
</svg>

Sample #12: <svg> + position="img" + <title> + <desc> + aria-describedby="[ID]"

fox illustration presented in the codepen example
<svg position="img" aria-describedby="fox12 description12" ...>
   <title id="fox12">What does the fox say?</title>
   <desc id="description12">Will we ever know?</desc>
   [design code]
</svg>

See the complete CodePen [Accessible SVG Pattern Comparison (Fox Version)](https://codepen.io/smashingmag/pen/dyvvbKj) by Carie Fisher.

See the complete CodePen Accessible SVG Pattern Comparison (Fox Version) by Carie Fisher.

SVG Sample Winners And Losers

By operating numerous display screen readers on totally different mixtures of working methods and browsers, we see particular patterns rising within the final results desk. There are some clear SVG sample winners and losers, plus just a few patterns someplace within the center that you would implement so long as you might be conscious of, and may settle for their limitations. Wanting over the outcomes desk, we will conclude the next:

Fundamental Different Descriptions Utilizing The <img> Tag (Group 1)

Finest In Present
  • Sample 2: <img> + position="img" + alt="[words]"
  • Sample 3: <img> + position="img" + aria-label="[words]"
Use Warning
  • Sample 4: <img> + position="img" + aria-labelledby="[ID]"
  • Sample 1: <img> + alt="[words]"

Fundamental Different Descriptions Utilizing The <svg> Tag (Group 2)

Finest In Present
  • Sample 5: <svg> + position="img" + <title>
  • Sample 8: <svg> + position="img" + <title> + aria-labelledby="[ID]"
Use Warning
  • Sample 7: <svg> + position="img" + <title> + aria-describedby="[ID]"
  • Sample 6: <svg> + position="img" + <textual content>

Prolonged Different Descriptions Utilizing The <svg> Tag (Group 3)

Finest In Present
  • Sample 11: <svg> + position="img" + <title> + <desc> + aria-labelledby="[ID]"

Notice: Whereas this sample shouldn’t be good because it repeated various descriptions, it didn’t ignore any of the weather within the testing, not like the “use warning” patterns.

Use Warning

  • Sample 9: <svg> + position="img" + <title> + <textual content>
  • Sample 10: <svg> + position="img" + <title> + <desc>
  • Sample 12: <svg> + position="img" + <title> + <desc> + aria-describedby="[ID]"
  • Not one of the patterns on this group fully failed the exams.

Testing Outcomes

See the Pen [Testing Results](https://codepen.io/smashingmag/pen/YzZQBwG) by Carie Fisher.

See the Pen Testing Results by Carie Fisher.

Wrapping Up

You will need to be aware that a part of deciphering the outcomes of the SVG sample exams is knowing that creators of every display screen reader have a really useful browser(s) that they absolutely assist. This doesn’t imply you shouldn’t or couldn’t use a display screen reader on a special browser, this simply implies that for those who do, the outcomes will not be as correct as for those who used the really useful one(s).

The sample testing for this text did embrace some mixtures of browsers and display screen readers that will fall into the “fringe” class, however there are additionally notes on which combinations of operating systems, browsers, and screen readers are really useful on your personal testing. The outcomes of those exams ought to make it easier to make the perfect SVG sample choice potential, primarily based in your sample wants and constraints.

A reminder that earlier than you choose a sample, please be sure you know the fundamentals of how and when to create accessible images and that you simply absolutely perceive the required alternative information needed for the totally different picture varieties.

In case you want further assist deciding on which sample to make use of on your setting, take a look at the article Good, Better, Best: Untangling The Complex World Of Accessible Patterns that can assist you navigate the difficult waters of accessible patterns. Armed with all of this info and just a bit little bit of effort, your SVGs are properly on their approach to being extra inclusive to all.

Editor’s be aware: You may study greatest practices on accessibility with Carie in her upcoming on-line workshop on Accessible Front-End Patterns — with tips, testing instruments, assistive expertise and inclusive design patterns. On-line, and reside.

Smashing Editorial
(vf, il)



Source link