Modern web development and accessibilityChristina PapadimitriouNadia Markadoni11-04-2017

“Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to, websites by people with disabilities.”

2

3

Key issues

• how users with disabilities access electronic information

• how designers and developers enable web pages to function with assistive devices used by individuals with disabilities

4

Disabilities

• Visual• Auditory• Physical• Speech• Cognitive• Neurological• Aging-related conditions

5

Facts and figures

• Disability affects 15-20% of every country's population.

• There are at least 650 million people with disabilities worldwide.

• 285 million people worldwide are estimated to be visually impaired.

6

Assistive technologies

• Screen readers (JAWS, VoiceOver, NVDA, etc)

• Screen magnifiers (ZoomText, MAGic, etc)

• Speech to Text• Text to Speech• Braille

Screen reader demo

8

How screen readers are used

• All textual content is auto-played

• Navigation using keys

• Utilizing screen reader’s reserved keystrokes

• Rich configuration possibilities

9

Keyboard navigation

“Users that can not or do not use a mouse to navigate need the same level of access as those who use a mouse.”

10

WCAG: Web Content Accessibility Guidelines

WCAG 2.0 Principles•Perceivable - content can be detected

•Operable - content can be manipulated

•Understandable - content can be understood

•Robust - content adheres to standards

A AA AAA

11

WAI-ARIA

• WAI: Web Accessibility Initiative

• ARIA: Accessible Rich Internet Applications suiteIt defines a way to make Web content and Web applications more

accessible to people with disabilities. It especially helps with dynamic

content and advanced user interface controls developed with Ajax,

HTML, JavaScript, and related technologies

Let’s jump into coding

13

The “button” example

• Non accessible<div on-click="click()"></div>

• Accessible<button type="button" on-click="click()"></button> OR<div role="button" on-click="click()"></div>

14

The “tabs” example

• Non accessiblebootstrap tabs example

• WCAG guidelines for tabs • Accessible

e.g.: Circuit enhancement on ui-bootstrap tabs

15

ARIA attributes

• Role attribute: button, link, checkbox, radio, tab, tabpanel, tooltip, dialog, etc

• Attributes for states: aria-hidden, aria-disabled, aria-checked, aria-readonly, aria-expanded, aria-label ...

• Other attributes: aria-live, aria-describedby, aria-labelledby, ...

16

How to start making accessible projects

Utilize properly• semantic elements:

<header>, <footer>, <section>, <aside>, <nav>, ...• headings: <h1>, <h2>, ...• html elements: <button>, <input>, <a>, …

Why do so?

17

Quick tips

• Provide meaningful alt text in <img><img src="athens.png" alt="City of Athens">

• Include <label> for each form element<label for="search">Search</label><input type="text" id="search" value="Search">

18

Quick tips

• Appropriate link labels

<a href="http://www.thisisathens.org/">Click here</a>

<a href="http://www.thisisathens.org/">Visit Athens</a>

19

tabindex

Relates to keyboard navigation

• tabindex="0"element is placed in the default tab order

• tabindex="-1"element can receive focus,but not placed in tab order

• tabindex=">0"element is placed in specific order

20

Bypass block

The "skip navigation" idea was invented to give screen reader and keyboard users the same capability of going directly to the main content that sighted mouse users take for granted.

https://www.canada.ca/en.html

21

Visually hidden elements

<label for="search" class="visually-hidden">Search</label><input type="text" id="search" value="Search"/>

.visually-hidden { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}

22

Focus

• Focus is the equivalent to “hover” state for keyboard users

• Focus should be “visible”

23

Focus

“The use of outline:none has a major effect upon all keyboard only users regardless of visual impairment.”

24

Pixelation

Problem: When magnified, some images lose definition and become illegible. This is most often true with images of text.

Solution: Scalable images. SVG support

500% its normal size

25

Color contrast

• Text to be readable or other elements to be distinguishable they need to have sufficient contrast with the background

• Anything indicated by color needs to have a secondary way for it to be distinguishedfor example it is no good saying “use the green button if you agree or the red button if you don’t” by itself

26

Tone of Voice for Screen readers

• Brief, descriptive, unique, meaningful• Utilize aria-label attribute• Localization• FAQ

27

Tools

• Chrome extensions ChromeVox, Chrome Accessibility Tools

• Bookmarkletshttp://pauljadam.com/bookmarklets/https://accessibility-bookmarklets.org/install.html http://ffoodd.github.io/a11y.css/

28

Our challenges

• Adapt a product for accessibility• Make bootstrap components accessible• Resolve navigation traps• Design impacts (visualize focus, color contrast, etc)• Automation testing for accessibility

29

Things to consider

• If the frameworks/technologies you use provide build-in accessibility support

• Design thinking with accessibility in mind• Usability tests with people with disabilities

→ And remember that it’s not a one time job ;)

30

References

https://www.w3.org/TR/WCAG20/https://www.w3.org/TR/wai-aria/http://tink.uk/ https://accessibility.blog.gov.uk/ http://webaim.org/techniques/keyboard/

Any question…?

Christina Papadimitriouhttps://www.linkedin.com/in/christinapapadimitriou/ @christinapap

Nadia Markadonihttps://www.linkedin.com/in/nmarkadoni/ @nanmark