[piano music]
[onscreen text] There is a market larger than China that doesn’t have proper digital access.
Who are these people? And what keeps them from having seamless web experiences?
[upbeat music]
[onscreen text] Well, say hello!
Web accessibility for people with disabilities is more than a need– It is a must.
Everybody deserves to be included in the worldwide web.
[Toni Leon, UX Designer, Merkle US] We can’t leave people out of this because it will block people out of access to jobs and education and several other resources. So making digital products in the 21st century accessible is a necessity.
[upbeat music]
[onscreen text] In the UK alone, businesses lose about 2 billion pounds a month by ignoring the needs of disabled people.
In 2022, up to 100 digital accessibility lawsuits were filed per week in the US.
Over the last five years, almost 80% of the top 500 ecommerce websites received a lawsuit.
We have been facing an internal lack of accessibility expertise at dentsu, resulting in digital products that don’t meet the standards. But the solution is on the way.
[Dragan Sujak, CX & Commerce Consultant, Merkle Serbia] In Merkle and also at dentsu level, there was a gap in the knowledge framework, and to address these needs and to tackle all the upcoming accessibility requests, we have formed this group. In the beginning there were just a few of us, but today we are a big group spread all over the world.
[onscreen text] We are all allys.
[Carrie Jackson-Ardila, UX Designer, Merkle US] At dentsu, we are known as the allies. And this is also a name that the larger community online gives itself to those focused on improving accessibility across the web in a collaborative manner. So when you think about the word “accessibility,” it starts with an “A,” ends with a “Y,” and has 11 letters in between. So that’s where we get A11Y and also the word ally. We are all allies in creating a better, more accessible world.
[onscreen text] A11y logo. An international initiative to ensure accessibility of all our digital products.
[piano music]
[onscreen text] We are educating and standardizing accessibility organization-wide for fully inclusive projects. Prioritizing accessibility in our products helps businesses save costs and improve their brand.
Herbalife, a nutritional food company, is achieving digital accessibility adherence with our assistance. Annotations illustrate to the team how to code for an optimal screen read experience. The annotation process that we create for Herbalife is the future standard for other projects at dentsu. Projects like this are just the beginning.
[onscreen text] Introducing a framework for inclusive projects.
[Valentina Tarantini, CX & Commerce Consultant, Merkle Switzerland] In web building, accessibility is often limited to design and front-end development, but this is a limited view. Accessibility needs to be at the core of our projects since the beginning. This is why we are building a framework that includes all the disciplines of a project, to make sure that we create products that are as accessible as possible to as many people as possible.
[piano music]
[onscreen text] We are preparing accessibility sales packages to deepen our offerings to clients like never before. For accessible digital products, we train colleagues and encourage radical collaboration via live sessions and an internal microsite. No other agency is focusing on accessibility like we are, making us a unique leader in digital experiences.
[Nina Rosa Jaeschke, Senior Experience Consultant, Merkle Switzerland] If you want to make something possible you will find a way. In this topic also regarding accessibility. If you don’t, you find excuses and we shouldn’t do that as a company.
[onscreen text] Why is this initiative important to our members?
[Aurore Gisclon, Senior Adobe Solutions Consultant, Merkle Switzerland] I came into this inititative with very little knowledge of what accessibility was and why it was important. And I could say that all my teammates and the leaders of this initiative taught me so much since the beginning.
[onscreen text] Let’s use the power of human centered design.
[Akemi Mitsueda, UX Designer, Digital Code Brasil] For me the core of design is reminding or shifting the mindset of everyone around us that people are the center of everything we do. And that our choices and decisions impact them and should be taken into consideration in everything we do. It’s all about humans.
[uplifting music]
[onscreen text] Let’s be an inspiration and invite everyone to the never before.
Everyone.
[onscreen text] A11y logo.
The dentsu A11y Accessibility initiative is an international effort to clarify and standardize digital accessibility across our organization, positively impacting projects from conception to delivery. Our goal is to ensure accessibility on all digital products that we build and sell.
Program Management/UX
September 2021 – September 2023
Case Study: Ensuring Digital Accessibility
The Challenge
Our mission has been to create an international accessibility program at dentsu.
Dentsu has a very fragmented approach to accessibility in general, and so far accessibility has been implemented in an ad-hoc manner, dependent on the client’s desire for it and the team’s accessibility knowledge. Increasingly, clients are requesting digital products that meet American Disabilities Act (ADA) requirements. With lawsuits rising, we want to protect our clients and ourselves from legal risk and must adapt to ensure compliance of the digital products we sell. This shift at dentsu requires training, processes, and a business model to sell accessibility. As an internal SME team, the A11y team has been advancing internal accessibility knowledge and supporting internal DEI strategic planning.
The A11y program holds a competitive advantage for our clients and dentsu. Inclusive design is a cost-saving model and a profit-builder. The cost of non-compliance is three times higher than that of compliance. When a company prioritizes accessibility, they are exposed to a larger potential market – 1 in 4 people suffer from a disability in the US, 1 billion people globally. Currently, we are the only digital marketing agency focusing on accessibility, so we will lead fearlessly.
Insight and Strategy
Digital accessibility lawsuits are increasing in industries we serve at dentsu, especially e-commerce. According to Hub Spot, there were 4061 lawsuits in 2022 (nearly doubled from 2018), with as many as 100 lawsuits filed per week. This is why our clients express interest in meeting accessibility requirements. However, at dentsu there has never been a framework to sell or intake digital accessibility projects properly. The A11y group is changing that completely. We are creating estimation and pricing structures, and providing resources on a microsite to help our teammates do accessible work from the start.
The A11y team’s efforts improve the digital user experience for everyone. As an experience agency, the human element is at the heart of everything we do. A person using assistive technology on an inaccessible website may experience annoyance, frustration, and confusion. More seriously, a user’s failure to successfully navigate a poor experience can result in service interruption, fees, and wasted time. When accessibility is a barrier to interacting successfully with essential services or on a repeated basis, the harm has lasting and systemic impacts. To get an accurate sense of their experience, we’ll be sourcing disabled test users, while continuing to learn the screen reader ourselves.
Execution / Solution / Innovation
The dentsu A11y project is an active international collaboration between colleagues of several different practice areas and service lines. Our inclusive group has been working on defining different roles on a digital project, the accessibility responsibilities for each role, and how we can best be partners for our colleagues. It’s everyone’s responsibility on a project to deliver compliant work, and the A11y group is building the process from the ground up. We are building an internal microsite to host materials, education, and resources, in order to train our colleagues quickly and efficiently. With training, colleagues will be equipped with the skills necessary to build fully accessible digital products.
Every accessible website that we produce will eventually set the standard in our industry. Someday it will simply no longer be acceptable, or the norm, to have an inoperable website for assistive technology users. The demand for accessible rebuilds and remediations will only increase, just as the lawsuit frequency doesn’t seem to be slowing down. Accessibility laws recently being passed and movement on accessibility guideline updates indicate that the demand for our services could be so high, that it would require a dedicated branch at dentsu.
Result / Business Effect
Members of the A11y group are already working on digital accessibility projects. An accessibility review was performed for a client in early 2022, in which we evaluated over ten websites against success criteria through automated, manual, and screen reader testing. The deliverables included the results, data interpretation, actionable reports, checklists, and a playbook detailing how typical issues are fixed. We realized that dentsu colleagues could benefit from our resources and discovered that there were similar accessibility-focused groups within dentsu. That’s when we became unified and unstoppable.
This year we’ve been developing a process for accessibility annotations on a large-scale project with a global client. Annotations are an important tool to help designers and developers communicate and collaborate about how assistive tech should present information, and it’s being key to the overall process.
The dentsu A11ys are transforming both society and business. Accessible websites give users independence that many of us take for granted, while providing a better user experience for everyone. We are also delivering a more robust product to clients. According to the W3C, accessible websites have better search rankings, reduced maintenance costs, increased audience reach, and more. For dentsu, ensuring our work is accessible champions diversity and inclusion.
Testimonial
“They taught me so much since the beginning”
Awards
The A11y Accessibility Initiative received a special mention at dentsu’s Northstar Awards in the dentsu Transformation category. There were over 600 entries, and our work stood out as “inspirational, delivering growth through good and pushing the boundaries of the never before.”
Client work
Accessibility review #1
Introduction
By reviewing the client’s sites and identifying issues that may not comply with standards for assistive technologies, we were able to develop a plan for correction, with the goal of the client ultimately achieving WCAG 2.1 AA compliance for their websites. The findings and recommendations are provided in this report.
Of the 14 pharamaceutical sites, half are meant to be viewed by health care professionals, while the other half are meant to be viewed by current or future patients facing various cancers. Knowing this, accessibility is particularly relevant because people in treatment for cancer are very likely to be experiencing a variety of challenging side effects, including depression, anxiety, fatigue, pain, headache, eye problems, and more. Accessibility best practices such as no flashing content, general ease of use and readability, color contrast, and large targets are particularly important to follow. Assistive methods such as zooming in a browser, reader view, and even the use of a screen reader are ways in which a patient under medical care can more easily use these websites.
Website review process
We reviewed the client’s 14 websites were reviewed against Web Content Accessibility Guidelines (WCAG) 2.1 with an AA criteria for adherence, which is considered the standard for most websites.
Automated scan
Each site was initially scanned by an automated tool that provides a first look at warnings, passes, and fails for the given ruleset.
The automated tool was able to generate detailed reports for each of the websites. Each bug was also exported into an Excel file as an individual line. That spreadsheet would be able to import into Jira as individual tickets, with prioritiy assigned and details given, in order for a developer to take on each task for remediation.
The automated site scan revealed that the most common errors among the 14 sites were:
- 1.1.1 Non-text Content (Level A)
- 1.3.1 Info and Relationships (Level A)
- 1.4.3 Contrast (Minimum) (Level AA)
- 2.4.2 Page Titled (Level A)
- 2.4.4 Link Purpose (in Context) (Level A)
- 2.4.6 Headings and Labels (Level AA)
- 3.1.1 Language of Page (Level A)
- 4.1.1 Parsing (Level A)
- 4.1.2 Name, Role, Value (Level A)
Manual review
This is supplemented with a manual review for select guidelines, in which the researcher inspects website code, tests the usability of the site with screenreader software, and uses other tools to determine warning, pass, or fail.
Most frequent errors found from manual analysis were:
- 1.3.2 Meaningful Sequence (Level A)
- 2.1.1 Keyboard (Level A)
- 2.4.7 Focus Visible (Level AA)
- 4.1.1 Parsing (Level A)
- Name, Role, Value (Level A)
Most common color analysis errors were:
- 1.4.1 Use of Color (Level A)
- 1.4.3 Contrast (Minimum) (Level AA) – 11 of 14 sites failed
- 1.4.4 Resize Text (Level AA)
Contrast issues are common for text vs. background, and hyperlink text vs. body text.
Text resizing issues usually occur with indication trays taking up too much space at 200% zoom. Trays also frequently contain low contrast text.
Most screenreader severe and frequent errors were:
- 1.1.1 Non-text Content (Level A)
- 1.3.1 Info and Relationships (Level A)
- 1.3.2 Meaningful Sequence (Level A)
- 2.1.1 Keyboard (Level A)
- 2.4.3 Focus Order (Level A)
Code is non-semantic, and lack of page structure causes lack of landmarks and elements to be skipped or ignored by a screenreader.
Lack of headings means screenreaders lack helpful and necessary shortcuts to navigate content.
The manual scan revealed issues that we would consider consistent with the automated scan.
From the W3C scan (Guideline 4.1.1 Parsing [Level A]), the errors affecting ADA adherence most were:
- a lack of section headings and alt tags for images
- HTML errors
- misuse of ARIA tags
- additionally, sites had CSS and metadata errors.
Conclusion
We concluded from our findings that each website reviewed fails WCAG 2.1 AA. All sites also fail Level A.
When prioritizing which websites to fix, there are two approaches:
- Tackle websites with high severity and low complexity first (low hanging fruit) OR
- Tackle websites with high severity and possibly higher legal risks first
To remediate a site:
- Export issues as dev tickets and assign
- Prioritize global elements (header, footer, cookie bar, ISI tray, etc), then make fixes to each page individually
- Prioritize Level A errors to fix, then AA
- Then perform screenreader testing, then additional fixes if not resolved, repeat
To maintain:
- Use a paid accessibility tool that watches for website updates and flags new issues as website updates happen
- Train website collaborators (writers, designers, developers) in accessibility resposnsibilites according to their role
Although we can comply with some useful Level AAA guidelines, we won’t actually get Level AAA adherence across the whole website. Level AAA websites are rare because of a few guidelines that rule out a large number of websites.
One approach is to aim for Level AA plus all Level AAA guidelines you can reasonably meet. If you wanted to achieve AAA compliance, all Level A and AA requirements must be met first anyways.
A few AAA guidelines achievable with impact:
- 1.2.8 – Media Alternative (Pre-recorded)
- 1.4.6 – Contrast (Enhanced)
- 1.4.7 – Low or no Background Audio
- 1.4.8 – Visual Presentation
- 1.4.9 – Images of Text (No Exception)
- 2.2.3 – No Timing
- 2.3.2 – Three flashes
- 2.4.8 – Location
- 2.4.9 – Link Purpose (Link Only)
- 3.2.5 – Change on Request
- 3.3.5 – Help
- 3.3.6 – Error Prevention (All)
Annotation procedure
I created an annotation procedure in order for designers to properly hand off their screens to developers. It is meant to keep the guesswork out of the structure, invisible content, and keyboard interactions for each page.
This procedure was developed during a large ecommerce project for a global health foods company, including localized sites for over 93 countries.
It’s important to remember that disability is underreported in the US, and even moreso in other countries.
