Jan2015 webinar-50-shades

#a11y #siteimprove

Siteimprove Accessibility Webinar Series

50 Shades of Accessible Gray January 2015

Kevin Rydberg • Senior eAccessibility Consultant, Siteimprove

• [email protected]

• @rydbergk

• linkedin.com/in/KevinRydberg

krysiteimprove.com

#a11y #siteimprove


50 Shades of Accessible Gray

Is it accessible or not?


#a11y #siteimprove


Disclaimer:

!


#a11y #siteimprove



#a11y #siteimprove


Under the AODA, a “disability” is defined as:

• Any degree of physical disability, infirmity, malformation or disfigurement.

• A condition of mental impairment or a developmental disability.

• A learning disability or a dysfunction in one or more of the processes involved in understanding or using symbols or spoken language.

• A mental disorder.

• An injury or disability for which benefits were claimed or received…

This broad definition includes disabilities of different sensitivity, visible as well as non-invisible disabilities, and disabilities which may be temporary or have effects that come and go over time.


What is a disability?

#a11y #siteimprove


Ranges of Disabilities

Hearing Loss

Full Hearing

Mild

Moderate

Moderately Severe

Severe

Profound

Totally Deaf


#a11y #siteimprove



Eyesight

Macular Degeneration

Nearsightedness

Presbyopia

Retinal Detachment

Astigmatism

Cataracts

Color Blindness

Farsightedness

Glaucoma


#a11y #siteimprove



EnvironmentalLow or limited bandwidth

Too bright or too dark environment

Noisy environments, like a coffee shop

Mobile devices, game consoles or other devices

Using old browsers or operating systems


#a11y #siteimprove


Interpreting the WCAG 2.0 Criteria

Success CriteriaTestable statement that will be either true or false when applied to specific Web content

TechniquesA quick reference guide to help understand how to meet the success criteria

Normative (criteria)Set requirements for conforming to WCAG 2.0

Informative (techniques)Provide guidance


#a11y #siteimprove


Guidelines vs. Best Practices


Normative - Success Criteria Informative - Techniques

Glenda Sims - Consistency In Expert Manual Accessibility Testing

#a11y #siteimprove


Guidelines vs. Best Practices


• Provide appropriate alternative text

• Provide appropriate document structure

• Provide headers for data tables

• Ensure users can complete and submit all forms

• Ensure links make sense out of context

• Caption and/or provide transcripts for media

• Ensure accessibility of non-HTML content

• Allow users to skip repetitive elements on the page

• Do not rely on color alone to convey meaning

• Make sure content is clearly written and easy to read

• Make JavaScript accessible

• Design to standards

#a11y #siteimprove


A few additional thoughts…

50 Shades of Accessible Gray

• Web accessibility impacts every technical discipline

• Accessibility must be included from phase one of your project

• Accessibility goes beyond technical criteria and checklists

• Accessible results are beyond standards compliance

Denis Boudreau - NAGW 2014 - Integrating A11y Project Lifecycle

January 2015

#a11y #siteimprove


Examples


• Alt Attributes

• Color Contrast

• Headings

#a11y #siteimprove


“alt” attributes

Which is the correct “alt” for this image?

a. alt=”image”

b. alt=”tree”

c. alt=”maple tree”

d. alt=”red maple tree”

e. alt=” red maple tree surrounded by multi-colored fall foliage”

f. alt=“ ”

appropriate


#a11y #siteimprove


“alt” Attribute Violation? No!


• 1.1.1 – Alt text length – Alt text value should be less than (x) characters.

• 1.1.1 – Alt text exact - if there is text embedded in the image, the alt text must include the exact text that is embedded in the image.

#a11y #siteimprove


Color Contrast


1.4.3 Contrast Minimum 4.5:1, 3:1 (large text) - AA

#a11y #siteimprove


Color Contrast Violation? No!


• Large Text (only needs to be 3:1)

• Incidental Text – decorative text or inactive/disabled form controls

• Logotype

#a11y #siteimprove


Headings

<h1> <h2> <h3> <h2> <h3> <h4>

<h2>

<h1> <h1> <h2> <h1> <h2> <h3>

<h1>

<h3>

<h1> <h2> <h2> <h3> <h4>

<h2>


#a11y #siteimprove


Headings Violation? No!


• 1.3.1 - H1 – more than one – Cannot use more than one H1 per page.

• 1.3.1 - H1 – at least one – when headings are used, at least one H1 is required

• 1.3.1 - Headings – skipping levels – do not skip heading levels

• 1.3.1 – Headings - general considerations

• If it is big and bold should it always be a heading? No

• Must there be content between headings? No, but usually

#a11y #siteimprove


TL/DR


• Disabilities cover an extremely large range of conditions

• The WCAG 2.0 Guidelines are just that—guidelines.

• There are many ways the guidelines can be interpreted

• The guidelines contain both normative (criteria) and informative (techniques) information

• Web Accessibility is not a checklist

• Your organization’s rules may also dictate your level of compliance

#a11y #siteimprove


Acknowledgements


• Glenda Sims - Consistency In Expert Manual Accessibility Testing

• Denis Beaudreau - NAGW 2014 - Integrating A11y Project Lifecycle

• WebAim.org

• Håbo Kommun - habo.se

http://habo.se

#a11y #siteimprove


Josh Ditthardt

Sales Manager - Government Agencies

www.linkedin.com/in/joshditthardt


#a11y #siteimprove


Resources

• http://www.grey.ca/services/accessibility/

• http://webaim.org/intro/#implementing

• http://www.w3.org/TR/UNDERSTANDING-WCAG20/understanding-techniques

• http://www.reactiongifs.com/wp-content/uploads/2011/05/bubbles2.gif


http://www.grey.ca/services/acce

http://webaim.org/intro/#implementing

http://www.w3.org/TR/UNDERSTANDING-WCAG20/understanding-techniques

http://www.reactiongifs.com/wp-content/uploads/2011/05/bubbles2.gif

Education

Jan2015 webinar-50-shades