Nested Interactive Elements

There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building these structures with accessibility in mind, and unfortunately, some of them are completely inaccessible.

In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.

Transcript

1. Nested Interactive Elements A Nightmare in Accessibility
2. Cat Johnson
6. role=“list” role=“button” role=“listitem”
9. months later…
12. role=“list” role=“listitem” role=“button”
15. sometime later…
18. role=“list” role=“button” role=“button” role=“listitem”
19. This Photo by Unknown Author is licensed under CC BY-NC-ND
20. This Photo by Unknown Author is licensed under CC BY
21. The Problem Fix screen reader issues listitem or button or ???
23. Nested Interactive Elements
24. <div role ="button"> <a href=foo.bar>Download or click here to learn more</a> </div>
31. But what roles? button listitem menuitem link
33. How to mitigate
34. Limit these patterns
35. Unnest interactive elements <div role ="button"> Submit <a href=foo.bar> Download or click here to learn more </a> </div> <div role ="button"> Submit </div> <a href=foo.bar> Download or click here to learn more </a>
36. Limit developer configurations • Restricting the passing of conflicting properties that would cause interaction issues. • Limit specific role configurations.
37. Limit developer configurations export interface ComponentProps { id: string; name: string; …. role: string; } export interface ComponentProps { id: string, name: string, …. role: “listitem” | “menuitem”; }
38. Preserve context
40. Overlay interactive components .nested { //css } <div role ="button"> Mindfulness… </div> <button class=“nested” href=“….”> Menu </button>
41. Modify roles <div role =“group"> Mindfulness… <button href=“….”> Menu </button> </div>
42. Focus groups
43. Share learning
44. Write documentation
45. Share online
46. Our solution
47. Limit these patterns
48. Unnest interactive elements …was a nightmare
49. Preserve context
50. role=“list” role=“button” role=“button”
51. role=“list” role=“listitem” role=“button”
52. role=“list” role=“button”
53. role=“list” role=“listitem” role=“button”
54. role=“button” role=“button”
55. role=“group” role=“button”
56. Share learning
57. Writing documentation
58. Presenting here
59. Accessible solutions are evolving
60. Want to see more?
61. Follow me at catandthemachines.com
62. Thank you … and Happy Halloween