booster 2017 - from accessibility n00b to pro in 1.5 hrs

FROM ACCESSIBILITY N00B TO PRO IN 1.5 HOURS

BOOSTER 2017

VEGARD HAUGSTVEDTITERA

«THE MAIN RULE IS THAT ALL IT-SOLUTIONS IN NORWAY MUST BE ACCESSIBLE. THIS INCLUDES BOTH WEBSITES, SELF-SERVICE MACHINES AND SIMILAR SYSTEMS. BOTH

PRIVATE AND PUBLIC BUSINESSES, TEAMS AND ORGANIZATIONS MUST FOLLOW THE RULES.»

– DIFI.NO

02.05.2023@IT_VEGARD / #BOOSTERA11Y

WCAG 2.0

• Principles

• Guidelines

• Success Criteria

• Techniques

/ 3


Core principals of accessibility – WCAG 2.0

• Perceivable

• Operable

• Understandable

• Robust

/ 4


1. Perceivable

1. Text alternatives

2. Time-based Media

3. Adaptable

4. Distinguishable

/ 5


2. Operable

1. Keyboard accessible

2. Enough time

3. Seizures

4. Navigable

/ 6


3. Understandable

1. Readable

2. Predictable

3. Input assistance

/ 7


4. Robust

1. Compatible

/ 8

WHO DO WE BUILD FOR?CONSEPT PHASE


«Why should we bother with accessibility? As far

as we know, none of our users are blind…» - Anonymous client

/ 10


Employment among people with significant vision loss

• 38.3% of disabled users of screen readers are

employed full-time*

• 73.4% of non-disabled users of screen readers are

employed full-time*

WebAIM Screen Reader User Survey #6 (2015)

/ 11


Who are your users?

General – the average user• Demographics• Job responsibilities and tasks• Frequency of use• Hardware• Environment• Computer experience• Web application experience• Task knowledge

/ 12


User group: Retirees

• Age: 57-96

• 60% male, 40% female

• Reduced vision

• Reduced motor skills

• … and so on

Data from HRWeb (US)

/ 13


Personas

Vegard Haugstvedt

29 years old

Developer

Red-green colour blind

Doesn’t leave home without his phone, and has a computer within reach

whether he is at work or at home. Loves new gadgets, and has a dream of

making his day-to-day life as automated as possible. He recently became a

father, and therefore frequently has to use mobiles and laptops with only one

hand while carrying his son. Uses his phone in bright daylight and while in dark

rooms at night.

/ 14


Who are your users?

Specific – «real» users

• Name

• Image

• Age

• Profession

• Personal traits

/ 15


TASK 1: PERSONAS

/ 16


Task 1: Personas

• Create a persona that incorporates accessibility concerns

• You should at least specify the following:– Nature of limitations– Special tools or assistive technology used– Experience and skills with the relevant tools and technologies– Frequency of use of relevant tools or assistive technologies

/ 17

DESIGNING FOR A BETTER WEB

DESIGN PHASE


Color contrasts

• Normal text: 4.5:1 contrast

• Large text: 3:1 contrast

• Be wary of text overlaying images

/ 19


Click areas

• Buttons

• Checkboxes

• Links (also inside texts)

• Make as large of an area as possible clickable

• Make it intuitive what area is clickable

/ 20


Text formatting

70/ 21


Sliders

• Inherently inaccurate

• Bad UX for touchscreens as well

• Use as an enhancement

– Provide alternative inputs

– Make the slider-button accessible for keyboard users

/ 22


Ease of navigation

• “Every click or interaction should take the user closer to their goal

while eliminating as much of the non-destination as possible.” *

• Make sure focus is clearly shown!

• Stop removing link underlining…

* http://grundyhome.com/blog/archives/2009/01/31/breaking-the-law-the-3-click-rule/

/ 23


TASK 2: DESIGN REVIEW

/ 24


Task 2: Design review

1. Have a look at http://nba.com/

2. Discuss the following with the person next to you

– Imagine how this page would be experienced if you could not see

3. Try navigating with a keyboard (using TAB)

– Do you feel confident on where you will be taken if you click enter?

4. How would you have solved this functionality in a more accessible way?

/ 25

http://nba.com/

SEMANTICS AND WAI-ARIA

DEVELOPMENT PHASE


HTML5 Landmarks and sectioning elements

• Main (main)• Section (region)• Header (banner)• Footer (contentinfo)• Nav (navigation)• Aside (complementary)• Form (form)

/ 27


HTML Headings

