Day 17: Learning Accessibility

Photo by Carlos Muza on Unsplash

Day 17: Learning Accessibility

It’s another beautiful day to learn something new. Welcome to my detailed journey to be becoming a software developer. Its my 17th day on this journey. Today, I continued with my learning accessibility with HTML and CSS. These are what I learnt today:

  1. it is still best-practice to explicitly link a label with its corresponding input element.
  2. On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1
  3. There exists a media rule to set CSS based on the user's browser settings. This media rule is called prefers-reduced-motion, and expects one of the following values: • Reduce • Non-preference
  4. The navigation accessibility can be improved by providing keyboard shortcuts. The accesskey attribute accepts a space-separated list of access keys. For example:Submit

The link to the quiz form is here: onose12.github.io/Quiz-Page

  1. For Form Validation: In addition to checking the length of a text, we could also add a validation to check how the text was provided. For cases when we want user input to follow specific guidelines, we use the pattern attribute and assign it a regular expression, or regex. Regular expressions are a sequence of characters that make up a search pattern. If the input matches the regex, the form can be submitted. (Learnt this on codecademy).
  2. Client-side validations happen in the browser before information is sent to a server. (Codecademy taught me).
  3. Adding the required attribute to an input related element will validate that the input field has information in it.
  4. Assigning a value to the min attribute of a number input element will validate an acceptable minimum value, assigning a value to the max attribute of a number input element will validate an acceptable maximum value.
  5. Assigning a value to the minlength attribute of a text input element will validate an acceptable minimum number of characters, assigning a value to the maxlength attribute of a text input element will validate an acceptable maximum number of characters.
  6. defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
  7. The element holds content that makes sense on its own. can hold content such as articles, blogs, comments, magazines, etc. An tag would help someone using a screen reader understand where the article content (that might contain a combination of text, images, audio, etc.) begins and ends.
  8. The element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content.
  9. is an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document.
  10. is an element used to describe the media in the tag. Usually, will go inside . This is different than using a

    element to describe the content; if we decide to change the location of

    , the paragraph tag may get displaced from the figure while a will move with the figure. This is useful for grouping an image with a caption.