Accessibility

Accessibility Hero showing text such as closed captioning, sign language, large print, assistive listening, braille etc

What is accessibility, and why is it so important?

Accessibility means accessing, reaching, or obtaining products, services, facilities, or information. Accessibility should be considered when the information is being shared electronically. Creating accessible content helps everyone, including people who rely on assistive technologies, such as screen readers, text-to-speech software, magnifiers, and mouth sticks, to accomplish their day-to-day tasks. Imagine using only your keyboard to fill out a PDF form. If the form is not accessible, you will not be able to complete that form.

Writing text that follows accessibility guidelines


Readability

Text should be understandable. WCAG recommends the reading level to be of 9th grade. Do not use unnecessary complex words. For example,

Instead of the sentence: “Use this voluminous document for didactic purposes only.”

Use this: ”Use this broad document for academic purposes only.”

Keep in mind that people with cognitive disabilities or people whose first language is not English should be able to understand the content. Learn more about the plain language initiative.

Abbreviations

Try to avoid abbreviations because some screen readers will not understand the word's context. For example, “WHO” can be read as “Who” instead of “World Health Organization.” In cases where its acronym better knows an organization, you can include abbreviations and full names. For example, you can write

  • PTA as “Parent Teacher Association (PTA)”.
  • WHO as “World Health Organization (WHO)”

Do not write: Mon, Jan 20, 2020

Some screen readers will announce the text as “Mon Jan 20 2020”.

Instead, write: Monday, January 20, 2020

Symbols

Screen readers behave differently with symbols. For example, the NVDA screen reader does not announce “dash” for “-” but the JAWS screen reader does. Avoid writing unnecessary symbols when possible.

Do not use Instead, use
2021/2022 (Screen reader will read it as “2021 slash 2022” or “2021 2022”) 2021 or 2022
2021-2022 (Screen reader will read it as “2021 dash 2022” or “2021 2022” or “2021 to 2022”) 2021 to 2022
Apt #22 (Screen reader will read it as “apt number 22” or “apartment 22”) Apartment number 22

The screen reader will announce some symbols and skip some symbols. Avoiding excessive use of symbols will help you convey important information clearly.

Convey information in multiple ways

Do not use color or shape alone to convey information. People with low vision or color blindness have difficulty understanding the information conveyed only by color or shape. If you use color alone to differentiate information, the audience may not see what you are highlighting when only color is used. Use text to display the differences, as highlighted in the text below.

Bad example:

“Click on the green button if you would like to attend the MS Word accessibility training. Click the red button otherwise.”

Color bad example with no other way to convey information

Users who have red-green color blindness will not be able to tell the difference between the two buttons.

Good example:

“Click on the green button if you would like to attend the MS Word accessibility training. Click the red button otherwise.”

Color good example with text to convey information

Users with red-green color blindness will be able to distinguish between the two buttons based on the text inside the buttons.

Bad example:

Chart example without data labels

In the chart above, people with color blindness may have difficulty associating colors with their labels.

Good example:

Chart example with data labels

The chart above conveys information in multiple ways. People with color blindness can easily understand the information being presented. This practice is also beneficial for people who would like to print the document in grayscale by making the chart more readable.

Fonts

Many font properties can be modified to make the text more readable. People with reading disabilities may have difficulty reading text with a low line or character space. People with low vision may struggle to read text with small font sizes. Here are some tips related to choosing proper fonts:

  • Use sans serif fonts, such as Arial, Calibri, Verdana, Century Gothic, etc.
  • Avoid using small fonts. Font size for normal text should be 12-14 points to increase readability.
  • Choose the fonts with a higher font weight.
  • Avoid using cursive fonts.
  • Choose fonts with sufficient letter space. For example,
  • Font Gloucester MT Extra Condensed with low letter space:

Bad hard to read font example

    Is harder to read than Arial font:

Good fonts example

  • Use bold for emphasis.

Text alignment

When you align text in the center, it can add extra space between words which can be confusing for screen readers and people with reading disabilities. It’s better to avoid centering text and keep it left-aligned.

Creating an accessible structure through headings


