Pinned Column Accessibility & Screen Readers

[JLLeitschuh]

Problem

So currently trying to move between pinned columns using a screen reader is non trivial.

You can see an example of the problem here by unzipping the file and then dragging the file into any major browser.
Alternatively, you can go File -> Open and then select the unzipped file. It should automatically open in your browser where you can play the video.
CantCloseDemo.swf.zip
Note: I actually can enter the center and right grid's row content in Safari. It seems like a problem with chrome.

Reason

The problem is that we have three divs that each hold their own "subtable"

left-pined	unpinned	right-pinned

content respectively. The problem with this is that a screen reader doesn't know that the pinned content is a part of the entire grid.
This is, in greater part, due to the fact that the grid is not laid out in a way that the DOM is not laied out semantically. Although the pinned columns scroll at the same rate as the main content this is because of javascript trickery.

You can see what I'm talking about in this example of UI Grid with Pinning and Aria enabled.
http://plnkr.co/edit/Rps9uQlbYvxBLI57WbMK?p=preview

Proposed Solution

1. Scrap the current pinned DOM layout and start from scratch. Each row cell would be in the same div regardless of whether or not it was "pinned". The design would involve keeping track of which cells are pinned and then controlling the zindex and padding for the unpinned cells so that they would appear to "slide" behind the pinned columns. This would make it so that the DOM was semantically correct.
   This is that behaviour in the JQWidgets Grid
   • Pros
     • We would have a semantically correct DOM layout making future a11 needs easier.
     • Would mean that scrolling no longer had to be synchronized across three dom elements.
   • Cons
     • Would require a rewrite of a lot of code.
     • Would probably be better for 4.0 Angular 2 rewrite.
     • Would probably break version compatibility for people who have done directive stacking
     • Harder to keep pined
2. Keep the existing DOM layout and add extra "hidden" columns between the pinned borders.
   These columns would have one exclusive purpose. They would provide "focus jumping" buttons that would jump the focus from the pinned "subtable" your screen reader cursor is on to the table directly adjacent to your cell.
   • Pros
     • Easier to implement
     • Provides necessary navigation between tables without losing what row you are on.
     • Could control the grid so that while "focus jumping" the main grid content would auto scroll all the way to one side or the other.
   • Cons
     • It would add 4 cells per row for left and right pinning respectively.
     • It may not be as intuitive for a user because it doesn't really follow any of the Web AIM standards.
     • It may add a lot of watchers for cells that most users won't even see.

[dlgski]

Problem swf is for a different issue

[dlgski]

why can we not simply add a listener for tab or arrow key presses and when hit, if on the last pinned column, skip to first unpinned in the same row?

[zabu0001]

@dlgski

I think you didn't understand the problem, it has nothing to do with navigating. It is an issue with Grid representation in DOM (reading with screen reader).

When multi select is active grid is shown as one whole table but screen reader reads the code not what is shown to normal user, so for screen reader these are two separate tables.

For better understanding of the problem at hand I've made some screenshots:

1. Grid representation for normal user
   

2. Grid representation for screen reader user
   -Grid-Pinned-Left
   

   -Grid-Center
   

I hope my explanation helps to better understand the problem.

[zabu0001]

@JLLeitschuh: I our case we managed to trick the screen reader by simply pinning all column to left when multiselect is active.

I think there should be an option to decide if multiselect-Row should be pinned or not.

Even better the pinning feature has to be rewritten so that pinning doesn't create new sub-grid but rather places the columns left or right in just the existing grid.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been automatically closed because it has not had recent activity. If you believe that this is still an issue in the latest version, feel free to re-open it. Thank you for your contributions.

[mportuga]

Note: Add help wanted label