Accessibility

Communication

To clearly communicate this work to key stakeholders I:

• Escalated this work to head of product and engineering in December as roadmap and priority discussions were happening to ensure that this work was accounted for and did not slip. This was necessary to due a churn in leadership (new head of product) and the tight deadline with zero progress being made.

• Created a Slack channel and a recurring series of meetings to organize and align the team to ensure we were actively driving towards this goal and could resolve any issues as they came up.

• Created a JIRA dashboard to track and communicate burn down of accessibility issues to team and leadership.

Organization

To clearly organize this work, I created a spreadsheet with all 422 issues that I groomed with the engineering manager weekly. Through the grooming process, the engineering manager and I were able to identify which tickets could be worked on immediately, which needed design support, and got a sense of how much work this would take engineering. This helped us advocate for a team of 6 front-end engineers that were assigned in early 2023.

I also added all 422 issues into JIRA to easily assign and track engineering progress and burn down.

ACCESSIBLE NAMES

Accessible names are used in accessible products for screen readers to announce important elements within the UI. This is useful if the user is visually impaired and needs the support of sound to navigate a website or product. The issues identified in the audit were cases where no accessible name was given for the screen reader to announce which could result in the user not being able to move forward in completing a task or confusion in what they should or could do next in a given task.

I wanted to make it as seamless as possible for engineering to resolve accessible name issues and, therefore, the design deliverables I made highlighted where in the UI the issue was and what the text revision was to solve it. Then, I worked with my tech writer and her editor to QA within Figma to ensure high quality solutions and seamless collaboration. Finally, I took screenshots of the artboards and uploaded them to the corresponding JIRA tickets for swift resolution from engineering.

KEYBOARDING

For products to be accessible, a user should be able to do everything on a keyboard without the use of a mouse in the case the user has limited mobility. The issues identified in the audit were cases where the user needed to rely on the use of their mouse to complete a task. Some issues were simply that when tabbing through a web page, a link was not given the proper focus state for which I provided contextual design deliverables. (See example to the right)

One of the more interesting keyboarding issues was for the annotation tools i.e. annotating the image of a bird with a bounding box. For this, I proposed a solution for adding, moving and editing a bounding box (see proposed solution below). My hope was to create a prototype of this solution and test it internally and externally with users to revise and create a solid solution. My hypothesis was that if the team and I could create a seamless solution for this, it could expedite data labeling for the annotator and reduce time on task which were some of the organization’s key performance indicators for these tools.

COLOR CONTRAST

There are over 300 million people with color blindness and this has a major effect on the usability of products because it can be hard to determine the contrast or difference between two items based on color. I provided contextual design deliverables and the corresponding design token to resolve these issues. Design tokens were used to systematically update UI elements across AWS products (as opposed to color or HEX values).