– How to make your frontend accessible – Frontend Conference Zurich

Demo 1.1: Inaccessible table
- Cells not connected to their headers.
- Caption not connected to table.
Demo 1.2: Accessible table
- th with scope attribute used (H63).
- caption used (H39).

Demo 2.1: Inaccessible form
- label tags omitted or hidden.
- Required fields not properly marked.
- Unnoticed insertion of error message.
- No connection of error messages to invalid fields.
Demo 2.2: Accessible form
- label tags used (H44).
- Required fields indicated with text (H90).
- Error messages inserted into label tags (G83).
- First invalid field focused (SCR18).
Demo 2.3: Form validation using ARIA
- aria-required used to mark required field (ARIA2).
- aria-invalid used to dynamically mark invalid field.
- aria-describedby used to connect error messages to field.
Demo 2.4: HTML5 form validation
- required attribute used to mark required fields.

Demo 3.1: Inaccessible focus handling
- "outline:none" used to remove focus indication. No style changes on focus.
Demo 3.2: Accessible focus handling
- Native focus outline preserved (G165) and :hover styles applied to :focus, too.

Demo 4.1: Inaccessible fake buttons
- Fake buttons used, partly unfocusable and not triggerable using the keyboard.
Demo 4.2: (Partly) accessible buttons
- Fake button supplied with role="button" attribute (in addition to tabindex="0") and keydown listener for enter and space keys (new technique).
- Native button element used.

Feel free to file an issue in case you have a question or improvement suggestion.

Demos