There are some fundamental concepts that are applicable whether you are working with webpages, documents, PDFs, videos, audio, or instruction materials. We will cover those concepts here and then get into how to apply those principles in the different mediums.
It's just a Matter of Semantics
Because many assistive technologies can't infer meaning from font size italics, bold, underline etc., we have to provide invisible sematic information to help.
Headings convey the hierarchy of the page, so there are several heading levels (heading level 1, heading level 2, etc.)
Generally, every document or webpage as a single first level heading that is the main topic of the document/web page. From there, second level headings are used to break the document/web page up into its major sections. Third level headings break it up further, and so on. Very rarely will documents have headings much below the third or forth level, but below is an example that goes way down.
For people without a sight disability, it is easy to visually scan a document/web page and see the headings to get an idea of what the document/web page is about. Sight impaired users will use a special keyboard key combination to “line up” or list all the headings in the document/web page. They may even choose to bring up all the first, second, or third level headings. So, if the creator of the document has not set up headings correctly, then the screen reader user has no choice but to listen to the entire document/web page.
The most common mistake that content creators make regarding headings is that they change the heading level in order to control the font size. This is the wrong way to achieve this end. The “look” of the heading can be altered through styling such as cascading style sheets (CSS) rather than changing the heading level.
Lists also convey meaning and need to be set up correctly. There are three different types of lists; ordered, unordered and definition lists. Each has their purpose.
Items in ordered lists are sequentially marked using letters, numbers, roman numerals, or some other sequential system.
It is important that the lists are set up as lists rather than having the sequential system manually typed. This is because when a screen reader comes to a properly set up list, it will let the user know that it is a list and the number of items that are in that list. It will also read out the sequence characters (number, letter, etc.)
Items in unordered lists are proceeded by a bullet point that can range in shape, size, and appearance. In some cases, the bullet point is absent, but the items still form a list
It is important that the lists are set up as lists rather than having bullet point manually inserted. (This often happens when copying and pasting) This is because when a screen reader comes to a properly set up list, it will let the user know that it is a list and the number of items that are in that list.
Definition, while rarely used, are a special type of list that are in term/description pairs similar to entries in a dictionary. If you are presenting this type of information consider using them as they make consumption of the information much easier for visually impaired users.
Links require descriptive link text. Imagine you are using a screen reading device and you come to a page with 10 buttons that all go to different pages covering different topics, but the links all say "Click here to learn more". You would hear "Click here to learn more" 10 times, but never actually know what you were going to be learning more about.
The best practice is to create a link that has descriptive text. It shouldn't be extremely long, but just enough to know what the topic is about. Never use a website address as a link description. They are long and actually would be spelled out by the screen reader. Examples of good descriptive text for links would be as follows:
Screen readers "see" images by reading the alt text of the image. The alt text is a brief description of the image that conveys information that people who can see naturally obtain by looking at the image. Imagine you are on a website that sells bicycles. It would not be enough to say "bicyle" for every image presented. You need to convey information that is relavent to the image, such as "A happy girl learning to ride her first bike, a pink Huffy Bicycle with streamers." Think in terms of what information the image is conveying.
There are several types of images commonly used on websites: decorative images, background images, and those that add to content or are informational. Alt text is used on the images that add value to the content. To signify when an image is decorative, leave the alt text blank. Background images should not convey any information and are added to a page through the CSS (cascading style sheet). But, if they do convey information, that information needs to be conveyed in other ways for those visitors with visual disabilities. The following examples show the alt text for an image, decorative image, and a background image as it would appear in the CSS:
Tables are a challenge for sight impaired. It is very important to have row and column headers identified for screen readers. You can do this using the WYSIWYG tools in Word and PDF. HTML code for row headers and columns is as follows:
table column header: <th scope="col">Header Text</th>
table row header: <th scope="row">Header Text</th>
Color is an important accessibility item to consider. Users with sighted disabilities, such as red-green color blindness, need proper contrast so the text can be legible and readable.
When providing videos for your viewers, you must make sure that captions, transcripts, and audio descriptions are available. Captions and transcripts are for the hearing impaired. Audio descriptions are descriptions of visual content for the sight impaired.
Audio files and podcasts must have transcripts available for those with hearing impairments.
Last Updated: July 31, 2024
