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 concerning 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 mixtures of OSs, browsers, and display screen readers. Carie will 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 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 photographs on a web site.

As SVG know-how advances, our understanding of how we design and develop SVGs must advance as nicely. A part of that development consists of contemplating the influence 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 mixtures of working methods, browsers, and display screen readers.

After all, the next examples will not be meant to be an exhaustive checklist of all of the doable patterns getting used within the digital sphere, however they do spotlight among the extra fashionable or ubiquitous SVG patterns you would possibly encounter. Proceed studying to find which SVG patterns it’s best 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. It is a sensible choice for primary, uncomplicated photographs in your web site, app, or different digital product. Whereas the downside to utilizing this sample is that you just can not simply management many visible components 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 just use in a number of places.

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">

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 can be offset by having extra management over the visible components or animations of your photographs. By including your SVG to the HTML instantly, you even have extra choices in the case of offering picture data to your display screen 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 like the second group. Nevertheless, on this case, we’re extending the straightforward different descriptions with extra data because of the complexity of the picture.

This may be an excellent sample alternative for extra difficult photographs that want extra clarification. Nevertheless, you will need to remember that there are some individuals with disabilities — like cognitive issues — who would possibly profit from having this extra picture data available on the display screen as a substitute of buried within the SVG code.

Relying on the kind and quantity of knowledge you want to add to your SVG, you would possibly take into account taking a special strategy 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 operating numerous display screen readers on completely 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 may implement so long as you might be conscious of, and might settle for their limitations. Wanting over the outcomes desk, we are able to conclude the next:

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

Finest 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]"

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

Finest 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)

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

Be aware: Whereas this sample will not be excellent because it repeated different descriptions, it didn’t ignore any of the weather within the testing, not like 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 fully 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 word that a part of decoding the outcomes of the SVG sample assessments is knowing that creators of every display screen reader have a advisable browser(s) that they absolutely help. This doesn’t imply you shouldn’t or couldn’t use a display screen reader on a special browser, this simply signifies that in the event you do, the outcomes will not be as correct as in the event you used the advisable 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 advisable in your personal testing. The outcomes of those assessments ought to aid you make the most effective SVG sample choice doable, based mostly 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 just absolutely perceive the required alternative information needed for the completely different picture sorts.

Should you want extra assist deciding on which sample to make use of in 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 data and just a bit little bit of effort, your SVGs are nicely on their method to being extra inclusive to all.

Editor’s word: You possibly can be taught greatest practices on accessibility with Carie in her upcoming on-line workshop on Accessible Front-End Patterns — with tips, testing instruments, assistive know-how and inclusive design patterns. On-line, and reside.

Smashing Editorial
(vf, il)



Source link