accessibility-demos

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 lang attributes.
• MS High Contrast Media Query Test. A test page for various ways to use the -ms-high-contrast media 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.

This site is open source. Improve this page.