Skip to main content

Coding info and relationships

The visual designer should be designating the role of any text which is visually distinct from the body text in a design. The developer’s role is to implement what is captured in the wireframes, and also to question text which seems to be styled and yet has had no role indicated. Text that serves as a heading is an obvious consideration, but foreign words, table headers, legends, and text groupings also have relationships to code.

Level 1

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.

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

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

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

    Techniques
    Requirements and resources
  • Use ARIA labelling and describing attributes to 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 name to meaningful text that already exists on the page.
    • Use the aria-label attribute as a way to provide a descriptive label for a generic link, in cases where there is no text on the page that describes the link’s purpose.

    Note: Using aria-labelledby or aria-label does not change the visible generic link name, only the programmatic one.

    Techniques
    Requirements and resources
  • 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.

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

    Techniques
    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 unusal. It makes the text expansion available visually in a tooltip, and text-to-speech software can announce the expanded words.

    Techniques
    Requirements and resources

Achieve necessary reading order