Frontend Conference Zürich 2013, Werner Hänggi & Thomas Jaggi.
- How to avoid some major barriers for disabled users.
- How to test for basic accessibility using VoiceOver.
- Where to find relevant information regarding technical solutions.
2. How to test for screen reader accessibility Demo 1: Table markup Demo 2: Form markup and validation 3. Use the WCAG 2.0 to guide you 4. How to take care of keyboard accessibility Demo 3: Element focus Demo 4: Buttons and interaction 5. Resources 6. Q & A Agenda 3
developer • Degree in computer science from the Swiss Federal Institute of technology About us 4 • Thomas Jaggi • Frontend Engineer • Degree in nutrition science from the Swiss Federal Institute of technology
– Swiss Engineering Quality • Core Competence: High-End Security & Software Engineering • Est. 1988 – privately owned joint-stock company • Zurich (HQ), Bern, Budapest (Hungary), Singapore • 350 employees, 70% graduate engineers • Job openings: http://www.adnovum.ch/unternehmen/karriere/stellenangebote.html • Unic – Successful in e-business since 1996 • Founded in 1996 in Switzerland • We design, develop and maintain premium e-business solutions for e-commerce, digital communication and collaboration • We are an independent, owner-operated group with 220 employees • Offices in Bern, Karlsruhe, Munich, Vienna and Zurich • Job openings (frontend, IA, design etc.): http://www.unic.com/ch/de/about/career/jobs.html 5
is in its universality. Access by everyone regardless of disability is an essential aspect.» Tim Berners-Lee, W3C Director and inventor of the World Wide Web 1. Why care about accessibility? 6
Swiss Federal Statistical Office (2011): «According to various sources the number of people with disabilities can be estimated to be about 1.4 millions.» 7
home messages: • Use <th> for header cells (with scope attribute if indicated) • Use <caption> for description • Links: • http://unic.github.io/FrontendAccessibilityTalk/1-1_table-inaccessible.html • http://unic.github.io/FrontendAccessibilityTalk/1-2_table-accessible.html 10
• Activate: Settings > General > Accessibility > VoiceOver • Quick toggle: Settings > General > Accessibility > Triple-click home > VoiceOver Mobile phones have screen readers, too 12
to guide you • WCAG: Web Content Accessibility Guidelines • W3C Recommendation, http://www.w3.org/TR/WCAG/ «Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. Following these guidelines will also often make your Web content more usable to users in general.» 13
success criterion regarding form elements: • Principle 3: Understandable: Information and the operation of user interface must be understandable. • Guideline 3.3 Input Assistance: Help users avoid and correct mistakes. • 3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A) • Sufficient Techniques for 3.3.2 - Labels or Instructions • G131: Providing descriptive labels • H90: Indicating required form controls using label or legend WCAG example: form labels 15
validation • Take home messages: • Use a <label> for every field • Indicate required fields with text inside the label. Use required and aria-required attributes as progressive enhancement. • Tell the user if input is invalid by inserting an error message into the label and focusing the first invalid field. Use aria-invalid as progressive enhancement. In the future, aria- describedby might be sufficient to connect errors to the corresponding field. • Links: • http://unic.github.io/FrontendAccessibilityTalk/2-1_form-inaccessible.html • http://unic.github.io/FrontendAccessibilityTalk/2-2_form-accessible.html • http://unic.github.io/FrontendAccessibilityTalk/2-3_form-aria.html • http://unic.github.io/FrontendAccessibilityTalk/2-4_form-html5.html 16
of keyboard accessibility • Take home messages: • Do not remove focus outline • If you do anyway: apply new, obvious focus styles • Use natively accessible elements like <a> or <button> • If you do not: add role=”button” and tabindex=”0” and create keydown listeners for space and enter keys • Links: • http://unic.github.io/FrontendAccessibilityTalk/3-1_focus-inaccessible.html • http://unic.github.io/FrontendAccessibilityTalk/3-2_focus-accessible.html • http://unic.github.io/FrontendAccessibilityTalk/4-1_button-inaccessible.html • http://unic.github.io/FrontendAccessibilityTalk/4-2_button-accessible.html 18
(@w3c_wai): http://www.w3.org/TR/WCAG20/ • P028: http://www.isb.admin.ch/themen/standards/alle/03237/ • Consulting and certification: • Access for all (@Access4All): http://www.access-for-all.ch • Research, recommendations and news: • The Paciello Group by Steve Faulkner (@stevefaulkner) & Co.: http://www.paciellogroup.com/ • WebAIM (@WebAIM) by Jared Smith (@jared_w_smith) & Co. : http://webaim.org/ • Simply Accessible by Derek Featherstone (@feather): http://simplyaccessible.com/ • Accessible Culture by Jason Kiss (@jkiss): http://accessibleculture.org/ • Juicy Studio by Gez Lemon (@gezlemon): http://juicystudio.com/ • Karl Groves (@karlgroves): http://www.karlgroves.com/ • Marco’s accessibility blog (@MarcoZehe): http://www.marcozehe.de/ • The Accessibility Project (@ A11YProject): http://a11yproject.com/ 5. Resources 20
backflip
watabee
hayat01sh1da
tomokusaba
cp20
caarlos0
algoartis
yuukis
rkaga
goataka
ivargrimstad
manfredsteyer
suneo3476
bkeepers
jnunemaker
pauljervisheath
samanthasiow
productmarketing
csswizardry
eileencodes
morganepeng
garrettdimon
stephaniewalter
pedronauck
speakerdeck
