fuzzbomb.github.io/accessibility-demos
A collection of web accessibility demonstrations.
- Number widget demo. Different number widgets.
- Visually Hidden Focus Demo. Various ways to hide buttons with CSS, but they are stil present and operable.
- The button outline focus problem. An demo of crap focus styles.
- Viewport Units Font-size Zoom. A page which uses CSSviewport units for a "cover" page filling the whole viewport. Text is sized using viewport units, which may not be capable of zooming in some browsers.
- HTML5 Autofocus. A form field which uses HTML5 autofocus. Inteded to test whther browsers allow users to disable HTML5 autofocus.
- HMTL5 Date & Time field test Demo of the HTML5 date and time inputs.
- Javascript focus.
A form field which is focussed using Javascript
.focus()on load. - Landmarks regions using explicit ARIA roles and implicit HTML accessibility API mappings. Useful for testing how these are reported in various browser/AT combinations.
- Horizontal Rules with accessible labels. An experiment to see whether assistive technology makes use of title or aria-label attributes on HR elements.
- Language-of-Parts Demonstration using English and Irish.
A simple page in English containing some short passages of Irish, to demonstrate correct use of HTML
langattributes. - MS High Contrast Media Query Test.
A test page for various ways to use the
-ms-high-contrastmedia query. - Scroll events demo. A long page which demonstrates how keypresses can lead to scroll events.
- Duplicate IDs with aria-labelledby A page with two SVG icons, both using aria-labelledby pointing to a nested SVG title. Duplicate IDs mean both image get the same text alternative.