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
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
Editor's Notes
Intro
Designer Recommendations
Developer Recommendations
WAI-ARIA Web Accessibility Initiative – Accessibile Rich Internet Applications
Tools
Further Reading
VISUAL (blindness, low vision, color-blindness)Markup should be in a logical reading order. Foreground and background colors of text must have enough contrast to be readable without color.
HEARING (deafness and hard-of-hearing) All videos should have captions. Don’t convey important information by sound only.
MOTOR (inability to use a mouse, slow response time, limited fine motor control)Ensure that users can navigate the site by using the keyboard (tab to move forward and shift+tab for backwards).
COGNITIVE (learning disabilities, distractability, memory deficits, inability to focus on large amounts of information)This is a broader disability that is more difficult to code for. In general, developers should strive for organization, clarity, simplicity, and ease of navigation.
Web use is constantly changing:
Voice
Haptische Devices
Games console
http://webaim.org/resources/designers/
Plan Heading Structure Early
Ensure all content and design fits into a logical heading structure.
Consider Reading Order
The reading order should be the same as the visual order.
Provide Good Contrast
Be especially careful with light shades of gray, orange, and yellow. Check your contrast levels with our color contrast checker.
Use True Text Whenever Possible
True text enlarges better, loads faster, and is easier to translate. Use CSS to add visual style.
Watch the Use of CAPS
All caps can be difficult to read and can be read incorrectly by screen readers.
Use Adequate Font Size
Font size can vary based on the font chosen, but 10 point is usually a minimum.
Remember Line Length
Don&apos;t make it too long or too short.
Make Sure Links are Recognizable
Differentiate links in the body of the page with underlines or something other than color alone.
Ensure Link Text Makes Sense on Its Own
Avoid &quot;Click Here&quot; in link text. Other ambiguous links, such as &quot;More&quot; or &quot;Continue&quot;, can also be confusing.
Screen readers will often jump through links, skipping the content inb etween, to skim through pages
Use Animation, Video, and Audio Carefully
If used, provide a play/pause button. Avoid flashing or strobing content: It can cause seizures.
Don&apos;t Rely on Color Alone
Because users often can&apos;t distinguish or may override page colors, color cannot be the only way information is conveyed.
Reduce Cognitive Overload
Alt text only where necessaryAlternative Text should be based on the function of the graphic, not the appearance. Use blank alt text for decorative images or use CSS. Title should not be used, especially not if meant to convey important information.
Links must contain textCorrect Translation of sr-only tags
Use Semantic Elements correctly, HTML5 where possibleListen können als solche angesagt werden (typische Ausgabe: „Liste enthält 4 Elemente”) und komplett übersprungen werden können. Allerdings sollten Listen nicht mißbraucht werden, um Trennelemente in einem eigenen List item anzuzeigen (&lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;)Schlechte Beispiel: https://getbootstrap.com/examples/navbar/
Apply ARIA Roles responsibly. First rule of ARIA use:„If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.“
Navigate Site with KeyboardMake sure everything works on a keyboard. Everything that’s clickable needs to also be tabbable
Set Focus StateEnsure keyboard users can visually identify a focused link. Use the standard dotted line or other non-color designators.(Bad example: http://www.spiegel.de/ Good example: http://www.bbc.com/)
Design Accessible Form ControlsEnsure form controls have descriptive labels and instructions. Pay close attention to form validation errors and recovery mechanisms.Use Fieldsets and Legends to group related form elements (important for radio buttons and checkboxes)
Wichtige Grafiken, wie Logos, nicht als CSS-background-image einbinden. Ansonsten entstehen Probleme für stark sehbehinderte Nutzer, die auf eigene Farben angewiesen sind und mit einem systemweiten Kontrastschema arbeiten (z.B. Windows Kontrast #1) – in diesem Fall werden CSS-Hintergrundbilder grundsätzlich nicht angezeigt, diese Nutzer bekommen also einen großen leeren Bereich präsentiert. Vorschlag: als echtes &lt;img&gt; mit entsprechendem alt-Attribut einbinden
Careful using display:none Screen readers sometimes ignore display:none. This means the content will be read despite being “hidden”. Also use visibility: hidden
Design a &quot;Skip to Main Content&quot; LinkA link for keyboard users to skip navigation should be at the top of the page. It can be hidden, but should be visible when it receives keyboard focus.(Bad example: http://www.zeit.de/ Good example: http://webaim.org/)
Set LanguageDeclaring a language attribute on the html element enables a screen reader to read out the text with correct pronunciation.
No-JS alternatives
As web pages become more and more complex with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies, these user interface controls and content updates are often not accessible to users with disabilities, especially screen reader users and users who cannot use a mouse or other pointing device.
First rule: Use a native HTML element or attribute when you can
Second rule: Do not change native semantics, unless you really must.
Third rule: All interactive elements must have accessible name, role, state and properties as applicable.
Fourth rule: All interactive ARIA controls must be usable with the keyboard.
Fifth rule: Do not use role=&quot;presentation&quot; or aria-hidden=&quot;true&quot; on a visible focusable element.
WAI-ARIA is included in HTML5 making it part of normative language.
Before and after example: http://alistapart.com/article/accessibility-the-missing-ingredient
&lt;form role=„search“&gt;
Unnecessary ARIA Roles:
button
heading
link
list / listitem
radio (if not styled)