Upload
matt-stow
View
15
Download
0
Embed Size (px)
Citation preview
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
w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle2
https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle2
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
w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle3
https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle3
WCAG at a glance
Principle 4: Robust
Maximise compatibility with current and future user agents
w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle4
https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311,313#principle4
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