THE PRINCIPLES OF WEB ACCESSIBILITY
It can be difficult to keep up with the most recent web accessibility guidelines. Fortunately, we’re here to assist you in staying on top of them. Significant legislative changes have recently made web accessibility a top priority for website owners. We believe that this shift is beneficial to our industry and take pride in the fact that our content is accessible to people of all abilities. However, as businesses and individuals figure out how to work with more people with disabilities, there has been some confusion.
A record number of businesses contacted us in search of web accessibility assistance. We assisted them in meeting the World Wide Web Consortium’s WCAG (Web Content Accessibility Guidelines) standards. We believe in continuous quality improvement and have done so through education, resolving major issues, and generally making things better internally.
A website’s accessibility is never guaranteed, but there are some things you can do to improve your chances. The use of an AI writer can significantly reduce the amount of time spent on writing. If you invest in a good copywriter, you can offset this cost by reducing the number of hours they must spend on customer support. Other things your team should consider are streamlining your post-production process and investing in tools that enable consistent design patterns. Making accessibility improvements to your website is analogous to performing home maintenance. Keep things updated and pay attention to the small details, as they can have a big impact.
The guidelines for accessibility are based on WCAG 2.1 and cover three categories: content, design, and performance.
The current web accessibility requirements are the WCAG 2.1 guidelines, which have three levels of compliance: Level A, Level AA, and Level AAA. Each level has progressively more difficult requirements to meet, with all criteria having to be met in order for the level to be considered fully compliant. Level AA has been widely regarded as the best practice for website accessibility, and we believe that this is what courts are requiring as the bare minimum of compliance.
The WCAG 2.2 working draft is now available and is expected to be finished by June 2022. To get a head start on these upcoming changes, our team has integrated the newly introduced criteria into our auditing process.
BEST PRACTICES FOR COMPLYING WITH THE WCAG REQUIREMENTS
Herozite has created our own auditing process to ensure that a website complies with WCAG 2.1 compliance requirements. This entails creating a comprehensive spreadsheet and checking off all criteria items related to each individual compliance level. Unfortunately, there is no “official” document available for web folks to track each individual criteria item, so we were forced to create our own and encourage others to do the same.
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” were our primary sources for developing this checklist.
We also recommend that you read the following additional resources to better understand the WCAG 2.1 guidelines:
“Welcome, WCAG 2.1!” says Knowbility. The Web Content Accessibility Guidelines are being revised.”
“The New Guidelines in WCAG 2.1 Explained” – Prototypr.io
WHAT SHOULD I PRIORITIZE WHEN IT COMES TO WEBSITE ACCESSIBILITY?
STYLING CENTER
Using CSS to enable focus styling for links is one of the most visible changes you can make to make your site more ADA friendly. This entails adding an outline of the focus state of links, which is especially important for users who use keyboards to navigate a website by tabbing between links. There are several ways to accomplish this, but we recommend reading Smashing Magazine’s “A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors” and using the:focus-visible pseudo-class selector. This is an especially useful solution because it allows the user to see the outline only when tabbing between links, rather than when manually clicking on a link. Previously, you could use the universal selector with the outline property as follows::focus outline: 1px solid #333; Thankfully, the introduction of focus-visible has rendered this practice obsolete.
NAVIGATION WITH THE KEYBOARD
Following that, we recommend making all content only accessible via the keyboard. In this manner, a user should be able to access all content on a page, including all links. This is one of the most important components of a site’s accessibility. Test your site to identify areas where the keyboard may “trap” the user and find solutions. Make sure that tabbing is enabled in your browser’s accessibility settings. To ensure that your browser’s accessibility settings allow for tabbing, see “Enabling Keyboard Navigation in Mac OS X Web Browsers.” If you’re using Windows as your operating system, the procedure should be similar.
LEVELS OF CONTRAST
Content must also be legible for users with low vision or colorblindness. This is achieved by maintaining specific contrast ratios for text against backgrounds. The following contrast ratios are specified in WCAG 2.1 Level AA:
The contrast ratio of active interface components (e.g., buttons) and non-text content (e.g., infographics) must be at least 3:1.
The text-to-background contrast ratio must be at least 4.5:1.
Any of the following free resources are recommended for this purpose:
Contraste App – only for Mac
Color Contrast Checker Polypane
Color blindness simulator apps can also be used to test the contrast of text against backgrounds. This allows you to put yourself in the shoes of a visually impaired user. Color Oracle, a free app available for Mac, Windows, and Linux, and Colorblindly, a popular Chrome extension, are both recommended.
CLICKING ON LINKS IN THE SAME TAB
While it may appear to be counterintuitive, it is preferable to open all links in the same tab rather than in new tabs. This was first mentioned in WebDevStudio’s article “Web Design and Development Myths: 2019 Edition.” The reasoning behind this is that opening links in new tabs removes control and increases bounce rates. It is actually more difficult for a visually impaired user to return to their previous location if a link opens in a new tab. Additionally, the ability to quickly navigate backwards, rather than having to jump between tabs or even apps, is critical for accessibility. While many people may dismiss this as insignificant, users can easily open a link in a new tab if they prefer.
When possible, we recommend opening links in the same tab. However, we recognize that there are times when this is not always possible. At the very least, we recommend that people open footer links in the same tab. These links are less visible on a typical website but are frequently used.
PAGE OF ACCESSIBILITY POLICY
Finally, we recommend that you include an accessibility policy page on your site that is linked from the footer. Implementing a publicly stated, measurable goal for your site’s accessibility promotes accountability and moves the needle forward for all users with varying abilities. We recommend using the W3C’s Accessibility Statement Generator as well as reading Sheri Byrne-article Haber’s “Deconstructing Accessibility Statements,” which offers some additional suggestions for your policy.
AVOID ALL THIRD-PARTY “SOLUTIONS”
It may be tempting to rush to a web accessibility overlay product to help resolve a website’s most obvious accessibility issues. These are new technologies that are marketed as “solutions” to these problems. They typically use third-party source code (usually JavaScript) to improve the front-end. We are adamant about avoiding overlays at all costs.
A blind plaintiff sued Eyebobs, an online glasses company, in January 2021 for failing to meet accessibility requirements. Eyebobs was using an accessibility overlay as duct tape to fix underlying accessibility issues on their website. According to the lawsuit settlement, accessibility overlays are not a valid substitute for a genuine and plausible accessibility strategy. We invite you to read more about the Eyebobs lawsuit settlement article and the stipulations that resulted from it on UX Collective.
We strongly advise against using sites like UserWay, Equal Web, and any third-party plugins that use floating toolbars to change site styling. These services promote overlays as a dependable web accessibility solution while failing to meet their end goal of doing the right thing for their users.
For a treasure trove of reasons to avoid accessibility overlays, please visit overlayfactsheet.com.
AUDITING TOOLS FOR YOUR WEBSITE
Not all accessibility auditing tools are deemed inadequate. The good ones can be hard to come by. We especially like Level Access’ Web Accessibility tool for quickly determining whether a site complies with WCAG 2.1 Level AA standards. This website scans your site and provides a count of violations, the number of automated and guided tests run, and a health score as a percentage in seconds. The results are exported as an automated CSV file, allowing site owners to pinpoint and address violations. This is especially useful when there are only a few violations left and you need to narrow down the culprit code. By creating an account on their website, you can also get free monitoring in a dashboard UI.
Level Access also provides Access Assistant, a dependable Chrome extension useful for quickly identifying potential accessibility violations on a web page. It is a particularly useful tool for identifying the most common, high-risk occurrences and providing remedial advice. Tests can be saved into Level Access Accessibility Management Platform (AMP) for tracking compliance over time, according to the extension. Although AMP is a paid service, Level Access does provide a demo for those who are interested.
There are several things to keep in mind when using any of the accessibility auditing tools that are currently available on the internet. To begin, all scanning services are prone to producing false positives. This is evident when experimenting with various services and identifying discrepancies between reports. Second, even if several criteria items are not WCAG 2.1 Level AA compliant, having a hard report showing your site is partially compliant is preferable to having no evidence of compliance at all. Working with what is available is an important part of a site owner’s due diligence for achieving long-term web accessibility compliance goals.
FOR WEB ACCESSIBILITY ASSISTANCE, CONTACT HEROZITE.
Thank you for taking the time to read our article on the fundamentals of web accessibility. We hope it has introduced you to some of the simple ways you can improve the accessibility of your website. This post has been in the works for years, and we wanted to share our journey in approaching and managing this complex topic for ourselves and those we serve. Our team understands the value of accountability in our field, our responsibilities to our clients, and our commitment to making the web more accessible to all users.
If translating the W3C’s WCAG criteria seems like an impossible task, it doesn’t have to be! Our team is here to assist you. Please contact us if you require any additional information or assistance in making your site ADA compliant.
