Are you interested in making your website accessible, but don't know where to begin? are you afraid of the complexity involved? are you daunted by testing with a screen reader? There is one technique that will get you 90% of the way there: use the appropriate HTML control for what you are intending to do.
Just the other day I found a site that had an option in it's payment form called "Cover Fees" which was a yes/no toggle. Rather than use a checkbox, they used a clickable element They did go to some length to make it keyboard accessible, it was in the tab order with a proper tabIndex, but there was no way for a screen reader to tell if the option was on or off because it was simply a clickable div. Had they used a checkbox, not only would it have been in the tab order by default, but screen readers automatically announce the state of checkboxes and they can be easily changed. Not to mention that checkboxes are actually considered form controls. We as blind people have different keyboard shortcuts to move quickly between form fields, and as long as they are properly labeled with the label tag (another soapbox issue of mine) the screen reader will read the controls correctlyy. clickable divs don't participate in this because they are not form controls. While there may be some ways through aria to make some things accessible, and I realize there is certainly a need for widgets (modals, for example), wherever possible we should be using the controls the browsers give us. This will go a long way to making your app accessible right out of the box. I hope this is helpful to someone.
Top comments (0)