E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Brandon Keith Biggs
Date: Sun, Oct 29 2017 4:50PM
Subject: Questions on Grids
No previous message | Next message →

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.

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.

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 can give some code examples, but I'm using react currently.

Thanks,


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

From: Jonathan Cohn
Date: Sun, Oct 29 2017 5:59PM
Subject: Re: Questions on Grids
← Previous message | Next message →

There is an readonly aria role that can be used if the grid or one of its elements is not editable. I have not specifically tried working with grids with NVDA, but my memory is that one of the 2017 updates did make some adjustments to how NVDA responds to grids.

Best wishes,

Jonathan Cohn



> On Oct 29, 2017, at 3:50 PM, Brandon Keith Biggs < = EMAIL ADDRESS 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.
>
> 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.
>
> 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 can give some code examples, but I'm using react currently.
>
> Thanks,
>
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> > > >

From: James Nurthen
Date: Sun, Oct 29 2017 9:04PM
Subject: Re: Questions on Grids
← Previous message | Next message →

On Sun, Oct 29, 2017 at 3:50 PM, Brandon Keith Biggs <
= EMAIL ADDRESS 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/>;
> > > > >

From: Brandon Keith Biggs
Date: Mon, Oct 30 2017 4:36AM
Subject: Re: Questions on Grids
← Previous message | Next message →

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 ADDRESS REMOVED = > wrote:

> On Sun, Oct 29, 2017 at 3:50 PM, Brandon Keith Biggs <
> = EMAIL ADDRESS 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/>;
> > > > > > > > > >
> > > > >

From: Brandon Keith Biggs
Date: Tue, Oct 31 2017 8:06AM
Subject: Re: Questions on Grids
← Previous message | No next message

Hello,

I created an issue with all the problems I found at:

https://github.com/w3c/aria-practices/issues/509



after reading:

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



in a little more detail, some of the practices make a little more sense,
but there are still a lot of issues with grids (which are not tables).

Thanks,



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

On Mon, Oct 30, 2017 at 3:36 AM, Brandon Keith Biggs <
= EMAIL ADDRESS REMOVED = > wrote:

> 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 ADDRESS REMOVED = > wrote:
>
>> On Sun, Oct 29, 2017 at 3:50 PM, Brandon Keith Biggs <
>> = EMAIL ADDRESS 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/>;
>> > >> > >> > >> > >> >
>> >> >> >> >>
>
>