+
Skip to content

Accessibility feedback #337

@ndarilek

Description

@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:

    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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      点击 这是indexloc提供的php浏览器服务,不要输入任何密码和下载