ACCESSIBILITY SASKATCHEWANLEADING THROUGH DESIGN
YOUR HOSTS Mike Beaudin – Eliquo Senior Web and Accessibility Instructor
Craig Boassaly - President
Presented by Eliquo Training
ACCESSIBILITY MANITOBA – LEADING THROUGH DESIGN
MORNING BREAK
▸ 10AM (15 Minutes)
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
THIS MORNING’S AGENDA
▸ What’s new in WCAG 2.1
▸ How accessibility improves UX
▸ When to properly use Aria?
▸ 5 step process to reliably test websites for accessibility
▸ Q & A Session
▸ Professional Development Planning
ABOUT ELIQUO
▸ 1,000’s of courses to 10,000’s of creative professionals since 2002
▸ Adobe Authorized Training Center since 2004
▸ Adobe Solutions Partner since 2015
▸ Adobe Digital Learning Services partner (ADLS)
▸ Certified professional instructors
▸ Content created in-house
▸ 31 Accessibility/WCAG courses
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
WCAG - OVERVIEW
▸ WCAG 2.0 - (December 11, 2008)
▸ WCAG 2.1 - (June 5, 2018)
▸ Accessibility is for EVERYONE
▸ A, AA, AAA
▸ AODA: By January 1, 2021, all internet websites and web content must conform with WCAG 2.0 Level AA
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
WCAG - OVERVIEW - SCREEN READERS
▸ JAWS (Job Access With Speech)
▸ NVDA
▸ VoiceOver (Mac, iPhone, iPad, iPod touch)
▸ TalkBack
▸ 88% of Screen Reader users use a mobile screen reader
▸ 78% use VoiceOver
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
WCAG - OVERVIEW - ALT TEXT
Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country”.
A. "Image of George Washington"
B. "George Washington, the first president of the United States"
C. An empty alt attribute (alt="") will suffice.
D. "George Washington"
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
NEW SUCCESS CRITERIA IN WCAG 2.1
WCAG 2.1
Orientation Orientation of web content is not restricted to only portrait or landscape, unless a specific orientation is necessary. 1.3.4 AA
Identify Input Purpose
Input fields that collect certain types of user information have an appropriate autocomplete attribute defined. 1.3.5 AA
Identify Purpose
HTML5 regions or ARIA landmarks are used to identify page regions.
ARIA is used, where appropriate, to enhance HTML semantics to better identify the purpose of interface components.
1.3.6 AAA
NEW SUCCESS CRITERIA IN WCAG 2.1
Reflow
Basically requires Responsive design
Users with low vision who need to make things larger. The content will wrap inside the viewport instead of causing horizontal scroll.
1.4.10 AA
Non-Text Contrast
Extends 3:1 contrast minimums to important graphical information, visible focus indicators and other interactive controls.
The various states (focus, hover, active, etc.) of author-customized interactive components must all present 3:1 contrast.
1.4.11 AA
Text Spacing
Requires enough space around text that the spacing can be spread out a little bit.
Avoiding pixel height definitions for elements that contain text.
1.4.12 AA
Content on Hover or Focus
Requires hover effects like custom tooltips etc, not to obscure the trigger that activated them, and helps users move into the hover box without having it close on them.
1.4.13 AA
WCAG 2.1
NEW SUCCESS CRITERIA IN WCAG 2.1
Character Key Shortcuts
If a keyboard shortcut uses printable character keys, then the user must be able to disable the key command, change the defined key to a non-printable key (Ctrl, Alt, etc.), or only activate the shortcut when an associated interface component or button is focused.
2.1.4 A
Animation from interactions
Requires you not to use motion as a result of a user clicking (or activating) something, or provide a way to turn it off. Addresses parallax scrolling and CSS animations etc.
2.2.7 AAA
WCAG 2.1
NEW SUCCESS CRITERIA IN WCAG 2.1
Pointer gestures
Requires authors to ensure the user can perform touch functions with assistive technology or one finger. If multipoint or path-based gestures (such as pinching, swiping, or dragging across the screen) are essential to the functionality, then the functionality can also be performed with a single point activation (such as activating a button).
2.5.1 A
Pointer Cancellation
To help avoid inadvertent activation of controls, avoid non-essential down-event (Ex: onmousedown) activation when clicking, tapping, or long pressing the screen. Use onclick, onmouseup, or similar instead. If onmouseup (or similar) is used, you must provide a mechanism to abort or undo the action performed.
2.5.2 A
Label in NameIf an interface component (link, button, etc.) presents text (or images of text), the accessible name (label, alternative text, aria-label, etc.) for that component must include the visible text.
2.5.3 A
Motion ActuationFunctionality that is triggered by moving the device (such as shaking or panning a mobile device) or by user movement (such as waving to a camera) can be disabled and equivalent functionality is provided via standard controls like buttons.
2.5.4 A
WCAG 2.1
NEW SUCCESS CRITERIA IN WCAG 2.1
Target Size
Addresses hand tremors and mobile environments
Clickable targets are at least 44 by 44 pixels in size unless an alternative target of that size is provided, the target is inline (such as a link within a sentence), the target is not author-modified (such as a default checkbox), or the small target size is essential to the functionality.
2.5.5 AAA
Concurrent Input Mechanisms
Content does not restrict input to a specific modality, such as touch-only or keyboard-only, but must support alternative inputs (such as using a keyboard on a mobile device).
2.5.6 AAA
WCAG 2.1
NEW SUCCESS CRITERIA IN WCAG 2.1
Status Messages
For HTML pages, when there is a visible status message, this requires authors to use aria-live roles or attributes to notify the users when something on the page changes.
If an important status message is presented and focus is not set to that message, the message must be announced to screen reader users, typically via an ARIA alert or live region.
4.1.3 A
WCAG 2.1
HOW ACCESSIBILITY IMPROVES UX
▸ Give your links unique and descriptive names
▸ Design your forms for accessibility
▸ Ensure that all content can be accessed with the keyboard alone in a logical way
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
WHEN TO PROPERLY USE ARIA
▸ The structure of a page like headers, sections, and footers
▸ The functionality of an element (such as a menu, progress bar, slider etc…)
▸ The state of an element
▸ Any live updating section of a page
▸ ARIA is not always needed!
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
5 STEP PROCESS TO RELIABLY TEST WEBSITES FOR ACCESSIBILITY
1.W3C Validator
2.WAVE or AChecker
3.Tabbing through the site
4.Scrubbing the site (Contrast, etc…)
5.Using a Screen Readers (JAWS, NVDA, VoiceOver)
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
NEED SOME HELP
▸ EliQ&A
▸ No membership
▸ No fees
▸ Just send us your question…any question.
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
ELIQUO TRAINING PASSPORTS
▸ Pre-purchase Training Days - Save up to 75%
▸ Finally, The Best of Both Learning Formats …Together
▸ Eliquo’s Videos on Demand (EVoD)
▸ Live Courses
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
EVOD# of Courses Category
23 Apple
150 Adobe
77 Microsoft
55 Web Programming
60 IT Programming
30 Eliquo's own specialty courses
4 (AWS) Amazon Web Services
7 User Experience and Design
11 Accounting
44 Music Production
461 Total Courses
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
INSTRUCTOR LED COURSES# of Courses Category
30 Accessibility/WCAG
61 Adobe
26 Microsoft
44 Mobile & Web Development
13 Digital Marketing/Social Media
27 Pro Video
14 eLearning
6 User Experience
37 Graphic Design/Layout
11 Apple
269 Total Courses
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
TRAINING PASSPORT CLIENT SAVINGS
▸ Organization: Ottawa Public Health
▸ Passport holder since November 2016
▸ Total training days taken: 602
▸ Total Savings (to date): $209,810
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
TRAINING PASSPORT CLIENT SAVINGS
▸ Company: Pattison Sign Group
▸ Training Passport holder: 2017-2018
▸ Total training days: 251
▸ Total Savings: $67,200 in 12 months
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
TRAINING PASSPORT CLIENT SAVINGS
▸ Organization: CIBC
▸ Passport holder since September 2015
▸ Total training days taken: 979
▸ Total Savings (to date): $341,035
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
TRAINING & PASSPORT CLIENTS
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
ELIQUO TRAINING PASSPORTS
PRICINGUsers 15 25 50 75 100
Cost $5,000 $6,500 $10,000 $12,500 $15,000
Training Days Unlimited Unlimited Unlimited Unlimited Unlimited
On-Demand Videos Unlimited Unlimited Unlimited Unlimited Unlimited
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
ELIQUO TRAINING PASSPORTS
SPECIAL SEMINAR PRICINGUsers 15 25 50 75 100
Cost $5,000 $6,500 $10,000 $12,500 $15,000
Seminar Pricing $3,750 $4,875 $6,500 $8,125 $9,000
Discount 25% 25% 35% 35% 40%
Training Days Unlimited Unlimited Unlimited Unlimited Unlimited
On-Demand Videos Unlimited Unlimited Unlimited Unlimited Unlimited
Discounted pricing offer expires on April 12th
ACCESSIBILITY SASKATCHEWAN – LEADING THROUGH DESIGN
Top Related