Accessibility has always been important to our organization, and we’ve learned from community members and Stack Overflow for Teams customers that it’s important to them too. Encouraged by Stack Overflow for Teams customers, we started considering a more systematic and sustainable approach to improving the accessibility of our products. Here’s a behind-the-scenes look at how we established that system, and the work we continue to do to keep our products (Stack Overflow for Teams) and websites (Stack Overflow and the Stack Exchange network) inclusive of and accessible to as many technologists as attainable.
With a purpose to meaningfully enhance the accessibility of our merchandise, we would have liked to outline the group’s accessibility targets. We did this by creating an Architectural Choice Report (ADR) of org-wide accessibility targets to behave because the supply of reality for the accessibility expectations of our merchandise. With enter from design and engineering, we established that our merchandise wanted to evolve to Web Content Accessibility Guidelines (WCAG) 2.2 AA conformance level (and WCAG 2.2 AAA in high-contrast modes), with a couple of exceptions.
Most notable among the many exceptions was our option to measure colour distinction utilizing the Accessible Perceptual Contrast Algorithm (APCA). We initially thought of options to WCAG’s colour distinction algorithm because it struggles to accurately assess color contrasts when using orange, which is a major subject for us since we use orange so usually throughout our merchandise. We investigated utilizing APCA and located it had a number of benefits over WCAG’s colour distinction algorithm. APCA is designed to more accurately measure perceived contrast by measuring distinction by way of lightness distinction (Lc), contemplating elements like polarity (darkish textual content on a light-weight background vs. mild on darkish), and bearing in mind contextual data like font measurement and weight. We landed on a goal Lc worth of 60 when the font measurement is beneath 32px and 45 when it’s 32px or bigger (we plan to focus on the APCA-ARC bronze conformance level sooner or later).
Folks usually take into account display screen readers first when contemplating accessibility, however low-contrast textual content is “essentially the most commonly-detected accessibility subject” and is current on “81% of dwelling pages” based on WebAIM’s report on the accessibility of the top 1,000,000 home pages. Loads of individuals who don’t require a display screen reader have issue studying sure colour combos. APCA’s extra human-centric evaluation of distinction gave us extra confidence that we’re growing interfaces which might be each aesthetically pleasing and readable to as many individuals as attainable.
With our accessibility targets established, we’re within the good place to start out measuring our accessibility.
Now that we had targets, we determined to quantify the accessibility of our merchandise. We established an accessibility scoring system of 0 to 100 so we might simply perceive how far we had been from these targets and to measure the progress we had been making. For every product, we generate an “automated” rating, “handbook” rating, and an “total” rating.
As a part of our efforts to increase our automated testing coverage, we determined to automate the identification of accessibility WCAG violations utilizing the Axe accessibility testing engine. This engine is open-source and supported by Deque Systems, a revered accessibility firm, so we felt assured counting on it. To generate an automatic rating, we run a day by day cron job that runs our accessibility checks on our highest visitors pages in mild, darkish, and high-contrast modes (the place supported) to generate a report of points as a JSON file. We then take that JSON file and generate our automated rating primarily based on the variety of profitable checks versus check failures.
Whereas the automated checks are useful, they solely catch an average 57% of WCAG violations. To account for this, we carry out periodic handbook accessibility audits and seize points in a devoted Jira board. This Jira board acts as a backlog of points which is used to find out our handbook accessibility scores. To create this rating, we weigh the variety of pages being assessed for a given product’s accessibility, the variety of recognized points, and their relative severity as outlined by Axe-core’s definitions of issue impacts.
We wanted a option to show this data in a digestible format, so we created an accessibility dashboard. It reveals the automated and handbook scores, in addition to an “total” rating which is a median of the automated and handbook scores for every of those merchandise: Stacks (Design System), PubPlat (Stack Overflow and all Stack Alternate websites), and Stack Overflow for Groups (together with Stack Overflow for Groups Enterprise merchandise). Whereas we initially created this as an inner device to trace the accessibility of our merchandise, we’ve made it public within the spirit of transparency.
With accessibility targets and scores in place, we now needed to take into account a broad plan of action. A gaggle of Stack Overflow engineers, designers, and product managers used a mannequin referred to as an Opportunity Solution Tree (OST) to brainstorm how we might attain a desired final result for our accessibility issues. This train confirmed us that we might enhance accessibility by design, however we’d want individuals to advocate for these designs and supply sources so everybody else might upskill in accessibility.
We knew that we’d want accessibility advocates throughout our group, so we assembled an accessibility champions group. This group, composed of developer representatives from a number of groups inside Stack Overflow, has the mission of actively working in direction of guaranteeing that the digital merchandise their crew is constructing adjust to our accessibility targets. They’re devoted to selling consciousness, understanding, and implementation of accessibility greatest practices all through the event course of. It was determined that they might obtain that mission by assembly each two weeks to triage points, be certain that we regularly enhance accessibility throughout our merchandise, and share knowledge by creating coaching supplies, comparable to short-form tutorial movies, on learn how to resolve the most typical accessibility points.
We additionally understood that we would have liked to be clever with our sources and concentrate on the highest-priority points.
We knew our efforts would solely be worthwhile if we meaningfully improved the accessibility of our merchandise and websites. We prioritized the problems that may have the best impression primarily based on the severity of the problems as described by the Axe-core documentation and the relative effort required. We began by improving our design system, Stacks.
Since our Stacks libraries present elements and atomic courses used throughout our merchandise, any adjustments there would have wide-reaching advantages. We began with redefining our colour palette with distinction in thoughts. The up to date color palette, which shipped with Stacks v2.0 in October 2023, introduced us to a a lot better commonplace for distinction. As soon as that was full, we made vital enhancements to our focus styles by guaranteeing that we clearly point out focus and preserved the flexibility for assistive know-how to use customized outlines to targeted components. We additionally added elements, comparable to a skip link, to make it straightforward for customers of Stacks to assist customers navigate extra simply utilizing a keyboard.
Whereas performing these adjustments, we applied robust accessibility testing of our components by leveraging Axe-core, Web Test Runner, and Playwright. Right now now we have over 2,000 accessibility checks working within the steady integration pipeline for our element library. As a result of we made the choice to make use of APCA as the colour distinction algorithm to outline our a11y targets, we needed to create devoted Axe guidelines to check in opposition to that algorithm as an alternative of the WCAG one. These guidelines are actually open-source in a complete package deal: GitHub: StackExchange/apca-check.
By taking a extra proactive, holistic strategy to enhancing accessibility throughout our merchandise and our websites, we’re nearer to our aim of serving each technologist, irrespective of how they use our website. We’ve additionally made it the shared accountability of each Stack Overflow crew member to maintain accessibility top-of-mind, as our inner accessibility champions proceed to unfold consciousness and schooling. Though our work is much from over—in truth, it’s steady by nature—we’re proud to be constructing extra accessible merchandise and making Stack Overflow and the Stack Alternate community extra inclusive for all builders and technologists.
