Live. Learn. Access. Designing for Accessibility

A presentation at Global Accessibility Awareness Day (GAAD) - Futurice in May 2018 in Munich, Germany by Núria Peña

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

Myth #2 “Accessible sites are ugly”

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

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…

Slide 8

Slide 8

Empathy enables us to design more kindly

Slide 9

Slide 9

Slide 10

Slide 10

Design Principles

Slide 11

Slide 11

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

Slide 12

Slide 12

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.

Slide 13

Slide 13

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

Slide 14

Slide 14

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” />

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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.

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

Target points

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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.

Slide 25

Slide 25

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

Slide 26

Slide 26

Live. Learn. Access Designing for Accessibility

Slide 27

Slide 27

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