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.

webworkers

Using webworkers is a useful tool when trying to improve performance or try to not block UI rendering while working on a very consuming task.

In my case it was a Search task, being more specific... an inline search. So, basically the problem was while trying to search, in case the user has hundreds of contacts, the rendering was being blocked by the time the searching task is being performed.

Solution:

Implementation of a webworker sounds like a good solution, since I could leave the hard work to a separate thread, while the rendering of images or simple tasks are being executed on the main thread.

Here is an example of a simple webworker implementation:




I tried to implement an external webworker, but by the moment is not working, since I am not really skilled using JSFiddle, I will update once it works.

So far I implemented what is known as Inline worker.

Post in progress...