This tutorial by Liz Rodrigues, Humanities and Digital Scholarship Librarian at Grinnell College, is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. 
Table of Contents
Click any link to head to that section.
- What is web accessibility?
- How do I evaluate web accessibility?
- How do I mitigate web accessibility concerns?
- Going further
- Resources
What is web accessibility?
“Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.” (Source: Wikipedia). This tutorial will introduce you to the goals of web accessibility, common techniques used to work toward those goals, tools for evaluating web accessibility of specific pages/resources, and tips for mitigating inaccessible elements of web pages.
Goals of web accessibility
Web accessibility is driven by the goal of making web resources usable to all people, including those with disability. While accessibility strategies are driven by the needs of users with disabilities, in practice, implementing accessibility features benefits all users.
What does it mean for web resources to be usable to all? Users should be able to:
- perceive
- understand
- navigate
- interact with
- contribute to
the world wide web.
Some types of disabilities that need to be taken into account to reach these goals include:
- auditory
- cognitive
- neurological
- physical
- speech
- visual
Any user, whether they identify as having a disability or not, will probably at some point benefit from accessible content. For example, if you are reading a web page designed for a monitor on a mobile phone, the ability to resize text will be helpful.
Source: World Wide Web Consortium (W3C) Introduction to Web Accessibility
Task
- View at least two of these Web Accessibility Perspectives Videos.
- What is something that you learned from the people sharing their experiences in these videos?
Why strive for web accessibility?
Web accessibility is a form of social responsibility–even when it is not strictly required, it is a best ethical practice.
Web accessibility can also increase the usage of the web resources you create, providing a practical benefit.
In some contexts, web accessibility is required to meet legislative or local policy compliance.
In many educational settings in the United States, web accessibility is a legal requirement. Specifically, the US Department of Justice ruled in April, 2024, that all institutions falling under the provision of Title II of the Americans with Disabilities Act should comply with Web Content Accessibility Guidelines (“WCAG”) 2.1 level AA by April of 2026.
Measures of web accessibility
In order to get closer to meeting these goals, web accessibility must be translated into more tangible features. Examples of such features are:
- Including alt text for all images
- Providing a transcript for all audio and video that includes audio
- Provide descriptive transcripts for video that does not include audio
- Use headings rather than bolding or font size change to indicate page sections
- Using a color scheme with high contrast for easier readability
- Embedding links with meaningful text descriptions, rather than “click here”
While providing these features does not guarantee accessibility or exhaust the potential ways that accessibility could be met, the presence of these features are good steps toward broader accessibility. As well, certain features may be set as minimum standards for accessibility in certain contexts.
One common standard for web accessibility is the Web Content Accessibility Guidelines (WCAG). Educational institutions in the US are legally required to meet WCAG standards 2.1 level AA.
Task
- Review the WCAG 2.1 AA Checklist created by Yale University.
- Identify 1 example of a technical feature, that is, something that can be implemented through the use of a design software, such as a web publishing editor that allows you to set alt text for an image.
- Identify 1 example of a more conceptual design feature that cannot be implemented through a software but instead has to be considered in the course of creating the content itself.
- Identify 1 example of a feature you hadn’t considered before as a part of web accessibility.
How do I evaluate web accessibility?
As you might have noticed, many accessibility features are built into the html that underlies a web page and are not immediately visible. Other features, such as color contrast, can be seen, but determining whether the contrast ratio is adequate is not something most of our eyes are trained to do.
One helpful way of evaluating technical features is to run a web page through an online accessibility checker. These checkers run through the underlying html and evaluate color contrast and produce a list of errors you can then take action to correct.
Task
- Run a webpage you use often through the WAVE AIM accessibility checker. Note the output: what features are well-implemented? Are there errors?
- Run a page from your Reclaim site through the checker. Note the output: what features are well-implemented? Are there errors?
- Look over the Yale WCAG 2.1 Checklist again. Identify at least one feature that the accessibility checker does not or perhaps could never check for.
- Review this list of methods for Manual Accessibility Testing created by Harvard University. Could the feature you identified in #3 be checked using one of these methods?
How do I mitigate web accessibility concerns?
Once you have identified accessibility concerns on your web pages, you can take steps to fix them. Some fixes can be made using editing features that softwares already have built in, such as using the settings WordPress’s media library to add alt text. Others can be made with the help of external tools, like contrast checkers and accessible contrast palette generators. Still others will require planning and conversation with site stakeholders to edit or re-format content. If no transcript is available for an oral history, for example, you will need to discuss funding for a transcription service, and possibly you will need to discuss building transcription into the workflow for creating new oral histories.
Here are some tools and strategies for beginning to address concerns you have identified:
- Review the documentation for any tool you are using for content and website creation. The documentation can alert you to built-in features that can be useful for accessibility, such as adding alt text and changing link styling.
- Use a palette generator such as ColorSafe to select high contrast colors for site design.
- Grinnell College also has access to a tool called SiteImprove, which can do an in-depth review of a given site, checking for accessibility concerns and things like broken links in Sites @ Grinnell. Get in touch with a DLAC staff member (dlac@grinnell.edu) for access.
- Think about accessibility from the very beginning of site and project design. What types of information do you need to accompany the core materials you want to present in order to make them accessible? For example, creating transcripts as part of recording oral histories.
Task
- Review the list of errors in your site identified using the online accessibility checker.
- Investigate how to fix each of these errors. Write a list of methods you will need to employ.
Going further
- Many personal computers now have a screenreader built into them. For Mac, this is called VoiceOver, and many Windows computers have Narrator. Experiment with turning this on for your computer and reading the web page you selected for review. What is it like?
- Learn more about keyboard navigation by attempting to use an interactive site you often use, such as the library catalog, only with keyboard commands.
- Grinnell’s LinkedIn Learning subscription, available to all students, staff, and faculty, includes their UX Foundations: Accessibility tutorial.
Resources
- Sites @ Grinnell support documentation page on Web Accessibility
- W3C’s Introduction to Web Accessibility
- W3C’s Understanding WCAG 2.0
- W3C’s How to Meet WCAG Quick Reference document
- Mozilla’s Accessibility resources, which include tutorials and documentation
