dentsu a11y

A11y = Accessibility Ally

I am a passionate UX/UI designer with a strong focus on accessibility, driven by my lived experiences and commitment to inclusive design for marginalized communities. Over the past two years, I have deepened my expertise in accessibility, ensuring digital products and services are barrier-free for people with disabilities. I am proficient in accessibility guidelines such as WCAG 2.2 and am currently preparing for the CPACC certification with Deque's Full Curriculum. I also have experience auditing; utilizing both manual checks and automated tools like UsableNet AQA, WAVE & Lighthouse to ensure compliance with WCAG (Web Content Accessibility Guidelines).

Toni volunteers for AccessU

Toni León wearing an AccessU volunteer badge and taking a mirror selfie at Umlauf Sculpture Gardens

My passion for accessible design led to my volunteer work which includes participating in Knowbility's AccessU conference and their Accessible Internet Rally (A.I.R.), where I created accessible UX/UI designs for a non-profit.

Toni Volunteers for dentsu's Disability BRG

A peek at 3 of Toni's company-wide accessibility presentations, covering a range of topics including "Legal Risks" and "Accessibility for Designers"

I am a co-lead of dentsu's Disability Business Resource Group (BRG) as the accessibility lead. I research and prepare presentations for general non-designer audiences on how to improve accessibility company-wide. And I collaborate with dentsu's DEI team to make internal changes such as improving the disability accommodation process for employees.

Toni co-founded and volunteers as an a11y

Toni León at the dentsu A11y Guild meeting in Budapest after winning the Merkle Dream Grant to workshop with each other in person.

I also co-lead dentsu’s A11y (Accessibility) Guild which I co-founded. This is an intercontinental collaboration between designers, developers and project managers. Our efforts have received support from company leadership, together we have created sales packages to formally integrate accessibility into client projects.

Toni's a11y Initiative Wins

A11y Accessibility Initiative Special Mention during dentsu Northstar Awards for the "dentsu transformation" category.

dentsu A11y initiative received a special mention in the "dentsu transformation" category at dentsu's internal Northstar Awards, out of 600+ submissions. And we were also the recipients of the internal Merkle Dream Grant, which allowed our intercontinental team of volunteers to finally meet in Budapest and workshop a roadmap to continue enabling accessibility.

Client-Winning Resources

Merkle Accessibility Checklists; including pages recommendations, for organizations, for designers, and for content

dentsu a11y has won client accounts based on our accessibility expertise, mainly in EU as they have incoming legislation but also Subaru in North America. Our team of allies was also in charge of researching and acquiring a partnership with a 3rd party auditor, we ended up selecting SiteImprove. And for use on client projects I created design checklists and an accessibility annotation system.

Annotation System

General annotation component system to document copy, changelog, differing states and variants, and other miscellaneous context such as display rules and interactions.

Design annotations are useful as a reference during the design process.
Annotations help designers keep track of changes via notes providing context regarding design choices; variants, interactions, constraints, motion, etc. Annotations are incredibly useful during handoff from the design team to the development team or the client.
Accessibility annotations help ensure that accessibility is thought through and integrated from the very beginning which is more time effective than having to work backwards later on in the process.

This work was based off of annotations originally designed by another designer which I redesigned and expanded upon, including adding completely new annotations for accessibility.

Find the Figma Community file here.

Accessibility in Action

Pharma Accessibility Audit

Pharma accessibility audit captured in Microsoft Excel. Example of accessibility bug identification and organization.

This project was my introductory deep-dive into accessibility. I worked side by side with another designer for two months to manually audit every single page of 14 different websites owned by one of our Pharmaceutical clients.

We narrowed down WCAG success criteria to those that needed manual checks for us to audit and we used an automated accessibility checker, UsableNet AQA, to assist us with the remaining guidelines.

Momentive Accessibility Documented

Overview of a variety of accessibility work done for Momentive: Involving focus order, skip to main content links & color contrast.

For Momentive we had to design the entire responsive website in two months so we were very crunched on time but I was still able to squeeze in some accessibility annotations.

• For certain components that might have confusing focus order I made sure to annotate the focus order which would deliver the best experience to Screen Reader users. 

• I ensured a skip to header link above the main navigation bar. 

• I clarified which color combinations were contrast compliant. 

• I provided documentation on how the content author should use the opacity filters I created on uploaded images depending on their lightness in comparison to the text

National Accessibility Implementation

National mobile app, some screens showcasing accessibility thought by ensuring single tap access and accessible use of color.

As an accessibility user experience designer, I am highly skilled in analyzing user needs and developing solutions that meet those needs while also adhering accessibility best practices beyond WCAG.
For National mobile app I collaborated with the client to reach compromises several times after much iterating in order to design the app as accessible as I could. 
Some highlights from my work on the app include:

• Ensuring that all complex touch operations such as dragging can be completed by simple individual taps.

• Ensuring that minimum tap target sizes were met.

• Ensuring that color was not used alone as an indicator.

• Ensuring that links are underlined or have another indicator to identify them as such.

• Creating color rules to ensure accessible contrast going forward.

National Accessibility Implementation

Examples from Enterprise app accessibility iOS VoiceOver audit. Video recordings are accompanied by severity level, notes, and recommendation.

During the Exploration phase, before rebuilding the Enterprise mobile app, I audited the existing app to find gaps in their accessibility compliance. 
I have experience with Mac VoiceOver but this moment is when I decided to learn how to use iOS VoiceOver which was a very eye-opening experience. 
While auditing the app: 

• I screen recorded accessibility issues that I came across.

• I ranked them by severity alongside notes

• I gave a recommendation along with an example of a site or app that does it well. 

• I categorized them by accessibility issue: “Semantics”, “Alt-Text”, "Focus Order", “Nonexistent Focus”, “Functionality”, and “Miscellaneous"

Fiesta for the Mind Color System Accessibility

Some final Fiesta for The Mind screenshots showing the execution of the colorful pattern and some bold colorful components

I volunteered for Knowbility's Accessible Internet Rally (A.I.R.) where we were placed in teams and were paired up with a non-profit to make their website accessible. My team, Am11gos, was paired up with Fiesta for the Mind which hosts educational events in San Antonio.

I was the UX/UI designer for our team and I was very excited to practice a lot of what I had been learning in regard to accessibility, including creating accessible color systems & accessible components.

Fiesta for the Mind Color System which required several tools for us to create a system where any color 5 steps away would be compatible.

We were delighted by FFTM’s existing palette but knew that in order to use it in an accessible way, we needed to craft an accessible brand color system. 

• We create 10 different shades for every color being equally spaced out so that every color shade at the same level is replaceable with any other color at the same level. 

• Every 5 shades away the colors can be combined and will be accessible.

• We were inspired by the IBM Color System
  “The IBM palette is comprised of twelve color grades—Black, White and ten values for each hue. When determining contrast ratios, it’s useful to assess how many color grades or “steps” are between the foreground and background colors.”

Other things I did for Fiesta for The Mind: Sitemap, Information Architecture , Taxonomy. running workshops with clients, pitching my work, Logo design iterations and refinement.

Tools Used:

• Axe developer tools

• Lighthouse

• WAVE accessibility test

• Genome Color Tool

• Figma Contrast plugin