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