[Feature Request] Improve Backgrid accessibility

[dan-f]

I'm evaluating using Backgrid for a current project, and I love how it integrates with my PageableCollection.

However, the HTML rendered by Backgrid.Grid, Backgrid.Extension.ServerSideFilter, and Backgrid.Extension.Paginator could be much more accessible. There could be more issues than the following, but these are what I've found so far from the components that I'm using.

• The table is missing a <caption> element.
• The table is missing 'scope' attributes on the <th> elements
• The table uses <a> tags for sorting, but they should be buttons. (<a> tags initiate navigation while <button> tags take an action
• The filter/search <input> is missing an accompanying <label>
• The filter/search <input> is missing an 'aria-labeledby' or 'aria-label' attribute
• The search clear button is an <a>, but it should be a <button>

Regarding the <a> vs <button> issue above, I suppose it depends on how users are using Backgrid. If it updates the URL, which deep-links to a particular table state, then I think the <a> is appropriate (though they are missing valid 'href' attributes). However, for all other cases, I think the <button> is more semantically appropriate.

I may discover more issues as I continue evaluating Backgrid. I can fix them in my own project, but I'd much rather merge my fixes into this repository.

Fixing these issues will have no visual impact and benefit all users with disabilities.

[Devtr0n]

I too am facing these same problems. There is also no tabbing to the grid/table, as tabbing skips straight over the grid to the paginator. I really need to be able to tab through each row and each cell, like a disabled person would want.

[wyuenho]

@dan-f I'd very much love to see an accessibility PR. I currently have no bandwidth to deal with this, so I'd definitely appreciate any help I can get in this area.

[dan-f]

Hey @wyuenho. Sorry for the lack of an update on my part. I also have little bandwidth for this at the moment, though I'm happy to take on this work when I get the time. I'm realistically not likely to have time to work on this for a while. Would you prefer that I leave the issue open or closed?

[wyuenho]

No worries! We can just keep this open

On 9 Mar 2016, at 8:43 PM, Daniel Friedman [email protected] wrote:

Hey @wyuenho. Sorry for the lack of an update on my part. I also have little bandwidth for this at the moment, though I'm happy to take on this work when I get a moment. I'm realistically not likely to have time to work on this for a while. Would you prefer that I leave the issue open or closed?

—
Reply to this email directly or view it on GitHub.

[Devtr0n]

Another accessibility issue we are facing is that the grid does not render until AFTER document.ready completes. This causes screenreaders to ignore Backgrid all together. We may not be able to use it, unless we figure out a fix.

[Devtr0n]

Also (one more thing), to fix the tabbing problems we faced, we have to change the 'UriCell' extension method:

render: function () {
this.$el.empty();
var rawValue = this.model.get(this.column.get("name"));
var formattedValue = this.formatter.fromRaw(rawValue, this.model);
this.$el.append($("", {
tabIndex: -1,
href: rawValue,
title: this.title || formattedValue,
target: this.target
}).text(formattedValue));
this.delegateEvents();
return this;
}

** simply remove tabIndex = -1 and your grid is now tab friendly....

[wyuenho]

@dulldave you mind sending over a PR for the accessibility improvements?

[davecodes1]

Hey @wyuenho, sure thing. I'll have to find some time as I'm bogged down, but I'd love to help out :)

[thallada]

Another thing: it doesn't look like there is a way to create a "HeaderColumn" so that you can have table with two headers.

This is important for screen readers because it would give additional context to a focused cell (e.g. "Wednesday Closed for 11:00 - 13:00" instead of just "Wednesday Closed").

Edit: I looked into it more. It looks like you can create a custom cell (subclass of Backgrid.Cell) that overrides the tagName property with 'th', which would make a column of headers.

To add scope="row" attributes to the cell th elements, I overrode the render function in the custom cell class and added this.$el.attr('scope', 'row');.