A Practical Guide to Web Accessibility
-
Upload
playground-inc -
Category
Technology
-
view
76 -
download
2
Transcript of A Practical Guide to Web Accessibility
![Page 1: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/1.jpg)
3/4
![Page 2: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/2.jpg)
02/40
What isaccessibility?
![Page 3: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/3.jpg)
2/4
12/3503/40
The process of making the web usable
for people with varying abilities
![Page 4: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/4.jpg)
04/40
What isa disability?
![Page 5: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/5.jpg)
2/4
12/3505/40
Blind.
Deaf.
![Page 6: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/6.jpg)
2/4
12/3505/40
That’s only
a small part of the story
![Page 7: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/7.jpg)
2/4
12/3505/40
Disabilites are far more
nuanced and exist across a spectrum
![Page 8: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/8.jpg)
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
![Page 9: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/9.jpg)
07/40
Why should we care?
![Page 10: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/10.jpg)
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.
![Page 11: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/11.jpg)
WCAG + AODA
09/40
Web Content Accessibility Guideline+
Accessibility for Ontarians with Disabilities Act
![Page 12: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/12.jpg)
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
![Page 13: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/13.jpg)
Massive daily fines exist
for having a live, inaccessible site
10/40
![Page 14: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/14.jpg)
3/4
$100,000 per day
11/40
![Page 15: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/15.jpg)
WCAG 2.0
Quick Reference
12/40
![Page 16: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/16.jpg)
2/4
12/3513/40
Myth:
Accessibility is hard
![Page 17: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/17.jpg)
14/40
TL;DR
![Page 18: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/18.jpg)
Focus States
15/40
Consistency Audio + Video Contrast Readability
The real quick reference:
Designers
![Page 19: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/19.jpg)
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)
![Page 20: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/20.jpg)
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
![Page 21: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/21.jpg)
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
![Page 22: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/22.jpg)
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
![Page 23: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/23.jpg)
2/4
12/3513/40
Contrast checking
tools will help you spot bugs
![Page 24: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/24.jpg)
2/4
12/3505/40
Fail
![Page 25: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/25.jpg)
2/4
12/3505/40
Pass
![Page 26: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/26.jpg)
12/3523/40
![Page 27: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/27.jpg)
12/3524/40
![Page 28: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/28.jpg)
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
![Page 29: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/29.jpg)
Semantic Markup
26/40
Native Elements ARIA Labels Consistency Input Assistance
The real quick reference:
Developers
![Page 30: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/30.jpg)
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
![Page 31: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/31.jpg)
2/4
12/3513/40
What about using turning letters
into SVG for animations?
![Page 32: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/32.jpg)
20/33
![Page 33: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/33.jpg)
2/4
12/3513/40
Now and then, it needs to happen.
Use ARIA tags for clarity
![Page 34: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/34.jpg)
2/4
12/3529/40
<svg role=“img” aria-label=“Learn Code”>
![Page 35: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/35.jpg)
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)
![Page 36: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/36.jpg)
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
![Page 37: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/37.jpg)
2/4
12/3532/40
<button aria-label="Close">X</button>
<div role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100" />
![Page 38: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/38.jpg)
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
![Page 39: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/39.jpg)
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)
![Page 40: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/40.jpg)
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
![Page 41: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/41.jpg)
36/40
What aboutAAA?
![Page 42: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/42.jpg)
2/4
12/3537/40
A lofty goal,
but not yet attainable
![Page 43: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/43.jpg)
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
![Page 44: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/44.jpg)
2/4
12/3539/40
Accessibility
is everyone’s job.
![Page 45: A Practical Guide to Web Accessibility](https://reader030.fdocuments.in/reader030/viewer/2022032504/55c4984ebb61ebbe4f8b46c7/html5/thumbnails/45.jpg)
3/4