Website Accessibility

“The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect.”

Tim Berners-Lee

Website Accessibility means people can access content on the internet regardless of their disability. Website Accessibility encompasses all disabilities that affect access to the web, including visual, auditory, cognitive, neurological, physical, and speech. It is important to recognize that websites are specifically designed and programmed so that people with disabilities can use them.

If you are creating a website for your students, becoming aware of best practices and techniques related to website accessibility will help you create an accessible website! Follow along with this learning module to help you learn core components that will help you produce an accessible website for your students.

Alternative Text

When images are included on a website, the images, by default, are inaccessible to students with visual disabilities. Therefore, providing alternative text for images is essential to ensuring students with visual disabilities can perceive and access all the content on your website.

When alternative text is not included on all images on your website, the lack of alternative text will result in a negative user experience for students with visual disabilities. This is because screen reader software will read off the image file name which often contains no description of what the image means.

If your website includes any PDF documents, you will want to verify that all the images included on the PDF document provide alternative text.  PDFs are often loaded to websites without alternative text included for their images, which is a big accessibility issue for students accessing the content on PDFs.

How to Write Alternative Text for Images

Writing alternative text can be challenging for some, so it is important to utilize resources available to help you write good alternative text. In the list below are resources to help you write descriptive and meaningful alternative text. Use these resources when writing alternative text and you will improve the accessibility of your website.

Resources:

• Alt text decision tree (W3)
• Write Good Alt text to describe images (Havard)
• Alt Text Explained (WebAim)

Color & Contrast

Good color contrast is very important to ensuring your website is accessible and usable for your students. The use of distinctive color contrast between elements, text, and backgrounds will ensure your students will be able to read the content displayed without difficulty perceiving the text.

When the color contrast is too low between the text and background on a webpage, students may find reading the content unintelligible.

Students with visual disabilities or color vision deficiencies must be able to perceive content on a page, therefore the use of a distinctive color contrast ratio is essential to ensuring a positive user experience.  Check if the colors you use on your website are accessible with the Web Aim Contrast Checker.

Below are two examples of good and bad color contrast between the text and background.  Notice how the green text is much easier to read than the yellow text.  

Use of color

Do not primarily use color to convey information, errors, or navigation on your website. Some students who have visual disabilities and color deficiencies may not be able to point out the difference between the colored elements from the rest of the non-colored elements.

The use of color to display text links is an issue often encountered on websites. To some users, they will not be able to distinguish the colored link text from the rest of the non-colored text, therefore it is a good idea to use primarily use underline for linking text.

Headings

When headings are used correctly the content on the website will be organized and can be easily interpreted by students who use screen readers. Use headings in the correct order and strategically use the heading order to help convey the content on the website. Screen reader users generally prefer to use headings to navigate a webpage, therefore there is a great need to use headings in the correct hierarchy as well as use descriptive headers to explain the sections of your webpage. The correct use of headers is essential to providing all students with a positive user experience while they access your website.