Rob Porter: How you can become an Accessibility Superhero

Helpful hints:

• Use headings.
• Do not use "Read more" or "Click here". It will just get said over and over again by screen readers. Append the title to "read more" and throw it off the canvas with css so it is not in the way.
• Use big targets for touch devices.
• Use closed captioning on videos.
• Do not flash people, watch out for people with epilepsy.
• No tables, unless it is really tabular data.
• In the viewport tag, do not have a maximum-scale: let people zoom in so they can read it.

Forms:

• Every single field needs a label. I mean it! Just use a for and an id that match. If you click on the label and the field is selected, then you have got it right. You can move labels out of the way with CSS if you want, they will still be read by screen readers.
• Put special instructions in the label, like how you want the date formatted. Put helptext inside the label. Put errors in there too.
• What about placeholders? They do not work consistently in screen readers. You enter the input field and the placeholder is gone, so it never gets read.
• Do not say "required," but "name is required," much clearer.
• Use form validation alerts and go to the input that is invalid.
• Forms need a fieldset and label.
• Use type="tel" when you need to input a telephone number. Use those new types.

Modal windows:

• Check that Escape can close it.
• Have more than just X as label for the close button.
• Get back to where you were on the page after closing.
• Make sure users can tab around only on the modal.

Testing: browser tools.

• AXE: http://www.deque.com/products/axe/ is at least partically open sourced recently.
• Firefox has the Fireeyes plugin. Integrates with Firebug. Does a pretty good job of warning you about accessibility problems.
• Bookmarklet HTML_codesniffer.
• Colour Contrast Analyser for picking color and background-color.
• Color Blindness Simulator.

Testing: screen readers. Use the best combinations.

• JAWS, costs about a thousand dollars. Use with IE
• NVDA for Firefox
• Voice Over, Mac only, use for Safari.
• Talkback, on Android.

Checklist: http://pauljadam.com/wcag20checklist.html

WAI-ARIA: web accessibility initiative, accessible rich internet interfaces. HTML 5 makes a good bit of this redundant.

You really, really need to test. Make some friends that have these issues.

Plone 5: the editing interface needs some love. Everything else looks great.

Can you get automated reporting? At least the contrast checker can be run in Firefox in CI, in robotframework. We have permission from the author to do that.