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

Implementing WCAG by Making Your Website Accessible for Everyone

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

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
When Work Doesn't Fit the Mold, a Chief of Staff Steps In
cynthiang
0
120
A Public Handbook: Building trust with the team, customers, and beyond
cynthiang
0
130
Docs as Code: Automation the Developer way
cynthiang
0
200
Everyone Can Contribute: Making Support Effective Through Contributions
cynthiang
0
180
Implementing Values in Practical Ways
cynthiang
0
280
Evaluating Your Website for Accessibility Compliance and WCAG 2.1
cynthiang
0
390
Making Accessible Content and Websites in WordPress
cynthiang
0
540
Auditing Your Website for Accessibility Compliance and Understanding How ADA Applies
cynthiang
0
450
Code4lib(BC): What It's All About
cynthiang
0
430

Other Decks in Technology

See All in Technology
MUGA - Bodyless Immersion
takuro_nakajima
PRO
0
1.4k
AWS を使う上で知っておきたいオンプレミス知識/aws-on-premise-essentials
emiki
0
3.7k
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
ビジネスとエンジニアリングの接合点 そしてコード品質がそこに及ぼす影響 v1.1 / The Intersections of Business and Engineering, and The Impact of Code Quality There (v1.1)
mtx2s
11
2.4k
IVRy Culture Deck for Engineers
ivry
1
370
Podmanで推す OpenShift Kubernetes入門/Introduction to OpenShift and K8s by Podman
tnk4on
0
180
Four keys改善の取り組み事例紹介
sansantech
PRO
2
210
The CloudCompare project by Dr. Daniel Girardeau-Montaut
kentaitakura
0
320
Head toward Java 22 and Java 23
lycorptech_jp
PRO
1
140
Code Smells @Voxxed Bucharest 24
victorrentea
2
660
Docker再入門 ~コンテナ・イメージ編~
yoshiyoshiharu
18
6.9k
Databricks におけるデータエンジニアリング
databricksjapan
0
260

Featured

See All Featured
How to Ace a Technical Interview
jacobian
272
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
The Cost Of JavaScript in 2023
addyosmani
13
3.8k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Gamification - CAS2011
davidbonilla
76
4.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Building Applications with DynamoDB
mza
88
5.6k
Mobile First: as difficult as doing things right
swwweet
215
8.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
19
1.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
2k

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