Accelerating Accessibility with Web Components

Web Components Defined

Web Components, a suite of technologies, are a method through which we teach browsers how to build components that might become native in future browsers. 

In other words, browsers are natively capable of supporting lists, images, links, etc., which makes it easy to incorporate them into a website. Other elements, such as tabs and dropdown menus, require custom implementation. Web Components allow us to prescribe how an accordion or a slideshow, or other more sophisticated, interactive features, behave in browsers. 

Web Components enable us to package all the necessary functionality in a single file—create it once and use it repeatedly. They also provide flexibility in styling while preserving the essential component's features and structure.

Adding accessibility to the mix brings a whole new level of complexity to the process. There are scenarios and edge cases we account for when we build a site and Web Components help us address these circumstances as well.

Why Web Components?

Web Components are framework-agnostic and allow us to write and repurpose code. As such, they’ve helped us overcome previous limitations. Prior to its advent, developers working in React, JavaScript, Drupal, etc., would have to write components over and over depending on the frontend tools they were using. Platforms also have their own unique, predefined code styles. Before Web Components, these styles would interrupt the intended design a developer was looking to achieve. Now, Web Components are supported by the browser, and we can create something once, using HTML markup, CSS, and JavaScript once—and implement it across any platform.

The use of Web Components is growing. Recent statistics demonstrate that Web Components are used on 18.5% of webpages visited by users worldwide.

While many technologies have lifespans—popular today, not so popular tomorrow—Web Components are supported directly by browsers. So while other technologies might be replaced, Web Components are here to stay—they’re a smart investment in the future of frontend development.

Accessibility Benefits

Drupal default themes come with accessibility features built-in. However, when we introduce new themes and components, we are obligated to support accessibility. Minimum color contrast is an example of something that we might have to introduce for accessibility reasons.

Making components accessible is difficult and requires more specialized knowledge. However, when we are able to implement accessibility in a Web Component, it means that other less experienced developers can repurpose that component—customize or style it differently—all while retaining its accessibility features. Additionally, every time we find an improvement or fix a bug, all of our future projects benefit.

Accessibility is crucial for interactive features. When I use a website, I can see that when I click a button, a drop-down opens. I see on my screen what’s changed on the page. Some people are visually impaired and rely on assistive devices like screen readers. In this example, not only wouldn't they visually see what’s changed on the page, they depend on the screen reader to tell them, “This is what’s changed on the page. This is the element you are currently focused on.”

When we make things accessible, it means that we’re making sure that regardless of the user, it's going to be very clear for them what’s changing on the page. It’s incumbent upon developers to make sure that every part of a page—a site—is accessible. Anyone can read it, they can click on interactive bits, they can get all the information they need to be able to use that site—including when they cannot use a mouse, and might navigate the website using a keyboard or special assistive devices like Switch.

Phase2 is innovating in this area because we’ve developed our own Web Components library, Outline, with accessibility in mind for every component. We invested a great deal and because Outline is an open source project, it means that other agencies and developers can benefit from our collective knowledge. It's like we're creating these Lego pieces, making them the best we can, infusing as much accessibility as we can, and continually improving them for the future. 

We hope you enjoyed reading the Phase2 blog! Please subscribe below for regular updates and industry insights.