Develop - text and non-text
Developers have frequently been asked to provide missing non-text content. Content designers (writers) are now being given this as a priority task to complete. It is another case where developers can switch from discovering missing accessibility to implementing the accessibility that is part of the content design.
Level 1
Implement text alternatives for meaningful images, sound, and visual data
What to do
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.Techniques
- C9: Using CSS to include decorative images
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore
Requirements and resources
- 1.1.1 Non-text content, IBM accessibility requirements
- Decorative images, W3C web accessibility tutorials
What to do
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.Techniques
- ARIA6: Using aria-label to provide labels for objects
- H2: Combining adjacent image and text links for the same resource
- H35: Providing text alternatives on applet elements
- H36: Using alt attributes on images used as submit buttons
- H37: Using alt attributes on img elements
- H53: Using the body of the object element
Requirements and resources
- 1.1.1 Non-text content, IBM accessibility requirements
- Functional images, W3C web accessibility tutorials
- Common text alternative techniques, W3C
- Accessible SVGs - methods for adding alternative content, cariefisher.com
- HTML `canvas` accessibility, pauljadam.com
What to do
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 thearia-describedby
attribute as an easy way to associate it.Techniques
- ARIA9: Using aria-labelledby to concatenate a label from several text nodes
- ARIA15: Using aria-describedby to provide descriptions of images
Requirements and resources
- 1.1.1 Non-text content, IBM accessibility requirements
- Common text alternative techniques, W3C
- Description containing textual information, W3C web accessibility tutorials
- A collection of images, W3C web accessibility tutorials
What to do
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 HTML4longdesc
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.Techniques
Requirements and resources
- 1.1.1 Non-text content, IBM accessibility requirements
- Complex images, W3C web accessibility tutorials
- HTML5 image description extension (longdesc), W3C
What to do
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:<video preload="auto" width="480" height="360" poster="videoname.jpg"><source type="video/mp4" src="videoname.mp4"/><source type="video/webm" srclang="en" src="videoname.webm"/><track kind="captions" srclang="en" src="videoname.vtt"/></video>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.
Techniques
Requirements and resources
- 1.2.2 Captions (Prerecorded), IBM accessibility requirements
- 1.2.4 Captions (Live), IBM accessibility requirements
- Adding captions and subtitles to HTML5 video, Mozilla Developer Network
- Adding captions to videos on web pages, University of Washington
Related toolkit topics
- Media players, UX design – Media players
- Make custom media player and animation controls keyboard accessible, Develop – Keyboard interactions
Give decorative images an ALT attribute with an empty string (alt="")
Use HTML, ARIA, or technology-specific techniques to add short text alternatives
Where relevant text exists in the UI, use aria-labelledby and aria-describedby to reference
Provide an accessible method for exposing long text alternatives
Embed multimedia content that supports closed captions
Implement correct structure and metadata
What to do
The design should already show the hierarchy of the content and headings. Code content using HTML headings (
h1
throughh6
). 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 anaria-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.Techniques
Requirements and resources
- 1.3.1 Info and Relationships, IBM accessibility requirements
- HTML h1-h6 tags, w3schools.com
- Page structure code example, W3C web accessibility tutorials
What to do
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:
- A label on the tab of the browser
- A window title when there are multiple browser instances
- Link text that appears in search engine results
- The first announced content on the web page for screen reader users
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.
Techniques
- G88: Providing descriptive titles for Web pages
- H25: Providing a title using the title element
- F25: Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the contents
Requirements and resources
- 2.4.2 Page Titled, IBM accessibility requirements
- HTML title tag, w3schools.com
What to do
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.Techniques
Requirements and resources
- 3.1.1 Language of Page, IBM accessibility requirements
- HTML language code reference, w3schools.com
Code headings according to specifications
Code the <title> element on every page according to specifications
Set the language for each page
Level 2
Add additional structure where appropriate
What to do
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:
- Use the HTML
figcaption
element as the first or last element in afigure
block to associate the caption with the figure.
For table titles:
- For HTML tables, use the
caption
element immediately after thetable
element. - If the design shows the caption visually after the table, use CSS
caption-side:bottom
on either element.
Note: When ARIA is used to construct the tables, figures, or their accessible names,
caption
andfigcaption
do not get used by AT the same as pure HTML. Use the ARIA authoring practices resources to ensure proper coding.Techniques
- H39: Using caption elements to associate data table captions with data tables
- Example 1: Identifying a table using a caption, W3C web accessibility tutorials
- Example 2: Summaries for more complex tables, W3C web accessibility tutorials
Requirements and resources
- Naming tables and figures with captions, ARIA authoring practices
- Describing tables and figures with captions, ARIA authoring practices
- Table, ARIA authoring practices
- Use the HTML
What to do
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:
- Work with the content designer to see if the link action can be placed on more meaningful text.
- Use the
aria-labelledby
attribute to change the programmatic link label to reference two space-separated ids: the original text label plus the contextual text that already exists on the page. - Use the
aria-label
attribute to provide a descriptive label for a generic link that includes the exact text of the original link label. Only use this method in cases where there is no text on the page that describes the link’s purpose. - Use the
title
attribute to provide additional context. This will provide hover content making the context available to the user visually.
Note: If using
aria-labelledby
oraria-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.Techniques
- ARIA7: Using aria-labelledby for link purpose
- ARIA8: Using aria-label for link purpose
- H33: Supplementing link text with the title attribute
- C7: Using CSS to hide a portion of the link text
Requirements and resources
- 2.4.4 Link Purpose (In Context), IBM accessibility requirements
- 2.5.3 Label in Name, IBM accessibility requirements
Related toolkit topics
- Link text, Content design
What to do
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:
- Main
- Banner
- Navigation
- Footer
- …and so on
Associate a label for each region using:
aria-labelledby
: When a heading or other visible text can serve as the label.aria-label
: When there is no visible text to label the region. Use the text label provided in the content design.
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.
Techniques
Requirements and resources
- 1.3.1 Info and Relationships, IBM accessibility requirements
- Landmark regions, ARIA authoring practices
Use <figcaption> and <caption> elements where figures and tables are titled
Add additional context to generic link names
Consider adding regions and other ARIA roles to distinguish text groupings
Level 3
Mark up foreign words and abbreviations
What to do
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.Techniques
Requirements and resources
- 3.1.2 Language of Parts, IBM accessibility requirements
What to do
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.Techniques
Requirements and resources
- 3.1.4 Abbreviations, WCAG 2.1 (Level AAA)
Use the lang attribute for foreign words and phrases
Use <abbr> elements and title attributes to expand abbreviations
Achieve necessary reading order
What to do
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:
- Multi-column content, such as newspaper layouts
- Tables used to layout content rather than present data
- When CSS is used to reorder content
- When white space characters are used to position content rather than CSS or structural markup
Be sure to check the reading order using a screen reader, as it is the only way to verify the order is correct.
Techniques
- G57: Ordering the content in a meaningful sequence
- C27: Making the DOM order match the visual order
- F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized
Requirements and resources
- 1.3.2 Meaningful Sequence, IBM accessibility requirements
What to do
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.
Techniques
- C6: Positioning content based on structural markup
- C8: Using CSS letter-spacing to control spacing within a word
- F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
Requirements and resources
- 1.3.2 Meaningful Sequence, IBM accessibility requirements