Designed for Inclusion: Writing CSS with Accessibility in Mind

A presentation at stahlstadt.js Meetup in in Linz, Austria by Manuel Matuzovic

Web accessibility has so many facets, that learning about it and implementing it correctly may seem daunting to some of us. Just imagine excluding a whole group of users by simply declaring * { outline: none; }.

The good news, though, is that CSS has a lot to offer that may help us create accessible web sites and web apps. This talk aims to demystify web accessibility and provide you with simple and practical CSS tips and tricks, which you can easily incorporate into your workflow today. You are going to find out how to make your web projects more inclusive and improve the usability and user experience at the same time.

Resources

The following resources were mentioned during the presentation or are useful additional information.

  • Links

    Medium articles https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412 https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9

    Font styling https://blog.marvelapp.com/body-text-small/ https://madebymike.com.au/writing/precise-control-responsive-typography/ https://www.wired.com/2016/10/how-the-web-became-unreadable/ https://zellwk.com/blog/why-vertical-rhythms/

    Pseudo-elements https://tink.uk/accessibility-support-for-css-generated-content/

    Print https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6

    Color and Color Contrast https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/ http://www.particletree.com/features/interfaces-and-color-blindness/

    Order http://adrianroselli.com/2017/02/not-all-screen-reader-users-are-blind.html http://adrianroselli.com/2015/09/source-order-matters.html

    Focus https://allyjs.io/tests/focus-outline-styles/index.html#style=focus&key=text,radio,checkbox,textarea,button,link,div&browser=firefox,chrome,safari,ie11 https://download.microsoft.com/download/B/0/D/B0D4BF87-09CE-4417-8F28-D60703D672ED/INCLUSIVE_TOOLKIT_MANUAL_FINAL.pdf

    Grid and flat document structures https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/