Home

A11Y Examples, Bug Fixes and Experiments

  1. ARIA Progress Bar
  2. Inline Image Sprite
  3. Color Contrast Examples
  4. SELECT element VS. SELECT element with a facade
  5. aria-invalid demo page
  6. Tooltip on a button
  7. Tooltip on a link
  8. Listbox
  9. aria-required Demo Page
  10. Listbox composed of list items containing BUTTON elements
  11. role="presentation" and role="none" used on links
  12. Table with Spacer Cells
  13. Table with embedded button to show more rows
  14. Rollover
  15. Listbox with Checkboxes
  16. Links versus Buttons
  17. Focus Outline
  18. Responsive Data Table - a good example of table linearization
  19. Responsive Data Table - another good example of table linearization
  20. Accordion Form Auto Collapse
  21. Variations of nesting aria-activedescendant used with role="grid"
  22. Active Descendant in a grid
  23. Menu Item Repetition Issue
  24. Floating Header Minimize with Button
  25. Floating Header Scroll Active
  26. Floating Header Minimize with Key
  27. role="application" and grid cell with button
  28. Variations of nesting aria-activedescendant used with role="grid"
  29. Indeterminate Checkbox
  30. If you are going to use position:fixed, use it for the whole layout
  31. Floating Button with Bottom Spacer
  32. inline error messages using aria-labelledby and error summary using role="alert"
  33. inline error messages using aria-describedby with role='tooltip" and role="alert" for error summary
  34. all errors implemented with role=alert
  35. Inline Errors with Beep
  36. Onload - Adding Static Live Region using aria-live="polite"
  37. Onload - Adding Static Live Region using aria-live="assertive"
  38. Font Weight examples
  39. Beep when character limit is reached
  40. Skip Link
  41. Stroke can be used to make text more visible
  42. iOS VoiceOver does not follow focus if it not set to text
  43. Live region using aria-relevant="text additions"
  44. Live region using aria-relevant="all"
  45. Live Region populated dynamically verses adding the entire live region dynamically
  46. Use of a hidden input field to inform assistive technologies of changes in content
  47. Image Map Focus Order Testing
  48. Accessible list with hidden bullets
  49. aria-label vs. inner text when used on a heading
  50. Complex table using headers attribute
  51. Label moved on focus
  52. Fixed position layout
  53. Angular - Focus management when router links are at the bottom of the page
  54. Placeholder Attribute
  55. What element from the previous page has focus after the back button?
  56. Focus after session dialog is closed
  57. Picture Frame(not assessible, a closure example)
  58. Picture Frame with a Next button(not assessible, a closure example)
  59. Angular - moving focus to the top element after routing
  60. Programmatic Focus Movement
  61. Button with SVG inside
  62. Basic Button Test
  63. Hidden button doesn't work in iOS
  64. Empty button with aria-label
  65. ARIA Switch Role