Headings help provide an easy way for readers to digest information in chunks. Plus, screen reader users can scan through the headings on the page. Use correct heading levels in a logical order. When you skip heading levels, it can confuse screen reader users. For example, heading 3 should be used after heading 2, and heading 2 should be used after heading 1. When following best practices, heading 3 is not to be used right after heading 1. This confuses the screen readers.

Bad example:

  • Heading 1
    • Heading 3
      • Heading 2
  • Heading 1
    • Heading 2
      • Heading 4

Good example:

  • Heading 1
    • Heading 2
      • Heading 3
  • Heading 1
    • Heading 2
      • Heading 3
        • Heading 4

Using lists within accessible content


Lists are a great way to organize information by making it easier to scan. Use ordered lists to demonstrate a step-by-step process. Use unordered lists when the order of information does not matter.

Good example:

Ordered list:

Following is a step-by-step process on how to make a strawberry-banana smoothie:

  1. Chop strawberries and bananas.
  2. Add wet ingredients to the blender.
    1. Add 1 cup of milk.
    2. Add ½ cup yogurt.
  3. Add all the dry ingredients to the blender.
    1. Add 1 scoop of protein powder.
    2. Add chopped fruits.
  4. Blend and serve.

Unordered list:

Below is the list of ingredients you need to make a strawberry banana smoothie.

  • 1 banana
  • 1 cup of strawberries
  • 1 cup of milk
  • ½ cup yogurt
  • 1 scoop of protein powder

Bad example:

Following is a step-by-step process on how to make a strawberry banana smoothie:

  • Chop strawberries and bananas.
  • Add wet ingredients to the blender.
  • Add 1 cup of milk.
  • Add ½ cup yogurt.
  • Add all the dry ingredients to the blender.
  • Add 1 scoop of protein powder.
  • Add chopped fruits.
  • Blend and serve.

As you can see, using unordered lists for step by step instructions can be confusing for the audience.

Creating accessible hyperlinks


A hyperlink is a piece of text that links to another file, webpage, or content. Do not type out the URL in your content because the screen reader will read each character and symbol in the link. For example the screen reader will read  https://www.elgin.edu/ as,
h-t-t-p-s-colon-forward-slash-forward-slash-w-w-w-dot-elgin-dot-edu-forward-slash-dot. Do not write “Link to” or “Link of” in the hyperlink text because when the screen reader comes across a link, it announces the link automatically. Write link text that describes the content of the link target. You can also specify if the link opens in a new window or opens a document. 

Do not use:

Please visit our website at https://www.elgin.edu/.

Click here to learn more about our college. 

Email us to find out more about the registration process. (The screen reader users will not know if the text links to an email address or contact information page.)

Click here to view the 2023 to 2024 academic calendar. 

To login to the online course management system, click here.

Instead, use:

Please visit the Elgin Community College website for more information.

Click on the Elgin Community College website to learn more about our college.

Email us at registration@elgin.edu to find out more about the registration process. (You can type out the email address because when the screen reader reads the link, the user will know it is an email address and expect it to open in a new window when clicked.)

View the 2023 to 2024 academic calendar: 2023 to 2024 Academic Calendar - PDF. (The user will know that the link will open a PDF document.)

Visit the Distance learning page (opens in a new window) to login into the online course management system. (This will tell the user that the link opens in a new window.)

Tips for creating tables that follow WCAG guidelines


Tables are used to represent tabular data. When creating tables, use simple tables if possible. A simple table is a table with one row and column header. A complex table is a table with merged cells, multiple columns or row headers, etc. Using simple tables helps screen reader users tremendously. The reason is that the screen reader announces the row number, column number, row header, column header, and the content in the cell itself. It can be very confusing when you have merged cells or multiple headers. Do not create tables without headers. Designate at least one column or row header. Below is an example of a simple table.

Course Student name Grade Enrollment year
Chemistry James Smith 85% 2022
Physics Elaina Garcia 95% 2021

The table contains column and row headers highlighted in bold. For example, for the cell “James Smith,” the NVDA screen reader announces “Student Name column 2 James Smith”.

Below is an example of a complex table.

Course Student name Enrollment year
2022 2021
Grade
Chemistry James Smith 85% 2022
Physics Elaina Garcia 95% 2021

As you can see, the table has multiple headers and merged cells. For example, for the cell 85%, the NVDA screen reader announces, “ Enrollment Year column 3 85%”. However, it does not announce “2022” and “Grade.”

