Executive Summary
Web accessibility is no longer just a compliance issue; it's a strategic business opportunity. This article highlights how a project team transformed a client's website to meet high accessibility standards, resulting in significant competitive advantage and user experience improvements.
Key Points:
- Accessibility affects a large portion of users: 8.5% of the global population is colorblind, 26% of US adults have some disability, and 20% of Americans have dyslexia.
- Legal landscape: ADA, Section 508, WCAG, and AODA provide regulatory frameworks for digital accessibility.
- Conformance vs. Compliance: While not legally mandated, conforming to WCAG guidelines (levels A, AA, AAA) demonstrates best practices and can help meet legal obligations.
- Implementation Strategy:
- Utilized tools like Axe DevTools, WAVE, and BrowserStack for testing
- Adopted a component-based approach, reducing 138 pages to 8 template pages
- Achieved high accessibility scores (95-96 out of 100) on key pages
- Competitive Advantage: The client's website significantly outperformed competitors in accessibility scores.
- Ongoing Commitment: Accessibility requires continuous effort and maintenance.
- Business Impact: Improved accessibility expands market reach, enhances user experience, and positions the company as an industry leader in inclusive design.
By prioritizing web accessibility, businesses can tap into a wider audience, mitigate legal risks, and demonstrate a commitment to inclusive digital experiences, ultimately driving innovation and customer loyalty.
Web Accessibility: a Wake Up Call to Be Inclusive
As a Program Manager, one of the most rewarding aspects of my job is taking a high-level requirement and transforming it into a tangible, impactful deliverable. Clearing impediments along the way and fast tracking the solution is a skill I believe every Program Manager should continuously hone.
I want to share our recent journey towards making our client website truly accessible – a challenge that helped us appreciate the needs of the wider audience using our website.
The outcome of this journey is far bigger than simply enabling accessibility, it is a widening of perspectives on what it means to be truly inclusive.
The Backdrop
Since November 2023 we have been on a mission to revamp the website of our client for a global audience. By March 2024, we went live with the first phase of the website which delivered the full functionality that was critical for the transition. We worked on performance to improve the page load time to under 3 seconds and were sitting pretty that we achieved industry leading performance.
The Catalyst
On July 13th, we received a formal requirement from the client. Their legal team had reached out asking for a confirmation that the eFax site is ‘accessible’.
This was our call to action – our team was charged to dive deep into the world of web accessibility.
Understanding Accessibility
Importance of Accessibility
Accessibility is a critical consideration in digital strategy for two primary reasons:
1. User-Centric Aspect of Accessibility
There are four statistical facts that are important to note
- Approximately 8.5% of our population worldwide are color blind.
- In the US, 26% of adults have some type of disability.
- 2.3% of adults have a visual disability.
- 1 in 5 Americans has dyslexia.
Given these statistics, web accessibility is non-negotiable for website development.
Here are a few examples of how accessibility manifests itself in website readability
- Visual Impairment (Full and Partial Blindness): Full blindness means complete loss of vision, where users rely entirely on screen readers and tactile interfaces to navigate digital content. Screen readers convert text to audio or Braille, but poorly structured websites can render this experience fragmented and frustrating.
- Partial blindness presents unique challenges - users might see blurry shapes, have limited peripheral vision, or distinguish only high-contrast elements. Websites with low color contrast, small text, or complex layouts become nearly impossible to navigate, forcing users to strain or use assistive technologies.
- Color Blindness: Important alerts or status indicators on websites might blend together. Error messages in red can look identical to green "success" notifications, making it difficult to distinguish between different types of information at a glance.
- Dyslexia: Walls of text on webpages can feel like complex codes to decipher. Words might appear to jump around or blur together, challenging the reader to follow the content's flow or grasp key information.
- Low Vision: Websites with small font sizes or low contrast text can be as challenging as reading a book in dim light. Users often find themselves squinting or moving closer to the screen just to make out the content.
- Hearing Impairments: Video tutorials or important announcements lacking captions or transcripts can leave deaf or hard-of-hearing individuals feeling excluded, unable to fully engage with the content.
- Motor Disabilities: Websites with tiny buttons or closely-packed links transform simple navigation into a frustrating challenge. It becomes akin to tapping a specific key on a miniature keyboard, where precision becomes a major hurdle.
- Cognitive Disabilities: Complex website layouts or inconsistent navigation can overwhelm users, resembling a confusing maze without a map. Finding specific information or remembering navigational paths becomes a significant struggle.
In Universal Design, there is something called the Curb Cut effect. Basically things intended to benefit people with disabilities wind up benefiting everyone.
Source: Aging 2.0 , “With, Not For” Designing Innovations in Aging through Empathy Mapping and Inclusive Design Teams
Here are a few real-life examples of the Curb Cut effect:
- Curb Cuts themselves: Originally designed for wheelchair users, these sloped areas where a sidewalk meets the street are now used by people with strollers, travelers with wheeled luggage, delivery workers with hand trucks, and cyclists.
- Closed Captions: Initially created for deaf and hard of hearing viewers, closed captions are now widely used by:
- People watching videos in noisy environments
- Those learning a new language
- Viewers who prefer to watch content with the sound off
- People trying to catch dialogue in content with heavy accents or complex terminology
- Voice-to-Text Technology: Developed primarily for people with mobility or visual impairments, it's now used by:
- Busy professionals for quick note-taking
- Drivers for hands-free texting
- Writers experiencing writer's block who prefer to dictate their thoughts
- Audiobooks: Originally created for visually impaired individuals, audiobooks are now enjoyed by:
- Commuters
- Multitaskers who listen while doing chores
- People who prefer auditory learning
- Touch-screen technology: Initially developed to help people with mobility impairments use computers, touch screens are now ubiquitous in smartphones, tablets, and many other devices used by the general population.
2. Legal and Regulatory Landscape:
Here are the four main regulatory frameworks related to web accessibility in the United States:
- ADA (Americans with Disabilities Act)
- Section 508 of the Rehabilitation Act
- WCAG (Web Content Accessibility Guidelines)
- AODA (Accessibility for Ontarians with Disabilities Act)
It's worth noting that while WCAG is not a law, it's often used as a technical standard for compliance with ADA and Section 508. Also, AODA is specific to Ontario, Canada, but it's often considered in US accessibility discussions due to its comprehensive nature and potential influence on future US regulations.
Here are some significant website accessibility cases from the recent years:
- Domino's Pizza v. Robles (2019-2022): This case involved a blind man, Guillermo Robles, who sued Domino's because he couldn't order food on their website using his screen-reader software. The case went to the Supreme Court, which declined to hear Domino's appeal in 2019. In 2022, Domino's settled the lawsuit, agreeing to make its website and mobile app accessible to screen readers.
- National Federation of the Blind v. Walmart Stores, Inc. (2019): Walmart settled a class action lawsuit alleging that its website was not fully accessible to blind and visually impaired users. The company agreed to make significant improvements to its website and mobile applications.
- Gil v. Winn-Dixie Stores, Inc. (2017-2021): This case involved a visually impaired man who sued Winn-Dixie because its website was incompatible with his screen-reader software. Initially, a federal judge ruled in favor of the plaintiff, but this decision was later overturned by the 11th Circuit Court of Appeals in 2021.
Conformance vs Compliance
There are established guidelines that govern digital accessibility.
It was very interesting when our client requested us for an Accessibility Conformance Report (ACR) as an ask from the company’s legal team. That got us thinking!
Is it conformance or compliance? It turns out that there is a world of difference between the two. The distinction between compliance and conformance in this context:
- Compliance refers to adherence to legally binding requirements.
- Conformance relates to following recommended guidelines that, while not legally mandated, represent best practices in the industry.
While there isn’t an official body that provides web accessibility certification, companies can demonstrate their commitment to being accessible by filling a Voluntary Product Accessibility Template or the VPAT.
What is a VPAT?
A VPAT(Voluntary Product Accessibility Template - please download the latest version from here) is a key tool for evaluating the level of accessibility of a digital product or service. It serves as the primary method for evaluating how a digital product or service adheres to accessibility standards, particularly in line with the Americans with Disabilities Act (ADA) and Section 508 of the Rehabilitation Act, plus standards in the EU and internationally.
It was originally used by US government agencies and institutions that take federal dollars, such as higher ed, to evaluate the level of accessibility and 508 compliance with the Web Content Accessibility Guidelines (WCAG). The commercial space has since adopted its use as a way to demonstrate ADA compliance in the US.
Over the years, its utility has broadened for other applications internationally. It has also adapted to updates to the WCAG.
VPAT & ACR Process
Before an organization authors a VPAT, it is important to perform a comprehensive audit to base the VPAT on. Once the VPAT is completed, the resulting Accessibility Conformance Report (ACR) is what is provided as evidence of the product’s level of WCAG compliance.
The latest version of the Voluntary Product Accessibility Template (VPAT) is 2.5, which was released in September 2023. It's aligned with WCAG 2.2 and is available in four editions.
In the context of website accessibility, the ACR is filled for VPAT 2.5 WCAG Edition. If one is involved in public procurements and services in Europe,the ACR is based on VPAT 2.5 Rev EU: EN 301 549.
Levels of Conformance
In the context of web accessibility, conformance typically refers to meeting the Web Content Accessibility Guidelines (WCAG) at a specific level (A, AA, or AAA - Each of these levels A, AA and AA are defined as success criteria in the VPAT). These guidelines are not legally mandated but are widely accepted standards.
It's important to note that while conformance to WCAG is voluntary, it is often used as a benchmark for compliance with various accessibility laws. Organizations may aim for WCAG conformance as a way to demonstrate their commitment to accessibility and to potentially meet legal obligations. However, the specific legal requirements for accessibility can vary by jurisdiction and industry sector.
Terms Used to Measure Conformance Levels
The terms used in the Conformance Level information are defined as follows:
- Supports: The functionality of the product has at least one method that meets the criterion without known defects or meets with equivalent facilitation.
- Partially Supports: Some functionality of the product does not meet the criterion.
- Does Not Support: The majority of product functionality does not meet the criterion.
- Not Applicable: The criterion is not relevant to the product.
- Not Evaluated: The product has not been evaluated against the criterion. This can only be used in WCAG Level AAA criteria..
The CodeWalnut Strategy
We leveraged Google's PageSpeed Insights to perform an initial quantitative analysis of web accessibility standards.
It was surprising to see that Page Speed Insights gave us a perfect Accessibility score of 100, while the Wave tool threw many basic accessibility issues like tabbing sequences were broken.
The lesson learnt was that PageSpeed Insights was not a reliable source of accessibility related conformance and began to look beyond for answers.
It was important to look at different tools available to measure accessibility effectively.
After research we narrowed down our list to Axe DevTools, WAVE Tool, Website Accessibility Checker, and BrowserStack.
While each of the above options had its strengths and limitations, accessibility conformance requires a combination of automated testing and manual review would be necessary.
The Action Plan
By July 19th, we had downloaded our first accessibility report from BrowserStack. The team did a deep dive into the VPAT and decided to consult with vendors for expert guidance.
We set clear objectives:
- Understand the WCAG success criteria
- Perform a thorough review of our website
- Provide clear recommendations for fixing issues
- Ensure full conformance with all accessibility standards
Our approach to test and fix accessibility on the eFax website was a two pronged approach. We first examined priority pages which were
- Homepage
- Pricing Page
- Product page
Should We Test 138 Pages One by One or is There a Better Way?
We had 138 pages to check and create an ACR for.
Going page by page seemed like a monumental task. This is when my team put on their thinking hats and came up with a great approach.
Tackling the website at a component level instead of page level?
That was interesting. I wanted to know more!
All the website pages are built by 58 reusable components (ACF blocks).
Then I asked the team whether each page had these 58 blocks and how this could be dealt with.
The team came up with a clever strategy of having 8 unique templates which were a mix and match of these 58 blocks. Once these 8 templates were made accessible, it would amount to the entire website becoming accessible.
The scope of work was reduced from 138 pages to 8 pages!
This is a useful take away while dealing with multiple pages in the website - to tackle accessibility at a component level!
Tools and Techniques
As we progressed, we refined our toolkit. By the end of July, we had settled on using three primary tools:
We carefully selected these tools after thorough research. We consulted G2 Crowd, Capterra, and Google ratings to identify the top performers in the field.
These tools stood out for several reasons:
- Consistently high ratings: They're well-regarded in the accessibility testing community.
- Detailed insights: They clearly pinpoint areas that need improvement on your website.
- Practical advice: Each tool provides specific steps to address the issues it identifies.
- User impact focus: They explain who benefits from each suggested fix, helping prioritize changes.
The Action Plan
On August 2nd, we formulated a concrete plan of action:
- Build 8 template pages
- Test and record accessibility bugs (Bugherd tickets)
- Fix issues in the Dev environment
- Recheck accessibility scores
The Execution
We presented our approach during one of our client calls on August 6th.
Our strategy involved testing the website using our chosen tools, then fixing errors page by page and block by block.
We estimated it would take about 20 working days to fix the accessibility errors on our priority pages – Homepage, How-to Pages, and Pricing pages. This was a total of 2 sprints of 2 weeks each.
Our approach to test and fix accessibility on the eFax website was two-pronged:
- We first examined priority pages: Homepage, Pricing Page, and Product page.
- After creating an ACR report for these pages, we tackled the rest of the website through a component based approach.
To improve accessibility we introduced several tools :
- Creating a helper function to automatically add role tags to headings.
- Implementing code to auto-pick alt text for images using their title if there's no alt text.
- Optimizing image SrcSet for better performance and accessibility.
- Using semantic HTML to ensure a clear structure and better support for assistive technologies.
The Final Push and Results
By August 16th, we kicked off a sprint to create Accessibility Conformance Reports (ACRs) for our priority pages, with a deadline of August 20th. We set an ambitious goal to have ACRs for the rest of the website by September 30th.
Our efforts paid off handsomely. By September 10th, 2024, we had completed a comprehensive accessibility assessment of our key pages and compared our performance against competitors. The results were impressive:
- Our homepage scored 96 out of 100 on the accessibility scale
- Our pricing page and product page scored 96 and 95 respectively
- Even our PMT page achieved a strong score of 93
Compared to our competitors, iFax.com and fax.plus, whose homepages scored 50 and 59 respectively, we emerged as the clear leader in accessibility within our industry.
Milestone: VP of Marketing declared in the executive leadership meeting that their website is the industry leader in Accessibility & Performance and that was a big achievement from the team.
Challenges Overcome
Some technical challenges you might find useful:
- Navigation menu, managed by a third-party plugin called "JetMenu," had certain accessibility limitations.
- Icons- In the Jet Menu there are some icons which work as a button but haven’t been given any role attribute to it and this causes an accessibility issue.
- Semantic Tags- In Jet Menu, there are some places where semantic tags havent been used which also causes a lowering of accessibility score.
- Tab- On Tab key press, due to non-semantic tags, inability to move through the complete navigation causes accessibility concerns.
- Rating section, generated by another third-party script, posed issues on the accessibility front.
- The section is from a script given by Apple Store and Play Store. In these scripts, the elements provided have some images, numbers for which no semantic tags or particular elements or attributes have been provided.
We addressed these issues creatively, using JavaScript to add necessary attributes, always balancing accessibility improvements with performance considerations. We have also created our own version of the Jet Menu to make the eFax pages a hundred percent accessible.
Lessons Learned
This journey taught us several valuable lessons:
- Accessibility is not a one-time fix but an ongoing commitment.
- A combination of automated tools and manual testing is crucial.
- Addressing accessibility at the template level can simplify timelines.
- Clear communication with stakeholders is essential when prioritizing accessibility work.
- Sometimes, third-party tools can hinder accessibility efforts, requiring creative solutions.
“We have the ability to create experiences that are situationally appropriate and environmentally aware. It is a new era of adaptive experiences”
-Kelly Goto, Gotomedia
If you are a Website Development Manager looking to win accessibility for your website, here are some pointers to approach this:
- Discover the intensity of accessibility errors in your system using these three tools : Accessibe, BrowserStack, and WAVE Chrome extension.
- Prioritize your top three traffic pages and address accessibility errors on them one by one.
- Adopt a component-based approach. Work towards certifying every competent by creating templates using a combination of them.
- Train your team on Create Accessibility Conformance Reports (ACRs) reporting.
- Address issues: Fix accessibility errors in the development environment.
- Plan for ongoing maintenance: Treat accessibility as a continuous commitment.
If you are a legal stakeholder looking for assurance that the website is truly accessible and not exposed to legal risks from an accessibility standpoint, this is what you can do
- Ask for an accessibility audit from your team
- Ask for ACR from your team
Here are eight first level self checks you can do
- Zoom test: Use Ctrl++ (or Cmd++ on Mac) to increase screen size. Check if the layout remains usable.
- Keyboard navigation: Use the Tab key to move through the site. Ensure all elements are accessible.
- Color contrast: Check if text is easily readable against its background.
- Images: Right-click on images and select "Inspect" to verify the presence of alt text.
- Video content: Check for the presence of captions on videos.
- Screen reader: Turn on your device's built-in screen reader and navigate the site. Listen for clear and logical reading of content.
- Forms: Try filling out forms using only the keyboard.
- Responsive design: Resize the browser window to check usability on different screen sizes.
Looking Forward
By prioritizing inclusivity in your digital offerings, you're not just keeping pace with the times; you're positioning yourself as a true industry leader. This commitment to accessibility sets you apart, demonstrating a deep understanding of your entire user base.
By championing inclusive design, you're not just adapting to the world—you're reshaping it.
And that’s a goal worth pursuing
For more interesting insights on cracking problems as a program manager, visit my LinkedIn profile
