WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Questions on Grids

for

From: Brandon Keith Biggs
Date: Oct 31, 2017 8:06AM

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 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 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/>;
>> > >> > >> > >> > >> >
>> >> >> >> >>
>
>