Live. Learn. Access. Designing for Accessibility

Live. Learn. Access Designing for Accessibility Núria Peña Interaction Designer at Holidu @nuriapenya

IA IXD DESIGN VISUAL DESIGN WIREFRAMES PROTOTYPING USER RESEARCH USABILITY TESTING ACCESSIBILITY ?

Myth #1 “Accessibility is time-consuming and hard to implement” = Usability for all

Myth #2 “Accessible sites are ugly”

Myth #3 “Accessibility is for edge cases” 1,000,000,000 +

Accessibility is about designing for everybody, not the few. Anyone, Anywhere, Anytime.

A11y Newbie A11y Pro Developing Personas Look around you Test with people with impairments Experiment yourself Accessibility as part of the process What can I do? Empathy Free online resources: Videos, tutorials, guides, testimonials…

Empathy enables us to design more kindly

Design Principles

Text Clarity DON’T People with visual impairments, might find small fonts with low contrast very difficult to read and can create fatigue DO + Ensure big font + Use colour and weight to create hierarchy instead of size + Make sure contrast radio passes min. standards

Colour Cues DON’T Not everyone perceives colours in the same way. DO + Never rely on colour only + Support system feedback with icons or, preferable, text.

Colour blindness is one of the most common vision deficiencies. It affects about 4.5% of the world’s entire population

Images & Descriptions Screen reader users should have the same amount of information as someone viewing the image. + Provide meaningful alternative text for images <img src=“rain_cloudy.png” alt=“Scattered Showers” />

Lack of Captions Non-existing captions can completely exclude users who are deaf or hard of hearing. But it affects many others as well. + Cognitive impairments + Someone who forgot the headphones + Quiet place

Motion & Animation Motion and animation can be annoying to anyone, but is extra frustrating for people with vestibular disorders: + Heavy motion can cause dizziness, vertigo or nausea + Carousels and ads might distract users from completing a task. + Avoid videos or motion to start automatically

Cognitive Overload Cluttered and distracting interfaces can derail users from accomplishing their tasks. + Clear path to achieve a goal without obstacles + Less options, faster decision-making

Wall of text Large blocks of text with long sentences can cause pain and fatigue, especially for people with cognitive impairments. + Break up big chunks of text into multiple paragraphs or bulleted lists + Left-aligned text rather than centered or justified. + Short paragraphs, adequate use of headings and subheadings, and ample empty space.

It is estimated that between 5-10% of the population has dyslexia, but this number can also be as high as 17%.

Keyboard-focused Some users navigate the internet using the keyboard rather than the mouse. + All functions can be accessed with keyboard. + Use a clear focus outline + Place key information “above the fold” + Give users enough time to perform their tasks

Target points

Target points For people with motor and dexterity impairments, some buttons and links are too small to touch. + Add enough space between the different objects + Simplify common interactions

By applying those design principles we are not only improving the experience to people with impairments but to everyone.

Final thoughts • Accessibility is just a better design for everyone. • Empathy will enable us to design more kindly. • Consider these design principles to improve accessibility in digital products.

“ ” “The power of the web is in its universality” — Tim Berners-Lee Inventor of the World Wide Web.

Live. Learn. Access Designing for Accessibility

Questions? Núria Peña Interaction Designer at Holidu @nuriapenya