Accessibility feedback

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:

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

  Please use:

  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.

[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.

[mgifford]

@ndarilek did you find something that worked?

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