At Pantheon, we believe having an accessible website is the right thing to do—for all organizations. Here, members of our very own Accessibility Workgroup share their advice for implementing best practices.
Starting with accessibility can be intimidating. At Pantheon, we believe having an accessible website is the right thing to do, but, this usability is also linked to improved search rankings, easier website maintenance, and heightened audience reach and engagement.
For some organizations, ensuring accessibility is more than a thoughtful practice, it's a necessity. Federal agencies and organizations who receive federal funding, for example, must provide helpful, informative experiences to all users—and they're required to implement accessibility best practices throughout their websites.
Read more about conforming colors to make your website more inclusive.
In honor of Global Accessibility Awareness Day on May 21, I gathered three Pantheors from the Pantheon Accessibility Workgroup to share tips for adopting accessibility practices. These folks address accessibility needs for our customers, on our own product dashboards, in our documentation, and more:
John Richards II, Developer Advocate
Carolyn Shannon, Manager, Technical Documentation and founder of the Pantheon Accessibility Workgroup
Kit Wong, Principal Sales Engineer
Where Do I Start?
“Where possible, it's best to address accessibility concerns as an integral part of the whole WebOps process—particularly because proper color contrast is a nightmare to add after the fact. When designers and marketers work together, they can define the colors and fonts that represent their organization, and also the pairings that maintain proper contrast ratios. Using those approved assets, they can work with developers to build out combinations that also meet accessibility standards.” — John
“The US Web Design Systems (USWDS) website is a great resource for color and contrast accessibility, and has an easy-to-use numeric scoring system for color combinations, making it easy to ensure text and background pairings meet accessible contrast ratios.” — Carolyn
“Pick a standard that fits your needs. Most organizations use WCAG 2.1 AA as their standard of choice for general purposes. If you have specific audience requirements you may want to select WCAG 2.1 AAA. Another alternative is Section 508 for government purposes.” — Kit
How Can I Improve Accesibility While Creating Content?
“Accessibility is the responsibility of every contributor to your site. Best practices when creating content include:
Use descriptive language when creating links so users know where they lead.
Use clear, descriptive labels for forms.
Use text colors with a high contrast to the background.
Underline your hyperlinks.
Hover features should also work on click.” — John
“Invite a diverse audience to review your work; don’t always use the same readers. Your content will be more inclusive for it.” — Carolyn
What about Images and Video?
“Accessibility extends beyond text and code. All assets (like images and video) should also be accessible. Make sure:
Images don’t have overlaying text.
Videos have captioning or transcripts.
Any linked documents, like pdfs, are configured to be accessible.
Bonus: Screen readers are basically bots that crawl a site and then make the content available to those with accessibility needs. Optimizing for screen readers means the content is also optimized better for other bots like search engines.” — John
“To make sure users with vision impairments can understand your content, be sure to apply alt attributes, when appropriate, to images. Need help knowing what alt text to use or if you should use it at all? Follow this decision tree.” — John
How Can I Ensure Accessible Navigation?
"The ability to navigate through and use a website with only the keyboard is a key element of web accessibility. WebAIM has a great overview of concepts, techniques, and best practices. Testing is easy and requires no equipment beyond your keyboard. As you test, look for these key elements:
Provide a "skip to main content" link on the page, so users can navigate quickly.
As you tab through, can you tell where your cursor is? Elements that have :focus should be highlighted in some way." — Carolyn
"Many keyboard users navigate via headers to find the information they need, so it is important to maintain a proper header nesting order. The new WordPress editor makes it easy to assess your header usage by displaying it in the content structure panel. See how the WordPress Content Structure panel is open showing the header layout of the page in the image below." — John
Avoiding Common Accessibility Mistakes
“Whichever accessibility level you choose, be sure that you are meeting the contrast guidelines. Text on images is a common challenge, especially when the image can change. Adding an image gradient or a background color to the text can help solve this problem.
Bonus: There are often different contrast levels for the size of text you are using so using a large font size will allow for more flexibility.” — John
Taking the First Steps
“Using a tool like WAVE, you can begin assessing the current accessibility needs of your site. It will help to highlight missing information or contrast issues with your webpage.” — John
“Working with experts in the field is always a good place to start. I worked with the expert testers at WeCo for a project and learned so much about what does and doesn’t work.” — Tara
“Start where you are. Just start. Make one thing better. Iteration is the core of good accessibility as well as WebOps. Make it part of your development and testing cycles.” — Carolyn
You might also like: