building a better, accessible web

Building a better,accessible web

About Me

Matt Stow@stowball

Senior UX Engineer at TOTVS Labs

We should be able to access the web

regardless of the software we use,

the computer we have, the language

we speak and regardless of our

sensory or interaction modes

w3.org/standards/

https://www.w3.org/standards/

StatisticsAround 40% (6.8 million) of Australians aged 18+have a disability or long-term health condition 53% of people aged 65+ report to having someform of disability

Australian Human Rights Commission

http://www.humanrights.gov.au/face-facts-disability-rights

People with disability is the only minority

group that anyone can join at any time

Australian Network on Disability

http://www.and.org.au/

#PlotTwist

Equal Access isRequired by Law

websites whose development commences after July 1 2010should comply with WCAG 2.0 to a minimum of AA-Level

Section 2.2 of the Disability Discrimination Act

Section 4.2 of the Disability Discrimination Act

http://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014#requiredhttp://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014#transition

Types of disabilities

Hearing impairments Cognitive & learning disabilities Mobility & physical impairments Vision disabilities

Hearing impairments

Whos affected?People with full or partial hearing loss

Quick winsProvide captions and/or transcripts for audio and video

Non-native speakers also benefit

Cognitive & learning disabilities

Whos affected?People with ADD, autism, dementia, dyslexia and more

Quick winsAvoid justified text and ALL CAPS; use sans-serif fonts

Simplify the language used and reduce the amount of text

Reduce the complexity of the UIs appearance and functions

Use Invisible Animation

https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5#.4hgbvsc8l

Mobility & physical impairments

Whos affected?People with limited dexterity or upper limb disabilities

Quick winsMouse hover actions

Ensure a sensible tabbing order

Visible focus states for all interactive elements

need to be forgiving

https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

Vision disabilities

Whos affected?

Quick wins

People with colour blindness

People with low or no vision

Ensure text alternatives for images & visually absent text

Ensure your palette has a suitable colour contrast ratio

(for low or no vision)

Colour blindness

Deuteranopia (red-green)

Protanopia (another red-green)

Tritanopia (blue-yellow)

Up to 10% of the population may be affected

You cant rely on colour aloneto convey information

(red-green)

(another red-green)

(blue-yellow)

The State of Front-End Tooling 2016 - Results

https://www.ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results

Simulating Deuteranopia

Simulating Protanopia

Trello Labels have a color blind friendly mode!

Simulating colour blindness

Photoshops Proof Setup

cross-platform app

Chrome extension

Sass mixin

Color Oracle

NoCoffee Vision Simulator

AcceCSS

All have slightly different features and results,and are useful at different times in the process

http://colororacle.org/https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddlhttp://lukyvj.github.io/accecss

Colour contrast ratio

Text ratio needs to be 3 4.5:1 depending on size

But don't make the ratio too high!

Test with aremycolorsaccessible.com

http://www.aremycolorsaccessible.com/

Tools used by the vision impaired

Screen magnifiers and browser zoom

1. Windows2. Mac and iOS3. Chrome on desktop4. Android

Screen readers such as JAWS , NVDA , VoiceOver ,Windows-Eyes , ChromeVox and TalkBack

1 1 2

1 3 4

Screen reader statistics

85% of users primarily use Windows

49% of those use screen readers with IE

69% use screen readers on mobile

70% of those use iOS as their mobile platform

WebAim Screen Reader User Survey #6 Results

http://webaim.org/projects/screenreadersurvey6

Screen reader features

Quick access to landmarks, headings, lists and links

Shortcuts for navigating to, and using form controls

Connect to Braille displays

and a lot more

I highly recommend doing the VoiceOver Trainingcourse that's built in to macOS to learn more

How to build for #a11y

1. Follow the Web Content Accessibility Guidelines (WCAG)

2. Use semantic HTML (and understand the impact of CSS)

3. Implement WAI-ARIA (often with JavaScript)

#

Mattstows hierarchy of #a11y*

* Terrible pun

What is WCAG 2.0?

A W3C standard which recommends how to make webcontent more accessible to people with disabilities

It's generic, so doesnt dictate technology choices

Divided in to 12 major guidelines across 4 core principles

Each sub-guideline has a conformance rating from AAAA

WCAG at a glance

Principle 1: Perceivable

Provide text alternatives for non-text content

Provide captions/alternatives for multimedia

w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle1

Create content that can be presented in different wayswithout losing meaning

