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. Moving focus in iOS, issue with onload
  21. Accordion Form Auto Collapse
  22. Variations of nesting aria-activedescendant used with role="grid"
  23. Active Descendant in a grid
  24. Menu Item Repetition Issue
  25. Floating Header Minimize with Button
  26. Floating Header Scroll Active
  27. Floating Header Minimize with Key
  28. role="application" and grid cell with button
  29. Variations of nesting aria-activedescendant used with role="grid"
  30. Indeterminate Checkbox
  31. If you are going to use position:fixed, use it for the whole layout
  32. Floating Button with Bottom Spacer
  33. inline error messages using aria-labelledby and error summary using role="alert"
  34. inline error messages using aria-describedby with role='tooltip" and role="alert" for error summary
  35. all errors implemented with role=alert
  36. Dynamic Errors
  37. Inline Errors with Beep
  38. Onload - Adding Static Live Region using aria-live="polite"
  39. Onload - Adding Static Live Region using aria-live="assertive"
  40. Font Weight examples
  41. Beep when character limit is reached
  42. Skip Link
  43. A bad and overly complicated accordion example but with a neat code view
  44. Stroke can be used to make text more visible
  45. Screen reader cursor trapped by keyup event handler on input field?
  46. AccDC - Accelerated Dynamic Content - modal
  47. AccDC - Accelerated Dynamic Content - calendar
  48. IE11 and Chrome move focus to the body if the CSS display property of the the currently focused element is set to 'none'.
  49. iOS VoiceOver does not follow focus if it not set to text
  50. Live region using aria-relevant="text additions"
  51. Live region using aria-relevant="all"
  52. Live Region populated dynamically verses adding the entire live region dynamically
  53. Use of a hidden input field to inform assistive technologies of changes in content
  54. Image Map Focus Order Testing
  55. Accessible list with hidden bullets
  56. aria-label vs. inner text when used on a heading
  57. Complex table using headers attribute
  58. Label moved on focus
  59. Select Element with Custom Inline Arrow
  60. Fieldsets
  61. Fixed position layout
  62. Angular - Focus management when router links are at the bottom of the page
  63. Placeholder Attribute
  64. What element from the previous page has focus after the back button?
  65. Focus after session dialog is closed
  66. Picture Frame(not assessible, a closure example)
  67. Picture Frame with a Next button(not assessible, a closure example)
  68. Angular - moving focus to the top element after routing
  69. Programmatic Focus Movement
  70. A11y Meetup Talk 12/12/18
  71. Button with SVG inside
  72. Basic Button Test
  73. Hidden button doesn't work in iOS
  74. Empty button with aria-label