Practical Example: Accessible imagery

Accessible background video

Below is the end result of the 'accessible background video' that we covered in Chapter 8: 'Imagery'. It contains all of the following to ensure that it's as accessible as it can be:

• A button to quickly pause or play the video as the user pleases
• A consistent colour scheme so it doesn't interfere with the content that's overlaid onto it
• Motion confined to a particular part of the video so it it's predictable and not overly distracting
• No sound, as well as the muted attribute added to be sure
• No looping of the video
• A transition to a static background once the video has ended
• A function that stops the video from playing is the users has selected in their settings that they prefer reduced motion
• No video is displayed on devices below 768 pixels (portrait iPad) to avoid unnecessary use of a user's data, and increased load time.

A quick note: we use a little loading trick to ensure that the video poster is available to present as soon as the page is loaded by using the <link> - you can find more about video loading performance here

Accessible icons

Below are some of the approaches we covered in the iconography sections, all of which have been optimised for accessibility:

<img> tag icon:

The simplest approach, with an alt attribute added so the contents can be described to users using assistive technologies.

			    
<img src="assets/img.png" alt="Warning">
			    
			

<picture> tag:

The <picture> tag allows you to supply multiple <source> tags for an image that will be used when certain criteria are fulfilled, with a standard <img> tag you're used to seeing as the fallback when none apply.

			    
<picture>
  <source srcset="mojave-night.jpg" media="(prefers-color-scheme: dark)">
  <img src="mojave-day.jpg">
</picture>
			    
			

Result

The following image will display the Mojave dessert at night for those who prefer dark mode, and the exact same shot but during the day for those who don't or haven't specified.

Sprite icon:

A few examples of images being displayed from the same image sprite, as well as descriptions for each of the icons inside an element that is hidden visually but available to a screen reader:

			    
<div class="sprite sprite--success">
  <span class="sr-only">Action successful</span>
</div>
			    
			

			    
<div class="sprite sprite--warning">
  <span class="sr-only">An error occurred</span>
</div>
			    
			

Icon font icon:

This example uses the FontAwesome icon font, now using SVG. We have added a title attribute to showcase the additions that the library makes to optimise their icons. Doing this ensures that FontAwesome creates a visually hidden element with the contents of the title attribute automatically, as well as applying the aria-hidden="true" attribute to the icon itself.

			    
<i aria-hidden="true" class="fa-solid fa-car" title="Time to destination by car"></i>

<span class="sr-only">Time to destination by car:</span>
			    
			

SVG icon:

The final example is an SVG that has been placed into this web page, complete with the following to ensure that it is accessible:

• A role of img so that it can be recognised as such by assistive technologies.
• A <title> tag naming the icon, linked to the SVG using the aria-labelledby attribute.
• A <desc> tag describing the contents of the icon, linked to the SVG using the aria-describedby attribute

			    
<svg aria-labelledby="bolt-title" aria-describedby="bolt-desc" role=“img”>
  <title id=“bolt-title”>Apple logo</title>
  <desc id=“bolt-desc”>A silhouette of an apple with a bite taken out of it</desc>

  ...

</svg>