Some quick reminders about Accessibility
- 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?
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.
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 |
- W3C Roles
- Aria-Roles
- http://www.brucelawson.co.uk/ : a very accessible site (look at the source).
- Using WAI-ARIA Landmarks
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!
They VO key is actually 2 keys; ctr + alt.
For all shortcut keys, go to []Apple's complete Mac accessibility shortcuts](https://www.apple.com/voiceover/info/guide/_1131.html) page.
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 |
| 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 |
| 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](http://www.apple.com/accessibility/voiceover/downloads.html).
Here is a list of resources that provide extra context and guidelines