Children of a Lesser dev

Slide 1

Slide 2

“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

Slide 3

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

Slide 4

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

<html> immer mit lang

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

“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

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

Slide 8

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

Slide 9

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

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

<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

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

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

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

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' }