How to Design with Web Accessibility in Mind

In recent years, many large websites have been on the chopping block due to web accessibility lawsuits. During this time, these companies quickly started making updates to their sites, such as adding alt text descriptions to their images. These fixes are great starts, but because the changes are coming at the end of the design process, rather than the beginning, the accessibility initiative feels like an afterthought. While there is no such thing as “doing accessibility”, reviewing how a design is experienced is an important consideration when designing anything, especially websites, and needs to be an ongoing process that starts at the beginning of a project.

While running Labud, the design and development studio I co-founded with Dylan Fisher in 2018, we’ve explored what this means to our design philosophy and how the definition of accessibility expands past technical edits to a more wholistic experience both in the code and in the content.

Recently, Labud worked with Open Style Lab to design and develop a new website. Open Style Lab is a nonprofit organization that helps make stylish garments for individuals, regardless of their cognitive and physical abilities. Because this project was directly focused on supporting an organization dedicated to accessibility, it provided ample opportunities to reflect on what this means.

To us, this meant that the contents of the website needed to be legible and communicative to as many people as possible but also feel visually defined and intentional in a way that supports Open Style Lab’s other branding. Through researching this, legibility, scale, and language became prominent themes in the design that helped ease of use across different audiences. We saw that many accessibility tools allow for zooming in to parts of an interface. We wanted the design language to remove that need and feel adequately magnified, which became a central component to the visual language. The large-scale motif was integrated throughout the huge typography, the size of the imagery, and interface elements across the site.

Scale expanded to prominent visual cues that highlighted context and interaction. To avoid adding extra details, we stuck with a controlled color palette of black, white, and red and worked within that system to showcase new information. On the incubator pages, we exaggerated default interface elements, like the dropdown, to encourage interactivity. In addition, we added a thumbnail view of the contents to add both text support and visual information to clue in users on what they’re going to navigate to. Bringing in both text and graphic information helps to provide context to the user experience as well as communicate where each link goes.

In addition to scale, language became an important consideration, too. We suggested having clear and concise sentences that avoid jargon and communicate directly. This allows many users to understand what Open Style Lab does, and how style at large can work within their lives, even if they are coming from a totally different background. This idea was important to Open Style Lab’s ethos, and it was important to bring it into the digital experience, too. Language was incorporated in the alt text (text that appears when an image doesn’t load or when someone is relying on a screen reader) and we tried bringing in as much color to the descriptions where possible. For example, a photo of a bulletin board’s alt caption reads “Materials from a brainstorming session displayed on a bulletin board. The materials include Post-it notes, fabric samples, and a list of ideas.”, while another reads, “A large venue full of guests at an OSL showcase are smiling.” The combination of language with photography and exaggerated interface items is especially pronounced on image carousels where users are provided with several cues on how to interact with the content – the photos, a call-out indicating that there is a caption, and exaggerated "next" and "previous" buttons.

Native HTML is already quick to load and works across browsers. While we wanted the website to feel customized, we didn’t want to deviate away from a core functionality that already works well. We looked at some default behaviors that get toned down across websites, such as active treatments, and exaggerated them to highlight interaction and new information. We used the high contrast color system on the hover and active states throughout the site. Open Style Lab also had a lot of videos that housed necessary information. While these assets were important to maintain, we felt that some of the information needed to be accessible quicker, while other videos were impactful because of who was speaking and how they were communicating. We developed a custom video module that used native HTML video captions layered on top for these latter needs, which you can see in action on the about page.

These shorter video clips add movement to the page and provide additional context to users using screen-reading devices. To help support navigation for screen-reading devices, we made sure that you could navigate the website with a keyboard. To do so, users press tab and can then go from page to page using this command as well as enter to click or expand a detail. In addition to testing it with your keyboard, you can also simulate a screen reader by turning on VoiceOver in the accessibility controls on a Mac. While designing the website, it was curious to test out how the language and interactions are spoken. When I work on writing projects, I frequently read my texts out loud, and using VoiceOver to essentially read the website back to you is the same principle and something I’d like to incorporate in my process going forward.

Because users have varying ability levels, it was important to have a range or people test the site out and provide feedback. Once the website was on a staging environment, we had Open Style Lab’s team members test it out. Through doing this, we learned that while the navigation was clear, it could be more immediate by incorporating a sitemap. The sitemap highlights all of the contents of the website in one direct place and we brought this in as the first link that appears when navigating the website through your keyboard.

Aside from the users that frequent the website, we needed the website to be accessible to the client, as well. For many clients, maintaining a website is a cumbersome process. To help with this process, we use a custom CMS called Forest that has clearly labeled modules that communicate what each one does. We also provided an annotated document that explained how to use it and created a page that shows off all the existing site modules with their last used entity. Once the client updates the website once or twice, they become experts in maintaining and modifying their website.

While the website is online, we like to think of it as a living entity. While we designed the project with the goal of being WCAG AA compliant, we know that we’ll continue to learn from OSL’s users and continue to iterate and refine the site experience. Rather than thinking of accessibility as an exact science that needs to be replicated precisely across all websites, we prefer to consider it part of our initial design process that extends from the back end, to the front end.