Develop - text and non-text

Where , set the HTML alt attribute of the image to an empty string. For other technologies, use accessible techniques, which cause assistive technologies to ignore the image.

Where content designers have provided an easy text alternative for an image, in HTML set the alt attribute of the image to the string indicated. For other technologies, use techniques in a way that supports assistive technologies. When an image is used as a component, such as a link or button, be sure to nest the image and its alt inside the functional element, so that they present as a single interaction point.

There are several situations where ARIA can help provide context for non-text information. Use the aria-labelledby attribute to distinguish between images in a group, or to incorporate a label from text on the page. Where about a complex image as part of the page content, use the aria-describedby attribute as an easy way to associate it.

If about a complex image, but it is too long for an alt attribute and does not appear in the page content, developers must use an accessible method of exposing it. A frequent implementation is to provide a long description in a separate page or overlay, which can be exposed to the user from a link or other control such as an information icon. You can also consider an expandable details section. HTML5 deprecated the HTML4 longdesc attribute and then approved it as an extension. However, some browsers do not expose the link to the longdesc visually in the UI which makes it difficult for non-screen reader users to discover or access the long description.

People who are deaf or hard of hearing need closed captions as an alternative to the audio content. The easiest solution is for the content designer to utilize captioning services to produce a video and captions that can then be embedded into the code. Each service typically supplies its own easy copy-and-paste method to add the necessary embed code to your web page.

Media content can be embedded in other ways. You could rely on the browser default player by simply using the HTML5 <video> element and add in a specially formatted captions file (.vtt) as a track using the following code snippet:

If you want full control over the chrome of the player and its controls, you can create your own media player using the HTML media API. However, it requires some skill to accomplish. To meet accessibility requirements, the player must support full keyboard operability, closed captions, and audio descriptions.

The design should already show the hierarchy of the content and headings. Code content using HTML headings (h1 through h6). Avoid using headings to achieve a certain visual look of text in the design; that is what CSS is for.

ARIA has role=”heading” and an aria-level can be assigned. However, it is very rare to need to use ARIA to mark up headings. Use HTML as your first choice, ARIA as a last resort.

Use the title element to provide a page title using the page name noted in the content design.

Each web page must have a meaningful programmatic title. Page titles serve multiple purposes:

When each page title is unique, a user can navigate between browser tabs or browser windows to find the right one more easily. If the website name is in the title, be sure the unique page information comes first, before the site name.

When you identify the primary language of content, it enables assistive technology to present text and other linguistic content correctly. For example, screen readers use the country code to set the correct pronunciation rules when converting text to speech. The page language is also used by browsers to render the content more accurately.

Use the HTML lang attribute and set it to a valid 2-character language code. You can use a country sub-code, but it is not an accessibility requirement.

Where the design contains captions on figures or titles on tables, you must programmatically associate them with the element they describe. Take care to avoid common technical mistakes that prevent the association from being understood by assistive technologies (AT). Refer to the techniques and resources for code examples.

For figure captions:

For table titles:

Note: When ARIA is used to construct the tables, figures, or their accessible names, caption and figcaption do not get used by AT the same as pure HTML. Use the ARIA authoring practices resources to ensure proper coding.

Sometimes there are situations where the link text alone doesn’t provide proper context, such as “Read more” or “Help” links. Such links are problematic for people who cannot see the surrounding information that describes where the link actually goes. Fortunately, there are various ways to improve the experience:

Note: If using aria-labelledby or aria-label to change the label, be sure to include the text of the generic link name, spelled exactly as it appears visually, in the programmatic label. This is to ensure the programmatic label also satisfies 2.5.3 Label in Name.

Include all perceivable content on each page into the various landmark regions, as identified in the content design. Each region may contain headings, content, controls, and even nested regions. Code each landmark region with a meaningful role using either HTML 5 sectioning elements or ARIA landmark roles. Regions include:

Associate a label for each region using:

Screen reader AT announces the role and label as the user navigates the content. Landmark regions also help AT users orient themselves on a page and provides the user the ability to navigate to each region with ease.

Use the HTML lang attribute to markup changes of language within the content. The markup enables multi-lingual text-to-speech technology to pronounce that content correctly.

Where indicated in the wireframes, use <abbr> with the title attribute to provide the meaning of abbreviations in the content. Although this is not a requirement, it is helpful to persons with disabilities, especially in table headers or other constrained spaces where it is not possible to spell out words, or the abbreviations are unusual. It makes the text expansion available visually in a tooltip, and text-to-speech software can announce the expanded words.

Screen reader assistive technology uses the DOM order to convert the text on the web page to speech output for users. Add content to the DOM in an order that preserves the meaning when read sequentially from the DOM.

Common places where there are reading order issues:

Be sure to check the reading order using a screen reader, as it is the only way to verify the order is correct.

Use the CSS position property to maintain a meaningful programmatic reading order. Be sure to check the reading order using a screen reader, as it is the only way to verify the order is correct.