While there are elements of digital accessibility that require specialized knowledge and skills, there is a great deal that content creators and subject matter experts can do to make websites and other digital content more accessible. Creating accessible content begins with a firm understanding of some of the big ideas impacting accessibility and the barriers that they can create for people with disabilities.
(If you are also a web developer, be sure to review the Big Ideas for Web Developers page in order to gain a full picture of digital accessibility.)
Big ideas in digital accessibility include:
- Headings and semantic structure
- Hyperlinks
- Image alt text
- Color and contrast
- Captions
- Tables
- Additional resources for PDFs
- Additional resources in Word
Headings and Semantic Structure
Sighted users are able to visually scan websites and documents to quickly make meaning and assess the structure and content of the page. People with vision impairments who use screen readers rely on the semantic structure of a document or webpage to complete that same type of scanning. For that reason, it is essential that we use proper headings (as opposed to text that is styled to be big and/or bold) and that they are applied in a logical, sequential order. There should only ever be one Heading 1 per page, and heading levels should never be skipped (i.e. going from Heading 2 to Heading 4). When this is done correctly, screen reader users can access a list of all of the headings on a page or jump from one heading level to the next.
Headings can be properly applied to documents using the built in styles in Microsoft Word and to websites using either the WYSIWYG editor in your site’s CMS or applying proper heading elements in HTML.
Resources:
Hyperlinks
Because hyperlinks are basic to the functionality of web content, inaccessible links are one of the most severe barriers to overall accessibility. Like headings, links provide a way for users to scan a site to figure out what they want to access next. Screen reader users can generate a list of links on a page for easy skimming. Accessible links are short, descriptive, embedded in text (not the full URL), and make sense out of context. A series of “click here” or “read more” are meaningless out of context and do not allow for quick visual scanning either.
Resources:
Image Alt Text
Providing alternative text (or a textual equivalent) for images is one of the most important principles of accessibility, but it can also be one of the most difficult to get right. Computers and screen readers cannot “read” an image in the same way that a sighted user can, so we must provide information about the content and function of an image; rather than providing what the image looks like, alt text should convey what the content of the image is and what it does.
When conveying content the alt text should capture what is important for the user to know about the image. What information is presented via the image that is not presented in the surrounding text? If the image is purely decorative and does not convey content, then you should provide a blank or null alt text. This lets the screen reader user know that this is a decorative image and you did not forget alt text. Alt text will typically only convey function if the image is a link. In this case, the alt text should say what this image does or, rather, where it takes the user.
When writing alt text, here are some other things to keep in mind:
- Consider context – the same image can have completely different alt text depending on the page where it is displayed.
- Be succinct – While sighted users can glance at a picture and gain meaning, screen reader users must listen to the entirety of alt text. While a picture is worth a thousand words, successful alt text descriptions can generally be limited to just a few words.
- Avoid redundancy – Information that is presented in the surrounding text or in a caption need not be repeated in alt text.
- Omit phrases like “image of” or “graphic of” – Screen readers automatically announce that something is an image, so beginning your alt text with “image of” will only result in that phrase being repeated.
Resources:
Color and Contrast
Contrast ratio refers to how bright or dark colors appear on screens. Text is much easier to read when there is a sufficient contrast between the text and the background. This is good design for everyone and especially important for low vision users. There are many color contrast checkers available online.
It is also important that color not be the only means of conveying meaning since color blindness and other visual impairments can impact people’s ability to distinguish between certain colors. Various maps, charts, and diagrams can become illegible if color alone is used to represent different information. Instead, include labels or other visual indicators like shapes or textures to differentiate.
Resources:
Captions
Captions, which are text versions of the spoken word in videos, allow the content of video to be accessible to those who are unable to hear the audio.
Captions benefit not only those with hearing impairments, but also people for whom English is a second language, people who learn by receiving information in multiple formats, and people who may be doing work/watching videos in public/noisy settings.
While there are a number of tools that automate captioning process, they do not provide accurate enough captions to be accessible. However, those automated captions can provide a good starting point that can then be edited for accuracy. Captions can also be created using an existing transcript or, a third party vendor can be contracted at a rate of less than $2 a minute. The Center for Teaching and Learning provides excellent details on creating captions using Panopto.
Tables
There are two types of tables commonly use: layout tables and data tables. Data tables present information in a grid or matrix while layout tables are sometimes used to create the visual impact we want on a page or document.
Sighted users are able to scan data tables for connections between the data and the row and column headers. Without a properly formatted data table, a screen reader will read the table from left to right, row by row, resulting in often muddied information. In order to create an accessible data table, be sure to properly mark header rows and columns and keep your tables simple. Complex tables should often be broken down into two or more tables.
Similarly, sighted users largely ignore the table structure of a layout table and just take in the information visually while a screen reader will read the table from left to right, row by row, causing the visual intent to be lost AND the information to be unintelligible. To create accessible layout tables, you must ensure that the reading order that the screen reader uses is logical and that the user can adjust the display by scaling and other types of customization.
Resources:
Additional Resources for PDFs
Creating accessible PDFs in InDesign (Developed by Lynn Priestley, Digital Narrative and Interactive Design student)