This shows why complex tables can be confusing. If you have a choice, use simple tables. Using more than one simple table is better than cramming everything in one complex table.

How to use alternative text to aid understanding


Alternative text (alt text) is the text that is read instead of the content. In content creation, alt text is added to images, links, tables, charts, buttons, and other graphics.

Alt text for images

Images are essential parts of content creation. They add meaning to the content. Since they are available for sighted users, you can also make them accessible for screen readers. This can be done by adding alt text to images. If you don’t add alt text to the image, the screen reader will read the name of the image file instead. For example, without the alt text, the following image would be read as “seven-two-zero-two-underscore-three-six-one graphic image.”

Image file name

Adding alt text to images also helps people with poor internet connections because if the file does not load on a site, the site will display the alt text. When you write the alt text for images, do not include “image of” or “picture of” in the text. The screen reader automatically announces it is an image. Alt text should only include what the content is about. There are different types of images:

  • Functional images: images that act as buttons or links.
  • Informative images: images that are used to convey information.
  • Images of text: images that have text in them.
  • Decorative images: images that are used for visual appeal only. These images convey no information.

What is a functional image?

When you add functional images to your content, add proper alt text to convey the function of the image. For example, if you are using an image for a link:

ECC logo

A good example of alt text would be “Click to go to the Elgin Community College website, which opens in a new window.” It is important to announce the link destination if it opens in a new window. If you have an image that acts as a button that downloads a file, the best practice is to announce the file format.

Below is an image of a print icon used as a print button. A proper alt text should describe the function or destination, not the image itself.


Print icon

Examples of bad alt text:

  • Print icon
  • Black and white print icon

Examples of good alt text:

  • Click to print
  • Click to print the PDF document

What is an informative image?

Informative images are images that represent information or concepts. Ensure the image conveys sufficient information to the audience for informative images. Keep in mind that the alt text also depends on the context in which the image is being displayed.

For the image above, the alt text can be any of the following:

Student

  • Student
  • A student with a laptop
  • A student sitting outside with a laptop in her lap, smiling at the camera

It is up to content creators to decide which alt text best suits the information being conveyed. Note: The words “picture of” or “image of” are not needed within the alt text because the screen readers announce the file type automatically.

Why are images of text inaccessible?

The images with text are problematic because the screen readers cannot read the text in the image. If these images are not avoidable, ensure to add the proper alt text that contains the text inside the image. Logos are an exception to this case.

ECC logo

For example, for the image above, good examples of the alt text would be:

  • Empty alt text, decorative
  • Elgin Community College logo

ECC art center

For the image above, a good example of alt text would be:

  • Harry & Phyllis Blizzard theater do art differently at the ECC Arts Center
  • Do art differently at the ECC Arts Center

What is a decorative image in accessibility?

Decorative images are displayed for decorative purposes and do not convey meaningful information. These images usually include background images. You can have empty alt text for decorative images or mark them as decorative. When a screen reader comes across an image with empty alt text or an image marked as decorative, it will still skip reading the file name. The bottom line is that all images must have alt text or be marked decorative. This could be used sparingly.

How to add alt text to a table

There are two ways to add a table:

  1. As an image.
  2. Manually in the document.

If you add a table as an image, the screen reader will not read the content in the image. In that case, you can write an alt text that includes all the data. If you insert a table manually in the document, the screen reader can access the table cells and announce its data. In that case, write proper alt text that conveys the overview of the table.

Course Student name Grade Enrollment year
Chemistry James Smith 85% 2020
Physics Elaina Garcia 95% 2019

A good alt text for the table above would be:

Table inserted as an image: “The table displays student information, courses taken by the students, grade, and enrollment year. For the course Chemistry, Student Name: James Smith, Grade: 85%, Enrollment year: 2020. For Physics, Student name: Elaina Garcia, Grade: 95%, Enrollment year: 2019.”

You can add tables manually by using tools offered by Microsoft Office products. An example of alt text is if the table was inserted manually: “The table displays student information, courses taken by the students, their grade, and the enrollment year.” You do not need to elaborate the alt text further because the screen readers can traverse manually inserted tables.

