accessibility saskatchewaneliquo.ca/assets/accessibility-saskatchewan.pdf · users 15 25 50 75 100...

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


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


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


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"


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


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


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


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


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


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


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!


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)


NEED SOME HELP

▸ EliQ&A

▸ No membership

▸ No fees

▸ Just send us your question…any question.


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


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


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


TRAINING PASSPORT CLIENT SAVINGS

▸ Organization: Ottawa Public Health

▸ Passport holder since November 2016

▸ Total training days taken: 602

▸ Total Savings (to date): $209,810



▸ Company: Pattison Sign Group

▸ Training Passport holder: 2017-2018

▸ Total training days: 251

▸ Total Savings: $67,200 in 12 months



▸ Organization: CIBC

▸ Passport holder since September 2015

▸ Total training days taken: 979

▸ Total Savings (to date): $341,035


TRAINING & PASSPORT CLIENTS



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



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 saskatchewaneliquo.ca/assets/accessibility-saskatchewan.pdf · users 15 25 50 75 100...

Documents