Skip to Main Content

Build Accessible Experiences using Carbon Design System with React

taught by: Brent Shiver

co-presented by: Thomas Brunet

Session Summary:

Historically, developers have struggled with making widgets accessible because state management across the visual, metadata, and data models has been error-prone. As a result, there has been a tradeoff between using accessible native components and developing more appealing custom components. In this session, we will provide a brief overview of the Carbon Design System, which is available open-source. The participants will learn how to leverage the React Carbon Components, which makes it easier to manage states, thus simplifying the development and utilization of accessible components.

Description:

Historically, developers have struggled with making widgets accessible because state management across the visual, metadata, and data models has been error-prone. As a result, there has been a tradeoff between using accessible native components and developing more appealing custom components. In this session, we will provide a brief overview of the Carbon Design System, which is available open-source. The participants will learn how to leverage the React Carbon Components, which makes it easier to manage states, thus simplifying the development and utilization of accessible components.

Carbon Design System’s modularity ensures maximum flexibility in execution. Its components are designed to work seamlessly with each other, in whichever combination suits the user’s needs. Carbon relies on the comprehensive IBM Design Language as its foundation. Every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent and cohesive user experience.

One of the most popular web UI development frameworks in recent years is the React JavaScript Library. The popularity of this framework is driven by how they simplify the synchronization between the model and the view. In this session, we will provide an overview of how React can be used to create meaningful and accessible user experiences. We will also discuss how React Carbon Components provide a means for more efficiently managing accessible metadata. Afterward, participants should leave the session with a clear understanding of how to get started with the React Carbon Component framework.

The Carbon Design System is IBM’s open-source design system for products and experiences that is available for everyone to use. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. Initially created as a means to meet the needs of IBM Cloud offerings, the Carbon system has been generalized to meet the needs of more general applications. It also provides a working widget set for React, as well as other popular development frameworks such as Vue. It is important to note that Carbon’s users are also its makers, and everyone is encouraged to contribute back to the community.

Carbon is committed to adhering to the best accessibility practices. All the components follow the IBM Accessibility Checklist based on WCAG 2.1 Level A and AA, Section 508, and European standards. The patterns are designed to map to these practices, including perceivable, operable, and understandable to the users. This process is crucial for users who rely on a screen reader or other assistive technology. However, developers still need to keep in mind that merely using the Carbon system does not guarantee accessibility, so familiarity with the accessibility guidelines beforehand is essential. With that background, the role-specific Carbon accessibility guidelines can help the implementation of accessible products.

After the session, the participants with coding experience will walk away with enough knowledge and confidence to jumpstart their project using accessible Carbon React Components. Everyone else will have a good feel of the usefulness and appreciate the versatility that the components possess, thus potentially influencing the direction of design and development decisions.

References

Practical Skills:

  • Understand the Carbon Design System
  • which is available open-source
  • through a brief overview
  • Learn how to create modern
  • accessible web user experiences by leveraging the Carbon React Components
  • Gain a good feel of the usefulness and versatility that the system offers
  • potentially influencing the direction of design and development decisions