Big Ideas

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. 

Big ideas in digital accessibility include:

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:

WebAIM - Semantic Structure 

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:

WebAIM - Hypertext

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:

WebAIM - Alt Text

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:

Contrast analyzer

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 used in HTML: 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.

Keyboard navigation

Many people with disabilities use a keyboard rather than a mouse to navigate on their computer. Because of this, we must build websites and create documents that can be easily navigated using a keyboard.

There are three primary techniques that allow for better keyboard navigation:

  1. Focus - When an item has keyboard "focus", it can be activated or manipulated with the keyboard.  Visual focus allows the keyboard user to see quickly and easily on their screen which element has their focus.
  2. Order – Because keyboard users tab through the content on a site or document, we must ensure that content on the page is presented in the intended and logical order when tabbing. 
  3. Skip to main content – Most webpages have lengthy top-level navigation that can be tedious to tab through after each new page is visited.  By providing a “skip to main content” link, keyboard users can bypass the navigation at the top of each page and dive right into the main content of the page.