The document discusses web accessibility, emphasizing the need to reframe how the topic is approached, stating that accessibility should be integral to web development. It outlines various types of disabilities and provides best practices and recommendations for designers and developers to enhance accessibility, including using semantic HTML and WAI-ARIA attributes. Additionally, it lists tools and resources for further learning and improvements in web accessibility.

1. // Freiburg // 11/10/2016 // Frontend Meetup

2. // WEB ACCESSIBILITY
11. Oktober 2016, Freiburg

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. // 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. // Web designers and developers
should treat accessibility as a
fundamental part of
development and not an
afterthought.

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. 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. 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. // WAI-ARIA provides attributes
for extending HTML markup
with roles, states and
properties to expose Web
applications to Assistive
Technologies (AT).

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. 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. 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. 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. 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. 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. 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. 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