Accessible Content

What is accessibility, and why is it so important?

Accessibility means the ability to access, reach or obtain 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 a PDF form. If the form is not accessible, you will not be able to complete that form.

Consider the needs of your audience

The needs of the audience vary. For example, people who have low vision might zoom in 200% to read the text. People who are blind will use screen readers or text-to-speech programs to read the text on the screen. People who have a poor internet connection will benefit from alternative text added to the images. People who do not have access to a mouse will benefit from keyboard accessibility added to the content. People in noisy environments will benefit from the captions or subtitles added to the video. Even people with temporary disabilities will benefit from accessible content. Making the content accessible is just the right thing to do to ensure that your content is accessible to your diverse audience. There are many resources available that will help you make your content accessible.

Basic tips for creating accessible web content


Apply these principles when creating different documents, such as Word, PowerPoint, and PDF, email, website, or any content that is shared electronically. This guide will help you achieve Web Content Accessibility Guidelines (WCAG) compliance. To conform to WCAG guidelines, the content is perceivable, operable, understandable, and robust (P.O.U.R.) principles for accessibility.

Perceivable means the users can perceive the content. Questions to ask yourself: Do the videos have captions and transcripts? Can users access information in the images via alt text?

Operable means the users can operate the interface. For example, the content should be accessible by keyboard.

Understandable means the users can understand the information being conveyed. Questions to ask yourself: Is the content clear? Is the reading order correct? Is the navigation predictable?

Robust means the information is accessible on different devices and platforms. For example, the information should be accessible on different devices with different screen sizes. 

Once you complete this tutorial, you will be able to

  1. Write readable and understandable content
  2. Analyze the structure of the document through proper headings
  3. Arrange content in the correct list type
  4. Create contextual links
  5. Organize information in data tables
  6. Understand how to write alt text
  7. Evaluate color contrast of the content
  8. Grasp importance of specifying document language
  9. Utilize built-in accessibility checkers
  10. Evaluate the document manually for accessibility

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 context of the word. For example, “WHO” can be read as “Who” instead of “World Health Organization”. In cases where an organization is better known by its acronym, you can include both abbreviation and the full name. 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 useInstead, 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 multiple ways

Do not use color or shape alone to convey information. People who have low vision or color blindness have difficulty understanding the information conveyed by only color or shape. If you use color alone as a way 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 who have 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 a hard time associating the 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 text more readable. People with reading disabilities may have a hard time 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 point 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 as well as for 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. When you have merged cells or multiple headers, it can be very confusing. Do not create tables without headers. Designate at least one column or row header. Below is an example of a simple table.

CourseStudent nameGradeEnrollment year
Chemistry James Smith 85% 2020
Physics Elaina Garcia 95% 2019

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.

CourseStudent nameEnrollment year
20202019
Grade
Chemistry James Smith 85% 2020
Physics Elaina Garcia 95% 2019

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 “2020” and “Grade.”

This shows why complex tables can be confusing. If you have a choice, use simple tables. It is better to use more than one simple table instead of 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 the content creation, alt text is added to images, links, tables, charts, buttons, and any 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 make them accessible for the screen readers as well. 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 the people who have a poor internet connection 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 in 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 the link 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 that is being 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. For informative images, make sure the image conveys sufficient information to the audience. 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 is best suited for 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 in it are problematic because the screen readers cannot read the text in the image. If these images are not avoidable, make sure 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 images that are displayed for decorative purposes and do not convey any 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 they should 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.

CourseStudent nameGradeEnrollment 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 course Chemistry, Student Name: James Smith, Grade: 85%, Enrollment year: 2020. For course Physics, Student name: Elaina Garcia, Grade: 95%, Enrollment year: 2019.”

You can add tables manually by using tools offered by Microsoft Office products. A good example of alt text 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 a descriptive alt text. In that case, make sure to 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 not possible when the graph or chart is added as an image. It is vital to add proper alt text to convey information in the graph or chart. 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. If you decide to add both, you can add more descriptive information in the alt text. 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 color which determines the readability. People with low vision or color blindness have a hard time reading content that does not have a high color contrast ratio. These ratios define the difference of luminance between two colors, usually background color and foreground color. Below are 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 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

By using Microsoft's Accessibility Checker and Grackle Accessibility Checker for G Suite, which is 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 you with simple step-by-step instructions on making changes to 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 the alt text conveys the meaning of the image or not. 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