Creating an accessible DOB field group using select menus

When adding a date, there are a few options. You can use:

1. A date input field
2. Add three separate text input fields
3. Use three separate select menus

The UI for the date input field is a but clunky and varies between browsers. For this reason a Javascript calendar script is often used in preference to the native implementation; however, these can present some accessibility issues.

The issue with three separate text input fields is the user can add data is different ways — unless some format validation is used.

Therefore, the trusty select menu is often used to allow easy and consistently formatted data input; however, unless these fields are added in the correct way there can be a disconnect between the three fields for screen reader users as their field labels are announced as day, month and year. For what?

Let’s take a look at some stripped back code I stumbled across whilst conducting an digital accessibility audit…

When rendered on the page this looks okay…

Visually it works and it would probably be functional.

The main issue with this markup is the misuse of the <label> tag to style the Date of birth label as a parent for the individual components and there is also something amiss.

The importance of the <fieldset> and <legend> tags

As a sighted user you can, with relative ease, interpret this field grouping and move on; however, for a screen reader user the individual fields have no context. They will be announced as day, month and year.

This can be remedied by using the native HTML tags <fieldset> and <legend>, which will announce the label after the field is announced. 

We want to change our sample markup to…

Note that screen readers read out the legend in different ways. Safari reads it for every form element, whereas Chrome announces it on the first element.

Either way, adding the correct markup ensures better compatibility and an improved User eXperience (UX).