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.
How to make your frontend accessibleFrontend Conference Zurich, 30th August 2013Werner Hänggi & Thomas Jaggi
View Slide
© 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 information2
© Unic & AdNovum -1. Why care about accessibility?2. How to test for screen reader accessibilityDemo 1: Table markupDemo 2: Form markup and validation3. Use the WCAG 2.0 to guide you4. How to take care of keyboard accessibilityDemo 3: Element focusDemo 4: Buttons and interaction5. Resources6. Q & AAgenda3
© Unic & AdNovum -• Werner Hänggi• Software developer• Degree in computer science from the Swiss Federal Institute oftechnologyAbout us4• Thomas Jaggi• Frontend Engineer• Degree in nutrition science from the Swiss Federal Institute oftechnology
© 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 solutionsfor 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.html5
© Unic & AdNovum -«The power of the Web is in itsuniversality. Access by everyoneregardless of disability is an essentialaspect.»Tim Berners-Lee, W3C Director and inventor of the World Wide Web1. Why care about accessibility?6
© Unic & AdNovum -http://www.bfs.admin.ch/bfs/portal/de/index/themen/20/06/blank/key/01.htmlThat’s why1/6• Swiss Federal Statistical Office (2011): «According to various sources the numberof 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-F5Further 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 VoiceOver9
© 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.html10
© Unic & AdNovum - 11coresince84 / photocase.com
© Unic & AdNovum -• Example: VoiceOver on iOS• Activate: Settings > General > Accessibility > VoiceOver• Quick toggle: Settings > General > Accessibility > Triple-click home > VoiceOverMobile phones have screen readers, too12
© 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 toa wider range of people with disabilities, includingblindness and low vision, deafness and hearing loss, learningdisabilities, cognitive limitations, limited movement, speechdisabilities, photosensitivity and combinations of these.Following these guidelines will also often make your Webcontent 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 criterion14
© 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 interfacemust be understandable.• Guideline 3.3 Input Assistance: Help users avoid and correct mistakes.• 3.3.2 Labels or Instructions: Labels or instructions are provided whencontent 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 legendWCAG example: form labels15
© 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 andfocusing 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.html16
© Unic & AdNovum - 17MANÜ! / 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 createkeydown 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.html18
© Unic & AdNovum - 19We 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. Resources20
© 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/20221
© Unic & AdNovum - 22Q & A
© Unic & AdNovum - 23
Röntgenstrasse 228005 ZürichTelefon +41 44 272 61 11Fax +41 44 272 63 12[email protected]www.adnovum.chAdNovumInformatik AG© Unic - SeiteUnic AGHohlstrasse 5368048 ZürichSchweizTel +41 44 560 12 12[email protected]Unic AGThomas Jaggi[email protected]Werner Hänggi[email protected]
backflip
zoetrope
kentaroutakeda
miso
ivargrimstad
77web
utgwkk
yuhei_fujita
gpsnmeajp
itohiro73
manfredsteyer
.png){kind=avatar}
headwaters
gr2m
mraible
skipperchong
myddelton
62gerente
shlominoach
jcasabona
tammielis
panda_program
thoeni
kneath
lynnandtonic