Our Coforma Design Focus blog series provides an inside look at the development phases that led to the new Coforma brand. When designing and building our new website, we leveraged our new accessible color palette in a series of development decisions that increased the site’s accessibility in several ways.
We believe that all good design is intentionally inclusive. That’s why we aim to make every digital product and experience we work on accessible to a wide audience, and we do our best to advocate for development and engineering decisions that benefit more than one user group. We apply this thinking to every project that we undertake, and we hold ourselves and our brand to the same standards and processes we expect of others.
Building Blocks for an Accessible Website
At Coforma, we have a broad definition of what it means to design and build an accessible website. Accessibility discussions often center around the topic of screen readers, but it involves much more than screen readers alone. For example:
We strive to use plain language so that our content is easy to understand.
For our users living with mobility issues, we support keyboard navigation.
For those with limited bandwidth, we keep our site’s footprint small.
We’ve also limited our use of motion experience and animation, which benefits users with motion sensitivity.
An accessible website must be usable for every type of user of every ability or disability.
Plain Language
Using plain language across site content increases the likelihood that more users will find content on a website, understand the content, and use that content for its intended purpose. We referred to the federal government’s plain language guidelines and standards to check ourselves as we produced content for the site.
Content on the Coforma website matches its assigned section, is tailored to our audience, maintains a conversational tone, and is meant to be read and understood by people. Copy was reviewed by numerous individuals to ensure it reads well.
Keyboard Navigation
A website that supports keyboard navigation is important for users who have mobility issues or who can’t manipulate a mouse. We built the Coforma site to be navigable with the keyboard. Manual testing helped us ensure designs were working properly.
Focus Indicator
Clicking on links throughout our site, users may notice a thick, yellow box. That’s our focus indicator and it’s critical to accessibility. Most browsers by default will use a thin, dotted outline, but that doesn’t meet WCAG 2AA specifications. In addition, using this bolder approach makes the indicator feel like it belongs on the page.
Coforma.io’s yellow focus indicator.
Nested Headings
Nesting headings properly, (h3, which is always under h2, which is always under h1) is another crucial aspect of accessibility we wanted to get right because headings provide an outline of a properly designed page. Think of a webpage like you would a Word document.
Screen reader users can use the rotor menu to get a quick sense of the page’s structure as well as navigate directly to any heading on the page. Headings are frequently used improperly because there can be a disconnect between what looks best visually and what’s appropriate semantically.
When that happens, screen readers don’t “read” the page the way a visually-abled person might, potentially leaving an individual who relies on screen readers confused about the content which becomes inaccessible.
A screen reader performs best when headings are properly nested.
We built the Coforma content management system (CMS) with the ability to select any heading level for any of the content sections on our site, while maintaining a consistent design because sometimes we’ll need an h2 and sometimes we’ll need an h3. Sometimes, we might not even need a heading in the visual design at all, but we’ve included a way to place them for our non-visual users.
Trap Focus
While Coforma.io (at the time of writing this) does not use any complex interactions, we do make sure we have the ability to trap focus in our fly-out navigation menu while it is open. Some pages include a sticky menu with smooth page scrolling and active navigation. It’s a commonly-used pattern across the web, but most of the time has poor support for accessibility because it fails to transfer focus.
Instead of transferring focus to the location selected in the menu, pressing the tab key would often bring the user to the next navigation link. This is something we have addressed on Coforma.io.
Trap focus in Coforma.io’s fly-out navigation menu.
Gauging Accessibility
Automated and manual testing were used to help us understand how the site measured up for a wide variety of users.
Automated Testing
In creating the design elements of the new Coforma website, we used HTML CodeSniffer to audit each page after we published with our CMS. Other automated testing tools for accessibility design we recommend include:
Using an automated testing tool is good practice, but it is merely a starting point. Our commitment does not stop when our accessibility tools tell us all of our code is good enough. Automated tools can only tell us if our code has errors and that is roughly all we learn. In fact, they might only capture about 30% of what needs to be checked. The other 70% needs to be checked through manual testing to ensure a website is accessible.
Manual Testing
We conducted manual testing two ways. First, we interacted with the site using our keyboards. As we watched the focus indicator move about the page, we asked ourselves:
Is the skip navigation the first focusable element?
Can we easily track the focus indicator as it cycles through the content?
Does the focus indicator always stay in view?
Does the focus indicator stay within an open modal window or fly-out menu?
Are we transferring the focus indicator appropriately after interactions?
Once satisfied with how the site performed using a keyboard to navigate, we tested navigating the site using Voice Over. Here, we considered:
Is it easy to get lost on the page? This is where transferring focus to the correct location is critical.
Are there interactions that can be enhanced through any kind of announcements?
Is the right amount of context given to a non-visual user?
What appears in the rotor menus? Rotor menus are important because they are often the easiest way to navigate a page with a screen reader.
In addition to testing, we added a couple of features to our site and our CMS to help us answer those accessibility questions.
Manual testing for accessibility is difficult because as a user without disabilities, that testing serves at best as a litmus test. To address this limitation, we hope to hear from site visitors who are members of the disability community about whether our site meets their needs or wants.
To learn more about manually testing for accessibility, use the Accessibility Insights Chrome extension for guided step-by-step instructions and remediating tips.
Our Accessibility Statement
The Coforma website includes an accessibility statement for users that summarizes our accessibility measures and provides a way to report any difficulties. We encourage visitors to the site to contact us so that we can address anything we may have missed in testing.
Curious about how accessibility was part of other aspects of our brand development? We also wrote about our font and typography and our inclusive color palette.