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 should always keep away from and which patterns are essentially the most inclusive when evaluating totally different combos of OSs, browsers, and display readers. Carie will even be operating a web-based workshop on Accessible Front-End Patterns throughout front-end accessibility.

Whereas Scalable Vector Graphics (SVGs) have been first launched within the late 90s, they’ve seen a large resurgence in reputation within the final decade as a consequence 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 pictures 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 contains contemplating the affect 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 combos of working programs, browsers, and display readers.

In fact, the next examples aren’t meant to be an exhaustive record of all of the doable patterns getting used within the digital sphere, however they do spotlight a few of the extra standard or ubiquitous SVG patterns you would possibly encounter. Proceed studying to find which SVG patterns you need to 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 sensible choice for fundamental, uncomplicated pictures in your web site, app, or different digital product. Whereas the downside to utilizing this sample is that you simply can not simply management many visible components or animations as an inline SVG, this sample ought to render lighter and sooner pictures 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 doubtlessly make the web page a bit slower to load, that minor inefficiency can be offset by having extra management over the visible components or animations of your pictures. By including your SVG to the HTML instantly, you even have extra choices in the case of offering picture info to your display 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 like the second group. Nevertheless, on this case, we’re extending the easy various descriptions with extra info because of the complexity of the picture.

This is able to be sample alternative for extra sophisticated pictures that want extra rationalization. Nevertheless, you will need to understand that there are some folks with disabilities — like cognitive issues — who would possibly profit from having this extra picture info available on the display as an alternative of buried within the SVG code.

Relying on the sort and quantity of knowledge you must add to your SVG, you would possibly think about taking a distinct strategy 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 total CodePen [Accessible SVG Pattern Comparison (Fox Version)](https://codepen.io/smashingmag/pen/dyvvbKj) by Carie Fisher.

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

SVG Sample Winners And Losers

By operating varied display readers on totally different combos of working programs 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 could possibly implement so long as you’re conscious of, and may settle for their limitations. Trying 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]"

Word: Whereas this sample just isn’t 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 utterly failed the assessments.

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 notice that a part of decoding the outcomes of the SVG sample assessments is knowing that creators of every display reader have a really useful browser(s) that they totally assist. This doesn’t imply you shouldn’t or couldn’t use a display reader on a distinct browser, this simply signifies that in case you do, the outcomes will not be as correct as in case you used the really useful one(s).

The sample testing for this text did embody some combos of browsers and display readers which will fall into the “fringe” class, however there are additionally notes on which combinations of operating systems, browsers, and screen readers are really useful to your personal testing. The outcomes of those assessments ought to aid you make one of the best SVG sample choice doable, primarily based in your sample wants and constraints.

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

For those who want extra assist deciding on which sample to make use of to your surroundings, try the article Good, Better, Best: Untangling The Complex World Of Accessible Patterns that can assist you navigate the tough waters of accessible patterns. Armed with all of this info and just a bit little bit of effort, your SVGs are properly on their method to being extra inclusive to all.

Editor’s notice: You’ll be able to 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 stay.

Smashing Editorial
(vf, il)



Source link