A presentation at #a11yTO Conf 2024 in in Toronto, ON, Canada by Hector Osborne Rodriguez
Dreaming of Accessible Development Hector Osborne Rodriguez a11yTO Conference
Warning I’ll be talking about my accessibility experience Img. description: A dog trying to assure himself that everything is fine, despite sitting in a room that is engulfed in flames
Slides https://bit.ly/dreaming-a11y-development Scan me!
Hola! Senior Manager - Accenture He / Him Accessibility Lead (a11y fixer) Pet Lover (cats & dogs) Knowledge collector Meme lover https://www.linkedin.com/in/hectorosbornerodriguez/
What is accessible development ?
Let’s start with what’s not • My website passes all automated tests Automated tools only cover XYZ% • Click here to fix all issues We have a button that can fix all your website issues, and we use artificial intelligence. • Conform to [acronym here] [acronym] is a minimum standard, not a comprehensive solution • Your responsibility* you’re part of a team / collective / group / organization Img. description: Drake saying no (meme)
Accessible development is The practice of creating websites and web applications that can be used by all individuals, especially those with disabilities. The goal is to ensure that content and functionality are accessible to people with various types of impairments. Img. description: Drake saying yes (meme)
A practice requires • • • • • • • • • • Leadership commitment Inclusive mindset & support Proactive accessibility in design & development Cross functional collaboration Tools, resources, and processes Continuous learning & training Metrics & KPIs Regular Tests with people with disabilities Accessible communication & customer support Empower employees with disabilities Img. description: Jackie Chan hands over head with WTF facial expression
Who is responsible for accessible development ?
1 a11y SME 300 Project Members multiple projects Team member Accessibility SME multiple countries
Team Members Accessibility SMEs Accessibility Other Skills
Sometimes it feels like me, and only me… Img. description: three Images from Netflix Series showing Pablo Escobar alone waiting for things to happen.
What I think works
What I think works • Get business support (reactive or proactive) • Shift left(er), up, down, right (reactive vs pro-active) • Learn by doing (training is great, doing is better) • Document (if you have learned something, document it!)
If requirements are not concise or clear, mistakes are inevitable
What I think works • Improve design intent annotations (communicate intent and usage) • Component Name / Structure (clear expectations / requirements) • Hidden Elements (how do you communicate what you can’t see) • Content Priority (Priority flow, heading order, focus order) Decorative image
What I think works • Keyboard interaction (ENTER, SPACE, ESC, TAB, … etc.) • ARIA requirements (I.E.: show / hide elements) • Special interactions (click here > this happens) • Dynamic Content (warning, error, success messages) Decorative image
Some examples (if time permits) if not… Thank you
Example 1: Clear Acceptance Criteria Img. Description: Accessibility acceptance criteria (AC) for an Accordion component, including description & AC Gherkin Format Img. Description: Accordion component anatomy description
Example 2: complex component interactions Img. Description: search bar component, with placeholder text: what are you looking for today? and a magnifier icon on the right
Example 2: complex component interactions Img. Description: detailed complex keyboard interaction for a Search Bar autocomplete component
Example 3: focus order / heading hierarchy Not only it indicates an order, but it also helps communicate design intent on user interaction (interactive elements). Img. Description: a card component with an image, a blue font text, a title, description text and a button
Example 3: focus order / heading hierarchy Not only it indicates an order, but it also helps communicate design intent on user interaction (interactive elements). 1 click on card (link) 2 click on country (link) 3 click on learn more (modal) Img. Description: HTML code example to represent the card on the left
Example 3: focus order / heading hierarchy Not only it indicates an order, but it also helps communicate design intent on user interaction (interactive elements). Error Error Missing alt text Missing alt text translation Skipping heading level Error Learn more not descriptive Nested links/buttons Img. Description: card code with highlighted accessibility errors
Thank you
This talk explores actionable strategies and best practices for achieving accessible development by outlining key wishes and effective annotation techniques for designers and developers to enhance collaboration and inclusivity in digital product creation.
for free. You
can too.