Summary

1. Why an accessible website?
2. Main WCAG principles
3. Main a11y themes
4. ARIA
5. Just do it!

Summary

1. Why an accessible website ?
2. Main WCAG principles
3. Main a11y themes
4. Just do it!

Why an accessible website?

1. Win the best frontend code award
2. Get an official validation
3. Do our annual good deed for these poor disabled people

Why an accessible website?

1. Win the best frontend code award
2. Get an official validation
3. Do our annual good deed for these poor disabled people

Or perhaps a little bit, but mainly...

We work for real people

Ben

... returns from mountain holidays. He sprained his wrist. Moving the mouse is difficult for him and using the trackpad is worse.

What can we do for him?

Joe

Like 10 % of men, he is color blind. It is difficult for him to see certain color differences.

What can we do for him?

Këtty

... starts developing presbyopia. At the end of the day, the characters of the website she usually visit become too small for her.

What can we do for her?

Bob

... is a software developer. He is born blind and has learned how to use a screen reader.

What can we do for him?

Maxi

... works in an open space. She has muted the sound of her computer to avoid disturbing her colleagues but she would like to see this video.

What can we do for her?

Jemp

... got a child a few weeks ago. He is tired and it is difficult for him to focus.

What can we do for him?

Jupp

... codes everywhere, even on his mobile phone. He reads lots of documentation. To avoid spending all his data plan, he disabled images and JavaScript in his Web browser.

What can we do for him?

Source: http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it

Disability

Disability is the consequence of an impairment that may be physical, cognitive, mental, sensory, emotional, developmental, or some combination of these that result in restrictions on an individual's ability to participate in what is considered "normal" in their everyday society. A disability may be present from birth, or occur during a person's lifetime.

-- Wikipedia

Accessibility is

to enable everyone to use our websites:

• regardless of their disabilities, even temporary, their skills or their navigation context.
• and/or using particular software/hardware: braille display, screen reader, zoom, pointing devices, etc.

Disabled people in your audience

Source: http://www.interactiveaccessibility.com/accessibility-statistics

In Europe

• 10-15% of the population is disabled
• Strong correlation between disability & ageing

Sources: http://ec.europa.eu/ipg/standards/accessibility/index_en.htm

http://accessibleicon.org/

≃

IANAL, but...

not accessible

=

discrimination on disability

In the US, lots of class actions

In Luxembourg, no class action, yet...

Standards

• WCAG2 (WAI / W3C)
• In Luxembourg: Renow

1. Why an accessible website ?
2. Main WCAG principles
3. Main a11y themes
4. ARIA
5. Just do it!

Principle 1: perceptible

Information and UI components should be shown to users in a way that enable users to perceive them.

Perceptible

• Propose text alternatives to all non-textual content
• Propose alternatives to temporal media
• Help visual and auditory perception of the content by users, by differentiating foreground and background.

Principle 2: Usable

The UI components should be usable.

Usable

• Every action should be doable with the keyboard
• Users should have enough time to read and use the content
• Avoid creating content that can trigger seizures
• Provide to users guidance to navigate, find content and find their way in the website.

Principle 3: Understandable

Informations and usage of the UI should be understandable.

Understandable

• Textual content should be readable and understandable
• Pages should appear and behave in a predictable way
• Help users to avoid and fix input errors

Principle 4: Reliable

• Content should be strong enough to be interpreted reliably by a large set of user agents, including assistive technologies.

Reliable

• Optimise compatibility with current and future user agents, including assistive technologies.

1. Why an accessible website ?
2. Main WCAG principles
3. Main a11y themes
4. ARIA
5. Just do it!

13 themes

8. Mandatory elements

9. Information structure

10. Information presentation

11. Forms

12. Navigation

13. Explicit User control

1. Images
2. Frames
3. Colors
4. Multimedia
5. Tables
6. Links
7. Scripts

1. Images

