Skip to main content

Coding info and relationships

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 content designers have identified decorative images, 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.

    screen shot of HTML source code showing alt = quote quote

    Give decorative images an empty string in the ALT attribute to signal assistive technologies to ignore decorative elements.

    screen shot of HTML source code showing unecessary verbose alt text =  Robot with friendly face, assembled with various scraps of hardware, and mounted on an old DecTalk speech synthesizer

    Don't give decorative images a description as it doesn't give the user meaningful information.

    Techniques

    Requirements and resources

  • 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

    Requirements and resources

  • 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 content designers have provided detailed information about a complex image as part of the page content, use the aria-describedby attribute as an easy way to associate it.

    Techniques

    Requirements and resources

  • What to do

    If content designers have provided detailed information 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.

    Techniques

    Requirements and resources

  • 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

    Related toolkit topics