AWS Design System: Cloudscape

Amazon Web Services’ design system is called Cloudscape. Products within Amazon web services are designed using Cloudscape to expedite design and implementation and ensure consistency across products.

Cloudscape Accessible Names

Preview of Cloudscape UI

Define Why

To meet accessibility standards, accessible names are used 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. If no accessible name is given for the screen reader to announce, this can result in the user not being able to move forward in completing a task or confusion in what they should or could do next for a given task. For example, if there is a table displayed on the screen where a row can be single selected using a radio, the screen reader would need to announce the following in an intuitive order during the screen reading:

  1. The title of the page.

  2. The title of the table.

  3. That the row can be selected and an identifier for that row.

  4. Other column information for that row.

Example of AWS table where the screen reader must read the content of this page in an intuitive order and acknowledge UI that is interactive.

In 2023, I worked to ensure that the products for SageMaker GroundTruth were accessible (see AWS Accessibility for more information). During this process, I identified an opportunity to reduce the amount of time it took for AWS internal operations to deliver accessible names and to create a more consistent experience by embedding accessible names into Cloudscape deliverables.

MY ROLE
Project Management

I uncovered the opportunity, identified and organized the team, helped define the solution and ensured there was a path to green for final implementation.

KEY METRICS

Across all components, there are ~200 static strings. Across 12 locales and 200 service teams, assuming a conservative average of 50% of components used in any one service, this results in ~240k internationalized string instances that need to be created and maintained individually (compared to 2.4k if maintained by Cloudscape). By providing central internationalized components, the effort required by AWS teams to create and maintain internationalized string instances is reduced by 42%.

Research

To understand the validity and urgency of my idea, I leveraged the accessibility Slack channel to expose and circulate my idea with the broader AWS team. Through this, it became evident that the Accessibility and Cloudscape team both thought the idea aligned to their 2023 goals but no one was actively working on it. Furthermore, the idea and design proposal began to be circulated in Slack by others in hope that the idea was being investigated or invested in.

Screenshot of proposal sent and circulated in AWS accessibility Slack channel.

Ideation

I identified a team through the accessibility Slack channel including a Cloudscape engineering lead and accessibility specialist. I created recurring meetings to help organize communication for this work and ensure progress was being made. For the first meeting, I created a document with a proposed solution that the team and I revised based on their domain knowledge. The team and I acknowledged that there were two types of deliverables depending on how the UI surfaced within a given product:

  • Contextual deliverables: Cloudscape UI in which we can determine the context or environment it lives in which allows us to provide meaningful embedded accessible names.

  • Non-contextual deliverables: Cloudscape UI that we cannot determine the context or environment it lives in and cannot embed with accessible names. Therefore, we will provide documentation within the internal Cloudscape library as a source of truth for the sentence structure and best practices to ensure higher consistency across AWS products.

The benefit was larger for contextual deliverables and therefore the team prioritized this work first.

The Cloudscape team worked with accessibility specialist on their staff to provide the correct accessible text strings and embed them into existing contextual components.

Test and Iterate

The Cloudscape team organized a beta launch for 8 contextual deliverables where 5 teams opted into the beta program for early access to these UI deliverables. The Cloudscape team leveraged this beta program to gather feedback on the implementation. I was able to convince my team, SageMaker GroundTruth, to participate in the beta launch program.

Implement

The final launch was scheduled to deliver one month after the beta launch to be easily available for all of Amazon Web Services. I was no longer at Amazon for the final launch of this work but have been told by a former colleague that it did launch successfully.