Basic concepts and getting started
Role-based tips for getting started
Web accessibility basic concepts
Learn about the diverse abilities of web users and the common types of barriers they experience due to inaccessible websites and web tools
Read stories of web users with disabilities that demonstrate the impact of accessibility barriers and the broader benefits of making websites accessible
Learn about some of the techniques and tools that people with disabilities use to interact with the web
Accessibility, Usability, and Inclusion are three closely-related disciplines are important for creating a web that works for everyone. Their goals, approaches, and guidelines overlap significantly, with some important distinctions.
Learn more about Accessibility, Usability, and Inclusion
Testing tools and evaluation techniques
WebAIM also has a “quick reference” for evaluating web content accessibility.
This “Cheatsheet” from ncdae.org suggests some free accessibility tools and offers some simple techniques to help identify some common web accessibility problems
How-to guides and tips
The alt tag and alternative text for images
If an image conveys information or has a function, the alternative text must describe what the image is about and convey why it’s there. The aim is to convey textual meaning equivalent to the meaning provided by the image.
For guidance on correct usage of the “alt” attribute, see the following resources:
When is an image “purely decorative”?
Sometimes it’s hard to decide when an image is “purely decorative”. The following article discusses some examples that divide opinion and argues that blank text alternatives are often best.
Text alternatives for images with captions
Web writers must provide a text alternative for informative or functional images. But what should you do when the image also needs a caption? This article discusses the options.
Long descriptions for images
Long descriptions are text versions of the information provided in a detailed or complex image. Learn about the role of long descriptions for images, why you need them, and how to implement them:
Guidance from the WordPress Accessibility Handbook on Links:
Ensure the contrast between text color and background color is sufficient:
You can use the WAVE evaluation tool to test if the color contrast on a given page is sufficient. If any contrast ratios are too low, it will indicate which items fail.
Don’t use color alone to convey meaning:
If color is being used to convey meaning, ensure an additional method is used to convey the same meaning.
Audio, Video, and Multimedia Accessibility
All multimedia content needs to be accessible (e.g. videos and audio files):
- This includes content hosted by external providers (e.g. YouTube, Vimeo, etc.).
- If you embed videos on your site, they need to have captions.
- In some cases, videos with complex visual content may need audio descriptions.
- Audio files need to have a text transcript.
Laws related to Web Accessibility
Web Accessibility Standards and Guidelines
Web Content Accessibility Guidelines (WCAG) 2.0:
We follow the internationally-recogized standard for web accessibility, which is known as the Web Content Accessibility Guidelines version 2.0, or WGAC 2.0.
The WGAC 2.0 standard consists of a set of principles, guidelines, and testable criteria to help ensure websites are accessible.
WCAG 2.0 is organized under 4 principles which are often referenced by the acronym POUR: Perceivable, Operable, Understandable, and Robust.
Learn more about the POUR Principles:
A simple WCAG 2.0 checklist of WebAIM’s recommendations for implementing HTML-related principles and techniques; for those seeking to follow WCAG 2.0 standards.
Accessible Electronic Documents and Files
Resources for creating accessible documents and files
Accessible Files “Cheat Sheets” from ncdae.org:
Includes guides for Word, PowerPoint, Excel, PDF, Adobe InDesign, and Captioning YouTube Videos. Also includes other tutorials for creating accessible electronic content
WebAIM’s PDF Accessibility Guide (includes in-depth guidance on PDF accessibility)
Accessible Digital Office Document (ADOD) Project:
In-depth authoring techniques for accessible office documents. Incudes guides for Microsoft Office, other office products (e.g. Open Office, Google Docs, Google Spreadsheets, etc. ), and guides for PDF (e.g. Adobe Acrobat, Adobe InDesign). Some of the guides are a bit older, but still useful.
Accessible data tables:
The purpose of data tables is to present tabular information in a grid, or matrix, and to have column or rows that show the meaning of the information in the grid. Sighted users can quickly make visual associations between data in the table and their appropriate row and/or column headers. Someone that cannot see the table cannot make these visual associations, so proper markup must be used to make a programmatic association between elements within the table. When the proper HTML markup is in place, users of screen readers can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.
Learn more about accessible data tables
Table accessibility and data tables vs. layout tables:
Explains the differences between data tables and layout tables, and why tables should not be used for layout (use CSS instead). It’s also important to note that screen readers treat layout tables and data tables very differently, which may affect the reading order and how the information is announced to the screen reader user.
Learn more about data tables vs. layout tables
The following guidelines are important for creating accessible forms:
- Provide visible labels close to their form controls.
- Use HTML elements and attributes to associate labels with their controls.
- Clearly indicate required fields.
- Clearly describe constraints, such as required formats.
- Group similar controls using Fieldset and Legend.
- Ensure controls can be navigated using the keyboard.
- Ensure form elements have visual focus indicators.
- Use validation to eliminate unnecessary end-user efforts.
- Be sure that errors are communicated clearly and are easy to identify for a range of assistive technology users, along with everyone else.
( Note: this list of guidelines was taken from: soap.stanford.edu/tips-and-tools/tips/forms )
Semantic Structure – Using headings and lists:
Use proper HTML markup for headings and lists to create an accessible content structure.
Social media content
Good article that discusses ways to reduce accessibility barriers when writing posts, sharing links, and posting images and video.
Email accessibility and MyEmma email
Good overview of email accessibility, which includes a helpful “Designer’s email accessibility checklist, also see this screen shot of the alt text field that appears when adding an image to MyEmma
WebAIM has a good overview of keyboard accessibility and the potential barriers keyboard users may encounter. Also included are tips for testing keyboard accessibility.
Also see WAI’s guide on testing keyboard access and visual focus
Additional Web Accessibility Resources and Topics
Before and after website demonstration: shows an inaccessible and accessible version of the same website, with annotations on accessibility barriers and repairs.
Additional resources for content editors
Introduction to WCAG 2.0 accessibility – for content editors:
A series of articles that discuss the parts of the Web Content Accessibility Guidelines 2.0 that content editors should be familiar with.
Accessibility checklist for web writers:
A checklist based on the Web Content Accessibility Guidelines 2.0. that focuses on day-to-day web content issues that web writers control.
Additional resources for designers
Web Accessibility for Designers:
An overview of important principles of accessible design. Also includes an good example of an accessible infographic that highlights these principles.
Additional resources for developers
Excellent reference which shows the current accessibility support status of HTML5 features across major browsers.
Aural UI of the Elements of HTML- How HTML elements are supported by screen readers:
Includes audio of JAWS screen reader announcing different HTML elements.
Introduction to WAI-ARIA: