Jump to main content

A11Y Style Guide

ARIA

ARIA Examples - Some practical ARIA examples to enhance your application accessibility (Heydon Pickering - @heydonworks).


ARIA Guidelines - Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities. For example, ARIA enables accessible navigation landmarks, JavaScript widgets, form hints and error messages, live content updates, and more (Mozilla Developer Network - @mozappsdev).


ARIA Widget Checklist: For Screen Reader Testing - One of the most significant challenges with ARIA support is determining support level differences between assistive technology and browser combinations, and doing so in a structured manner so that bugs can be accurately and reliably submitted to AT venders so that these support levels can steadily increase equally (SSB BART Group - @SSBBARTGroup).


HTML5 Accessibility Chops: hidden and aria-hidden - As a developer and also a consultant advising developers on how to develop accessible content, it is important to have and provide up to date and practical knowledge about robust development techniques. What is the best method for hiding content for all users? For hiding content for some users? (The Paciello Group - @paciellogroup).


jQuery Simple and Accessible Modal Window - This jQuery plugin will add a shiny and accessible modal window, using ARIA (Nicolas Hoffmann - @Nico3333fr).

Design

ChromeLens - ChromeLens is a Google Chrome extension that provides a suite of tools to help with web accessibility development.


Colour Contrast Analyser - The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.


Contrast Checker - This tool is built for designers and developers to test color contrast compliance with the Web Content Accessibility Guidelines (WCAG) as set forth by the World Wide Web Consortium (W3C). These calculations are based on the formulas specified by the W3C.


Deque's Accessibility Heuristics - Checklist of design best practices when it comes to accessibility.


Funkify - Funkify is a brand new extension for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.


Inclusive Design at Microsoft - It’s in our mission statement: empower every person on the planet to achieve more. Designing for inclusivity opens up our experiences and reflects how people adapt to the world around them (Microsoft Design - @microsoftdesign).


UK Home Office Posters - Home Office repository of posters covering different topics - research, access needs, accessibility and design.

Development

A11y Project - Web Accessibility Checklist - Accessibility can be a complex and difficult topic. The Accessibility Project understands this and wants to help make it easier to implement on the web.


Accessible Components - Scott O'Hara develops and designs accessible user experiences for the web (Scott O'Hara - @scottohara).


Deque's Code Library - This code library is a work in progress. It draws on the principles taught in the course Custom JavaScript/ARIA Widgets.


GOV.UK Design System - Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other service teams and avoid repeating work that’s already been done.


HTML5 Accessibility - Get the current accessibility support status of HTML5 features across major browsers.


Inclusive Components - A blog trying to be a pattern library, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it (Heydon Pickering -@inclusicomps).


Screen Reader Keyboard Shortcuts and Gestures - A list of screen readers with their corresponding suggested browsers.


U.S. Web Design System - The UI components are built on a solid HTML foundation, progressively enhanced to provide core experiences across browsers. All users will have access to the same critical information and experiences regardless of what browser they use, although those experiences will render better in newer browsers. If JavaScript fails, users will still get a robust HTML foundation.


WCAG 2 (Quick Reference Guide) - A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements (success criteria) and techniques.


WCAG Web Accessibility Tutorials - Guidance on how to create websites that meet WCAG.

Media

Able Player - Able Player is a fully accessible cross-browser media player. It uses the HTML5 'audio' or 'video' element for browsers that support them, and (optionally) the JW Player as a fallback for those that don’t (Terrill Thompson - @terrillthompson).


PayPal Accessible HTML5 Video Player - A lightweight HTML5 video player which includes support for captions and screen reader accessibility. For details, read the blog post Introducing an Accessible HTML5 Video Player on the PayPal Engineering blog.

Back to top