Starting my tech blog

I've decided to start with my tech blog, trying to post my everyday software developing struggles, because this is how we learn... gaining experience from our mistakes :)

Talking about Web Accessibility, trying to make a website accesible to keyboard users or screen-readers is not easy, specially if the the proyect didn't see this through the beginning.

Semantics

The easiest way to start is using HTML tags in the more appropiate way, for example BUTTONS. How many times have we used a DIV acting as a BUTTON?

Here there is a simple Form example, where I added a button and a div with role="button":
(click on the HTML tab)

If you can use a native HTML element with the semantics and behaviour already built in use it, instead of re-purposing an element adding an ARIA role to make it accessible.

If the role="button" is not added, it will work, but using screen-readers it won't be accessible. Even for keyboard users it won't be reachable, because DIV is not a focusable element. In order to focus that element, some javascript code is needed.

This is why we come to the same question, why to use a DIV when in fact what we need is a BUTTON, it already comes with all the functionality needed.

This is part 1 of many posts regarding the Accessibility topic.