HTML - Accessibility Part 4

Instructors: Jess, Carmen, and Eda

Accessibility

Before this session, please:

• Read Working with Accessible Media Elements: When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text? and take notes
• Read Working with Accessible Media Elements: What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text? and take notes
• Read Working with Accessible Media Elements: What Are Good Ways to Make Audio and Video Content Accessible? and take notes
• Read Working with Accessible Media Elements: What Are Some Ways to Make Web Applications Keyboard Accessible? and take notes
• Try to do as much of Build a Checkout Page as possible before class, you can extend or improve on your code from this lab at a later date
• Complete Design a Movie Review Page over the next few days. If you’re comfortable sharing your projects, we would love to know what movies you rated!

During this session, we’ll:

• Review notes
• Review notes
• Review notes
• Review notes
• We’ll work through our own approach to aspects of Build a Checkout Page to help review forms and other tricky aspects of this lab
• We’ll talk through Design a Movie Review Page to help prepare you to complete this lab solo

After this session, please:

• Complete Build a Multimedia Player solo over the next few days
• Read HTML Accessibility Review and take notes
• Complete HTML Accessibility Quiz solo to test your understanding
• Read HTML Review and take notes

Instructor Notes

Working with Accessible Media Elements: When Is the alt Attribute Needed, and What Are Some Examples of Good Alt Text?

An alt text is essential for making our websites accessible to as many people as possible. It’s also useful for search engines to understand images and browsers to display a description when an image is not present.

However, if an alt text is not helpful for conveying the important details of an image, screen reader users will have difficulty understanding what’s in the image.

There’s no one correct way to write alt texts, but we can always improve them.

An example of a good alt text might look like this:

1<img src="puppy.png" alt="A black and white puppy with an orange collar lies on its belly in the sand, looking off to the side. A bright orange ball rests near its front paws." />

We should also consider the context that the image is presented.

Some of the best practices when writing alt texts include:

• Striking the right balance for the length of the text. We should try to keep it short but also give enough details without being confusing.
• Focusing on the important aspects of the image instead of trying to describe every single detail.
• We should avoid starting our alt texts with “image of”, “picture of” etc.
• If there’s a similar text around the image, we don’t have to repeat that in the alt text.
• If the image is intended to be a link, the alt text should describe what will happen when it’s clicked. For example, if it’s a right arrow image that users will go to the next page when they click it, it should describe this action:

1<a href="about.html">
2  <img src="arrow-right.png" alt="Go to next page." />
3</a>

Images for decorative purposes only should have an empty alt text so that they can be ignored by screen readers:

1<img src="decorative_image.jpg" alt="" />

If the alt attribute of an image is not present, screen readers will read the file name, which is not really helpful. We should always include the alt attribute to the images on the page.

Working with Accessible Media Elements: What Are the Accessibility Benefits for Good Link Text, and What Are Examples of Good Link Text?

Descriptive link texts are helpful as they make finding information easier for everyone. Screen readers read the link text out loud, so a generic “Click here” is not really helpful to convey what will happen once the link is clicked.

Some best practices to keep in mind when writing link texts include:

• Adding an underline (or other visual cues) to links so that they can be easily identifiable
• Avoiding generic link texts such as “Click here”
• Using concise and clear language, avoiding jargon and abbreviations
• Focusing on destination instead of action, such as “Research results” instead of “Click here to read more”
• Not repeating the same link texts for different destinations
• Being consistent with the surrounding text, such as “For more details, visit our about page” instead of “Click here to learn more”

Working with Accessible Media Elements: What Are Good Ways to Make Audio and Video Content Accessible?

Just like good alt texts and descriptive link texts, making audio and video content accessible is also essential for making our websites accessible.

For videos, we should consider adding captions or subtitles.

Captions are the text version of spoken words and non-verbal sounds (such as laughter) synchronized with the video.

Subtitles are the text of spoken dialogue and are useful both for users with hearing impairments and for users who may not understand the language.

Inside a video element, we can add the track element to add captions or subtitles:

 1<video
 2  width="400"
 3  height="300"
 4  controls
 5  src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4"
 6>
 7  <track
 8    src="captions.vtt"
 9    kind="captions"
10    srclang="en"
11    label="English"
12  />
13</video>

We can also use it for audio elements:

1<audio controls src="sample.mp3">
2  <track
3    src="captions.vtt"
4    kind="captions"
5    srclang="en"
6    label="English"
7  />
8</audio>

The src attribute specifies the address of the track (.vtt file).

The kind attribute specifies how it’s supposed to be used. Some valid values are captions, subtitles, chapters, and metadata.

The srclang attribute specifies the language of the track’s text data.

The label attribute is the title of the text track which the browser uses when listing available text tracks.

We can also include a transcript, which is the text version of all the spoken words in our audio or video. Transcripts don’t need to be synchronized with the media. They’re useful in that they make the content searchable.

 1<audio controls>
 2  <source src="audio.mp3" />
 3  Your browser does not support the audio element.
 4</audio>
 5
 6<!-- Transcript -->
 7<h3>Transcript</h3>
 8<p>
 9  [Speaker 1]: Welcome to the tutorial on making accessible content
10</p>
11<p>
12  [Speaker 2]: Today, we'll cover captions, transcripts, and more.
13</p>
14
15<!-- Rest of transcript -->

Video-sharing platforms like YouTube and Vimeo have automatic captions and transcripts. There are other services such as veed.io, Rev, Amara, and Descript.

To make our media content even more accessible, we can also consider including:

• Adding a sign language overlay for videos
• Adding volume and speed controls
• Making sure that on-screen text has good contrast
• Providing multiple formats for our content

Working with Accessible Media Elements: What Are Some Ways to Make Web Applications Keyboard Accessible?

Keyboard accessibility is also an important part of making our websites accessible.

The tabindex attribute for HTML elements allows us to make elements focusable.

The natural tab order is the order that the focusable elements appear in the HTML.

tabindex="0" adds the element to the natural tab order.

As per the MDN docs:

A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3". If multiple elements share the same positive tabindex value, their order relative to each other follows their position in the document source. The maximum value for tabindex is 32767.

Also:

A negative value (the exact negative value doesn’t actually matter, usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation.

There is another HTML attribute called accesskey which allows us to generate a keyboard shortcut for a particular element.

For example accesskey="s" assigns the key S to the Save button. On most browsers, pressing ALT + S (on Windows) and CTRL + Option + S (on Mac) will activate this button.

The key combination might vary depending on the browser or the operating system.

However, it can be problematic because it may conflict with existing keyboard shortcuts or behave inconsistently across devices. It’s better to avoid using it entirely.

The outline property lets us define an outline for the element. It can be useful for defining a focus indicator for an element. Also, note that the indicator must have a minimum color contrast of at least 3:1 with the background color it covers for better accessibility.

Build a Checkout Page

We’ll take a look at this exercise to review forms and what we have learned about accessibility so far!

Design a Movie Review Page

We’ll take a brief look at this exercise that goes through most of the concepts we’ve learned in our bootcamp!