In today’s connected world, people expect to be able to access websites from anywhere, using a variety of devices to find information and accomplish tasks. As designers, we take people’s needs into account when creating responsive sites that adapt to different screen sizes, but we need to go further than that and ensure that sites are accessible to all users, including people with physical disabilities.
Government and non-profit websites are required to meet Section 508 standards for accessibility, but even if your organization doesn’t fall into these categories, it’s a good idea to follow these standards. This will not only ensure that every user is able to use your website, it also helps you maintain a standard of responsible design, helping you to be prepared for changes to come as new technologies emerge.
At Diagram, we make sure that the sites we design meet WCAG 2.0 standards at the AA level. As we’ve worked to follow these standards, we’ve gained a new understanding of how to design websites that meet the needs of every user, and we wanted to share some of the insights we’ve learned during this process:
The Importance of Color Contrast
One of the most consequential choices made during the design process is also one of the most basic: the colors that will be used for the background and text of the website. Colors are often chosen based on an organization’s branding and the emotions that they want to evoke when people are using the site, but this selection can fail to take into account whether those colors will cause users with color blindness or other visual disabilities to be unable to read the text on the site.
In order to make sure that a site’s colors meet accessibility standards, we always use WebAIM’s color contrast checker. With this tool, you can specify the hexadecimal code for a site’s background and text, and it will check the contrast ratio between the two to see whether your selected colors pass or fail WCAG standards. If your chosen brand colors do not provide the correct amount of contrast, you may need to adjust your colors or pick a different combination of colors that meet the contrast requirement.
The size of the text also matters in color contrast. Some colors that do not have enough contrast at small font sizes will be readable for larger sized text. This means that even if you have to deviate from your brand colors for your site’s background and text color, you may be able to incorporate your brand colors into fonts you use for headings.
Our standard practice is to test color contrast during the design stage of a website project. Even slight color shifts can change the entire feel of a site, and we often go through several different colors during the design phase before settling on a color palette. Testing at this early stage lets us discover any color contrast issues before it is too late to change them, and it ensures that the site’s final color palette will meet accessibility standards.
Test With a Screen Reader
We’re so used to browsing and reading content on websites that we often take the ease of website navigation for granted. But not everyone has it so easy; users with visual impairments often use screen readers that read a site’s content to them aloud, and navigating through a site’s content using one of these tools can be cumbersome and tedious.
We’ve found that trying to navigate through a website using a screen reader (bonus points for doing it with your eyes closed!) really changes one’s perspective on how pages are designed. Understanding the difficulties that these users face helps us design pages in ways that provide the best possible experience for them.
For instance, screen readers will go through a page’s content in the order that it is included in the site code. But screen reader users also want to be able to jump to different sections of the page or skip the header and footer, just as non-screen reader users do. Appropriate headings and markups in the code to skip to the main content or go back to navigation help these users be able to browse better and faster with keyboard shortcuts.
Understanding how users with disabilities experience a site can help ensure that it is designed in a way that allows them to use it as easily as possible. While some tools exist to automatically check a page for issues that may occur, we’ve found that there’s no substitute for manually testing pages using a screen reader.
Accessibility Is a Joint Effort
While a site’s designers have a great deal of responsibility for ensuring that the site is accessible, this responsibility is also shared by the site’s content authors and editors. Designers create the styles and design elements to meet accessibility standards, but the site’s content also needs to meet these standards.
In order to guarantee that content is accessible, a site’s content managers need to be sure they are working within the rules that the designers have created. Following best practices for using headings, tables, and styles will ensure that content follows the standards that the designers have defined and provides a good experience for every user.
Ultimately, whether you’re designing a website or creating the content that will live on that site, the best approach you can take is to put yourself in the place of the user. Placing priority on the needs of the users will result in a site that provides people with the information and tools that they are looking for, giving them a satisfying experience that will keep them coming back.
If you want to know more about how Diagram’s designers can help you create a site that meets accessibility standards, please contact us. We look forward to working with you to build the best possible experience for every user!
