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:
- it is still best-practice to explicitly link a label with its corresponding input element.
- 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
- 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
- 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
- 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).
- Client-side validations happen in the browser before information is sent to a server. (Codecademy taught me).
- Adding the required attribute to an input related element will validate that the input field has information in it.
- 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.
- 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.
- defines elements in a document, such as chapters, headings, or any other area of the document with the same theme.
- 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.
- The element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content.
- 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.
- 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.