Successfully reported this slideshow.
// Freiburg // 11/10/2016 // Frontend Meetup
// WEB ACCESSIBILITY
11. Oktober 2016, Freiburg
ACCESSIBILITY// 3
// TYPES OF
DISABILITY
VISUAL
(blindness, low vision, color-blindness)
HEARING
(deafness and hard-of-hea...
// Reframing Accessibility
We need to change the way we talk about accessibility. Most
people are taught that “web accessi...
// Web designers and developers
should treat accessibility as a
fundamental part of
development and not an
afterthought.
ACCESSIBILITY// 6
// DESIGN
RECOMMEND-
ATIONS
Plan Heading Structure Early
Consider Reading Order
Provide Good Contrast
Wa...
ACCESSIBILITY// 7
// DEVELOPER
RECOMMEND-
ATIONS
Alt text only where necessary (not title)
Links must contain text
(screen...
ACCESSIBILITY// 8
// SCREEN READER
ONLY
/*
* Hide only visually, but have it available
* for screen readers
*/
.visuallyhi...
// WAI-ARIA provides attributes
for extending HTML markup
with roles, states and
properties to expose Web
applications to ...
ACCESSIBILITY// 10
// WAI-ARIA
ROLES
HTML5
Implied ARIA
role
<header> role="banner"
<nav> role="navigation"
<main> role="m...
ACCESSIBILITY// 11
// WAI-ARIA
COMMON
STATES &
PROPERTIES Common States:
aria-disabled
aria-hidden
Common Properties:
aria...
ACCESSIBILITY// 12
// WAI-ARIA
MENU
EXAMPLE
<nav role="navigation“>
<ol>
<li><h2><a href="http://...">Home</a></h2></li>
<...
ACCESSIBILITY// 13
// WAI-ARIA
SEARCH FORM
EXAMPLE
<form role=”search”>
<label for=”search”>Search</label>
<input type=”se...
ACCESSIBILITY// 14
// SKIP TO
CONTENT
<header role="banner“>
<a id="skip-to-content" href="#content">skip to main content<...
ACCESSIBILITY// 15
// TOOLS
ChromeVOX
In-Browser Screen Reader Chrome Extension
Accessibility Developer Tools
Chrome Exten...
ACCESSIBILITY// 16
// FURTHER
READING
http://webaim.org/resources/designers/#infographic
http://alistapart.com/article/ref...
ACCESSIBILITY// 17
// KONTAKT
EMMA SEIFRIED
KULTWERK GMBH
HOLBEINSTRASSE 2
79100 FREIBURG
T +49 761.458 95 54-7
F +49 761....
Nächste SlideShare
Wird geladen in …5
×

Web Accessibility

230 Aufrufe

Veröffentlicht am

Covers best practices for designers and developers, along with ARIA roles and attributes to enhance the accessibility of your pages.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Web Accessibility

  1. 1. // Freiburg // 11/10/2016 // Frontend Meetup
  2. 2. // WEB ACCESSIBILITY 11. Oktober 2016, Freiburg
  3. 3. ACCESSIBILITY// 3 // TYPES OF DISABILITY VISUAL (blindness, low vision, color-blindness) HEARING (deafness and hard-of-hearing) MOTOR (inability to use a mouse, slow response time, limited fine motor control) COGNITIVE (learning disabilities, distractability, memory deficits, inability to focus on large amounts of information)
  4. 4. // Reframing Accessibility We need to change the way we talk about accessibility. Most people are taught that “web accessibility means that people with disabilities can use the Web”—the official definition from the W3C. This is wrong. Web accessibility means that people can use the web. Anne Gibson, A LIST APART
  5. 5. // Web designers and developers should treat accessibility as a fundamental part of development and not an afterthought.
  6. 6. ACCESSIBILITY// 6 // DESIGN RECOMMEND- ATIONS Plan Heading Structure Early Consider Reading Order Provide Good Contrast Watch the Use of CAPS Use Adequate Font Size Remember Line Length Make Sure Links are Recognizable Ensure Link Text Makes Sense on Its Own Use Animation, Video, and Audio Carefully Don't Rely on Colour Alone
  7. 7. ACCESSIBILITY// 7 // DEVELOPER RECOMMEND- ATIONS Alt text only where necessary (not title) Links must contain text (screenreader only, if necessary) Use Semantic Elements correctly, HTML5 where possible Apply ARIA Roles responsibly Navigate site with Keyboard Set Focus State Design Accessible Form Controls Careful using display:none Skip to content link Set language
  8. 8. ACCESSIBILITY// 8 // SCREEN READER ONLY /* * Hide only visually, but have it available * for screen readers */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  9. 9. // WAI-ARIA provides attributes for extending HTML markup with roles, states and properties to expose Web applications to Assistive Technologies (AT).
  10. 10. ACCESSIBILITY// 10 // WAI-ARIA ROLES HTML5 Implied ARIA role <header> role="banner" <nav> role="navigation" <main> role="main" <footer> role="contentinfo" <aside> role="complement ary" <article> role=“article" <section> role=“region” HTML5 Tags still require Aria Landmark Roles (lack of HTML5 support : www.html5accessibility.com )
  11. 11. ACCESSIBILITY// 11 // WAI-ARIA COMMON STATES & PROPERTIES Common States: aria-disabled aria-hidden Common Properties: aria-expanded aria-controls aria-describedby aria-haspopup aria-label aria-labelledby aria-required
  12. 12. ACCESSIBILITY// 12 // WAI-ARIA MENU EXAMPLE <nav role="navigation“> <ol> <li><h2><a href="http://...">Home</a></h2></li> <li> <h2> <a id="menu-1" href="http://..." aria-haspopup="true" aria-controls="menu-1-panel" aria-expanded="true" class="open">Industries</a> </h2> <div class=„panel open" id="menu-1-panel" role="group" aria-expanded="true" aria-hidden="false" aria-labelledby="menu-1"> <h3>Food</h3> </div> </li> </ol> </nav> <nav role="navigation“> <ol> <li><h2><a href="http://...">Home</a></h2></li> <li> <h2> <a id="menu-1" href="http://..." aria-haspopup="true" aria-controls="menu-1-panel" aria-expanded="true" class="open">Industries</a> </h2> <div class=„panel open" id="menu-1-panel" role="group" aria-expanded="true" aria-hidden="false" aria-labelledby="menu-1"> <h3>Food</h3> </div> </li> </ol> </nav>
  13. 13. ACCESSIBILITY// 13 // WAI-ARIA SEARCH FORM EXAMPLE <form role=”search”> <label for=”search”>Search</label> <input type=”search” id=” search” name=” search”> <button>submit</button> </form> <form role=”search”> <label for=”search”>Search</label> <input type=”search” id=” search” name=” search”> <button>submit</button> </form>
  14. 14. ACCESSIBILITY// 14 // SKIP TO CONTENT <header role="banner“> <a id="skip-to-content" href="#content">skip to main content</a> <h1>Site Name</h1> <nav role="navigation"> <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> <a href="#">Link4</a> </nav> </header> <main id="content" role="main" tabindex="0"> <header role="banner“> <a id="skip-to-content" href="#content">skip to main content</a> <h1>Site Name</h1> <nav role="navigation"> <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> <a href="#">Link4</a> </nav> </header> <main id="content" role="main" tabindex="0"> #skip-to-content { padding: 1em; position: absolute; top: -40px; left: 1em; z-index: 1000; color: white; } #skip-to-content:focus { position: absolute; top: 0; background: #4593ff; } #skip-to-content { padding: 1em; position: absolute; top: -40px; left: 1em; z-index: 1000; color: white; } #skip-to-content:focus { position: absolute; top: 0; background: #4593ff; } HTML CSS
  15. 15. ACCESSIBILITY// 15 // TOOLS ChromeVOX In-Browser Screen Reader Chrome Extension Accessibility Developer Tools Chrome Extension for Accessilbity Audits using Web Developer http://wave.webaim.org/ https://tenon.io Online Accesibility Tests NoCoffee Vision Simulator Chrome Extension http://webaim.org/resources/contrastchecker/ Colour Contrast Checker http://www.paciellogroup.com/resources/contrastana lyser/ Colour Contrast Analyser
  16. 16. ACCESSIBILITY// 16 // FURTHER READING http://webaim.org/resources/designers/#infographic http://alistapart.com/article/reframing-accessibility- for-the-web http://www.w3.org/WAI/ http://webaim.org/ http://a11yproject.com/ https://webaccessibility.withgoogle.com Google Accessibility free online Course “Inclusive Design Patterns”, Smashing Mag
  17. 17. ACCESSIBILITY// 17 // KONTAKT EMMA SEIFRIED KULTWERK GMBH HOLBEINSTRASSE 2 79100 FREIBURG T +49 761.458 95 54-7 F +49 761. 458 95 54-9 EMMA.SEIFRIED@KULTWERK.DE WWW.KULTWERK.DE

×