Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.

The World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) develops guidelines widely regarded as the international standard, and provides materials to help understand and implement Web accessibility. The current guidelines are Web Content Accessibility Guidelines (WCAG) 2.0.

The Designing for Inclusion pages address a broad range of issues in making technology available to and usable by all people, including an overview on How People with Disabilities Use the Web. In addition to following general accessibility best practices, specific techniques are recommended for accessible web design.

The Web Accessibility Tutorials provide guidance on how to create specific components of websites to meet WCAG 2.0. The tutorials cover accessibility topics commonly used in web projects including a variety of web technologies, including HTML4, HTML5, CSS3, WAI-ARIA, MathML, and SVG.

Assistive Tools

Text Version

Text only display of cuny.edu

Speech, reading and translation support for online content

CSS allows authors to separate content from its presentation. Content should be defined in markup, in the HTML of the page. Presentation should be defined in CSS. By doing this, if someone disables or overrides CSS, the content should still be fully accessible. If you must use CSS to present information, content, or meaning, an accessible alternative should be provided.

  •  CSS commands for specifying absolute font sizes should be avoided. Use relative font sizes instead.
  • Ensure visible focus indication. Keyboard users depend on this outline to determine where they are on the page. Some CSS resets use :focus {outline: 0; /* or */ outline: none; which removes visible focus from the page and makes the page inaccessible.
  • Do not remove underlining from links. Users expect links to be underlined.
  • Generally, if content changes on mouse hover, the same should occur on keyboard focus. In almost all cases you need to add “a:focus” wherever you have “a:hover” to achieve this.
  • Do not use CSS to present content to users. CSS content is invisible to screen readers and users with custom style sheets.

To help users orient themselves on web pages, the content and different areas need to be structured to help assistive technology identify them. This tutorial shows how to use HTML elements and WAI-ARIA attributes to allow users to navigate through the page and engage with the content efficiently.

  • Page Sections: Identify and mark section on pages using HTML5 and WAI-ARIA roles to make sure that the purpose of each individual section is conveyed to users.
  • Headings: Convey the page’s structure and sections of content by adding headings of different levels.
  • Content Structure: Mark up content so it can be easily interpreted and adapted to users’ needs.
  • Styling: Apply a distinct hierarchy to the visual page’s design, so users are able to easily determine what each section of the page does.
  • In-page Navigation: Provide navigation aids to help users to get around the page and discover the various sections of the page. Consider adding a “table of contents” for longer pieces of content.

Why this is important?

The content of the page is the reason people are visiting websites in the first place. Being unable to find content or navigate inside individual pages can create major accessibility barriers. An accessible page structure benefits users in many situations such as:

  • People using screen readers can skip to the content directly and navigate to sections that are important to them. Content is read in the way it is intended.
  • People using distraction-free reading plugins will receive better results if the main content is easily to determine.
  • People using certain browser plugins can use landmark roles to jump to specific sections on a page.
  • Keyboard users can save the time and trouble to navigate through a number of links using the tab key.
  • Search engines can use the data to make better predictions on the real content of a web page.

Source: W3C/WAI – Page Structure Concepts

Images must have text alternatives that describe the information or function represented by the images. This ensures that images can be used by people with various disabilities. This tutorial demonstrates how to provide appropriate text alternatives based on the purpose of the image:

  • Informative images: Images that graphically represent concepts and information, typically pictures, photos and illustrations. The text alternative should be a short description conveying the essential information presented by the image.
  • Decorative images: Provide a null text alternative (alt=””) when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.
  • Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples for such images are a printer icon to represent the print function or a button to submit a form.
  • Images of text: Readable text is sometimes presented within an image. If the image is not a logo, text in images should be avoided. However, if images of text are used, the text alternative should contain the same words as in the image.
  • Complex images such as graphs and diagrams: To convey data or detailed information, the text alternative should be a full text equivalent of the data or information provided in the image.
  • Groups of images: If multiple images convey a single piece of information, the text alternative for one image should convey the information conveyed by the entire group.
  • Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. In addition, each individual clickable area should have alternative text that describes the purpose or destination of the link.

For additional information read WebAIM’s article on alternative text about image alternatives and long descriptions.

Why is this important?

Images and graphics make content more pleasant and easier to understand for many people, and in particular for those with cognitive and learning disabilities. They serve as cues that are used by people with visual impairments, including people with low vision, to orient themselves in the content.

However, images are used extensively on websites and can create major barriers when they are not accessible. Accessible images are beneficial in many situations, such as:

  • People using screen readers: The text alternative can be read aloud or rendered as Braille
  • People using speech input software: Users can put the focus onto a button or linked image with a single voice command
  • People browsing speech-enabled websites: The text alternative can be read aloud
  • Mobile web users: Images can be turned off, especially for data-roaming
  • Search engine optimization: Images become indexable by search engines

Source: W3C/WAI – Images Concepts

There are two basic uses for tables on the web: data tables and layout tables. While accessibility guidelines do not prohibit using tables for layout, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML. If you must use a table for layout, ensure your content makes sense in linear order of the source and use <table role=”presentation”> to hide the table element from assistive technology such a screen readers.

Data tables are used to organize data with a logical relationship in grids. Accessible data tables need HTML markup that indicates header cells and data cells, and defines their relationship. Assistive technologies use this information to provide context to users.

To make simple tables accessible, header cells must be marked up with <th>, and data cells with <td>. For more complex tables, explicit associations may be needed using scope, id, and headers attributes.

This tutorial shows you how to apply appropriate structural markup to tables. It includes the following pages:

  • Tables with one header for rows or columns: For tables with content that is easy to distinguish, mark up header cells with <th> and data cells with <td> elements.
  • Tables with two headers have a simple row header and a simple column header: For tables with unclear header directions, define the direction of each header by setting the scope attribute to col or row.
  • Tables with irregular headers have header cells that span multiple columns and/or rows: For these tables, define column and row groups and set the range of the header cells using the colgroup and rowgroup values of the scope attribute.
  • Tables with multi-level headers have multiple header cells associated per data cell: For tables that are so complex that header cells can’t be associated in a strictly horizontal or vertical way, use id and headers attributes to explicitly associate header and data cells.
  • Caption & Summary: A caption identifies the overall topic of a table and is useful in most situations. A summary provides orientation or navigation hints in complex tables.

Some document formats other than HTML, such as PDF and Word, provide similar mechanisms to markup table structures. Be careful, as table markup is often lost when converting from one format to another, though some programs may provide functionality to assist converting table markup.

Why is this important?

Tables without structural markup to differentiate and properly link header and data cells create accessibility barriers. Relying on visual cues alone is not sufficient to create an accessible table. With structural markup, headers and data cells can be programmatically determined by software, which means that:

  • People using screen readers can have the row and column headers read aloud as they navigate through the table. Screen readers speak one cell at a time and reference the associated header cells, so the reader doesn’t lose context.
  • Some people use alternative ways to render the data, for example by using custom stylesheets to display header cells more prominently. Techniques like this enable them to change text size and colors, and display the information as lists rather than grids. In order to allow alternative renderings, table code needs to be properly structured.

Source: W3C/WAI – Tables Concepts

Accessify.com’s quick table builder creates accessible tables using a wizard as a guide.

Forms are commonly used to provide user interaction in websites and web applications. Examples include login, registering, commenting, and purchasing. This tutorial shows you how to create accessible forms. The same concepts apply to all forms, whether they are processed client or server-side.

Aside from technical considerations, users usually prefer simple and short forms. Only ask users to enter what is required to complete the transaction or process; if irrelevant or excessive data is requested, users are more likely to abandon the form.

  • Labeling Controls: Whenever possible, use the <label> element to explicitly associate text with form elements. The <for> attribute of the label must exactly match the <id> of the form control.
  • Grouping Controls: Use the <fieldset> and <legend> elements to group and associate related form controls.
  • Form Instructions: Provide instructions before the form or control to help users understand how to complete the form and form controls.
  • Validating Input: Validate input provided by the user, and provide options to undo changes and confirm data entry.
  • User Notifications: Notify users about successful task completion or any errors, and provide instructions to help them correct mistakes.
  • Multi-Page Forms: Divide long forms into multiple smaller forms that constitute a series of logical steps or stages, and inform users about their progress.
  • Custom Controls: Use stylized form elements and other progressive enhancement techniques to provide custom controls.

A note on time limits

If possible, forms should not be subject to a time limit to allow users to complete the form at their own pace. If a time limit needs to be in place, for example, for security reasons, the user should have the option to turn it off or extend it. This does not apply if the time limit is due to a live event, such as an auction or a game, or if the time to complete the form is essential for a valid submission.

Why is this important?

Forms can be visually and cognitively complex and difficult to use. Accessible forms are easier to use for everyone, including people with disabilities.

  • People with cognitive disabilities can better understand the form and how to complete it, as making forms accessible improves the layout structure, instructions, and feedback.
  • People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they need to complete.
  • People with limited dexterity benefit from large clickable areas that include the labels, especially for smaller controls, such as radio buttons and checkboxes.
  • People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements.

Source: W3C/WAI– Forms Concepts

Accessify.com’s quick form builder easily generates a fully accessible and valid form.

The New Rules of Form Design describes modern techniques to allow designers to produce faster, easier, and more productive form experiences.

Carousels, commonly also referred to as “slide shows” or “sliders”, display a series of content items one at a time; for example, a series of news headlines. Carousels often use animations to move from slide to slide which can be distracting for some users. They may also move so fast automatically that their content is hard or impossible to grasp, which is why every carousel should have a function to pause the animation.

Also, carousels often pose traps to keyboard users, not allowing them to use the carousel. They may even get stuck inside, without a chance to leave the carousel and read the rest of the page. This tutorial highlights the particular accessibility considerations for such carousels:

  • Structure: Provide structural markup for the carousel and its items, and later enhance these structures with styling and scripting.
  • Functionality: Provide functionality to display the carousel items one at a time, and to allow users to browse through them.
  • Animations: Provide users with control over any animations in your carousel.
  • Full Carousel Example Code: The complete example source code.

Why is this important?

Carousels are frequently used, in particular on home pages, to draw the readers’ attention to featured articles and products of the website. Given their prominence, inaccessible carousels can be a major obstacle for many website visitors. On the other hand, accessible carousels provide more effective access for many users including:

  • People using keyboard navigation and voice input software can navigate between carousel items.
  • People using screen readers will understand where they are and how to navigate between carousel items.
  • People who are distracted by movement are able to pause the animations while reading the web page.
  • People who need more time to read have sufficient time to read and understand each carousel item.

Source: W3C/WAI – Carousel Concepts

Easy Checks offers simple steps to help you assess the accessibility of a web page. With these simple steps, you can get an idea whether or not accessibility is addressed in the most basic way. These checks cover just a few accessibility issues and are designed to be quick and easy, rather than definitive.

Check for the following specific aspects of a web page:

There are other accessibility issues not covered in these easy checks, for example: links, data table markup, reliance on color, content that causes seizures, and much more.

More robust evaluation is needed to evaluate all issues comprehensively. Guidance is available from:

Source: W3C/WAI – Easy Checks Review

The web accessibility basics is a good overview of basic accessibility.

WebAIM’s WCAG 2.0 Checklist contains WebAIM’s (Web Accessibility In Mind) interpretation of WCAG guidelines and success criteria and their recommended techniques for satisfying those success criteria.

The Teach Access Tutorial provides basic accessibility training for developers and designers.

Google has created a free on-line accessibility course. In this course you’ll get hands-on experience making web applications accessible.

Start Building Accessible Web Applications (Videos). Subjects include “Accessible Icon Buttons”, “Accessible Button Events”, “Building Forms with Accessibility in Mind”, “Headings and semantic structure for accessible web pages”, and “Focus management using CSS, HTML”.

Every component in a web application must convey its roles, states and properties so assistive technologies can consume that information.  In addition, keyboard/touch operability, color contrast, and following the spec according to the role in regards to keyboard functionality and attribute management. I find it extremely useful to follow the W3c “Custom Control Accessible Development Checklist”.

The Mozilla Developer Network has a series of accessibility guides covering HTML, CSS, JavaScript, ARIA and mobile development.

Use this accessibility checklist to help build accessibility into your process no matter your role or stage in a project.

The Web Design Reference site contains a huge list of resources on web design and accessibility.

BBC Standards and Guidelines for Mobile Accessibility is a set of technology agnostic best practices for mobile web content, hybrid and native apps.