Skip to main content

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

Implement correct structure and metadata

    Code headings according to specifications

  • What to do

    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.

    Requirements and resources
  • Code the <title> element on every page according to specifications

  • 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.

    Requirements and resources
  • Set the language for each page

  • 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.

    Requirements and resources

Level 2

Add additional structure where appropriate

    Use <figcaption> and <caption> elements where figures and tables are titled

  • 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 a figure block to associate the caption with the figure.

    For table titles:

    • For HTML tables, use the caption element immediately after the table 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 and figcaption do not get used by AT the same as pure HTML. Use the ARIA authoring practices resources to ensure proper coding.

    Requirements and resources
  • Add additional context to generic link names

  • 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 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.

    Requirements and resources
    Related toolkit topics
  • Consider adding regions and other ARIA roles to distinguish text groupings

  • 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.

    Requirements and resources

Level 3

Mark up foreign words and abbreviations

    Use the lang attribute for foreign words and phrases

  • 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.

    Requirements and resources
  • Use <abbr> elements and title attributes to expand abbreviations

  • 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.

    Requirements and resources

Achieve necessary reading order