Accessibility of Common Web Applications

Post on 14-Apr-2017

223 views 0 download

Transcript of Accessibility of Common Web Applications

AccessibilityMostly on web apps

Tomáš Muchkatomas.muchka@hpe.com

Accessibility is thinking about all kinds of people

Blind people (0.5%)

Blind people (0.5%)

Visual impairment (4.39%)

Blind people (0.5%)

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

All disabled people (15-20%)

Blind people (0.5%)

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

How is it to be visually impaired?

Around 10 – 15% of all people

Normal Vision

Age related Macular degeneration

Cataract

Diabetic Retinopathy

Glaucoma

Normal Vision

How do we feel colors?

Normal Vision

AchromatopsiaAround 0.1% of all people

ProtanopiaAround 1% of all people

DeuteranopiaAround 1.3% of all people

TritanopiaAround 0.02% of all people

How is it to have a motor impairment?

Up to 5% of all people

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.

What element is focused at the moment?

Browser could help us a little bit.

It was the Desktop category.

Tab through all the links in the left menu

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

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

Don‘t reinvent the wheel…

Section 508, WCAG, Mandate 376

What properties must have web content?

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

Web content must be

perceivable

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

Text Alternatives

Perceivable

Could you describe the buttons bellow?

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

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

Adaptable Content

Perceivable

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

Distinguishable

Perceivable

Normal text size

Text size scaled to 200%

What you see when you don‘t have any disability

What you see when you need a little accessibility help

What you see when you have strong accessibility impairment

User interface components and navigation must be operable

Web content must be operable

Make all functionality available from a keyboard.

Keyboard Accessible

Operable

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

Provide users enough time to read and use content.

Enough Time

Operable

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

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

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

Seizures

Operable

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

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

Navigable

Operable

Information and the operation of user interface must be understandable

Web content must be

understandable

Make text content readable.

Readable

Understandable

Make Web pages appear and operate in predictable ways.

Predictable

Understandable

Help users avoid and correct mistakes.

Input Assistance

Understandable

Visit the page and try to find all accessibility violations.

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

Try your creations

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

Think Accessible!

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

How blind people use smart phone?