Accessibility of Common Web Applications

66
Accessibility Mostly on web apps Tomáš Muchka [email protected]

Transcript of Accessibility of Common Web Applications

Page 1: Accessibility of Common Web Applications

AccessibilityMostly on web apps

Tomáš [email protected]

Page 2: Accessibility of Common Web Applications

Accessibility is thinking about all kinds of people

Page 3: Accessibility of Common Web Applications

Blind people (0.5%)

Page 4: Accessibility of Common Web Applications

Blind people (0.5%)

Visual impairment (4.39%)

Page 5: Accessibility of Common Web Applications

Blind people (0.5%)

Visual impairment (4.39%) Color blindness (10%)

Page 6: Accessibility of Common Web Applications

All disabled people (15-20%)

Blind people (0.5%)

Visual impairment (4.39%) Color blindness (10%)

Page 7: Accessibility of Common Web Applications

How is it to be visually impaired?

Around 10 – 15% of all people

Page 8: Accessibility of Common Web Applications

Normal Vision

Page 9: Accessibility of Common Web Applications

Age related Macular degeneration

Page 10: Accessibility of Common Web Applications

Cataract

Page 11: Accessibility of Common Web Applications

Diabetic Retinopathy

Page 12: Accessibility of Common Web Applications

Glaucoma

Page 13: Accessibility of Common Web Applications

Normal Vision

Page 14: Accessibility of Common Web Applications

How do we feel colors?

Page 15: Accessibility of Common Web Applications

Normal Vision

Page 16: Accessibility of Common Web Applications

AchromatopsiaAround 0.1% of all people

Page 17: Accessibility of Common Web Applications

ProtanopiaAround 1% of all people

Page 18: Accessibility of Common Web Applications

DeuteranopiaAround 1.3% of all people

Page 19: Accessibility of Common Web Applications

TritanopiaAround 0.02% of all people

Page 20: Accessibility of Common Web Applications

How is it to have a motor impairment?

Up to 5% of all people

Page 21: Accessibility of Common Web Applications

Imagine there is no mouse

• You have at most keyboard to browse a web site.• You cannot reach non-interactive elements.• All clickable elements on the site are in a sequence.• You are dependent on focus representation of the actual element.

Page 22: Accessibility of Common Web Applications

What element is focused at the moment?

Page 23: Accessibility of Common Web Applications

Browser could help us a little bit.

Page 24: Accessibility of Common Web Applications

It was the Desktop category.

Page 25: Accessibility of Common Web Applications
Page 26: Accessibility of Common Web Applications

Tab through all the links in the left menu

Page 27: Accessibility of Common Web Applications

Tab through all the links in the left menu And all the interactive elements in the page body

Page 28: Accessibility of Common Web Applications
Page 29: Accessibility of Common Web Applications

Tabbing the elements with yellow borders in cycle. No chance to escape.

Page 30: Accessibility of Common Web Applications

Don‘t reinvent the wheel…

Page 31: Accessibility of Common Web Applications

Section 508, WCAG, Mandate 376

Page 32: Accessibility of Common Web Applications

What properties must have web content?

Page 33: Accessibility of Common Web Applications

Information and user interface components must be presentable to users in ways they can perceive

Web content must be

perceivable

Page 34: Accessibility of Common Web Applications

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

Text Alternatives

Perceivable

Page 35: Accessibility of Common Web Applications

Could you describe the buttons bellow?

Page 36: Accessibility of Common Web Applications

And now?Disabled person doesn‘t have this view!

Page 37: Accessibility of Common Web Applications

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

Adaptable Content

Perceivable

Page 38: Accessibility of Common Web Applications
Page 39: Accessibility of Common Web Applications

Make it easier for users to see and hear content including separating foreground from background.

Distinguishable

Perceivable

Page 40: Accessibility of Common Web Applications

Normal text size

Page 41: Accessibility of Common Web Applications

Text size scaled to 200%

Page 42: Accessibility of Common Web Applications

What you see when you don‘t have any disability

Page 43: Accessibility of Common Web Applications

What you see when you need a little accessibility help

Page 44: Accessibility of Common Web Applications

What you see when you have strong accessibility impairment

Page 45: Accessibility of Common Web Applications

User interface components and navigation must be operable

Web content must be operable

Page 46: Accessibility of Common Web Applications

Make all functionality available from a keyboard.

Keyboard Accessible

Operable

Page 47: Accessibility of Common Web Applications

Do you remember keyboard traps? That‘s when you cannot leave a limited area on the page.

Page 48: Accessibility of Common Web Applications

Provide users enough time to read and use content.

Enough Time

Operable

Page 49: Accessibility of Common Web Applications

For some people are real-time data difficult to read.

Page 50: Accessibility of Common Web Applications

Give them a chance to stop updating the content so they have enough time to read all the important values.

Page 51: Accessibility of Common Web Applications

Do not design content in a way that is known to cause seizures.

Seizures

Operable

Page 52: Accessibility of Common Web Applications

Sometimes it is on purpose, but don‘t do it in someones future work tool.

Page 53: Accessibility of Common Web Applications

Provide ways to help users navigate, find content, and determine where they are.

Navigable

Operable

Page 54: Accessibility of Common Web Applications
Page 55: Accessibility of Common Web Applications

Information and the operation of user interface must be understandable

Web content must be

understandable

Page 56: Accessibility of Common Web Applications

Make text content readable.

Readable

Understandable

Page 57: Accessibility of Common Web Applications

Make Web pages appear and operate in predictable ways.

Predictable

Understandable

Page 58: Accessibility of Common Web Applications

Help users avoid and correct mistakes.

Input Assistance

Understandable

Page 59: Accessibility of Common Web Applications
Page 60: Accessibility of Common Web Applications

Visit the page and try to find all accessibility violations.

Page 61: Accessibility of Common Web Applications

Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

Web content must be

robust

Page 62: Accessibility of Common Web Applications
Page 63: Accessibility of Common Web Applications

Try your creations

http://www.elsa.cvut.cz/ http://carolina.mff.cuni.cz/

Page 64: Accessibility of Common Web Applications

Think Accessible!

http://www.w3.org/TR/WCAG20/

Page 66: Accessibility of Common Web Applications

How blind people use smart phone?