Web Accessibility Resources

Basic concepts and getting started

Role-based tips for getting started

Writing for Web Accessibility – Tips for Getting Started

Designing for Web Accessibility – Tips for Getting Started

Developing for Web Accessibility – Tips for Getting Started

Web accessibility basic concepts

Introduction to web accessibility

How people with disabilities use the web

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’s WAVE Accessibility Evaluation Tool is helpful for checking individual web pages. To learn more, read the brief guide on using the WAVE Tool.

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

Images

Overview of accessibility principles for images

Images Concepts Tutorial

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:

Learn more about alternative text techniques

Text alternatives – some examples

Images: An alt Decision Tree (from WAI)

Another image alt decision tree (from 4syllables.com)

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.

Alternative Text – considerations for developers

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:

Long descriptions for images (part 1)

Long descriptions for images (part 2)

Links

Link purpose and writing meaningful link text

Link Text and Appearance

Guidance from the WordPress Accessibility Handbook on Links:

Link destinations: Always tell a visitor what to expect when selecting a link

Writing good link text: a link text should describe the resource that it links to, even when the text is read out of context

Headings

Headings Tutorial

Using headings correctly for good content structure

Using headings in content – Guidance from WordPress

HTML Headings, information and relationships (developer-focused)

Creating “bulletproof” headings (developer-focused)

Lists

Content Structure – Lists

Using Lists Correctly

Color

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.

Use of color and color contrast – Guidance from WordPress

Use of color – for content editors

Color contrast – for content editors

Color Contrast – for designers

Color contrast – considerations for web design and digital branding

Color contrast – for developers

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.

Learn more about captions, transcripts, and audio descriptions

Laws related to Web Accessibility

Introduction to US Laws

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:

Read an overview of WCAG 2.0 and learn more about the WCAG 2.0 standards

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.

The Official WCAG 2.0 Specification (technical standards)

Accessible Electronic Documents and Files

Real users on Adobe PDFs: commonly-encountered barriers and tips for making PDFs accessible

Resources for creating accessible documents and files

WordPress- Accessible PDFs

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 Microsoft Word Guide – Creating Accessible Documents

WebAIM’s PDF Accessibility Guide (includes in-depth guidance on PDF accessibility)

WebAIM’s PowerPoint Accessibility Guide

Creating Accessible PowerPoints

WebAIM’s OpenOffice.org Writer Accessibility Guide

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.

Tables

Tables Concepts

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

Forms

Forms Concepts

Creating Accessible Forms – General Form Accessibility

Creating Accessible Forms – Accessible Form Controls

Creating Accessible Forms – Advanced Form Labeling:

Usable and Accessible Form Validation and Error Recovery:

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 )

Page Structure

Page structure concepts

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

Keyboard accessibility

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

Simply Accessible website – list of articles

The A11Y Project

Before and after website demonstration: shows an inaccessible and accessible version of the same website, with annotations on accessibility barriers and repairs.

Screen Readers

Introduction to Screen Readers (7 minute video)

Testing with Screen Readers – Questions and Answers

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.

Accessibility topics for content editors (from 4syllables.com)

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

Accessible HTML

Accessibility Through Semantic HTML

HTML5 Accessibility:
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:
An overview of WAI-ARIA, the Accessible Rich Internet Applications suite of web standards. WAI-ARIA especially helps with making dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies more accessible to people with disabilities.