While there are elements of digital accessibility that require specialized knowledge and skills, there is a great deal of simple changes that content creators can implement to make websites, documents, 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.
Big ideas in digital accessibility include:
- Headings and semantic structure
- Hyperlinks
- Image alt text
- Color and contrast
- Captions
- Tables
- Additional resources
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 just modified 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 document or webpage, 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 the built-in styles in Drupal editor. See the resources below for instructions.
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 mark the image as decorative. 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 one or two sentences.
- 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
A contrast ratio refers to how different two colors appear on a screen. Text is much easier to read when there is a sufficient contrast between the text and the background. Using two light colors or two dark colors can limit the visibility of your content, whether it is text or an icon. It's best to use a light color in combination with a dark color. This is good design for everyone and especially important for low vision users. There are many color contrast checkers available online to check if your color selections are sufficiently different.
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 $2.55 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.