• H1, H2, H3, H4, H5, H6

• Provides structure to the page

• Allows the user to navigate quickly through the page

• How would your page would appear if you only heard the headings?

• Don’t use heading levels for styling purposes!

/ 28


Custom widgets vs. Native HTML elements?

• Always use the native HTML elements if there exists one.

• Avoid issues with browser compatibility, support for assistive technologies,

and so on.

/ 29


Images and videos

• Non-textual content

• Alt-attribute

• Beware of text over images

• … But do use them!

/ 30


Links and buttons

• Link- and button texts should be descriptive

• Links should visually differentiate themselves from regular text

– Underline and color

• Buttons should also respond to keyboard interactions

/ 31


Forms

• Avoid keyboard traps!

• Placeholders are not replacements for labels

• Make sure placeholders satisfy contrast requirements

/ 32


TASK 3: HTML5 SEMANTICS

/ 33


Task 3: HTML5 and screen readers

http://codepen.io/it-vegard/

1. Try «viewing» images with screen reader

2. Try navigating links with screen reader

What did you experience?

/ 34

http://codepen.io/it-vegard/

http://codepen.io/it-vegard/pen/ZeXZVB






http://codepen.io/it-vegard/pen/bqYxPX






WAI-ARIA

Version 1.0 was published in 2014

• Roles (describes type of widget or structure)

• State

• Live regions

• Drag-and-drop sources and targets

/ 35


WAI-ARIA roles

• Used to declare user interface elements

• Provides semantics for assistive technologies – how this element should be

handled

• Still needed even with HTML5

/ 36


WAI-ARIA state

• Used to communicate input states to assistive technologies

• Most of them are handled natively by the user agents

• Set values with JavaScript for custom elements

/ 37


WAI-ARIA live regions

• Used to define areas of the webpage that will change

• Informs screen readers whether and how to interrupt users with changes

• Auto-loading in comment fields, calculated values, conditional input elements,

etc

• ‘aria-live’ sets how often to alert the user of changes.

• ‘aria-controls’ associates a control with the region it controls.

• ‘role’ has some predefined live regions:

– log, status, alert, progressbar, marquee and timer

/ 38

AUTOMATIC VALIDATION AND USER TESTING

TEST PHASE


Ways of doing accessibility testing

• Browser validators

• Command line tools

• User testing

/ 40


Browser validators

• Chrome Developer Tools

• Ainspector (Firefox)

• WAVE

/ 41


Automated tools

/ 42


User testing

/ 43


TASK 5: ACCESSIBILITY VALIDATION

/ 44


Task 5: Accessibility validation

1. Download a browser accessibility testing tool for your browser:

– Chrome: Accessibility Developer Tools

– Firefox: Ainspector

– IE (or Chrome): WAVE Evaluation Tool

2. Try to validate your company’s website

– What did you find?

/ 45

https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

WHAT HAVE WE LEARNED?


Some useful resources

• Difi: https://uu.difi.no/ • Blindeforbundet: https://www.blindeforbundet.no/universell-utforming• WCAG quick-reference: https://www.w3.org/WAI/WCAG20/quickref/• Mozilla a11y resources:

https://developer.mozilla.org/en-US/docs/Web/Accessibility• Integrating a11y in design: http://www.uiaccess.com/accessucd/• Writing accessible HTML:

https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412

• WAI-ARIA: https://www.w3.org/TR/wai-aria/introduction• ARIA roles: http://www.informit.com/articles/article.aspx?p=2464970• W3C a11y tutorials: https://www.w3.org/WAI/tutorials/• Blindness statistics: https://nfb.org/blindness-statistics• WebAIM survey: http://webaim.org/projects/screenreadersurvey6/• NVDA keyboard shortcuts: http://webaim.org/resources/shortcuts/nvda

/ 47

https://uu.difi.no/

https://www.blindeforbundet.no/universell-utforming

https://www.w3.org/WAI/WCAG20/quickref/

https://developer.mozilla.org/en-US/docs/Web/Accessibility

http://www.uiaccess.com/accessucd/



https://www.w3.org/TR/wai-aria/introduction

http://www.informit.com/articles/article.aspx?p=2464970

https://www.w3.org/WAI/tutorials/

https://nfb.org/blindness-statistics

http://webaim.org/projects/screenreadersurvey6/

http://webaim.org/resources/shortcuts/nvda


THANK YOU FOR ATTENDING!

/ 48

booster 2017 - from accessibility n00b to pro in 1.5 hrs

Software