Improve accessibility

[bglamadrid]

This issue is not meant to be assigned and be worked on its own. It is more akin to a call for action to raise relating issues, as described in the section "What needs to be done".

Context

I am absolutely NOT an expert in matters of web accessibility. I do know ARIA properties exist, but don't really understand when and where to use them. I've yet to learn that.

Still, as an open source software project, I do believe it is in the best interest of any and every potential collaborator, to make this as accessible as a web app can be.

What has been done

• To follow appropriate naming & HTML structuring conventions, so that screen readers may not be too confused by the generated markup.
• To include recommended additional properties in the markup, e.g. alt in img elements to describe the content of each image.

You probably can already tell this isn't enough.

What needs to be done

Discuss factors that need to be considered, corrected, or implemented in order to improve the web app's accessibility. For instance; add support for high contrast, dark and light modes. To disable animations. And other things.

Any of these factors can become issues of their own if someone is up for the task. But in order to do that, we should still have a better grasp on their concepts, preferably along with an illustrative example, or a reference; a webpage, a codepen, a well-written article, a technical blog post, or a through answer in Stack Overflow.

[ferrorenan]

Hey @bglamadrid I can make some improvements like aria in the elements and some other things, that would be a start! What do you think?!

[bglamadrid]

Hi @ferrorenan. As I said in the description, first I'd like to acknowledge what things need to be done.
Because from what I've gathered at MDN:

There is a saying "No ARIA is better than bad ARIA." In WebAim's survey of over one million home pages, they found that Home pages with ARIA present averaged 41% more detected errors than those without ARIA. While ARIA is designed to make web pages more accessible, if used incorrectly, it can do more harm than good.

This is the reason why this issue was labeled as stub: I would like this to be worked on, but it does not convey just one thing to fix. Instead, there should be a to-do list. This link is probably a decent starting point for that.

Only once we've defined the precise goals and fixes that may need be done, the code shall be inspected; finding markup patterns that need improvement based on said goals; and hopefully documenting (through verbose commit messages, the changelog file or otherwise) what is it that we're improving in each case.

Let me know what do you think about this.