Web Accessibility #

Warning: This post hasn't been updated for over a year. The information may be out of date.

Semantic HTML #

Readings #

• Why You Should Choose HTML5 article Over section — Smashing Magazine

  • Don’t use loads of <h1>s. Make <h1> the main heading of your page, then use <h2>, <h3>, <h4>, etc. in a proper hierarchy without skipping levels.
  • <section> can be used with aria-label to signal to a screen reader user where a particular sub-part of an article begins and ends. Otherwise, forget about it, or use another element, such as <aside aria-label=”quick summary”> or <div role=”region” aria-label=”quick summary”>.
  • <main>, <header>, <footer> and <nav> are very useful for screen reader users, and entirely transparent to those who don’t use assistive technology. So use them.
  • <article> isn’t just for blog posts — it’s for any self-contained thing. It also helps WatchOS display your content properly.

• How A Screen Reader User Accesses The Web: A Smashing Video — Smashing Magazine

• Bruce Lawson’s personal site : The practical value of semantic HTML

  • Microdata - HTML: HyperText Markup Language | MDN

• There Is No Document Outline Algorithm — Adrian Roselli

Tools & demos #

• The ARIA Role Conformance Matrices
• javascript - How to trigger the :active pseudoclass on keyboard ’enter’ press? (using only CSS) - Stack Overflow (TLDR: you cannot.)

JavaScript #

Readings #

• The CSS attr() function got nothin’ on custom properties | CSS-Tricks - CSS-Tricks

• Building a fully-accessible help tooltip (…is harder than I thought.) – Sara Soueidan, inclusive design engineer

Tools & demos #

• PaulJAdam’s Modern Web Accessibility Demos