Long story short: No matter how small a component is, always make sure to consider the various users and their capabilities when implementing it. At first glance, input elements such as checkboxes may seem like a simple solution – but there are still things to consider in order to ensure they are accessible.
This series will address the different types of input elements and how to make them more accessible, starting with the basics: using the correct input type and associating tags.
Let’s take a look.
Choose the correct input type
When using input elements in HTML, we want to make sure to always set Correct input type is the corresponding element. The default input type is text, which can be used in a variety of situations, but it helps to be as specific as possible all your users – and comes with a range of inherent features. For example, define a number input field that opens the numeric keypad on your phone instead of the keyboard, and you can use minimum and maximum numbers to limit the range. Block corresponding input to protect user privacy. Depending on the browser, Open the date picker,…and so on. By choosing the right input type, we can make our lives easier, be able to take advantage of some of the inherited features in HTML, and improve the user experience.
Make sure there is always a tag associated with your input element
No matter what type of input you use, be sure to associate a label with the input field. Usually, this can be done by elements and for attributes.
aria-label and aria-labelledby
aria-labels can also be used to identify form controls in situations where visual labels are not an option or cannot be associated with input elements in the manner described above. If you are familiar with aria At some point, you may realize that the preferred option is to work without aria as much as possible – however, of course, in real life this is not always possible.
Aria Tags
aria-label can be used when no visible text label exists, for example when using an icon button without any text.
Aria Tags
aria-labelledby comes in handy when another element is used as a reference for labeled input.
role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true">
id="dialog1_label">Add Delivery Address
Whenever possible, try to use semantic HTML to provide accessible names for input elements. Only revert to using the aria attribute if you are sure this is not possible in this particular case.
Once we have these basics down, such as using semantic structures, adding the correct input types, and association tags, we can take a closer look at other aspects of making input elements more accessible, such as disabled input elements, focus styles, and color contrast and expectations keyboard navigation.
resource: