The beauty of the web is in its flexibility to transform to meet individuals’ needs. But it takes due diligence on our part as developers and content editors to make sure that content is provided in a way that assistive technologies can use to present the information in different ways. If done properly, this ensures that all information you provide on the web is available to everyone regardless of physical, cognitive, or technological limitations.
At Geonetric, we’re passionate about creating accessible websites and web content. As a member of the web design and development team, I often help lead the charge to ensure everything we touch is created with accessibility in mind. It’s also a topic that doesn’t get as much attention as it should – which is why I’m going to do a series of blog posts providing tips and guidance to improving your web content’s accessibility. This month I’m tackling alternative text, which is a great place to start to help ensure your site meets accessibility guidelines and provides a great user experience for all site visitors.
Provide Text Alternatives for Non-Text Content
To pass WCAG 2.0 1.1 A-level compliance, you need to provide text alternatives for all non-text content. Non-text content includes images, video, audio, and CAPTCHA. Text alternatives allow the content to be changed into other forms people need, such as large print, braille, and speech so that information and user interface components are presentable to people with different abilities and needs.
If a person cannot see images very well or at all, alternate text provides a way for them to use a screen reader to hear what the image content is. People with photosensitive epilepsy, high levels of distractibility, or low bandwidth may choose to turn images off; exposing the alternate text to read. Text alternatives for audio and video are the only way some people who are deaf or hard of hearing can enjoy this type of media. As an added bonus, search engines index your alternate text content.
To maximize all these great benefits, it’s important to provide alternate text correctly. To get started with providing alternate text for images, consider the role the image plays and the context it is in.
Images of Text
You should always include the “alt” text attribute for images that contain text like logos, seals or emblems. Only include all the words present in the image. Avoid being overly verbose in your alt description, instead go for efficiency. Do not add extra descriptive words like “Icon” “Logo for”, “Photo of” or “Image” as this slows the screen reader down with extra noise.
Text Image Example:
<img alt="Geonetric" src="/images/geonetric.jpg" />
Images as Links
If your image is the only thing inside a link, or it is an image input button, it must include descriptive alt text. When a link or image button does not include any alt text, the screen reader will only say “link”, “button” or the “href” value. None of which are a good user experience for people who are visually impaired.
Image Link Example:
<a href="/contact-us/"> <img alt="Email us" src="/images/email.jpg" /> </a>
Images of Diagrams, Infographics, Maps and Charts
Some images are so complex that more information needs to be provided than what can fit into a simple alt text attribute. Use the “longdesc” attribute to associate the image with a detailed text-based description. The longdesc attribute includes a link to the full text alternative for the image. This link could be a “jump link” to content on the same page or open a new page.
<img alt="Floor one map" longdesc="#floor-one" src="floor-one.jpg" /> <h3 id="floor-one">Floor One</h3> <p>Long description of what is on this floor and how to navigate it.</p>
All images are required to have the alt text attribute but that doesn’t mean you have to fill it for every image as this can cause redundancy. If the image or icon is purely for aesthetic decoration, provides no information and has no function, it can have “null” alt text which is simply to leave it empty. A decorative banner with a stock photo for example that contains no text could benefit from null alt text, especially if the alt text would match adjacent text like in the following example.
Null Alt Text Example:
<img alt="" src="/images/yoga-class.jpg" /> <h1>Yoga Class</h1>
Cut down on redundant links by combining adjacent image and text links that go to the same resource. Use null alt text when the image is within a link that also includes text to avoid repeating information:
Null Alt Text Example:
<a href="/sign-up-enewsletter/"> <img alt="" src="/images/newsletter.jpg" /> Subscribe to our Newsletter. </a>
Images in PDFs
Don’t forget about the images that are in PDFs, they should also include alt text. (Geonetric clients: If you’re not sure how to test your PDFs for accessibility compliance, contact your client advisor for help!)
CAPTCHAs are another form of visual non-text content that is used as a security measure to stop robots, but they can be barriers for humans to pass too. More than two forms of output modes for different types of sensory perception should be provided to accommodate various disabilities. An option could be an audio variant to the visual test, a live customer service representative, or not requiring CAPTCHAs for authorized users.
Audio and Video
Alternatives should be provided for audio and video as well. This can be in the form of captions and transcripts. For more in-depth information on on how and why you should make time-based media accessible, check out our next article covering WCAG 2.0 1.2.