Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementing WCAG by Making Your Website Access...

Cynthia "Arty" Ng
May 07, 2013
Technology
0
250

Implementing WCAG by Making Your Website Accessible for Everyone

Presented at TRY 2013. Full write up: http://cynng.wordpress.com/2013/05/07/making-your-website-accessible-for-everyone/
--
The deadline in Ontario to make our websites accessible is next January. While we have a set of guidelines to follow, it’s not always clear how to best implement the Web Consortium Accessibility Guidelines (WCAG) in a practical manner. While guidelines are necessary to cover a minimum standard, web accessibility should come from good web design without ‘sacrificing’ features. To make a website accessible, you will also need material that your content creators understand. Come learn how to make a website more accessible for everyone.

This presentation will focus on HTML and CSS, but will touch on custom interfaces.

Cynthia "Arty" Ng

May 07, 2013
Tweet

More Decks by Cynthia "Arty" Ng

See All by Cynthia "Arty" Ng
Giving back to the community through transparency and a public handbook
cynthiang
0
170
When Work Doesn't Fit the Mold, a Chief of Staff Steps In
cynthiang
0
230
A Public Handbook: Building trust with the team, customers, and beyond
cynthiang
0
230
Docs as Code: Automation the Developer way
cynthiang
0
250
Everyone Can Contribute: Making Support Effective Through Contributions
cynthiang
0
220
Implementing Values in Practical Ways
cynthiang
0
300
Evaluating Your Website for Accessibility Compliance and WCAG 2.1
cynthiang
0
430
Making Accessible Content and Websites in WordPress
cynthiang
0
610
Auditing Your Website for Accessibility Compliance and Understanding How ADA Applies
cynthiang
0
480

Other Decks in Technology

See All in Technology
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
140
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
210
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
Python(PYNQ)がテーマのAMD主催のFPGAコンテストに参加してきた
iotengineer22
0
500
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
AI前提のサービス運用ってなんだろう？
ryuichi1208
8
1.4k
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
310
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
190
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170

Featured

See All Featured
Done Done
chrislema
181
16k
Fireside Chat
paigeccino
34
3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Automating Front-end Workflow
addyosmani
1366
200k
Happy Clients
brianwarren
98
6.7k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Facilitating Awesome Meetings
lara
50
6.1k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Writing Fast Ruby
sferik
627
61k
A better future with KSS
kneath
238
17k

