Carbon v11 Accessibility
For Carbon, web accessibility isn’t just about compliance. Even if a component or experience meets an established standard, it could still be problematic for users. On the Carbon team we approach accessibility, not as an end state, but as an ongoing practice. We integrate expert guidance, user research, and state-of-the-art development techniques throughout the lifecycle of a project, from initial ideation to release — doubling back, refactoring, or reconsidering past approaches — as new techniques, research or standards become available.
Building an accessibility practice
Carbon’s accessibility has its foundation in the Web Content Accessibility Guidelines (WCAG) — a constantly evolving document that represents our industry’s current understanding of how to make the web as inclusive as possible. When new problems become apparent, solutions are proposed and either accepted or rejected. Subsequently, the WCAG document is updated with version numbers much like any piece of software. For Carbon to anticipate these changes and implement the guideline’s recommendations holistically, a cross-team collaboration of designers, developers and IBM Accessibility experts was born: The Carbon Accessibility Guild.
The guild allows us to move quickly and decisively around improvements and remediation in Carbon’s upcoming v11 release and beyond. With their help we’ve revisited and refactored two long-standing, essential components — notifications and tooltips — to provide everyone with a more accessible and usable experience.
Better actionable notifications
From an accessibility perspective, notification types (e.g., inline, toast) are not only differentiated by styling and usage. Under the hood, implementation details, like ARIA (Accessible Rich Internet Applications) — a technology that allows for expanded and customized accessibility — and focus management, are crucial when the user needs to carry out an action contained inside that notification, like clicking a link or pressing a button. If the action supports task completion, a keyboard or screen reader user may find it impossible to navigate to the notification, because its location in the DOM (Document Object Model) — and by extension the accessibility tree — is inconsistent. This oversight in v10 created the potential for keyboard or screen reader users to become stranded unless teams built custom app level focus management.
In the v11 release, InlineNotification and ToastNotification have been refactored and no longer support user actions. The newly introduced ActionableNotification has unique focus management and ARIA to provide a consistently accessible experience and can be configured for either a Toast or an Inline usage context.
More accessible icon tooltips
TooltipIcon has also been removed in v11. For anyone using a screen reader or keyboard, it didn’t make sense to have a tooltip inside of a non-interactive icon element. In that implementation, the tooltip would never be revealed to the users since the icon wasn’t capable of receiving focus. Instead, the recommendation — and user expectation — here, would be something closer to a disclosure pattern, in which a button triggers a dialog that rendered on top of the existing page.
To remedy this, we’ve split TooltipIcon into 2 components: Tooltip and Toggletip. Tooltip reveals a text-only tooltip when an interactive component receives hover or keyboard focus. Toggletip uses a button that reveals information when the user activates it (via click or Enter). As such, it can be used to provide text information or reveal further actions. Sighted users still have UX consistency with v10, while keyboard users have an improved and predictable experience.
Moving forward accessibly
Not described here are dozens more accessibility updates and fixes — like improved contrast for certain color tokens in certain use cases, better compatibility with Windows High Contrast mode, and expanded component accessibility documentation, to name a few. The Carbon v11 release represents a more inclusive, accessible, and usable foundation on which to build future products and services at IBM. That said, there’s still plenty of work to be done and we will always strive to deliver a more empathetic and kind experience for all of our users. Coming up we’ll have component specific deep dives highlighting v11 improvements you can take advantage of now. We can’t wait to build it with you.
