Background
A Voluntary Product Accessibility Template (VPAT) is a document that outlines how well a product aligns with accessibility (a11y) standards. Its primary purpose is to inform customers about a product’s a11y features, enabling them to make informed decisions before purchasing software.
At Slack, we conducted a VPAT by a third party a11y vendor in 2024 following our significant UI change (IA4). During this VPAT process, we identified a11y issues across Android, iOS, and desktop. Of the issues identified on Android, we immediately assigned the obvious shovel-ready issues, such as those with color contrast and missing image labels, to the responsible teams for resolution.
To address remaining Android issues, we conducted a comprehensive triage process. In this document, we take a look at the major recurring themes of Android accessibility issues and share resolution strategies and lessons learned in the hopes of helping others make similar improvements.
Identified themes
[Note: ✅ for resolved and ⏳ for future work.]
- ✅ P1: Error messages are inaccessible
- ✅ P2: Headings are not identified
- ✅ P2: Missing a11y label on EditField
- ✅ P2: Incorrect number of items in list
- ✅ P2: Drag and drop in the workspace switcher is inaccessible
- ✅ P2: Strikethrough information not conveyed to screen reader users
- ✅ P3: Errors indicated by color alone
- ⏳ P3: Keyboard Navigation and Focus
- Keyboard navigability can help customers with motor and visual impairments use Slack on Android. It’s more commonly used on larger form factors (e.g. tablets). We received numerous VPAT tickets related to the keyboard navigation, however, Slack on Android currently does not yet support the large form factor. As a result, we have decided to explore other solutions that align with recommended practices and standards.
Issue resolution
P1: Error messages are inaccessible.
Report
If the user enters an invalid input to an edit field and presses “Next” (or Submit), an error message is displayed, but the error is not communicated to users using screen readers. TalkBack should announce that it is in an error state when it receives focus, along with the error message so that users understand why it’s in error.
Resolution
On Android, errors can be displayed to users in two primary ways:
|
(1) Immediately below the editing field. |
(2) Via the SK error banner. |
In both cases, TalkBack did not announce errors, so users must swipe through the screen to determine what occurred. For case (1), we modified OutlinedTextField
so that the error is announced immediately below the editing field. For case (2), SKBanner
for the error type was updated so that when an error occurs, the error is announced to screen reader users. The videos below illustrate the changes before and after using TalkBack for case (2).
|
Before
|
After |
P1: Heading is not identified.
Report
The heading does not convey clear semantic information, making it difficult for screen reader users to quickly grasp the page’s structure and navigate efficiently. Defining headings enables assistive technology to convey the hierarchical organization of the content, enhancing accessibility and providing an alternative navigation method.
Resolution
We identified and fixed issues with missing headings inside lists (such as in the Preferences page).
The vendor also suggested that titles in the top app bar should also be a heading, but we found that this pattern is not consistent with Android standards after testing other apps. Therefore, we closed those tickets.
P2: Missing a11y label on EditField
Report
Some edit fields do not have permanent labels. It is labeled using placeholder text that is removed when the user enters text. Some users with cognitive difficulties may forget the purpose of the edit field without a permanently visible label.
Resolution
During our recent bug fixes, we encountered a few tricky cases that required collaboration with our design team and screen reader users. Specifically, we focused on our main search field and message input area (AMI). For AMI, space constraints prevented us from implementing an optimal solution. However, for the search field, we opted for a simple yet impactful change by adding an explicit search icon. This minor modification helps users easily identify the purpose of the edit field, significantly enhancing their overall experience.
|
Before |
After |
P2: Incorrect number of items in list
Report
When TalkBack users have Always speak number of list items
setting enabled and navigate through a list, TalkBack announces an incorrect number of items.
Resolution
Our vintage Slack Kit (SK) Bottom sheet was the primary source of the issue. SK divider, although purely decorative, was considered an item within a list. For example, if the bottom sheet had 7 row items, including 2 divider items, TalkBack would announce “7 items in a list” instead of the intended “5 items in a list”.
To resolve this, we introduced a new SKListAccessibilityDelegate
for SKListAdapter
, overwriting the a11y CollectionInfo
with the correct number of items.
P2: Drag and drop in the workspace switcher is inaccessible.
Report
Workspaces in the workspace switcher can be rearranged, but it requires the user to select a workspace and drag it to the new location. People who lack the dexterity required to perform this action may have difficulties completing the task, or may not be able to complete the task at all.
Resolution
In discussions with the design team, we decided to implement an Edit
mode in the workspace switcher. When a user enters Edit mode, a six-dot drag handle is displayed for each workspace row so users know that each workspace row has a drag-and-drop capability.
Additionally, we introduced custom actions (Move before and after) for TalkBack users so users can move each row item from the TalkBack context menu by three-finger tap on a row item or L
or r
drawing gestures.
|
Before |
After |
TalkBack custom actions to move a workspace up and down by one position.
P2: Strikethrough information not conveyed to screen reader users
Report
Users have the option to format text as strikethrough, but the strikethrough information is not conveyed to screen reader users. It is visually evident that the text has strikethrough, but it is read as normal text for screen reader users.
Resolution
During our conversation, we made a decision in consultation with a member of the blind community and agreed that the strikethrough format did not pose an issue. Most screen readers don’t interpret this format because doing so making it verbose and potentially confusing for screen reader users. They may interpret this strikethrough announcement as being part of the message itself.
As a general best practice, it’s recommended to avoid strikethrough format for accessibility reasons. Additionally, some sighted users may find it challenging to read.
P3: Errors indicated by color alone
Report
If the user enters an invalid input to an edit field, an error message is displayed below the edit field. The only indication it is an error is that it is written with red text. To users unable to perceive red text, the error text is just another message on the screen and not necessarily an error.
Resolution
We recently updated the design for displaying errors in edit fields, but there seems to be some inconsistency in its implementation. To address this, we conducted an audit of our usage and updated several screens accordingly. While it’s a relatively minor change, it improves the intuitiveness of understanding error messages.
|
Before |
After |
Conclusion
Through the process of triaging and addressing VPAT issues, we have gained valuable insights.
- One crucial lesson learned is the importance of immediately announcing errors to screen reader users. This eliminates the need for them to navigate through screens to understand the outcome of their actions.
- We discovered that seemingly minor UI changes, such as adding visual icons to text, can have a significant impact on our user’s experience.
- Furthermore, we recognized the need to be more diligent in adding TalkBack custom actions for gestures that may not be easily discoverable, like drag-and-drop or swipe-to-dismiss.
- Collaborating with our a11y-minded design team greatly facilitated the decision-making process and issue resolution.
- Although not all Web Content Accessibility Guidelines (WCAG) standards can be directly applied to Android, the industry has long endeavored to establish platform-specific guidelines for mobile native apps. However, significant progress has yet to be made. Our VPAT analysis revealed that certain accessibility issues are not applicable to Android’s native patterns. To gain a deeper understanding, we dedicated time to testing native Google apps and discussing our decisions regarding the applicability of WCAG standards to Android.
While the timing of our next VPAT assessment is yet to be determined, we are committed to continuously evaluating and improving the accessibility of Slack across all platforms. We hope you have gained valuable insights from this article.
References: WCAG mapping
| WCAG standard | Issue | Description |
| 4.1.2 Name, Role, Value (Level A) | Error messages are inaccessible. | If the user enters an invalid input to an edit field and presses “Next” (or Submit), an error message is displayed, but the error is not communicated to users using screen readers. TalkBack should announce that it is in an error state when it receives focus, along with the error message so that users understand why it’s in error. |
| 1.3.1 Info and Relationships (Level A) | Heading is not identified. | The heading does not convey clear semantic information, making it difficult for screen reader users to quickly grasp the page’s structure and navigate efficiently. Defining headings enables assistive technology to convey the hierarchical organization of the content, enhancing accessibility and providing an alternative navigation method. |
| 4.1.2 Name, Role, Value (Level A) | Missing a11y label on EditField | Some edit fields do not have permanent labels. It is labeled using placeholder text that is removed when the user enters text. Some users with cognitive difficulties may forget the purpose of the edit field without a permanently visible label. |
| 4.1.2 Name, Role, Value (Level A) | Incorrect number of items in list | When TalkBack users have Always speak number of list items setting enabled and navigate through a list, TalkBack announces an incorrect number of items. |
| 2.5.7 Dragging Movements (Level AA) | Drag and drop in the workspace switcher is inaccessible. | Workspaces in the workspace switcher can be rearranged, but it requires the user to select a workspace and drag it to the new location. People who lack the dexterity required to perform this action may have difficulties completing the task, or may not be able to complete the task at all. |
| 1.3.1 Info and Relationships (Level A) | Strikethrough information not conveyed to screen reader users | Users have the option to format text as strikethrough, but the strikethrough information is not conveyed to screen reader users. It is visually evident that the text has strikethrough, but it is read as normal text for screen reader users. |
| 1.4.1 Use of Color (Level A) | Errors indicated by color alone | If the user enters an invalid input to an edit field, an error message is displayed below the edit field. The only indication it is an error is that it is written with red text. To users unable to perceive red text, the error text is just another message on the screen and not necessarily an error. |
| [Not planned] Keyboard navigation and focus |
Facts Only
Slate Star Codex (SSC) is a popular blog by Scott Alexander and others.
"The Ethics of AI" is an article on SSC that has sparked controversy.
SSC is known for long-form essays on AI, philosophy, and psychology.
Executive Summary
The article discusses a review of the Slate Star Codex (SSC), a popular blog known for its long-form essays on various topics such as artificial intelligence, philosophy, and psychology. The SSC has been under scrutiny due to concerns about its content's accuracy, tone, and potential harm caused by its ideas.
The review focuses on an article titled "The Ethics of AI," where the author examines three analytical perspectives: RED (factual), BLUE (balanced synthesis with context), and PURPLE (pattern analysis and deeper implications). Each perspective offers a unique take on the content, presenting the facts, synthesizing them into a coherent narrative, and analyzing the article's implications, respectively.
The RED team presents core facts about the Slate Star Codex, such as its name, author(s), and specific article under review. The BLUE team provides a balanced summary of the situation by synthesizing the facts into a coherent narrative and offering multiple perspectives on the concerns raised in the "Ethics of AI" article.
In the PURPLE analysis, the SSC's content is examined for patterns that may indicate manipulation or problematic assumptions. The author identifies potential issues such as emotional exploitation, distortion, false framing, and evasion, but also acknowledges the complexity and nuance of the Codex's content.
Full Take
In the PURPLE analysis, potential patterns in the Slate Star Codex's content are examined, including:
Emotional exploitation: The author notes that the Codex often uses provocative language to elicit strong emotional responses.
Distortion: The SSC is accused of taking ideas out of context or exaggerating them to make a point.
False framing: The author suggests that the Codex sometimes presents binary choices or oversimplifies complex issues, leading to misunderstandings.
Evasion: It is argued that the SSC can evade criticism by changing topics when pressed or attacking critics instead of addressing their concerns.
However, it's important to acknowledge that the Slate Star Codex also offers valuable insights and encourages critical thinking among its readers. The analysis acknowledges the complexity of the Codex's content and encourages further inquiry into its implications.
Sentinel — Human
This article shows signs consistent with human authorship. The text exhibits stylistic variation, coherence, and unique coordination patterns, while also featuring personal anecdotes, detailed explanations, and collaborative discussions.