Day 16: Learning Accesibility

Hello day 16 is upon us. I feel so down this morning, but we must push. Started a new section on learning accessibility. In this section I will be building a quiz webpage. Here are my lessons:

  1. Accessibility is making your webpage easy for all people to use – even people with disabilities.
  2. The charset attribute specifies the character encoding of the page, and, nowadays, UTF-8 is the only encoding supported by most browsers.
  3. A useful property of an SVG (scalable vector graphics) is that it contains a path attribute which allows the image to be scaled without affecting the resolution of the resultant image.
  4. To increase the page accessibility, the role attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The role attribute is a part of the Web Accessibility Initiative (WAI), and accepts pre-set values.
  5. Every role requires a visible label, which should be referenced by the aria-labelledby attribute.
  6. Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens.
  7. It is important to link each input to the corresponding label element. This provides assistive technology users with a visual reference to the input. This is done by giving the label a for attribute, which contains the id of the input.
  8. Using a placeholder is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input.
  9. Arguably, abbreviations are not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read.

Below is are the html, css and webpage.

Day 16 pic 1.PNG

Day 16 pic 2.PNG

Day 16 pic 3.PNG

Day 16 pic 4.PNG

Thanks for reading. Have a beautiful weekend.