Skills used:
Design, user research, accessibility research and technologies (screenreader, DOM traversal, keyboard navigation, etc.).
Key problems:
Low-contrast hover states, ill defined/low-contrast or non-existent focus (keyboard navigation) states, no alternative text/aria/semantic labelling for screenreader use and keyboard navigation, low-prioritization of accessibility. Keyboard navigation issues were common due to dynamic/javascript based components, as well as unlabelled elements.
Goal: Improve accessibility in web product, meet minimum accessibility standards. A user with accessibility needs should be able to use our product and access all key functions on any platform.
Process/Solutions:
0) Pitch importance of accessibility to leadership (legal, engineering, design, etc.). Understand historical and current blockers to accessibility work. Start to create accessibility roadmap.
1) Collect information about current accessibility issues through user Interviews with users with disabilities and other accessibility needs, feedback received by support, and reviews from other sources (employees, families, friends, online reviews). Document common user flows, compare users with accessibility needs to non-disabled users.
2) Audit accessibility using screenreaders and keyboard navigation. Troubleshoot and try to reproduce common problems.
3) Present audits and collaborate with engineers to identify key problems and prioritize accessibility goals. (in this case, making sure everything was properly labelled and had consistently designed focus states, as well as having a functional keyboard navigation experience was priority 1!)
3.1: Areas of focus:
-Created consistent, clear, and high-contrast focus states, label all buttons, add semantic markup, alt text, a skip navigation button, and an easy to navigate keyboard user flow for a complex web streaming platform.
-Created additional accessibility features as needed to ensure smooth keyboard navigation experience (e.g. added loading tile to tile rows so that keyboard user was not moved out automatically and that the screenreader had something to read; had the added benefit of visually signaling to sighted users that more content was being loaded)
-Stylistically integrate web player focus with TV.
-Created consistent, clear, and high-contrast focus states, label all buttons, add semantic markup, alt text, a skip navigation button, and an easy to navigate keyboard user flow for a complex web streaming platform.
-Created additional accessibility features as needed to ensure smooth keyboard navigation experience (e.g. added loading tile to tile rows so that keyboard user was not moved out automatically and that the screenreader had something to read; had the added benefit of visually signaling to sighted users that more content was being loaded)
-Stylistically integrate web player focus with TV.
4) Work out new user flows optimized for keyboard navigation. Create sketches based off of accessibility research and WCAG Guidelines. Present and collaborate with engineering team to implement.
Focus states for all clickable items on web player.
Skip Navigation Header
Loading tiles - created to announce the loading state to screenreaders, and so a user could have a tile to land on instead of getting kicked out to the next row.
