Accessibility 101 - 01

Posted on December 7, 2023
Tags:

In my previous post, I mentioned that I’ll improve my skills related to Web Development and I decided to start with Accessibility (aka A11y). I started watching the series about freeCodeCamp - Accessibility Quiz which follows 50 steps to learn more about A11y. I plan to watch the video, take some notes, write down some thoughts, and apply some concepts in my blog post.

Steps 1-10

Fortunately, we already have most of the following suggestion in the blog:

  • lang attribute for html tag
<html lang='en'></html>
  • meta tag and define charset attribute
<meta charset='UTF-8' />
  • meta tag and define viewport with the content attribute
<meta name="viewport" content="width=device-width, initial-scale" />
  • meta tag and define description attribute
<meta name="description" content="A blog page for people who is interested in programming.">
  • title tag to understand the content of a page
<title>CAMM Blog</title>
  • Use semantic HTML elements (e.g. header, nav, main, etc.)

Those tips are useful but in the video we never got to the point of actually using a screen reader that will use the metadata provided. After all, we included all of these tags, attributes, and values so that they could help end users to navigate easily through the site. Are we really going getting that goal?

I tried the orca screen reader and it did used the title to mention the tab that I selected but it didn’t use the other meta tags. Nevertheless, the other tags are useful for search engines to present content to reader and then screen readers can be used to tell the user what the website is about.