You have (probably?) heard about accessibility ("universell utforming" in Norwegian), but do you know what it is? How to use it and how to design, develop and test for it? No? Then this is the workshop for you! And even if you are experienced and know what a11y stands for, you might pick up a trick or two.
2. «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
10. «Why should we bother with accessibility? As far
as we know, none of our users are blind…»
- Anonymous client
17.03.2017 / 10@IT_VEGARD / #BOOSTERA11Y
11. 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)
17.03.2017 / 11@IT_VEGARD / #BOOSTERA11Y
12. 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
17.03.2017 / 12@IT_VEGARD / #BOOSTERA11Y
13. User group: Retirees
• Age: 57-96
• 60% male, 40% female
• Reduced vision
• Reduced motor skills
• … and so on
Data from HRWeb (US)
17.03.2017 / 13@IT_VEGARD / #BOOSTERA11Y
14. 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.
17.03.2017 / 14@IT_VEGARD / #BOOSTERA11Y
15. Who are your users?
Specific – «real» users
• Name
• Image
• Age
• Profession
• Personal traits
17.03.2017 / 15@IT_VEGARD / #BOOSTERA11Y
17. 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.03.2017 / 17@IT_VEGARD / #BOOSTERA11Y
19. Color contrasts
• Normal text: 4.5:1 contrast
• Large text: 3:1 contrast
• Be wary of text overlaying images
17.03.2017 / 19@IT_VEGARD / #BOOSTERA11Y
20. Click areas
• Buttons
• Checkboxes
• Links (also inside texts)
• Make as large of an area as possible clickable
• Make it intuitive what area is clickable
17.03.2017 / 20@IT_VEGARD / #BOOSTERA11Y
22. Sliders
• Inherently inaccurate
• Bad UX for touchscreens as well
• Use as an enhancement
– Provide alternative inputs
– Make the slider-button accessible for keyboard users
17.03.2017 / 22@IT_VEGARD / #BOOSTERA11Y
23. 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/
17.03.2017 / 23@IT_VEGARD / #BOOSTERA11Y
25. 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?
17.03.2017 / 25@IT_VEGARD / #BOOSTERA11Y
27. HTML5 Landmarks and sectioning elements
• Main (main)
• Section (region)
• Header (banner)
• Footer (contentinfo)
• Nav (navigation)
• Aside (complementary)
• Form (form)
17.03.2017 / 27@IT_VEGARD / #BOOSTERA11Y
28. 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!
17.03.2017 / 28@IT_VEGARD / #BOOSTERA11Y
29. 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.
17.03.2017 / 29@IT_VEGARD / #BOOSTERA11Y
30. Images and videos
• Non-textual content
• Alt-attribute
• Beware of text over images
• … But do use them!
17.03.2017 / 30@IT_VEGARD / #BOOSTERA11Y
31. 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
17.03.2017 / 31@IT_VEGARD / #BOOSTERA11Y
32. Forms
• Avoid keyboard traps!
• Placeholders are not replacements for labels
• Make sure placeholders satisfy contrast requirements
17.03.2017 / 32@IT_VEGARD / #BOOSTERA11Y
34. 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?
17.03.2017 / 34@IT_VEGARD / #BOOSTERA11Y
35. 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
17.03.2017 / 35@IT_VEGARD / #BOOSTERA11Y
36. 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
17.03.2017 / 36@IT_VEGARD / #BOOSTERA11Y
37. 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
17.03.2017 / 37@IT_VEGARD / #BOOSTERA11Y
38. 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
17.03.2017 / 38@IT_VEGARD / #BOOSTERA11Y
48. THANK YOU FOR ATTENDING!
17.03.2017 / 48@IT_VEGARD / #BOOSTERA11Y
Hinweis der Redaktion
[90:00]
[89:00]
[88:00]
On December 11th, 2008, after 5 years of working, the W3C WAI released the WCAG 2.0 .
Principles - They provide the basis for Web accessibility: the website must be perceivable, operable, understandable, and robust.
Guidelines - There are 12 guidelines under the principles, similar to that on the WCAG 1, but with no levels of conformance
Success Criteria - Each guideline has a testable success criteria. Here they are the 3 levels of conformance, equal to that on WCAG 1: A (lowest), AA, and AAA (highest).
Techniques - Each guideline and success criteria has itw own informative techniques. There are 2 categories plus sufficient techniques and the advisory ones that address. The WAI had also documented some common failures, so we can learn how to avoid them.
[87:00]
An innovation at the WCAG 2 respect to the WCAG 1 is the organization of the guidelines into principles.
Accomplishing groups of guidelines you will success in a principle.
The goal is to succeed in the 4 principles, as if any of them fails, users with disabilities will experience difficulties to use the website.
[86:00]
Our website can be visited by people with very different types of perceptive preferences and needs, but also by robots (search engines, translators…). Our information and user interface components must address this handicap. We must give alternatives if a user cannot use one of her senses.
1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
1.2. Time-based Media: Provide alternatives for time-based media.
1.3. Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
1.4. Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
[85:00]
Webdesigners must be aware of the different devices the users can manage to use the website, so they must make the user interface components and navigation elements in a way that everyone can “operate” with it. E.g. Don’t limit user input to “mouse” or “pointers”.
2.1 Keyboard Accessible: Make all functionality available from a keyboard.
2.2 Enough Time: Provide users enough time to read and use content.
2.3 Seizures: Do not design content in a way that is known to cause seizures.
2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
[84:00]
If our user don’t understand what we are talking about, or we make her feel lost, we have a problem. We must design our website, including the information and the user interface, in a friendly way.
3.1 Readable: Make text content readable and understandable.
3.2 Predictable: Make Web pages appear and operate in predictable ways.
3.3 Input Assistance: Help users avoid and correct mistakes.
[83:00]
This is the most-technology-dependant principle of all. It relies on the capacity of the website to be transmitted and interpreted by the user agents.Remember that user agents are any software that retrieves and presents Web content, like browsers (Internet Explorer, Firefox, Safari…), media players (Quicktime, Realplayer, Windows Media Player…), plugins (e.g. those that help your browser perform specific functions), and, other programs, including assistive technologies (pointers, magnifiers…). So you can deduct that we must create our website thinking of this plethora of software that help in retrieving, rendering, and interacting with the Web content. We must be aware of the evolution of these technologies to adapt our website to their new capabilities.
4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
[82:00
[81:00]
[80:00]
[79:00]
[78:00]
[76:00]
[77:00]
[75:00]
[75:00]
[65:00]
[64:00]
[63:00]
[62:00]
Possible, though I don’t recommend it, to just allow the user to change the width, i.e. with responsive design.
[61:00]
[60:00]
[59:00]
[50:00]
[49:00]
[48:00]
[47:00]
[46:00]
[45:00]
[44:00]
[43:00]
[43:00]
[35:00]
Roles to describe the type of widget presented, such as "menu", "treeitem", "slider", and "progressmeter"
Roles to describe the structure of the Web page, such as headings, regions, and tables (grids)
Properties to describe the state widgets are in, such as "checked" for a check box, or "haspopup" for a menu.
Properties to define live regions of a page that are likely to get updates (such as stock quotes), as well as an interruption policy for those updates—for example, critical updates may be presented in an alert dialog box, and incidental updates occur within the page
Properties for drag-and-drop that describe drag sources and drop targets
A way to provide keyboard navigation for the Web objects and events, such as those mentioned above