Provide a short textual alternative adapted to the context (link, decoration, information)

-> Jobs: front-end dev, writer

2. Frames

Provide to each frame (iframe) a relevant title

-> Jobs: front-end dev, writer

3. Colors

Information should not be given only by color

Check that color contrasts are sufficient

-> Jobs: designer, front-end dev

4. Multimedia

Each media (temporal or non-temporal) should be compatible with assistive technologies

-> Jobs: front-end dev

5. Tables

Tables should only be used for tabular data!

One should be able to associate each cell with the respective headers

-> Jobs: front-end dev

6. Links

Each link should be explicit

Example: this is a link vs this is a link

-> Jobs: designer, writer

7. Scripts

Dynamic behaviors (JS) should be controllable by keyboard & mouse

-> Jobs: front-end dev

8. Mandatory elements

Each web page should have a relevant title.

Example: Search "untitled document" on Google

-> Jobs: front-end dev, writer

9. Information structure

Each web page should use the following elements: <header>, <nav>, <main>, <footer>

-> Jobs: front-end dev

10. Information presentation

The web page should be readable when stylesheets are disabled.

-> Jobs: front-end dev

11. Forms

Each form field should have a label (for/id) with an unique id in the page

-> Jobs: front-end dev

12. Navigation

The menu (or the main navigation element) should be at the same place on each page.

-> Jobs: usability expert, designer

13. Explicit user control

The user should be warned when opening a new window (title of the link)

-> Jobs: designer, developer, writer

Let's play!

One random website...

• Why an accessible website ?
• Main WCAG principles
• Main a11y themes
• ARIA
• Just do it!

Problems

• How to give an overview of the basic structure of the current page? How to let the user know where the navigation is? where the search is? where the content is?
• How to let the user know when some dynamic content has been updated?
• How to add the required semantics on top of non-semantic html? especially for complex dynamic components.

ARIA = Accessible Rich Internet Applications

• Roles
• Properties
• States

WAI-ARIA basics @ MDN

Roles

• Defines what an element does
• role="banner", role="navigation", role="complementary", role="contentInfo", role="search", ...
• Some HTML5 elements have a role associated by default, ex: <nav>, <aside>, ...

Properties

• Add extra meaning to elements
• Ex: aria-required="true", aria-labelledby="desc"

States

• Like properties but their value usually change during the lifecycle of your app
• Ex: aria-disabled="true"

ARIA Landmarks

• Move quickly to one specific part of the page
• With (semantics + label)
• Semantics: role={banner, main, complementary, contentInfo, ...}
• Label: aria-label or aria-labelledby + <hn>

ARIA Landmarks examples @ W3C

HTML 5 and ARIA Landmarks @ Deque University

ARIA design patterns

If a JavaScript-based component matches an ARIA design pattern, it should conform to this design pattern.

-> W3C Design patterns WAI-ARIA

Inclusive patterns by Heydon Pickering
Adobe megamenu improved by Terrill Thompson

1. Why an accessible website ?
2. Main WCAG principles
3. Main a11y themes
4. ARIA
5. Just do it!

Just do it!

• Add a persona with a disability
• Add a disability situation in the user stories
• Plan control points in the dev workflow
• Update your definition of "Done"
• Automate some tests 
• Pair-programming
• A common UI component repository
• Have a referent (tech. watch, internal or external contact point)

On the dev. side...

5 reflexes to acquire

• Always use suitable tags (ex: button)
• Always add the alt attribute to img tags
• Link each form element to its label with for and id attributes
• Add a lang attribute to the html tag
• Display by default, hide with JavaScript

4 tests before pushing

• Browse the page with your keyboard
• Change the size of characters
• Disable stylesheets
• Validate HTML

Browser extensions & bookmarklets

• WCAG Contrast Checker.
• HeadingsMap.
• AXe Developer Tools.
• Fangs.
• Diagnostic.css
• Tota11y
• Lighthouse!