Make it easier for users to see and hear content

https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle1

WCAG at a glance

Principle 2: Operable

Make all functionality available from a keyboard

Give users enough time to read and use content

Do not use content that causes seizures

Help users navigate and find content



WCAG at a glance

Principle 3: Understandable

Make text readable and understandable

Make content appear and operate in predictable ways

Help users avoid and correct mistakes



WCAG at a glance

Principle 4: Robust

Maximise compatibility with current and future user agents



Use semantic HTML

Add a valid `lang` attribute to

Dont disable zooming

Use appropriate HTML5 elements

Dont skip heading levels

Use native browser controls where possible

Only and should be clickable

All form elements must be labelled

Placeholders arent labels

Understand the impact of CSS

Test without CSS to ensure a logical source order

Minimum of 14px font size for body content

Pseudo content is read out, so it has to be meaningful

OK to use a utility class to hide content

Dont remove `:focus`outlines or provide alternatives

`visibility: hidden` hides from ATs but is animatable!

.visually-hidden

https://gist.github.com/stowball/2704364c1ceefb1d7eaf570b903463b3

Smart :focus styles

github.com/stowball/keyboard-focus

function keyboardFocus (e) { if (e.keyCode !== 9) { return; } document.documentElement.classList.add('keyboard-focus'); document.removeEventListener('keydown', keyboardFocus, false); } document.addEventListener('keydown', keyboardFocus, false);

:focus { box-shadow: none; outline: none; } .no-js :focus, .keyboard-focus .element-with-custom:focus { box-shadow: 0 0 2px 1px #00cdcb; }

https://github.com/stowball/keyboard-focus

Animating visibility: hidden

.chip.is-hidden { max-width: 0; opacity: 0; transition: opacity ease 0.25s, transform ease 0.25s, margin ease 0.45s 0.15s, max-width ease 0.45s 0.15s, visibility 0s 0.6s; transform: scale(0); visibility: hidden; }

What is WAI-ARIA?

A spec on how to increase the accessibility of Rich Internet Applications

Uses role attributes to describe the type of element

Uses property attributes to describe relationships,functions and UI states

Common ARIA roles

bannercomplementarycontentinfomainnavigationsearch

w3.org/TR/wai-aria-1.1/#widget_roles

Landmarksalertdialogtabtablisttabpaneltooltip

Widgets

https://www.w3.org/TR/wai-aria-1.1/#widget_roles

Common ARIA properties

aria-current (state)aria-expanded (state)aria-haspopuparia-hidden (state)aria-invalid (state)aria-labelaria-pressed (state)aria-selected (state)

w3.org/TR/wai-aria-1.1/#global_states

Widgetsaria-atomicaria-controlsaria-labelledbyaria-livearia-owns

Others

https://www.w3.org/TR/wai-aria-1.1/#global_states

Useful examples!

Hamburger menu

Home About

var $button = $('button'); var isMenuOpen = false; $

$button.on('click', function () { isMenuOpen = !isMenuOpen;

$button.attr('aria-expanded', isMenuOpen); $button.attr('aria-pressed', isMenuOpen); });

button[aria-pressed="true"] { /* change caret indicator */ }

button[aria-expanded="true"] + #menu { /* show menu */ }

var $button = $('button'); var isMenuOpen = false;

Accessible hamburger menu

Add to cart

Super Mario T-shirt Add Super Mario T-shirt to cart

var $button = $('button'); var $toaster = $('#toaster'); $button.on('click', function () { $toaster .html('Super Mario T-shirt has been ' + 'Added to your cart').addClass('is-visible'); setTimeout(function () { $toaster.removeClass('is-visible'); }, 1500); });

.u-visually-hidden { /* https://gist.github.com/stowball/2704364c1ceefb1d7eaf570b903463b3 */ }

Accessible add to cart

Implementation resources

WAI-ARIAAuthoring Practices 1.1

Heydon Pickering's Practical ARIA Examples

Deque University's Examples

OpenAjax Accessibility Examples

My Accessible Widgets CodePen collection

http://wai-aria%20authoring%20practices%201.1/http://heydonworks.com/practical_aria_examples/https://dequeuniversity.com/resources/http://oaa-accessibility.org/http://codepen.io/stowball/collections/public/

Inclusive designbenefits everyone

Practice makes perfect

Thank you!

@stowball slides.com/stowball/accessible-web

http://slides.com/stowball/accessible-web

0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344454647484950