Upload
playground-inc
View
79
Download
2
Tags:
Embed Size (px)
Citation preview
3/4
02/40
What isaccessibility?
2/4
12/3503/40
The process of making the web usable
for people with varying abilities
04/40
What isa disability?
2/4
12/3505/40
Blind.
Deaf.
2/4
12/3505/40
That’s only
a small part of the story
2/4
12/3505/40
Disabilites are far more
nuanced and exist across a spectrum
1.
2.
3.
Colour blindness
Monochromacy (seeing in greyscale)
Partial or complete vision loss
06/40
4. Partial or complete hearing loss
5.
6.
Fine motor skill impairment
Cognition disabilities
07/40
Why should we care?
08/40
1.
2.
3.
3.8 million Canadians report living with a disability
Adherance with best practice of web standards
Better SEO
4. Optimal experience for all users
+ AODA says so.
WCAG + AODA
09/40
Web Content Accessibility Guideline+
Accessibility for Ontarians with Disabilities Act
By 2021 all websites in Ontario will
need to meet WCAG 2.0 AA
10/40
+ For organizations with over 50 staff
+ Applies to websites posted after 2011
Massive daily fines exist
for having a live, inaccessible site
10/40
3/4
$100,000 per day
11/40
WCAG 2.0
Quick Reference
12/40
2/4
12/3513/40
Myth:
Accessibility is hard
14/40
TL;DR
Focus States
15/40
Consistency Audio + Video Contrast Readability
The real quick reference:
Designers
2/4
12/3516/40
Focus States
1.
2.
Links, Controls, Buttons and Input fields should be distinctly
visible when on keyboard focus
Avoid relying on colour to convey important meaning. These cues
are lost on many individuals (such as those with colour blindness)
2/4
12/3517/40
Consistency
1.
2.
Maintain a steady document layout between pages,
paying particular attention to the nav bar + other areas
with repetitive links
Keep a consistent style between UI elements: buttons should
look like buttons, links like links
2/4
12/3518/40
Audio + Video
1.
2.
+
Live + Pre-recorded audio need to be accompanied by
captions or transcripts
Pre-recorded video needs to be accompanied by
both transcript and audio description
These features are not included in the 2021 requirements,
but are listed in the WCAG AA spec
2/4
12/3522/40
Contrast
1.
2.
3.
+
Text should have a contrast ratio of 4.5:1
Large text (18pt) can have a contrast ratio of 3:1
Make sure links and controls are easily visible in a body of text
Logos are exempt from the contrast rules
2/4
12/3513/40
Contrast checking
tools will help you spot bugs
2/4
12/3505/40
Fail
2/4
12/3505/40
Pass
12/3523/40
12/3524/40
2/4
12/3525/40
Readability
1.
2.
3.
4.
Use a text justification that’s appropriate for the language
Avoid centre alignments and justified text
Create line lengths that are friendly to the eye (50-75 characters)
Clarify meaning with images when possible
Semantic Markup
26/40
Native Elements ARIA Labels Consistency Input Assistance
The real quick reference:
Developers
Never use images where you could use text
Keep your documents structured logically + consistently
between pages on the same site
2/4
12/3527/40
Semantic Markup
1.
2.
3.
4.
Make use of HTML5 elements
Use (don’t abuse) attributes + descriptive alt tags
2/4
12/3513/40
What about using turning letters
into SVG for animations?
20/33
2/4
12/3513/40
Now and then, it needs to happen.
Use ARIA tags for clarity
2/4
12/3529/40
<svg role=“img” aria-label=“Learn Code”>
1.
2.
Don’t reinvent the wheel; use native elements instead
of JS hackery
Make sure your site makes sense and is navigable
when the scripts and styles are disabled
2/4
12/3530/40
Native Elements
3. Don’t override the default behaviour of the browser
(zooming, tabbing, right clicking + scrolling)
2/4
12/3531/40
ARIA Labels
1.
2.
3.
Describes the role, state or property of an element when
there isn’t enough semantic markup for Assistive
Technology to understand
Helps AT distinguish changes in dynamic content (very useful
in dynamic JS applications)
ARIA landmarks allow screen reader users to quickly navigate
around the page, skipping repetitive content like menu bars
2/4
12/3532/40
<button aria-label="Close">X</button>
<div role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100" />
2/4
12/3533/40
Input Assistance
1.
2.
3.
Make sure your focus states are clearly visible and don’t
rely on colour to convey meaning
When an error is identified in an input field, provide useful
feedback and offer suggestions for fixing the problem
Allow for a double check or a reversible submission when
dealing with legal or financial transactions
2/4
12/3534/40
Consistency
1.
2.
3.
Maintain a similar code structure between pages in the
same site
Use consistent naming and ARIA conventions across a
website
Keep interactive elements predictable in their behaviour
(buttons, links, drop down menus)
2/4
12/3535/40
We’ve still
got work to do
1.
2.
3.
Mobile devices
Native apps
JS frameworks + the changing nature of the DOM
36/40
What aboutAAA?
2/4
12/3537/40
A lofty goal,
but not yet attainable
2/4
12/3538/40
AAA Includes
1.
2.
3.
+
Extended audio description for all pre-recorded video
Sign language videos for audio only recordings
Text with a contrast ratio of 7:1
Many more dreams
2/4
12/3539/40
Accessibility
is everyone’s job.
3/4