Children of a Lesser dev

A presentation at Kreativer Austausch @ AgenturWebfox in August 2018 in Berlin, Germany by Gunnar Bittersmann

Children of a Lesser dev

“Accessibility is like a blueberry muﬃn – you can’t push the berries in there afterward.” C O R D E L IA M C G E E - T U B B

https:!//codepen.io/gunnarbittersmann/pen/VBNypL

<img> immer mit alt wenn kein Alternativtext nötig: alt=""
<html> immer mit lang

“Everybody is a keyboard user when eating lunch with their mouse hand.” A D R IA N R O S E L L I

“Disability is never a binary state. Hard of hearing, lack of vision, inability to comprehend. All are a sliding scale and all can affect you sooner than you may think.” C H R I S T IA N H E I L M A N N

Beeinträchtigungen visuell • motorisch • Gehör • kognitiv • • temporär • permanent • situationsbezogen

https:!//codepen.io/gunnarbittersmann/pen/GBaMEO

Nur interaktive Elemente als Targets für click-Events: <a> für Verlinkungen <button> für Aktionen

<div id="my-widget"> <button id="my-widget-a">A!</button> <button id="my-widget-b">B!</button> !</div> let myWidget = document.querySelector(#my-widget); myWidget.addEventListener('click', event !=> { if (event.target.nodeName !!=== 'BUTTON') { !// !!... } });

<div id="my-widget"> <button id="my-widget-a">A</button> <button id="my-widget-b">B</button> </div> let myWidget = document.querySelector(#my-widget); myWidget.addEventListener('click', event => { if (event.target.nodeName === 'BUTTON') { // ... } });

Wo immer :hover, da auch :focus! nicht outline: none (wenn keine anderen Stile für :focus)

Wo immer :hover, da auch :focus! nicht outline: none (wenn keine anderen Stile für :focus)

https:!//codepen.io/gunnarbittersmann/pen/rKVBXR

https:!//codepen.io/gunnarbittersmann/pen/pZmdNj

<label> für <input> nicht display: none für interaktive Elemente

<span class="icon icon-star" aria-hidden="true"></span> @font-face { font-family: 'icons'; src: …; } .icon { font-family: 'icons' } .icon-star::after { content: '\e83a' }

<svg> <use xlink:href="icons.svg#star"/> </svg>

Verwende keine Iconfonts! Verwende SVG: <use>

https:!//webaim.org/resources/contrastchecker/

WCAG • wahrnehmbar • bedienbar • verständlich • robust

“How do I convince stakeholders?” “Don’t! Just go ahead and do it anyway!” L É O N I E WAT S O N

“Arguing with teammates over ‘bothering with accessibility’ makes me so angry. Every. Time. So. Angry. Yes. ‘Bother.’ It’s your job.” JEN SIMMONS

THE END

NOT THE END

Gunnar Bittersmann
@gunnarbittersmann

1 / 26

Einführung in Barrierefreiheit

Resources

The following resources were mentioned during the presentation or are useful additional information.

WebAIM Color Contrast Checker