How to Make Websites Accessible, Part 1: Audit, Usability, and Prioritization

If website accessibility is a priority for your organization, then this is a must-read for you. Recently, WCAG updated to version 2.2 (WCAG 2.2 AA+), which means there’s now an even wider range of recommendations for making web content more accessible.

Often the thought is, “If we can just improve our SiteImprove scores or if we install this third-party web accessibility tool, we’ll at least be moving the needle forward.” However good accessibility is an ongoing process that needs continual attention, focus, and effort. To do this most effectively, it’s essential to create an iterative improvement process that becomes a daily habit for your content admins, not only a one-time optimization project.

Over three blog posts, we will focus on a repeatable process to continuously improve the accessibility and inclusiveness of your site. This first post will focus on starting your accessibility journey.

An Iterative Approach to Accessibility in Web Design

After many years of working with associations, global non-profits, and healthcare organizations, we have found that an iterative approach to accessibility is the key to ongoing success. Our approach to consistent accessibility includes:

• Identifying the biggest (and sometimes the easiest) updates for the most impact (e.g. adding labels to form elements or sufficient color contrast)
• Prioritizing and organizing issues into batches for easier and more efficient updates
• Incorporating ongoing content admin feedback and training
• Scheduling ongoing accessibility scans regularly (this can be quarterly)

Key steps in the accessibility process include:

This iterative approach has helped many of our clients start and continue their accessibility journey. For example, The Society for Vascular Surgery (SVS), the leading professional medical association for vascular surgery, recently embraced this iterative process. It was important to establish an accessibility baseline via an audit, collaborate with the SVS and Sandstorm teams to prioritize improvements and work iteratively to roll-out updates and retest. This continuous cycle of improvement allowed SVS to keep accessibility at the forefront rather than an afterthought.

Step 1: Audit, Usability & Prioritization

Begin with an automated accessibility audit of the website to uncover major issues. We use tools like the Pa11y NodeJS tool to evaluate and compare a website’s markup and WCAG 2.2 for compliance issues.

Since many times there is a very long list of accessibility violations, our IAAP CPAAC-certified accessibility experts combine the automated findings with a manual review of your site to:

• Consolidate issues
• Remove false positives
• Identify potential solutions
• Define the level of effort to make updates

As part of the audit, we also like to conduct a design assessment, using a combination of keyboard testing, cross-browser/cross-device testing, and design review. We look at:

• Keyboard operability
• Cross-browser compatibility
• Color and contrast
• Perceivability of focus states

This is usually a good opportunity to also conduct usability testing, which helps to improve overall usability and assess the experience of the site for real users. Ideally, we aim to conduct 1-on-1, in-person, task-based usability tests on the current site with users whose disabilities and/or use of assistive technologies might impact their experience of the website.

What to Do With the Accessibility Audit Findings

Once we’ve analyzed all the inputs (automated audit, manual review, and usability findings), we share an actionable report that identifies:

• Issue impact and effort summary including issue summary, severity solution, relative effort
• Issue matrix organized by severity with explanations, page links, and assessments
• Usability findings and recommendations, including improvements to content organization, labeling, findability, and task completion.

This allows us to make decisions on prioritization: focusing on the biggest impact, lowest effort items that will quickly improve usability scores, or focusing on the biggest usability and accessibility areas of the site (areas that are causing the most friction and biggest accessibility violations).

For example, a common challenge for SVS and many healthcare organizations is ensuring design elements have sufficient color contrast. In SVS’s case, they were using buttons without a color background. Although the site had a variety of button options, the wrong button style was being used, resulting in inadequate color contrast between the button and the background color. This is an example of a big impact, low effort that will directly improve accessibility and usability.

Now that we have our full list of prioritized issues, we create a phased and iterative plan for remediation, which accounts for three streams of work:

• Development
• Design
• Content

For SVS, the audit uncovered 15+ issues that ranged from minor to critical.

Some of the identified issues included:

• Elements must have sufficient color contrast
• Links must have discernible text
• Ensure headings (h1, h2, h3, etc) are in a logical order
• Alternative text of images should not be repeated as text

Elements must have sufficient color contrast. Making sure elements have enough color contrast is always a concern and a very common finding in our audits. Many people know green is a challenging color to make accessible since it is the most common form of color blindness. You usually have to make it very dark to be legible. Blue is another color that is inherently hard to use, which we find most frequently in healthcare and medical associations. As we age, the lens on our eye becomes yellowish which makes the color blue harder to see or differentiate from other colors.

Links must have discernible text. Links need to be clearly understood as links. The language should be descriptive so the users know where they will go when they click the link. Using vague language or subtle language links does not drive the user to click with confidence and is often overlooked.

Ensure headings are in a logical order. Headings on the page need to be in a logical order so all users can read the content in the way it was intended. For example, if you have an H1, followed by an H3, then the next is an H2, the heading order is not correct. This may cause a screen reader to read the content out-of-order resulting in a confusing experience.

Alternative text of images should not be repeated as text. Alternative text should not be repeated as text in the content. Alt text is used to describe the photo or graphic for screen readers or it will display if the image does not load. Having the alt text repeated as text becomes redundant and confusing for your users.

What's Next?

One of the biggest areas of impact from our audit with SVS was being able to help their team prioritize and roll out improvements iteratively. Armed with the summary report, level of severity, and type of violation, we worked together to prioritize accessibility fixes and build the remediation plan while also having a clear understanding of roles and assignments.

In post two of this three-part series, we’ll discuss the development approach to remediation and strategies for taking an iterative approach to rolling out continuous improvements.

If you’re interested in starting your journey through an accessibility audit or want to talk through ways to address your accessibility issues, let’s connect today!