Day 1 & 2

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).

Clip from a screenreader on FreeCodeCamp

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:

How to Make Elements Visible to a Screen Reader by Using Custom CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.