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.
The following resources were mentioned during the presentation or are useful additional information.
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/
for free. You
can too.