Make your website accessible for everyone

MAKE YOUR WEBSITE ACCESSIBLE FOR EVERYONE

BETTER COLOR CONTRAST

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

RESIZABLE TEXT

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

GOOD HEADING STRUCTURE

🤔 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

VISIBLE FOCUS STATE

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

RIGHT KEYBOARD INTERACTIONS

LINK BUTTON DIV

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

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

DIV • USED FOR STRUCTURING YOUR PAGE

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

THANK YOU! @HUGUESTENNIER

MAKE YOUR WEBSITE ACCESSIBLE FOR EVERYONE