Providing accessible alternatives to non-text content

What does WCAG say about non-text content? 

While the web was originally created as a means for presenting and linking (hyper)textual content, it quickly grew into a rich, multi-sensory experience. Most websites today feature photographs, illustrations, charts, animations, video and audio content — whether as a means of communicating new information, supplementing information provided as text or simply enhancing the visual appeal of the website. Non-text content may also include blank form fields for user input — and if those fields are not correctly labeled, users with disabilities may be confused about what data the form is asking them to enter. 

Even for web users with disabilities, text content is usually either immediately perceivable and understandable, or can be made accessible by assistive technologies (AT) — for example, voice synthesizers or braille output devices. However, it is much harder for these users to work with non-text content. 

The W3C’s Web Content Accessibility Guidelines (WCAG) address this issue in guideline 1.1.1. This success criterion calls for websites to provide text alternatives for almost all non-text content. For example, photographs and charts should have written descriptions, while audio and video content should have transcripts. AT devices can then render these text alternatives through a sensory modality that matches the user's needs — for example, visual, auditory or tactile.

Why is it necessary to provide text alternatives for non-text content? 

For web users with disabilities, non-text content can be hard or even impossible to perceive, understand or interact with. If your website uses images or charts to reinforce or explain the written content, imagine how frustrating it would be if you couldn't see or understand that visual content.  

Worse still, if you have non-text content that accepts or controls user input — for example, a photograph that is used as a button to submit information — implementing that in a way that doesn't conform with WCAG 1.1.1. could leave many visitors unable to use your website properly. 

Even if non-text content is purely decorative, it can still cause issues for users with disabilities. If improperly implemented, it can tie up AT devices and get in the way of the important content on your website. 

Given that more than 25% of US adults have a disability, failure to make non-text content accessible can shut out millions of potential customers. It could also put you at risk of a lawsuit under the Americans With Disabilities Act (ADA). 

What can I do to fix the issue? 

On the surface, the answer seems easy: provide text that describes or explains the non-text content. That text can will be reinterpreted by AT devices so that their users can understand and work with the content. There are a number of techniques you can use, including the HTML aria-label attribute and the G94 technique to provide a short description. 

Dig a little deeper, and numerous challenges emerge. How should you manage live audio and video content? What about content that has no logical alternative text — for example, a hearing test? In cases like these, you will need not just to describe the non-text element but also explain its purpose. And for non-text content that is not designed for users — for example, invisible images employed as usage trackers — you will need to implement these correctly so that AT devices ignore them. 

CAPTCHAs present additional difficulties. Here, the W3C suggests providing at least two ways to complete the test, plus access to a human customer service representative where required by a user with disabilities. 

Finding and fixing issues associated with WCAG 1.1.1. on a large, complex, frequently changing website requires skill, scale, experience and plenty of time. AudioEye combines automated scanning and remediation technology with human-led testing and custom remediation, providing a unique hybrid service that resolves accessibility issues on an ongoing basis. With an AudioEye subscription, you can benefit from rapid, low-cost identification and resolution of issues with non-text elements. You also gain access to a team of human experts who can support your web designers in building a better experience for web users with disabilities. 

Don’t delay — subscribe today and solve your digital accessibility issues with AudioEye.