A11y TL;DR

  • A11y also helps SEO
  • Good A11y starts with good semantic markup
  • Don't forget to use the keyboard's tab key and VoiceOver's Rotor to check the site
  • Use JavaScript together with ARIA when markup isn't enough
  • #A11y checklist
    • Is the heading hierarchy correct?
    • Do links make sense and are easy to differentiate?
    • Do all the important HTML Landmarks exist?
    • Does using the tab key highlight items in a logical order?
    • Are controls be reachable and actionable by keyboard?

A11y Intro

Making sites accessible is an important way to help those who may have difficulties otherwise using websites, and as a side affect, a way of potentially improving SEO.

A simple example is the header tags. Header tags help users by understanding what type of content is coming next. By looking at these headers users can decide to skip that section or pay more attention to it. This is true for visual and non-visual users. Headers also help search engines understand the importance of certain text and the meaning of pages.

The H1 tag is the most important heading because it’s the highest level tag that shows what your specific page is about. Search engines generally give this tag more weight over other headings, so it usually improves your search engine ranking when you use it correctly and in conjunction with other onsite SEO techniques.

verticalmeasures.com

VoiceOver

VoiceOver is already available on devices made by Apple (Mac laptop and desktops as well as iPhones) and can be a very handy way to quickly check web pages.

You just need to turn it on (cmd + F5) and learn the shortcuts!

Shortcut Keys

They VO key is actually 2 keys; ctr + alt.

For all shortcut keys, go to Apple's complete Mac accessibility shortcuts page

Navigation

Using the Rotor is highly recommended and a great place to start.

VO + U
Rotor: a visual representation of the page hierarchy.
tab
Next link or form control 
VO + command + H
Next heading
VO + command + L
Next link
VO + command + J
Next form control
VO + command + T
Next table
VO + command + X
Next list
VO + command + G
Next graphic
VO + space
Activate a link or form control

Reading

VO + A
Start reading
control
Stop Reading
VO + → / ←
Read next / previous item
VO + P
Read paragraph
VO + S
Read sentence
VO + W
Read word (press W multiple times to spell words alphabetically and phonetically)
VO + B
Read from top to current location
VO + Home
Jump to top of page (on laptop keyboards, fn + ← is Home)
VO + End
Jump to bottom of page (on laptop keyboards, fn + → is End)
VO + command + ← / →
Select speech setting option (speaking rate, voice, pitch, etc.).
VO + command + ↑ / ↓
Modify the selected speech setting

Other useful shortcut keys

shift + VO + I
Read webpage statistics - get an overview of the web page contents
shift + VO + ?
Online help
VO + F8
VoiceOver Utility - change VoiceOver settings and customizations

Many other navigation shortcuts are available in the VoiceOver Commands Chart.

Landmarks

Landmarks are a quick and easy way to mark out sections of page content and inform the browser / screen-reader what the purpose of that section is.

<main role="main">
The main content of a document.
This marks the content that is directly related to or expands upon the central topic of the document.
This content should be unique to the document and exclude any content repeated content e..g sidebars, navigation links, copyright information, site logos.
Note: There should be no more than one element with the main role.
Mozilla's Main definition 
<header role="banner">
A region that contains the prime heading or internal title of a page.
Most of the content of a banner is site-oriented, rather than being page-specific.
For Example, logo, the main heading for the page, and site-specific search tool.
Note: There should be no more than one element with the banner role.
HTML5 Doctor's Header Explanation 
<nav role="navigation">
A collection of major navigational elements (usually links) for navigating the document or related documents.
Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, footers often have a list of links, but the footer element is more appropriate and no nav element is necessary.
HTML5 Doctor's Nav Page 
<aside role="complimentary">
A supporting section of the document that remains meaningful even when separated from the main content.
The content should be relevant to the main content; if it is completely separable, a more general role should be used instead.
For example, in the case of a portal, this may include show times, current weather, related articles, or stocks to watch.
HTML5 Doctor's Explanation 
<article role=”article”>
A self-contained composition in a document which is can be independently distributable or reusable.
This could be a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content. Each article should be identified, typically by including a heading as a child.
Mozilla's Article definition 
<form role="form">
A collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
The form element can be missed due to developers submitting with JS. Don't forget to add a submit button and for all the elements to be wrapped in a form tag!
W3C's Form definition 
<footer role="contentinfo">
Metadata that applies to the parent document.
For example, footnotes, copyrights, and links to privacy statements would belong here.
Note: There should be no more than one element with the contentinfo role.
HTML5 Doctor's Footer Explanation 
role="search"
The search tool of a web document.
This is typically a form used to submit search requests about the site or to a more general Internet search service.
W3C's Search definition

More on landmarks

Further Reading

Here is a list of resources that provide extra context and guidelines