Working through Applied Accessibility on FreeCodeCamp.
A lot of this is familiar to me through the Treehouse courses I have completed previously (such as adding markup for header, footer, main, and article, and adding alt tags) and the training session that we did as part of our Apprenticeship programme with Andrew Macpherson (Fuzzbomb on GitHub).
The main part that I found really interesting was the same of a screen reader – I am genuinely shocked at how fast this talks! It is not legible at all for me.
New things I have learned
- The ‘figure’ and ‘figcaption’ labels for diagrams and charts
- Marking up forms and lists with ‘label for’, ‘fieldset’ and ‘legend’
- ‘Date’ and ‘datetime’ labels
- Using the ‘accesskey’ label for hyperlinks.
Plus, I learned how to hide content meant only for screen readers using custom CSS (.sr-only) – for example, if information is in a visual format such as a chart, screen reader users need an alternative way to view this information such as a table: