ptg16476052Designing for Accessibility 61722
Explorer 10 and Safari/iOS browsers support it—it’s still a good idea to start at least
thinking about it. The track tag lets you provide multiple audio tracks to make your
media more accessible. You place it in your HTML inside the video or audio tags and
give it a label that is human readable explaining what the track is for. The last attribute
you need is the kind attribute that indicates what type of track it is. To caption a video
with English text you might write the following:
<track kind="captions" src="brave.en.hoh.vtt"
srclang="en" label="English for the Hard of Hearing">
You can use several kinds of tracks with HTML5. Table 22.1 explains them.
TABLE 22.1 Keywords for the kind Attribute of the track Tag
Keyword Description
subtitles Transcription of the dialog. Typically overlaid on video.
captions Transcription of dialog, sound effects, relevant musical cues, and other
audio information. Typically overlaid on video.
descriptions Text descriptions of the video portion of a media element. Typically syn-
thesized as audio.
chapters Chapter titles used as navigating within the media file. Typically displayed
as an interactive list.
metadata Tracks intended for use from script. Not typically shown to the end user.
Designing for Accessibility
Just as important as taking advantage of the HTML features provided specifically for
accessibility is taking care to design your pages in a manner that’s as accommodating as
possible for users who are in need of assistance. Most of these techniques are relevant to
all users, not just those using alternative browsers or assistive technologies.
Using Color
A common pitfall designers fall into is using color to confer meaning to users. For exam-
ple, they print an error on the page and change the font color to red to indicate that some-
thing went wrong. Unfortunately, visually impaired users won’t be able to distinguish
your error message from the rest of the text on the page without reading it. Needless to
say, putting two elements on the page that are the same except for color (such as using