Over the past three to four years, the landscape for web accessibility has been a rocky, turmoil-ridden road with many confusing directions and harrowing turns for web designers, developers, and the companies and individuals that they serve. Recent legislation changes have aggressively pushed web accessibility to a prominent position of concern for those who own or operate websites. While we believe it is ultimately a good thing for our industry to cater to a wider audience and be inclusive to people of all abilities, this change hasn’t come without its growing pains.
A record number of businesses have reached out to Razorfrog’s team requesting assistance with improving their website’s level of accessibility in order to meet W3C’s WCAG (Web Content Accessibility Guidelines) standards. We’ve been working hard to keep ourselves educated, actively resolving major issues, and continually making improvements internally to refine the quality of our design offerings.
Before we dive in, it’s important to note there is no “instant fix” for guaranteeing your site is ADA friendly (more on that later). However, there are many areas your web team can address to assist with this goal. The process of making accessibility improvements for your website is similar to performing required maintenance for your dwelling. Some areas need to be upgraded in order to improve upon the functionality of existing appliances and internal structure. Others are likely to be fine as-is.
Within this post, we’ll cover what you need to know regarding:
- Where accessibility guidelines currently stand
- Best practices for meeting WCAG requirements
- What to prioritize when addressing web accessibility
- Which third party “solutions” we recommend steering clear of
- Tools for auditing your site to identify pitfalls and confirm compliance
Disclaimer: web accessibility as a whole is a massive topic spanning a wide spectrum of ideologies and goes well beyond this writeup. All points mentioned here are meant to be informative guidelines for addressing the fundamentals of a quickly evolving field which impacts the larger online community. Sources have been included where necessary to substantiate any claims.
Where Do Accessibility Guidelines Currently Stand?
On June 5th, 2018, W3C published the requirements for WCAG 2.1 which is the current standard. There are three levels of compliance to be aware of: Level A, Level AA, and Level AAA. Each level contains progressively more difficult criteria to pass, with all criteria needing to pass for the level to be considered fully compliant. Level AA is widely regarded as the best practice for accessibility compliance on the web, and, to our understanding, is what courts are enforcing as the baseline.
The WCAG 2.2 working draft is currently available and is proposed to be completed by June 2022. Our team has integrated the newly introduced criteria into our auditing process in order to get a head start with these forthcoming changes.
Best Practices for Meeting WCAG Requirements
Razorfrog has developed our own auditing process for ensuring a website meets WCAG 2.1 compliance requirements. This involves a prepared comprehensive spreadsheet in which we check off all criteria items relating to each individual compliance level. Unfortunately there is no “official” document available for tracking each individual criteria item for web folks, so we were required to make our own and encourage others to do the same.
Our primary sources utilized for building this checklist are the WCAG 2.1/2.2 guidelines themselves (mentioned above), WUHCAG’s “WCAG 2.0 Checklists,” and 3Play Media’s post “What You Should Know About WCAG 2.1.”
We also recommend reviewing these additional resources to better understand WCAG 2.1 guidelines:
- W3C – “What’s New in WCAG 2.1”
- Prototypr.io – “The new guidelines in WCAG 2.1 explained”
What Should I Prioritize When Addressing Accessibility On My Website?
Focus Styling
One of the most prominent changes to make your site more ADA friendly is to enable focus styling for links via CSS. This involves adding an outline on links’ focus state, which is particularly important for users relying on keyboards to navigate a website by tabbing between links. There are various methods to do this, but we recommend reading Smashing Magazine’s “A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors” and implementing the :focus-visible pseudo-class selector. This is a particularly helpful solution as it allows the user to see the outline only when tabbing between links, but not when manually clicking on a link. Previously it was acceptable to apply the universal selector * with the outline property like so: *:focus {outline: 1px solid #333;}. Thankfully this practice is no longer necessary due to the introduction of :focus-visible.
Keyboard Navigation
Next up, we recommend making all content solely navigable by the keyboard. A user should be able to access all content on a page, including all links, in this way. This is one of the most important cornerstones of a site to be considered accessible. Test your site to identity areas where the keyboard may “trap” the user and find ways to resolve those issues. You will want to make sure tabbing is enabled within your browser’s accessibility settings. Be sure to reference “Enabling Keyboard Navigation in Mac OS X Web Browsers” to verify your browser’s accessibility settings allow for tabbing. If you are running Windows for your OS, this should be a similar process.
Contrast Levels
Content must also be legible for low-vision or colorblind users. This is accomplished by meeting certain contrast ratios for text against backgrounds. WCAG 2.1 Level AA specifies the following contrast ratios:
- Active interface components (e.g., buttons) and non-text content (e.g., infographics) must have a contrast ratio of at least 3:1.
- The contrast ratio between text and backgrounds must be at least 4.5:1.
Tools that we recommend utilizing for this purpose include any of the following free resources:
Color blindness simulator apps are also particularly helpful with testing contrast of text against backgrounds. This helps to put yourself in a visually impaired user’s shoes. We recommend Color Oracle, a free app available for Mac, Windows, and Linux, or Colorblindly, a popular Chrome extension.
Opening Links In The Same Tab
While it may seem counterintuitive, it is best to open all links in the same tab rather than in new tabs. We first learned about this from WebDevStudio’s article “Web Design and Development Myths: 2019 Edition.” The rationality for this is due to the fact that opening links in new tabs removes control and increases bounce rates. It is actually more complicated for an impaired user to return to where they were if a link opens in a new tab. Also, being able to quickly navigate backwards, rather than needing to jump between tabs or even apps, is essential for accessibility. While many folks might find this trivial, users can very easily open a link in a new tab if they prefer.
We recommend opening links in the same tab whenever possible. However, we recognize there are circumstances where this is not always ideal. At the very least, we encourage folks to open footer links in the same tab. These links are less prominent on a typical website but used often.
Accessibility Policy Page
Lastly, we encourage you to include an accessibility policy page on your site, linked from the footer. Implementing a publicly stated goal for your site’s accessibility that can be measured promotes accountability and moves the needle forward for all users with diverse abilities. We recommend using W3C’s Accessibility Statement Generator and also reviewing Sheri Byrne-Haber’s article “Deconstructing Accessibility Statements,” which provides some additional tips to consider for your policy.
Third Party “Solutions” To Avoid Entirely
It may be tempting to beeline to a web accessibility overlay product to help resolve a website’s immediately glaring accessibility problems. These are recent technologies that market themselves as “solutions” to these issues. They typically apply third-party source code (usually JavaScript) to make front-end improvements. We could not be more adamant about avoiding overlays altogether.
In January 2021 an online glasses company called Eyebobs was sued for not meeting accessibility requirements by a blind plaintiff. Eyebobs was utilizing an accessibility overlay as duct tape for addressing underlying accessibility violations on their site. The lawsuit settlement ruled that accessibility overlays are not a valid substitute for a real and plausible accessibility strategy. We invite you to read more about the Eyebobs lawsuit settlement article on UX Collective and the stipulations that resulted from it.
We highly recommend avoiding sites like UserWay, accessiBe, Equal Web, and any third party plugins that implement floating toolbars for changing site styling. These services market overlays as a reliable web accessibility solution and fail to achieve their end goals of doing right for their users.
Please visit overlayfactsheet.com for a treasure trove of reasons to avoid accessibility overlays.
Tools For Auditing Your Site
Not all tools for auditing accessibility are considered inadequate. The good ones can be few and far between. We particularly enjoy using Level Access’ Web Accessibility tool for quickly determining if a site meets WCAG 2.1 Level AA standards. This website scans your site and within seconds provides a violations count, shows the number of automated and guided tests run, and provides a health score as a percentage. Results are exported as an automated CSV file, allowing site owners to pinpoint where violations are occurring and tackle them. This is especially helpful when only a few violations remain and you need to whittle down the culprit code. This service also allows for free monitoring in a dashboard UI by creating an account on their site.
Level Access also offers Access Assistant, a reliable Chrome extension that is useful for quickly gaining insight into a web page’s potential accessibility violations. It is a particularly helpful tool for pinning down the most common, high risk occurrences and offers remedial guidance. The extension mentions tests can be saved into Level Access’ Accessibility Management Platform (AMP) for tracking compliance over time. AMP is a paid service, but Level Access does offer a demo for those interested.
There are several points to be aware of regarding all accessibility auditing tools currently available on the web. First, all scanning services are susceptible to showing false positives. This becomes apparent when testing out various services and identifying discrepancies between reports. Second, having a hard report on hand showing your site is partially compliant is much better than not having any evidence of compliance at all, even if several criteria items are not WCAG 2.1 Level AA compliant. Working with what’s available is a major part of a site owner’s due diligence for accomplishing long term goals regarding web accessibility compliance.
Contact Razorfrog For Web Accessibility Assistance
Thanks for reading our article regarding the fundamentals of web accessibility. We hope that it has helped introduce you to the ways in which you can readily make accessibility improvements on your website. This post has been a work in progress for years, and we wanted to share our journey regarding how we’ve approached and managed this complex topic for ourselves and those whom we serve. Our team recognizes the importance of accountability in our field, our responsibilities to our clients, and our commitment to a more accessible web for all users.
If translating the W3C’s WCAG criteria feels like cracking an unsolvable puzzle, it doesn’t have to be. Our team is here to help. For more information, or assistance with improving upon your site’s level of accessibility to meet the ADA’s requirements, please contact us and we’ll be happy to assist you.
