Dreaming of Accessible Development

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