Accessibility

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.

Table of Contents

In this guide, you will learn how to:

• Write text that follows accessibility guidelines
• Create an accessible structure through headings
• Use lists within accessible content
• Create accessible hyperlinks
• Create tables that follow WCAG guidelines
• Use alternative text to aid understanding
• Increase readability through color contrast
• Indicate document language
• Use accessibility checkers
• Get started with manual content accessibility testing

Writing text that follows accessibility guidelines

Readability

The text should be understandable. WCAG recommends the reading level to be in 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.”

Remember 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

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.

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

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.”

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.”

Users with red-green color blindness can distinguish between the two buttons based on the text inside the buttons.

Bad example:

In the chart above, people with color blindness may struggle to associate colors with their labels.

Good example:

The chart above conveys information in multiple ways. People with color blindness can easily understand the information being presented. This practice also benefits people who want 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 like 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.
• Use bold for emphasis.
• Choose fonts with sufficient letter space. For example,
  Font Gloucester MT Extra Condensed with low letter space:
  
  Is harder to read than Arial font:
  

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 should not 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 scanning easier. Use ordered lists to demonstrate a step-by-step process. Use unordered lists when the order of information does not matter.

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 confuse the audience.

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 are the 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

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 it announces the link automatically when the screen reader comes across a link. 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 log in to the online course management system, click here.

Instead, use the following:

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-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.

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.

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 multiple simple tables is better than cramming everything into 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.”

Adding alt text to images also helps people with poor internet connections because the site will display the alt text if the file does not load on a site. 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:

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.

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 alt text is concise and conveys sufficient information to the audience. Remember that the alt text also depends on the context in which the image is being displayed.

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

• 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. It may be helpful when writing alt text to close your eyes and write down what you were able to see.

Note: The words “picture of” or “image of” are unnecessary within the alt text because the screen readers automatically announce the file type.

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, add the proper alt text that contains the text inside the image. Logos are an exception to this case.

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

• Empty alt text, decorative
• Elgin Community College logo

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

• Harry & Phyllis Blizzard Theatre 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.

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 further alt text 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 manually insert a graph or chart 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.

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%. The physics average is 70%, the low is 40%, and the high is 100%. Chemistry average is 75%, low is 50%, and high is 100%.”

Below is an example of the manually added graph using Microsoft Office built-in tools. For some graphs and charts, Microsoft Office offers a feature to add a 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 on this because the data table includes all the necessary details.

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:

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.

Additional tools to check color contrast:

A11Y Contrast Validator

Identify Document Language

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

Learn how to define the document properties in Word.

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.

• WAVE Accessibility Checker
• accessScan by accessiBe
• Accessibility Developer Tools by Google
• Accessibility Insights for Web by Microsoft
• Siteimprove Accessibility Checker

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

• WCAG 2.1 Guidelines
• Web Accessibility Evaluation Tools by W3C