WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Questions on Grids

for

From: Brandon Keith Biggs
Date: Oct 30, 2017 4:36AM

Hello,

The editable problem is that they use role=-grid- on the table when the
table doesn't need role=-grid-.

Role=-grid- makes the grid editable by default and this should not be
default behavior. The aria-readonly attribute being set to true fixes this
problem though.



I am trying to create something similar to gsheets where I have a grid I
can move through using the arrow keys while NVDA is in edit mode
(nvda+space). This is not to edit, it is just to allow key presses to be
passed through to the application. This is used in interactive javascript
apps quite a lot, most notably in all the GSuite apps.



The examples at:

https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html#



use the built-in table and my example:

https://frastlin.github.io/Toolo/



uses aria.



Problems:

1. The first set of tables with default HTML do not read anything but
the links when one arrows through the table in edit mode with NVDA. I can
not reproduce the reading of links. But NVDA should read both the links and
the content of the cells. I am able to get the reading of the cells
contents by getting the innerHTML and putting it in an element with
role=-status-. The role=-status- does not say the element type when
innerHTML is used though.

2. In the second aria example, the content does not read the element
either, even though it does read the content.

3. In the second example using aria, the content of the cells is read
twice when moving between rows, but not when moving between columns. The
content is read unselected first, then read selected again which is why it
is read twice, but moving between columns just says the content is
selected. The only reason why this would be happening is if the row was
being selected and not the column, but I am only selecting the cell in the
script.



I would like to have finite control of what the screen reader says, so I
can change the row to say A1 notation and or have it say just the content.
Is this possible? I'm sure Google Sheets is using their own implementation,
but I would like to have finite control over the speech output like they
do. I would also like to be able to read elements like the first HTML
example.

Does anyone have any ideas of how I can achieve this result? Should I just
create my own implementation? (I would rather use grid though).

Thank you,



Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Sun, Oct 29, 2017 at 8:04 PM, James Nurthen < <EMAIL REMOVED> > wrote:

> On Sun, Oct 29, 2017 at 3:50 PM, Brandon Keith Biggs <
> <EMAIL REMOVED> > wrote:
>
> > Hello,
> >
> > I am trying to figure out how grid tables work in HTML, aria and with
> > screen readers, but I am running into some problems:
> >
> > I am following the examples from:
> >
> > https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html#
> >
> >
> >
> > I would like to know if what I am seeing is a screen reader problem or my
> > problem? I am using the latest NVDA with Firefox.
> >
> >
> >
> > 1. All the tables say 'editable-: 'table editable clickable with 7
> > rows and 5 columns-. Why is it saying 'editable- contenteditable is not
> > checked anywhere in the html.
> >
>
> Can you please log an issue against the authoring practices at
> https://github.com/w3c/aria-practices/issues/
> I believe these grids should have aria-readonly on them but it doesn't seem
> to be set.
>
>
> >
> > 2. In the cells that have raw text in them, NVDA does not read
> > anything when I enter edit mode and arrow over the top of the cell, other
> > than the row or column name and number. But if there is a link, it is
> read.
> > I can't get any links to read when I try this. I don't see the bit of
> code
> > that allows the links to read here.
> >
>
> The cells should not be editable (other than 1 in the 2nd example) and this
> only becomes editable after a user interaction. I don't believe edit mode
> would normally be used here.
>
>
> >
> > 3. I tried converting the above examples to div elements with
> proper
> > roles, but the behavior is slightly different. The table still says
> > editable, but the data in the cells is read by NVDA. The problem is that
> > the data is read 3 times such as: 'all the elements in the row, row
> number,
> > header editable column 1 value-.
> >
> > 4. Also, why does tabindex 0 combined with a focus allow one to
> move
> > around a table in edit mode?
> >
>
> I'm not sure I understand the question here. Focus is being controlled
> using roaming tabindex in these examples.
>
> >
> >
> >
> > I can give some code examples, but I'm using react currently.
> >
> > Thanks,
> >
> >
> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> > > > > > > > > >
> > > > >