Accessibility and Inclusive Web Design
General Principles, Basics, Misconceptions
- Léonie Watson: Design Like You Give a Damn (Vimeo video of a four-minute talk).
- Sandi Wassmer: The 10 principles of inclusive web design, 26 May 2011 (based on an article originally published in issue 2016 of .net magazine).
- Jared Smith: Accessibility Lipstick on a Usability Pig (March 2014).
- Léonie Watson: Here's why accessibility is not the enemy of design, June 2017 (video interview, 6 minutes).
Web Accessibility
HTML, CSS and Design
- Geri Coady: Color Accessibility Workflows, A List Apart, June 2017. (Excerpt from Geri Coady's book.)
- WebAIM: WebAIM's WCAG> 2.0 Checklist (last updated in August 2013).
- John Folio:
Accessible HTML5 Forms – Required Inputs,
10 January 2012. Article about browser support for the
required
attribute on form elements introduced in HTML5. Although the findings are now outdated, the article illustrates that browser support does not always imply accessible browser support. - Richard Rutter: Compose to a Vertical Rhythm, 24 Ways, 12 December 2006.
- Richard Rutter: The Elements of Typographic Style Applied to the Web. (Source code on GitHub.)
- Why does HTML think “chucknorris” is a color?: a question on StackOverflow. Of course, “chucknorris” is not a colour, but browsers go to extreme lengths when dealing with malformed HTML or CSS code.
Accessible Widgets and WAI-ARIA
- Marco Zehe: What is WAI-ARIA, what does it do for me, and what not? (March 2014).
- Derek Featherstone: ARIA and Progressive Enhancement, A List Apart, 30 November 2010.
- OpenAjax Accessibility: OpenAjax Examples
- DHTML Style Guide Working Group: recommendation for keyboard shortcuts to be used in widget. (Archived version of a style guide originally developed at AOL; also downloadable as ZIP file.)
- Steve Faulkner: Using WAI-ARIA Landmarks – 2013 (February 2013).
Useful Tools
- WAVE Web Accessibility Evaluation Tool.
- The Paciello Group: Colour Contrast Analyser (CCA) (free and open source; available for Microsoft Windows and Mac OS X).
- Contrast Ratio by Lea Verou.
- Colour Contrast Check by Jonathan Snook.
- Color Safe: tool for creating accessible colour palettes.
- Color Contrast Spectrum Tester by Joseph Dolson. In spite of its name, this is not a test tool but a tool where you can input a colour and that then generate a list of colours together with their contrast ratio with the colour you provided.
- Tanaguru Contrast Finder.
- Pa11y:
your automated accessibility testing pal
. (Source code on GitHub, LGPL licence version 3.0.) - HeadingsMap: Firefox add-on for checking the heading structure in HTML pages.
- Austin Cheney: JS Accessibility Tool List .
- Google Chrome:
Accessibility Developer Tools:
a library of accessibility-related testing and utility code
. (On GitHub; Apache 2.0 License.) - axe-core:
Accessibility Engine for automated testing of HTML-based user interfaces
. (Source code on GitHub; Mozilla Public License 2.0.)
Accessible Media Players
- Henny Swan: Accessible media player resources and demos (November 2014, updated July 2016).
- ableplayer: an accessible HTML5 media player available on GitHub (MIT licence).
- Sam Potts:
plyr:
a
simple HTML5, YouTube and Vimeo player
. (Source code on GitHub, MIT licence.) - Paypal: Accessible HTML5 Video Players. (BSD-3-clause "New" or "Revised" License.)
-
MFP AccessPlayer:
a
web video player that complies with the WCAG and RGAA accessibility guidelines and implements the WAI-ARIA specification.
(GPL 3.0 licence.) - Universal Video Player:
Responsive video player based on the Paypal Accessible HTML5 Video Player, but made responsive.
(Licence: BSD-3-Clause License.)
Other Topics
- Joel: Using Style Guides for Accessibility, Envato Tuts+, 19.06.2017.
- The A11Y Project:
A community-driven effort to make web accessibility easier.
(A11Y Project on GitHub) - Marco's Accessibility Blog (Marco Zehe has been working as Mozilla accessibility QA engineer since 2007).
- Talita Pagani: GAIA - Guidelines for Accessible Interfaces for Autistics (licence: GPL 2.0).
- Questions tagged “Accessibility” on User Experience Stack Exchange.
Web Development
HTML and Web Development in General
- HTML5 Doctor
- Can I Use: Support tables for HTML5, CSS, JavaScript and SVG.
- W3Schools: online tutorials for HTML, CSS JavaScript (including various JavaScript libraries), JSON, Node.js, PHP and XML.
- freeCodeCamp: website with free programming tutorials.
- Codecademy: website with free programming tutorials.
- HTML5Pattern:
website that lists regularly used
input patterns
for
input
elements in forms. - HTML5 Cross Browser Polyfills.
Cascading Style Sheets (CSS)
- W3C: Learning CSS.
- A List Apart articles about CSS.
- CSS-Tricks.
- css-discuss (mailing list) and CSS Discuss (wiki).
- CSS Zen Garden. (See also the source of CSS Zen Garden on GitHub, available under the Creative Commons licence.)
JavaScript
- Marijn Haverbeke: Eloquent JavaScript (online book available under a Creative Commons Attribution-Noncommercial License).
- You Don't Know JS: book series on JavaScript. (Available under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International licence.)
- Learn JavaScript with Eric Elliott.
- JavaScripting (Nodeschool).
- JavaScript: The Right Way. (GitHub repository, content available under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.)
- Nicholas C. Zakas: It’s time to start using JavaScript strict mode, NCZOnline, 13.03.2012.
- Nicholas C. Zakas: The ECMAScript 2016 change you probably don't know, NCZOnline, 18.10.2016.
- Asynchronous JavaScript and Callbacks:
- Stephen Mayeux: Understanding Asynchronous JavaScript Callbacks Through Household Chores, freeCodeCamp, 16.05.2016.
-
Callback Hell:
A guide to writing asynchronous JavaScript programs
. (See source on GitHub; no licence.)
- Cross-Origin Resource Sharing:
- Todd Anglin: Using CORS with All (Modern) Browsers, Telerik Blogs, 03.10.2011.
- Monsur Hossain: Using CORS, HTML5 Rocks, 26.10.2011, updated 29.10.2013.
- Nicholas C. Zakas: Cross-domain Ajax with Cross-Origin Resource Sharing, NCZOnline, 25.05.2010.
- Test CORS support.
- CORS for Developers: W3C Working Group Note, 15 October 2016.
- Cross-Origin Resource Sharing: W3C Recommendation 16 January 2014.
- JSON:
- js-traverse: open-source JavaScript library for traversing object, including JSON. (Licence: MIT.)
- Traverse all the Nodes of a JSON Object Tree with JavaScript (StackOverflow question asked in 2009).
- Magnus Holm: JSON: The JavaScript subset that isn't, Timeless (no date).
- Philip Ackermann: Yet Another JS Link Collection.
Validators and Other Testing Tools
- HTML Tidy:
The granddaddy of HTML tools.
(HTML Tidy on GitHub.) - The W3C Markup Validation Service. (See also About the Nu Html Checker and Validating your HTML.)
- The W3C CSS Validation Service.
- W3C Link Checker.
- Broken Link Checker Tool (by Traffic Names Ltd, UK).
- Jens Meiert: QA Style Sheet.
- Heydon Pickering: REVENCE.CSS:
CSS bookmarklet that puts pink error boxes (with messages in comic sans) everywhere you write bad HTML
. (Available under a Creative Commons Attribution 3.0 Unported license.) - Kevin Lamping: The 5 best visual regression testing tools, June 2017.
- Jonathan Hedley:
jsoup:
Java HTML Parser, with best of DOM, CSS, and jquery
. (Available under MIT licence.) - Using the schemas from v.Nu with other tools.
- CSS Lint. (CSS Lint source code on GitHub, MIT licence.)
- JSHint, a JavaScript Quality Tool: this is a lint-like tool for JavaScript (forked from JSLint). It can catch many errors in your code before you run it in a browser. (JSHint on GitHub, MIT licence.)
- JSLint, The JavaScript Code Quality Tool: a lint-like tool for JavaScript originally developed by Douglas Crockford.
- JSONLint - The JSON Validator. (JSONLint source code on GitHub, ISC License.)
- JSONCompare - The Advanced JSON Linting & Comparison Tool. (Source code on GitHub, ISC License.)
- JSON Formatter & Validator: validates conformance with RFC 4627 (2006, obsoleted by RFC 7159), RFC 7159 or ECMA 404.
Other References
-
QuirksMode,
a website by Peter-Paul Koch;
the prime source for browser compatibility information on the Internet
. - Microformats Wiki:
HTML5 link type extensions:
link types that can be used in the
link
elementstype
attribute. -
WebPlatform:
a site dedicated to documenting and teaching people about open web standards
. - Tomomi Imura: HTML5 Form Field Validation with CSS3, 28 November 2011.
- Tomomi Imura: Creating A Custom HTML5 Form Validation, 21 November 2012.
- MarkApp: Building apps with HTML: a list of JavaScript libraries that by writing HTML instead of writing JavaScript. For background, see Lea Verou's article Markapp: A list of HTML libraries (26 August 2016).
- Lea Verou: URL rewriting with Github Pages (26 November 2016).
- Rustam Tagiev: Arabic, Japanese, and Chinese Layouts in User Interface and User Experience Design, Yalantis blog (no date).
- Hala Hemayssi, Charles Field, Robert Moll, Elyse Sanchez: Designing an Arabic User Interface: Methods and Techniques for Bridging Cultures, User Experience, March 2006.
- Mozilla Corporation: Firefox Developer Edition. (This replaces Firebug, which is no longer being developed.
- Mozilla Developer Network: Firefox Developer Tools.
- DebugBar: developer tool for Internet Explorer.
Personalization and Customization
- Michael Skelton: BBC Homepage: Pick your own mix with customisation, BBC Internet Blog, 3 August 2015.
- Alastair Campbell: Four levels of accessibility customisation, AlastairC, 17 February 2017.
- Caitlin MacDonald: Personalization vs. Customization, TowerData Email Solutions Blog, 22 February 2012.
- Jared Spool: Do users change their settings?, User Interface Engineering Blog, 14 September 2011.