Resources for Accessible Web Design & Development
Frontend’s Favorite Five #3
TL;DR Creating products with accessibility in mind help us create better, and more usable experiences for all our users.
This year, we’re embracing a lot of change at Project A. Our design team, lead by Francesco la Ferla, developed an exciting dynamic branding concept for our company. Along with that, we worked together to redesign and relaunch our website (for a special treat, reload the home page and keep an eye on the logo).
Our website relaunch also marks a commitment to raise our standards in regard to accessibility of our products. In the frontend team, we’ve been making our work easier to access with assistive technologies and we want to further increase our standards. In order to do so, we have also recruited the help of the design, product management, and QA departments.
Their contributions, which are invaluable in making this effort a success, include:
- Providing accessible visual design direction (for example, by making sure all content has sufficient color contrast between text and background).
- Increasing awareness of the topic in our company.
- Testing our products in accordance to Web Content Accessibility Guidelines (WCAG).
- Publicly acknowledging our achievements.
- Challenging and motivating each other to create more usable and inclusive digital products.
Let’s start from the beginning, to make sure we’re all on the same page. What is an accessible product? Our favorite definition comes from the team at Vox Media:
“Making a product accessible does not mean targeting a specific subset of people. Rather, accessible design, or universal design, is about making products usable by the greatest number of people possible. We should not assume we know how our users are engaging with our content, and should understand that it may be “seen” by a number of assistive technologies, including automated tools, keyboard-only navigation, and screen readers.”
–Sanette Tanaka, Winston Hearn, and Kelsey Scherer (Vox Media Blog)
Designing products with reduced or no usability barriers allows us to reach a wider audience. According to the EU Labour force survey (LFS), 14% of Europe’s working age population (that is 44 million people between ages 15 and 64) have some form of disability. Besides having access to a larger number of users and potential customers, there are legal precedents that make it clear that developing accessible products is increasingly becoming a legal requirement in many countries (ask Target). When we plan for universal design from the start, it’s much easier to develop inclusive digital products, saving us both time and money in the long-run.
There are three levels of accessibility standards: A (least accessible), AA, and AAA (most accessible). At Project A, our goal is to satisfy level AA and whenever possible, AAA.
In this Frontend’s Favorite Five edition, we share some of the tools we’ve been using daily to help us improve our level of accessibility. So without further ado, here are our team’s favorite five:
Vox Media Blog
Type: Company to follow, communication aid
Vox Media is a renowned group of digital media brands who have made a commitment to create accessible products. The team is also well known for sharing information regarding that process through their blog. Their writing style is easily digestible, and we like their accessibility guidelines in particular because they break down the WCAG accessibility guidelines into actionable, bite-sized chunks that are also divided by department (design, engineering, project management, QA and editorial). Their guidelines have helped us create our own and their posts serve as helpful material for communication about this topic.
Recommended reading:
Haben Girma
Type: Person to follow
Accessibility expert Haben Girma is the first deaf blind person to have graduated from Harvard Law School. Her talk “Disability & Innovation: The Universal Benefits of Accessible Design” gives an overview of how disabled people interact with technology, and how we can improve the quality of our products by embracing inclusivity throughout their creation. Haben explains how she uses accessible technology to thrive in the world around her. As a result of embracing inclusion, Haben highlights that “disability sparks innovation”. For example, one of the earliest typewriters was developed by an inventor as a gift to his blind lover, so she could write him letters through touch rather than sight… #romantic.
WAVE: Web Accessibility Evaluation Tool
Type: Development & QA tool
WAVE helps find accessibility-related improvements on a website. The authors highlight that the tool itself can’t truly guarantee if your content is fully accessible (only a human can do that), but it can guide you through items that might have been overlooked by designers and developers. WAVE can be used in the browser to evaluate your content before and after CSS is applied; and can also be used as a browser extension which evaluates the effect of scripts on your site’s accessibility. WAVE also is available as an API.
Color Contrast Analyzer
Type: Browser extension
Color Contrast Analyzer is a browser extension that scans your website and highlights which elements have sufficient color contrast and which don’t. It takes a screenshot of a particular page region, the visible page, or the whole page; and draws a white outline over items that have enough color contrast while hiding the rest of the page with a dark overlay. It’s helpful to remove any fixed positioning on the site’s elements with your browser’s developer tools before running the whole page test, so the screenshot produced is more similar to what the user will ultimately see, and all elements are properly evaluated (nothing being covered by a sticky header, for example).
An alternative website that offers a similar service is the Contrast Checker from Web Aim. The site allows you to pick two colors and your preferred level of accessibility, to see if the colors have sufficient contrast. Contrast Checker is helpful because it saves your color selection in a URL parameter so it’s easy to use the URL as a reference within a specification or via Slack.
Color Safe
Type: Design tool
It can be a bit of a drag when you find some of your favorite color combinations don’t pass accessibility standards. Color Safe helps by offering a variety of color palettes that are accessible. You can select background color, font family, size, weight, and desired WCAG standard to see examples of colors compliant with your selection.
That’s it for this edition of Frontend’s Favorite Five! Do you know of something in frontend we should read, see, get, or do? If so, we want to learn about it! Comment below or tweet at us @ProjectAcom with the hashtag #frontendfavorites.
