Make your website accessible for everyone

A presentation at dotCSS 2018 in November 2018 in Paris, France by Hugues Tennier

Slide 1

Slide 1

MAKE YOUR WEBSITE ACCESSIBLE FOR EVERYONE

Slide 2

Slide 2

BETTER COLOR CONTRAST

Slide 3

Slide 3

Emmenez-moi au bout de la terre Emmenez-moi au pays des merveilles Il me semble que la misère Serait moins pénible au soleil

Slide 4

Slide 4

Slide 5

Slide 5

RESIZABLE TEXT

Slide 6

Slide 6

AT 200% 😟 { font-size: 16px; padding: 5px 20px; BUY NOW } BUY NOW 😕 { font-size: 1.4rem; padding: 5px 20px; } 😨 { font-size: 1.4rem; height: 57px; } 😀 { font-size: 1.4rem; padding: 0.5m 2em; } BUY NOW BUY NOW BUY NOW

Slide 7

Slide 7

GOOD HEADING STRUCTURE

Slide 8

Slide 8

🤔 HEADING LEVEL 2 HEADING LEVEL 1 HEADING LEVEL 3 HEADING LEVEL 2 HEADING LEVEL 4 😎 HEADING LEVEL 1 HEADING LEVEL 2 HEADING LEVEL 3 HEADING LEVEL 2

Slide 9

Slide 9

VISIBLE FOCUS STATE

Slide 10

Slide 10

Slide 11

Slide 11

:focus { outline: none; } / Different focus states */ button:focus { outline: 2px aquamarine solid; background-colour: black; } input:focus { outline: 3px rebeccapurple dotted; }

Slide 12

Slide 12

RIGHT KEYBOARD INTERACTIONS

Slide 13

Slide 13

LINK BUTTON DIV

Slide 14

Slide 14

LINK • • • NAVIGATE TO NEW PAGE OR SAME PAGE ANNOUNCED AS LINK KEYBOARD SUPPORT WITH “ENTER” KEY

Slide 15

Slide 15

BUTTON • • • USED FOR INTERACTION ANNOUNCED AS BUTTON KEYBOARD SUPPORT WITH “ENTER” AND “SPACE” KEY

Slide 16

Slide 16

DIV • USED FOR STRUCTURING YOUR PAGE

Slide 17

Slide 17

BETTER COLOR CONTRAST RESIZABLE TEXT GOOD CONTENT STRUCTURE VISIBLE FOCUS STATE RIGHT KEYBOARD INTERACTIONS

Slide 18

Slide 18

THANK YOU! @HUGUESTENNIER