A presentation at dotCSS 2018 in in Paris, France by Hugues Tennier
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
Lightning talk presented at dotCSS 2018
Here’s what was said about this presentation on social media.
for free. You
can too.