Build Accessible Experiences Using Carbon with React or Angular

Session Summary:

Historically, developers have struggled with making custom 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 more accessible native components and developing more appealing custom components. In this session, participants will learn how React and Angular make it easier to manage this state to simplify the development of custom components. They will also learn how to use the Carbon Design System, which leverages this power to provide a rich set of widgets for React and Angular.

Description:

Two of the most popular web UI development frameworks today are Angular and React. The popularity of these frameworks is driven by who they simplify the synchronization between the model and the view. In this class, we will provide an overview of how Angular and React can be used to create meaningful and accessible user experiences. We will discuss the difference in philosophy and approach and why both provide a means for more efficiently managing accessible metadata. Afterward, participants should understand how to get started with either of these frameworks.

The Carbon Design System is IBM’s open-source design system for products and experiences. 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 started as a means to meet the needs of IBM Cloud offerings, the Carbon has generalized to meet the needs of more general applications and provides a working widget set for vanilla JavaScript, React, and Angular environments.

Carbon is committed to adhering to the best accessibility practices. All the components follow the IBM Accessibility Checklist based on WCAG AA, Section 508, and European standards. The patterns are perceivable, operable, and understandable to users, including when using a screen reader or other assistive technology. Merely using the Carbon system does not guarantee accessibility, so it is essential to be familiar with the accessibility guidelines beforehand. With that background, role-specific Carbon accessibility guidelines can help the implementation of accessible products.

Participants will gain an understanding of what Carbon provides, and how to use the provided widgets for their own needs. They will also learn how to harness Carbon in a way to ensure the product is accessible.

Carbon Design System: https://www.carbondesignsystem.com/

Carbon and Accessibility:
https://www.carbondesignsystem.com/guidelines/accessibility/overview

Practical Skills:

Learn how to create modern web user experiences by leveraging the Angular or React frameworks, and build applications quickly using the Carbon Design System

Presentation Materials:

• Download PowerPoint: Build Accessible Experiences Using Carbon with React or Angular