Coding log 04.29.19

April 28th, 2019

Today I continued the Applied Accessibility Curriculum in freeCodeCamp.

The “for” attribute

I learned about the “for” attribute used in labels. This attribute associates the label with the form control and is used by screen readers. Once I saw the code, I found it self explanatory: Email: = “label for (form control) email”.

As with “label”, we can use the “for” attribute to make the text clickable. To do this we must make sure that “for” has the same value as the “id” of the target form control.

<form> <label for="email">Email:</label> <input type="text" id="email" name="email"> </form>

The fieldset tag

We are often given the choice of selecting one radio button at a time. The fieldset tag is used to group a set of radio buttons together. It allows us to semantically show that the choices are a part of a set.

The legend tag is often used along with fieldset to provide a description for the grouping.

fCC states that fieldset and legend are not necessary when the choices are self-explanatory. Using the label with the for attribute for each choice is sufficient.

Date and time

HTML5 introduced a new type attribute for the input tag called “date”. The type attribute indicates what kind of input will be created. In this case, it’s a new date.

For older browsers, the date attribute will default to text. Thus we should show the expected date format, just in case. An example can be set in the label or as a placeholder text.

We also have a “time” tag with a “datetime” attribute. These values are the targets of assistive devices. By providing a standardized version of time, we avoid confusion.