Transcript

  1. Implementing WCAG: Improving Website Accessibility for All Your Users Cynthia

    Ng May 7, 2013 1

  2. What is Web Accessibility? Definition Cynthia Ng @TheRealArty 2

  3. Cynthia Ng @TheRealArty 3 http://thisisnixofficial.tumblr.com/post/3830398589

  4. Source: http://www.broadenedhorizons.com/quadmousec1.htm Cynthia Ng @TheRealArty 4

  5. Why Should You Care? Legislation (AODA) Inclusive Improvements for Everyone

    Cynthia Ng @TheRealArty 5

  6. What is WCAG? Web Consortium Accessibility Guidelines 2.0 by the

    Web Accessibility Initiative (WAI) group, W3C Cynthia Ng @TheRealArty 6

  7. AODA Deadline Accessibility for Ontarians with Disabilities Act (AODA) under

    Section 14, subsection 4 • By January 1, 2014, new internet websites and web content on [public sector] sites must conform with WCAG 2.0 Level A. • By January 1, 2021, all internet websites and web content must conform with WCAG 2.0 Level AA, other than, o success criteria 1.2.4 Captions (Live), and o success criteria 1.2.5 Audio Descriptions (Pre-recorded). Cynthia Ng @TheRealArty 7

  8. Guiding Principles • Perceivable • Operable • Understandable • Robust

    WCAG 2.0 at a Glance Cynthia Ng @TheRealArty 8

  9. Understanding WCAG How to Meet WCAG 2.0 Issues Cynthia Ng

    @TheRealArty 9

  10. Cynthia Ng @TheRealArty 10 http://www.flickr.com/photos/doug88888/4510508204/

  11. Template Consistent navigation (3.2.3) & identification (3.2.4) Multiple Methods of

    Discovery (2.4.5) Meaningful Order (1.3.2, 2.4.3) Use CSS for presentation (1.3.1) Cynthia Ng @TheRealArty 11

  12. Device Accessibility Cynthia Ng @TheRealArty 12

  13. Screen Sizes http://commons.wikimedia.org/wiki/File:LCD_screen_sizes.svg Cynthia Ng @TheRealArty 13

  14. Cynthia Ng @TheRealArty 14 http://techcrunch.com/2012/05/11/this-is-what-developing-for-android-looks-like/ via @mreidsma

  15. Responsive Design Cynthia Ng @TheRealArty 15 http://gvsu.edu/library/

  16. http://www.biologycorner.com/resources/elephantanatomy.gif Cynthia Ng @TheRealArty 16

  17. Structure Valid Markup (4.1.1) Page Title (2.4.2) Language (3.1.1) Bypass

    Blocks (2.4.1) Cynthia Ng @TheRealArty 17

  18. <!DOCTYPE html> <html lang="en"> <head> <title>Your Page Title</title> </head> <body>

    <header> <a href=“#menu” class=“skiplink”>Skip to Main Menu</a> <h1>site name</h1> <h2>tagline</h2> <nav id=“menu”> <a href=“#content” class=“skiplink”>Skip to Content</a> <a href=“...”>Global Nav Link</a> <a href=“...”>Second Nav Link</a> <a href=“...”>Yet Another Nav Link</a> </nav> </header> <div id="content”> <article> <!-- your content, a blog post for example --> </article> <article> <!-- another standalone piece --> </article> </div> <div id="secondary”> <!-- typically your sidebar --> </div> <footer > copyright and other info </footer> </body> </html> Cynthia Ng @TheRealArty 18

  19. ARIA Accessible Rich Internet Applications Cynthia Ng @TheRealArty 19

  20. Using ARIA in HTML http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html Cynthia Ng @TheRealArty 20

  21. <!DOCTYPE html> <html lang="en"> <head> <title>Your Page Title</title> </head> <body>

    <header role="banner"> <a href=“#menu” class=“skiplink”>Skip to Main Menu</a> <h1>site name</h1> <h2>tagline</h2> <nav id=“menu” role="navigation"> <a href=“#content” class=“skiplink”>Skip to Content</a> <a href=“...”>Global Nav Link</a> <a href=“...”>Second Nav Link</a> <a href=“...”>Yet Another Nav Link</a> </nav> </header> <div id="content" role="main"> <article role="article"> <!-- your content, a blog post for example --> </article> <article role="article"> <!-- another standalone piece --> </article> </div> <div id="secondary" role="complementary"> <!-- typically your sidebar --> </div> <footer role="contentinfo"> copyright and other info </footer> </body> </html> Cynthia Ng @TheRealArty 21

  22. Cynthia Ng @TheRealArty 22 http://www.flickr.com/photos/brendoncremer/8247367542/

  23. Presentation Colour Contrast (1.4.3) Cynthia Ng @TheRealArty 23

  24. Contrast Checker Firefox Add-on Cynthia Ng @TheRealArty 24

  25. Cynthia Ng @TheRealArty 25 http://www.flickr.com/photos/46009763@N07/5535174602/

  26. Content Cynthia Ng @TheRealArty 26

  27. Headers <h1>TRY Conference</h1> <h2>Presentations</h2> <h3>Making the Website Accessible</h3> <h2>Registration</h2> Cynthia

    Ng @TheRealArty 27 Page Title: TRY Conference Topic: Presentations Subtopic: Making the Website Accessible Topic: Registration

  28. Text Content Links (2.4.4) Text in Another Language (3.1.2) Tables

    (1.3.1) Cynthia Ng @TheRealArty 28

  29. Cynthia Ng @TheRealArty 29

  30. Cynthia Ng @TheRealArty 30

  31. Forms Cynthia Ng @TheRealArty 31

  32. Cynthia Ng @TheRealArty 32

  33. Cynthia Ng @TheRealArty 33

  34. Cynthia Ng @TheRealArty 34

  35. 35 Cynthia Ng @TheRealArty http://www.flickr.com/photos/greentea/29663666/

  36. Media Cynthia Ng @TheRealArty 36

  37. Images alt=“TRY logo” title=“Toronto Ryerson York library staff conference” Use

    Text for Text (1.4.5) Cynthia Ng @TheRealArty 37

  38. Cynthia Ng @TheRealArty 38 classicwfl.com

  39. Audio/Video Etc. Autoplay Control (2.2.2) Audio – 3 second rule

    (1.4.2) Flash – 3 in 1 second rule (2.3.1) On a Timer (2.2.1) Cynthia Ng @TheRealArty 39

  40. Cynthia Ng @TheRealArty 40

  41. https://www.youtube.com/watch?v=nJRIqVRbGIM Cynthia Ng @TheRealArty 41

  42. https://www.youtube.com/watch?v=LHkL0A4xi-I Cynthia Ng @TheRealArty 42

  43. Accessible UI jQuery UI Dijit YUI Library Cynthia Ng @TheRealArty

    43

  44. Takeaway Make Your Website Better for All Your Users Cynthia

    Ng @TheRealArty 44

  45. Cynthia Ng @TheRealArty 45 http://www.flickr.com/photos/blieusong/7234335792/

  46. Assessing Web Accessibility WCAG Quick Reference HTML Codesniffer W3C Web

    Accessibility Tools list - WAVE & Fangs Cynthia Ng @TheRealArty 46

  47. Additional Resources The Paciello Group Blog The Accessibility Project Cynthia

    Ng @TheRealArty 47

  48. Questions? Cynthia Ng [email protected] @TheRealArty about.me/cynthiang Cynthia Ng @TheRealArty 48