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


About The Creator

Carie Fisher is an writer, 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 completely different combos of OSs, browsers, and display readers. Carie may even be working 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 an enormous resurgence in recognition 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 means past their preliminary use case of merely displaying vector photos 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 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 different description introduced when accessed by completely different combos of working programs, browsers, and display readers.

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

Primary Different Descriptions Utilizing The <img> Tag

The primary group of 4 patterns makes use of the <img> tag linking out to an SVG file. It is a good selection for fundamental, uncomplicated photos in your web site, app, or different digital product. Whereas the downside to utilizing this sample is that you simply can’t simply management many visible components or animations as an inline SVG, this sample ought to render lighter and sooner photos general and permit for simpler upkeep on SVGs that you simply use in a number of areas.

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

fox illustration presented in the codepen example
<img function="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> + function="img" + alt="[words]"

fox illustration presented in the codepen example
<img function="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> + function="img" + aria-label="[words]"

fox illustration presented in the codepen example
<img function="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> + function="img" + aria-labelledby="[ID]"

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

Primary 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 might probably make the web page a bit slower to load, that minor inefficiency shall be offset by having extra management over the visible components or animations of your photos. By including your SVG to the HTML instantly, you even have extra choices with regards to offering picture info to your display reader customers.

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

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

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

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

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

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

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

fox illustration presented in the codepen example
<svg function="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. Nevertheless, on this case, we’re extending the straightforward different descriptions with further info as a result of complexity of the picture.

This could be sample alternative for extra difficult photos that want extra clarification. Nevertheless, you will need to understand that there are some folks with disabilities — like cognitive issues — who may profit from having this extra picture info available on the display as an alternative of buried within the SVG code.

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

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

fox illustration presented in the codepen example
<svg function="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> + function="img" + <title> + <desc>

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

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

fox illustration presented in the codepen example
<svg function="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> + function="img" + <title> + <desc> + aria-describedby="[ID]"

fox illustration presented in the codepen example
<svg function="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 working varied display readers on completely 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. Wanting over the outcomes desk, we are able to conclude the next:

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

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

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

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

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

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

Word: Whereas this sample just isn’t good because it repeated different descriptions, it didn’t ignore any of the weather within the testing, in contrast to the “use warning” patterns.

Use Warning

  • Sample 9: <svg> + function="img" + <title> + <textual content>
  • Sample 10: <svg> + function="img" + <title> + <desc>
  • Sample 12: <svg> + function="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

It is very important observe that a part of decoding the outcomes of the SVG sample assessments is knowing that creators of every display reader have a beneficial browser(s) that they totally help. This doesn’t imply you shouldn’t or couldn’t use a display reader on a distinct browser, this simply implies that in the event you do, the outcomes might not be as correct as in the event you used the beneficial one(s).

The sample testing for this text did embrace some combos of browsers and display readers that will fall into the “fringe” class, however there are additionally notes on which combinations of operating systems, browsers, and screen readers are beneficial on your personal testing. The outcomes of those assessments ought to aid you make the very best SVG sample determination potential, based mostly in your sample wants and constraints.

A reminder that earlier than you decide on a sample, please ensure you know the fundamentals of how and when to create accessible images and that you simply totally perceive the required alternative information needed for the completely different picture sorts.

If you happen to want further assist deciding on which sample to make use of on your surroundings, take a look at 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 approach to being extra inclusive to all.

Editor’s observe: You’ll be able to be taught finest 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