Children of a Lesser dev

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

Slide 1

Slide 1

Children of a Lesser dev

Slide 2

Slide 2

“Accessibility is like a blueberry muffin – 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

Slide 3

Slide 3

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

Slide 4

Slide 4

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

<html> immer mit lang

Slide 5

Slide 5

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

Slide 6

Slide 6

“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

Slide 7

Slide 7

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

Slide 8

Slide 8

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

Slide 9

Slide 9

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

Slide 10

Slide 10

<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') { !// !!... } });

Slide 11

Slide 11

<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') { // ... } });

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

Slide 19

Slide 19

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

Slide 20

Slide 20

Verwende keine Iconfonts! Verwende SVG: <use>

Slide 21

Slide 21

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

Slide 22

Slide 22

WCAG • wahrnehmbar • bedienbar • verständlich • robust

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

THE END

Slide 26

Slide 26

NOT THE END