Improve Accessibility

[simonwep]

Support guidelines

• My request extends the functionality of Ocular in a meaningful way.
• I've used the search and this has not been requested before.

Description

Right now, due to missing aria-label and label elements the UI, especially income and expense tables, are hardly navigate-able with a screenreader.

Solution

Add aria-label where applicable and missing label's for input elements.

What are alternatives?

No response

Additional context

No response

[dnunnari]

@simonwep could I help out with this one?

[simonwep]

Hey @dnunnari! Of course :) I think the first step, before even testing it with a screen-reader which will be a bit tricky since there is no one-fits-all, would be to add aria-label to all cells in the income/expense budget panes to label each cell with the corresponding row name and month. For example for this

the aria label may read "Income for dividends in februrary". Of course the other UI Elements in a BudgetPane (the component that renders both income and expenses) should also be labelled in an appropriate way. But I think this would be a good start.

Right now the browser reports issues that all these input elements don't have label's associated with them, but I'm afraid it'll be too much for the DOM if we add a sr-only label for each which would be the better solution in most cases, but you can also try that.

If you have any questions you can hit me up here or just open a PR and we'll go from there :)