Butter Pep

Examples of stuff, mostly for accessibility fiddling.

• Static SVG Accessibility Test Battery
• How to make SVG report as graphic/image and have an alternative text description
• Inline error examples
• Toggle buttons
• Flow content in links and buttons
• Inputs with multiple labels and descriptions
• What happens when you point labelledby and describedby at nothing?
• All HTML input types
• ARIA labels on links and text
• Testing programmatic focus
• Decorative image techniques
• Tables with hidden first row
• ARIA Live Region Playground
• ARIA headings test
• Making HRs Non-Interactive (Don't Use Presentation, Use ARIA-Hidden
• How Big a Block Will Read On Tab?
• Pseudo accordions and some other accordions, these geared toward intentionally trying to confuse/lose screen reader focus.
• Currency input fields implementations
• Accessible slider
• Grid filter widget
• Table ARIA sort property test
• Partially busy page loading experiments
• Event playground
• Basic tooltip
• Links and accessible text stuffing techniques
• Landmarks test page
• Examples of using table semantics
• Button that enables/disables dynamically
• Buttons nested in headings with tabbability experiments
• Labels and form elements nested within tables, for testing
• Faking a readonly input
• A sticky footer using absolute positioning Has no scripting, so it will be unreliably sized....
• Example page to test using aria-live for validation messages
• A more concise, real-world form validation pattern
• Using ARIA current
• When does a placeholder get announced by a screen reader?
• Attempts to provide an accessible name to a table header
• Example of listboxes and lists, with some hidden Use for evaluating whether or not screen readers are accurately reporting the number of items in a list.
• Dynamic updating checkbox Do screen readers report state changes on checkboxes when those changes are initiated programmatically, that is, not by clicking the checkbox itself?
• Do aria-selected and/or aria-current report in a listbox with options Initial testing shows only aria-current decently supported.
• Clickable tiles example. Three approaches with one a standout in terms of a11y.
• A couple of progress bar implementations
• Can you use aria-label on basically everything in a HTML select?
• Just a label with a link in it
• Examples of focusable alert thingies for screen reader reading testing
• Page for testing how screen readers read images marked as decorative
• One-off page for testing scrollable areas and scalable text
• Page for testing AT behavior with aria-flowto
• Page for testing description list semantics
• Page for testing to see if super small tables get read by AT
• Page for testing range of landmark regions
• Page for empty headings
• Experiment with expanding custom text region/input
• Manipulating and determining the cursor position within an input
• Basic dialog examples for testing
• Examples of HTML selects, disabled and not, some with optgroups
• Examples of progress bars and meters
• Stress test for the WICG inert polyfill
• Table with hidden rows for styling purposes
• Tests of techiques for non-modal popup boundaries reporting
• Tests of hidden and non-hidden clickable boxes, to see what can an cannot be clicked when a screen reader is on
• Reporting of menu/menuitem and listbox/option reporting
• Ways to make a link disabled
• Modified testing of axe Label in Name rule
• Text truncation tests
• Inline semantics tests
• Responsive tables example, which is actually just a bunch of styled divs and ARIA roles for semantics
• Click events attached to various elements, examining how or not screen readers report click events on clickable items.
• Demonstrations of the WCAG 2.3.1 Three Flashes and Below Threshold thresholds
• Exploring hover, focus, and active and the really bad G183 Sufficient Technique
• Implementations of a number of menu-button pattern select widgets, along with documentation of the results of screen reader testing
• Some radio button and checkbox groups as a place to test when or whether screen readers report the cardinality of such control groupings
• Exercising CSS and JavaScript API orientation techniques, in particular in order to determine when/if it is safe to validate 1.3.4 Orientation via desktop browser DevTools device emulation, rather than testing directly on a physical mobile device