#337 Accessibility feedback

[Anonymous]

Originally created by: ndarilek

Not sure what the best way to communicate this sort of thing is. I'm a blind screen reader user, and sometimes find myself in need of a Trello-style app like this to arrange lists with sighted colleagues. Given Wekan's open source nature, it has much more potential to be that app than does something built by a closed-source company. I'm currently working on a PR to address many issues I'm finding, but I'd like it if these could be incorporated into designs going forward so I'm not perpetually playing catch-up with new changes. Here are some current issues I'm fixing:

• Please include hrefs in all <a/> tags. Without an href, links are non-keyboard-focusable and are not presented as such to screen readers. Instead, they look like blocks of text. If you're using a link to trigger an action but it doesn't lead somewhere, href="#" is sufficient to make them accessible.
• Please use aria-label instead of or in addition to title on icons. So if you have:

jade span.fa.fa-something(title="Something")

Please use:

jade span.fa.fa-something(title="Something" aria-label="Something"))

title is inconsistently used on the web, and is thus inconsistently presented by screen readers. aria-label, on the other hand, is specific to accessibility and is presented in ways that title shouldn't be. For instance, aria-label is always visible to my screen reader, unlike title which I think is only visible when the mouse hovers over an icon.

• Please label all icons. I see some unlabeled icons in cardDetails.jade, for instance. This is actually a pretty big access issue, so if you could use aria-label on any fontawesome icons that don't have text within their span or whatever element, that alone would go a long way. You're using the checked icon to indicate selected status, for instance. If you could just emit aria-label="(selected)", that would work. An easy way to do this would be to refactor it all to a very simple template that just outputs this icon, use that template in all places where you'd use the icon, and incorporate the aria-label into that.

Thanks. PR for some of this inbound.

[Anonymous]

Originally posted by: mquandalle

Hi Nolan,

Sorry for the late response. As I have no experience building applications for blind users, you’re feedback and recommendations are greatly appreciated. The points you have listed are reasonably easy to fix and well explained so I should be able to tackle them. You are right when you say that a reusable template/component would be the good approach instead to keep things DRY and avoid forgetting aria-label and such on future UI modifications.

Going forward I wonder how far we can go to make “visual task management” for blind users, that’s sound a quite interesting challenge :) If I remember correctly it is possible to provide further semantics using aria to indicate “this is a menu”, “this is a menu item”, etc. I guess we should also have a action button to move card without using drag and drop (as does Trello in the card actions).

Thank you for your help to figure out these issues :-)

[Anonymous]

Originally posted by: xet7

@ndarilek

Does https://github.com/wekan/wekan/pull/1042 fix this issue for you? Or is there still something to fix?

[Anonymous]

Originally posted by: ndarilek

What specifically does that PR do? It looks like it adds <a href="#"/> somewhere, but I don't have enough context to know where?

[Anonymous]

Originally posted by: mgifford

@ndarilek did you find something that worked?

I'm also keen to find out if there is any updates on this.

[Anonymous]

Originally posted by: ndarilek

I haven't used this in years, sorry.

Also haven't found anything that works particularly well. TiddlyWiki comes closest, but even it has its rough edges and isn't perfect.