Patterns - AutoSponge/dev-notes GitHub Wiki

• split button

On the topic of pattern collections and accessibility testing.

• smashing collection of articles
• component gallery
• open UI
• weboverhauls
• deque examples
• apollo
• yale accessibility
• nutrition cards
• styled form controls
• BEM Cheat Sheet
• state and property changes
• a11y 101
• w3c tutorials
• accessible components
• lion ING white label web components

• aria widget screen reader testing checklist

• cookie consent accessibility

• infographics guide (deque)
• csun resources

• designing a more accessible map (UK)

• chartability accessibility guide for data visualizations
• chartcss visualizations backed by tables
• list of accessibility resources for data viz
• textures.js
• sonification (hicharts)
• design considerations
• charts
• colors for charts
• fizz accessible data visualizations (prototype code)
• accessible charts with aria Doug Shepers (link to video)
• visualizations
• data grid
• elastic UI data grid react component library
• grids adrian
• grid sarah
  • demo
• accessible patterns
• vertical bar graph
• ibm sterling (d3)
• svg accessibility

For each focusable or interactive SVG element, add a tabindex attribute, a role attribute, and an accessible name (via an aria-label attribute or a <title> element).

• more accessible skeletons

• adrian

• input masking
• mobile inputs
• enter key hint
• GEL (BBC) form input advice

• bbc stars
• radio button stars

• role=comment aria-details

• tests

• w3c tutorial

• accessible maps

• w3c aria role=log
• chat bot

• match-sorter good filter-sort

• w3c tutorial
• slick (needs some tweaks and tests)

• stop using drop-down

• gov.uk research

• the problem with snackbars

• a11y tooltips from scott o'hara
• tooltips and toggletips

• nngroup research
• dragon-drop

• sortable table headers
• react-sortable demo from heydon
• accessible data tables
• datatables.net
• w3c tutorial
• Fixed Table Headers
• Tables
• Unique Labeling Fields
• CSS Display Properties
• Responsive
• Ok to use tables
• With Screen readers and
• table with expanding details

• breakout button
• inaccessible cards
• block links are bad
• block links, cards

• gatsby improvement
• gatsby research
• aria-activedescendant research
• react lib

• example

1. — Can we avoid a hamburger icon and show navigation as is?
2. — If not, what icon do we choose to indicate navigation?
3. — Is the icon + padding large enough for comfortable tapping?
4. — Will the icon be at top right, bottom right or floating?
5. — Can we push the icon down by placing logo on the top?
6. — What happens when the user clicks/taps on the icon?
7. — Will nav items appear as full page/partial overlay or slide-in?
8. — If we use slide-in, do they appear above or below the header?
9. — How will the icon change on tap or on click?
10. — Will we have some sort of animation or transition on click?
11. — What happens when the user opens both search and hamburger?
12. — Do we expose critical navigation by default on desktop/mobile?
13. — Can users tap on the same spot to open/close navigation?

• micro modal {validate}

• aria-live research
• toast
• toast to toasts
• output

• stateful buttons
• switch / toggle-button
• state-switch buttons

• memorable dates (GOV.UK
• ibm vue
• universal interfaces video
• wai-aria
• whatsock
• gov.uk
• localization
• https://www.hassellinclusion.com/blog/collecting-dates-accessible/
• https://adrianroselli.com/2019/07/maybe-you-dont-need-a-date-picker.html

• accordion icons

• aria-tabs alt