How to make your frontend accessible Frontend Conference Zurich, 30th August 2013 Werner Hänggi & Thomas Jaggi

© Unic & AdNovum - What you will learn today • How to avoid some major barriers for disabled users • How to test for basic accessibility • Where to find relevant information 2

© Unic & AdNovum - 1. Why care about accessibility? 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

© Unic & AdNovum - • Werner Hänggi • Software 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

© Unic & AdNovum - About our employers • AdNovum – 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

© Unic & AdNovum - «The power of the Web 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

© Unic & AdNovum - http://www.bfs.admin.ch/bfs/portal/de/index/themen/20/06/blank/key/01.html That’s why 1/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

• Example: VoiceOver • Apple’s built-in screen reader • Activate: System Preferences > Accessibility > VoiceOver • Toggle: Command-F5 Further reading: http://www.apple.com/accessibility/osx/voiceover/ © Unic & AdNovum - 2. How to test for screen reader accessibility? 8

© Unic & AdNovum - • Windows: • Jaws (commercial): http://www.freedomscientific.com/products/fs/jaws-product-page.asp • Window-Eyes (commercial): http://www.gwmicro.com/Window-Eyes/ • NVDA (open source): http://www.nvaccess.org/ • Linux: • Orca (open source, bundled with GNOME): https://projects.gnome.org/orca/ Further reading: http://webaim.org/techniques/screenreader/ Screen reader alternatives to VoiceOver 9

© Unic & AdNovum - Demo 1: Tables • Take home messages: • Use for header cells (with scope attribute if indicated) • Use for description • Links: • http://unic.github.io/FrontendAccessibilityTalk/1-1_table-inaccessible.html • http://unic.github.io/FrontendAccessibilityTalk/1-2_table-accessible.html 10

© Unic & AdNovum - 11 coresince84 / photocase.com

© Unic & AdNovum - • Example: VoiceOver on iOS • Activate: Settings > General > Accessibility > VoiceOver • Quick toggle: Settings > General > Accessibility > Triple-click home > VoiceOver Mobile phones have screen readers, too 12

© Unic & AdNovum - 3. Use the WCAG 2.0 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

© Unic & AdNovum - How the WCAG are structured • 4 principles • perceivable • operable • understandable • robust • 12 guidelines • Testable success criteria for each guideline • 3 conformance levels for success criteria: A (lowest), AA, AAA (highest) • Sufficient and advisory techniques to meet a criterion 14

© Unic & AdNovum - See http://www.w3.org/TR/WCAG20/#minimize-error • Example of 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

© Unic & AdNovum - Demo 2: Form markup and validation • Take home messages: • Use a 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

© Unic & AdNovum - 17 MANÜ! / photocase.com

© Unic & AdNovum - 4. How to take care 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 or • 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

© Unic & AdNovum - 19 We can make a difference.

© Unic & AdNovum - • Guidelines: • WCAG 2.0 (@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

© Unic & AdNovum - 5. Resources: Solutions for interactive elements • Guidelines: • WAI-ARIA 1.0: http://www.w3.org/TR/wai-aria/ • WAI-ARIA 1.0 Authoring Practices: http://www.w3.org/TR/wai-aria-practices/ • Tabs: • «Accessible ARIA Tabs» by Jason Kiss (@jskiss): http://www.accessibleculture.org/research/aria-tabs/ • «jQuery Accessible Tabs - How to make tabs REALLY accessible» by Dirk Ginader (@ginader): http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php • Dialogs: • «The Incredible Accessible Modal Window» by Greg Kraus (@gdkraus): http://accessibility.oit.ncsu.edu/training/aria/modal-window/ • «BPOW: Modal window focus management» by Jeff Smith (@jeffsmith): http://simplyaccessible.com/bpow/modal-focus/ • Menus: • «Accessible Mega Menu» by Adobe (@ AdobeAccess): http://adobe-accessibility.github.io/Accessible-Mega-Menu/ • «Accessible Dropdown Menus» by Terrill Thompson (@terrillthompson): http://terrillthompson.com/blog/202 21

© Unic & AdNovum - 22 Q & A

© Unic & AdNovum - 23

Röntgenstrasse 22 8005 Zürich Telefon +41 44 272 61 11 Fax +41 44 272 63 12 info@adnovum.ch www.adnovum.ch AdNovum Informatik AG © Unic - Seite Unic AG Hohlstrasse 536 8048 Zürich Schweiz Tel +41 44 560 12 12 zuerich@unic.com Unic AG Thomas Jaggi thomas.jaggi@unic.com Werner Hänggi werner.haenggi@adnovum.ch