Sometimes the tables are extremely complex, and it might be difficult to add descriptive alt text. In that case, insert a table manually, so the screen readers can read the data cells.

How to add alt text to graphs or charts

There are two ways to insert graphs or charts in your document or web:

  1. As an image.
  2. Manually in the document.

When you insert a graph or chart manually in the document, you can add a data table at the bottom to make it accessible. This is impossible when the graph or chart is added as an image. Adding proper alt text to convey information in the graph or chart is vital. Below is an example of a graph added as an image.

Graph without data table

The proper alt text for the graph above would be: “The graph displays the grade distribution of 3 courses. Math average is 75%, low is 60% and high is 100%. Physics average is 70%, low is 40% and high is 100%. Chemistry average is 75%, low is 50% and high is 100%.”

Below is the example of the graph that was added manually using Microsoft Office built-in tools. For some graphs and charts, Microsoft Office offers a feature to add a data table.

Graph with data table

A good alt text for the graph would be:” The graph displays the grade distribution of 3 courses: Math, Physics, and Chemistry”. You do not need to elaborate further on this because the data table includes all the necessary details.

Chart example with data labels

A good example of an alt text for the chart above would be: “The time management chart shows the following breakdown of time: 38% in work, 13% in family, 4% in exercise, 33% in sleep, 8% in chores and 4% in personal time.”

Captions vs. Alt Text

The main difference between the captions and alt text is captions are visible to all users, and alt text information is only visible to the screen reader users. Captions are displayed below the image and contain information important to all. The alt texts are hidden from the sighted users and contain information about the image itself. The screen readers read both alt text and captions. You can add more descriptive information in the alt text if you decide to add both. For example, consider the image below:

Alt text vs caption example

A good example of the caption: Military Veteran
Alt text: A military veteran dressed in formal uniform on a podium giving a speech to the crowd

Increase readability through color contrast


Color contrast means how well one color stands out from another, which determines the readability. People with low vision or color blindness have difficulty reading content that does not have a high color-contrast ratio. These ratios define the luminance difference between two colors, usually background and foreground colors. Below are a few examples:

  • RED COLOR: The contrast between the red (#FF0000) text and white (#FFFFFF) background is 3.99:1.
  • RED COLOR: The contrast between the red (#FF0000) text and yellow (#FFFF00) background is 3.72:1.
  • GRAY COLOR: The contrast between the gray (#666666) text and white (#FFFFFF) background is 5.74:1.
  • GRAY COLOR: The contrast between the gray (#666666) text and light gray (#B7B7B7) background is 2.86:1.

(Hex color codes are a 6-digit combination of letters and numbers that define the color. For example, RED is defined by #FF0000, and GRAY is defined by #666666. Each hex code is unique.) As you can see in the examples above, a higher contrast ratio increases the readability of the text. WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1.

Always check the contrast ratio of the content. You can apply this principle to images that include text by checking the contrast ratio between the text and the image. WebAIM provides a free tool with its color contrast checker. The image below shows how to use the WebAIM contrast checker. To check the color contrast between the text and the slide background, insert the text color in the foreground color text box and the background color in the background color text box. The tool will calculate the contrast ratio. If the ratio is less than 4.5:1, you can move the lightness slider to get the desired ratio.

Webaim color contrast checker

Additional tools to check color contrast:

Identify Document Language

Indicate the main language used within the document and any additional languages that may be used for specific content in the document to ensure that screen reading software is accurately reading the content.

Accessibility Checkers

Using Microsoft's Accessibility Checker and Grackle Accessibility Checker for G Suite, a Google add-on, we can easily and quickly verify that our digital materials are accessible to the growing population of people with disabilities. The accessibility checker will provide simple step-by-step instructions on changing your materials to improve accessibility.

Free tools to check the accessibility of your webpage.

Getting started with manual content accessibility testing

Accessibility checkers are useful, but manual testing is just as important. Automated accessibility checkers can detect that the image has alt text, but they cannot check if it conveys the meaning of the image. In that case, the content creator needs to verify that information. You can perform manual tests on:

  • Color contrast
  • Text inside images
  • Proper alternative text
  • Broken links
  • Proper heading levels
  • Meaningful hyperlinks
  • Document titles

Additional Resources