Skip to content

Instantly share code, notes, and snippets.

@mollyywang
Last active February 28, 2022 01:16
Show Gist options
  • Save mollyywang/2ed95a27362daef2f062e132c8cc683f to your computer and use it in GitHub Desktop.
Save mollyywang/2ed95a27362daef2f062e132c8cc683f to your computer and use it in GitHub Desktop.

Web Accessibility (a11y) overview

Introduction

Accessibility(a11y) in Web development means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. A11y is the right thing to do. Providing accessible sites is part of the law in some countries. ce0daeda-53f0-47f9-a42d-edcec42b3881

Guidelines - WCAG and WAI-ARIA

Web Content Accessibility Guidelines(WCAG) is the primary specification adopted around the world and describes how web content should be created so it will be accessible to people with disabilities. It’s a large and detailed document. The WCAG 2.1 at a Glance provides a paraphrased summary of WCAG 2.1.

Accessible Rich Internet Applications(WAI-ARIA) is a technical specification that provides a framework to improve the accessibility and interoperability of web content and applications. WAI-ARIA can help developers create content that conforms with recommendations in WCAG.

Tools List

  • The Web Accessibility Evaluation Tools are software programs or online services that help you determine if web content meets accessibility guidelines. This page provides a list of evaluation tools that you can filter to find ones that match your particular needs.
  • The axe DevTools - Chrome extension is a development tool to help test a11y coverage in your page.

Checklist

  • The a11yproject checklist uses the WCAG as a reference point. Each item on this checklist has a corresponding WCAG “success criterion.”
  • The elsevier accessibility checklist provides an overview of the success criteria for Web accessibility.
  • WAI-ARIA Authoring Practices 1.2 provides guidance on the appropriate application of WAI-ARIA, describes recommended WAI-ARIA usage patterns and explains concepts behind them.

WAI-ARIA Roles

ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. WAI-ARIA Roles Page lists reference pages covering all the WAI-ARIA roles discussed on MDN. 26fd277a-b3d1-42dc-b5b2-476396aa5558

Screen Reader, Voice Control test reports

Screen readers announce the content of the screen either by audio or by a braille device. People who are blind or have low vision are likely to use screen reader software to interact with computers or devices.

Voice Control software allows users to command their computers or devices by voice, bypassing the need for a mouse or keyboard. People with physical or motor disabilities are most likely to use voice control software.

a11y support - all tests list some use cases and test them against specific implementations.

powermapper - HTML elements shows how different HTML elements behave in commonly used screen readers.

html5accessibility tests which newish HTML5 features are accessibly supported by major browsers.

Tutorials

Start Building Accessible Web Applications course will introduce you to accessibility through hands-on, technical examples that are way more effective than reading 10-year-old static web content.

Any idea?

“It doesn't have to be perfect, just a little bit better than yesterday. 😃 ”

Feel free to edit this page or comment with your thoughts.

Collaborating with @xiongbao, thanks. 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment