E-mail List Archives
Thread: Using ARIA grids
Number of posts in this thread: 22 (In chronological order)
From: Don Mauck
Date: Thu, Jul 23 2020 2:48PM
Subject: Using ARIA grids
No previous message | Next message →
We have developers who for reasons such as continuous scrolling from the bottom using ARIA Grid controls since apparently tables do not allow for automatic scrolling. So, are there ways to use grids using table commands in the same way?
Currently Grids don't even show up as any of the JAWS form elements and you can only use cursor keys within the Grid. This really limits the JAWS user from having any kind of pleasant experience with these grids. Are there ways to make these grids more usable to a screen reader? Especially since ARIA-Grid is out there and has several table attributes. Thank in advance for reading and maybe giving this some thought.
Regards:
Regards:
Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office | (APO)
303.334.4184
HYPERLINK "mailto: = EMAIL ADDRESS REMOVED = " = EMAIL ADDRESS REMOVED =
From: Brandon Keith Biggs
Date: Thu, Jul 23 2020 2:55PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Hello,
Look at:
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Thu, Jul 23, 2020 at 1:49 PM Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
> We have developers who for reasons such as continuous scrolling from the
> bottom using ARIA Grid controls since apparently tables do not allow for
> automatic scrolling. So, are there ways to use grids using table commands
> in the same way?
>
> Currently Grids don't even show up as any of the JAWS form elements and
> you can only use cursor keys within the Grid. This really limits the JAWS
> user from having any kind of pleasant experience with these grids. Are
> there ways to make these grids more usable to a screen reader? Especially
> since ARIA-Grid is out there and has several table attributes. Thank in
> advance for reading and maybe giving this some thought.
>
>
>
>
>
> Regards:
>
>
>
>
>
> Regards:
>
>
>
> Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office
> | (APO)
>
>
>
> 303.334.4184
>
> HYPERLINK "mailto: = EMAIL ADDRESS REMOVED = " = EMAIL ADDRESS REMOVED =
>
>
> > > > >
From: Brandon Keith Biggs
Date: Thu, Jul 23 2020 2:56PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Hello,
Look at:
https://vaadin.com/components/vaadin-grid/html-examples
Their grid allows both table key command navigation as well as cursor
navigation through the cells. I believe their table also scrolls.
Thank you,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Thu, Jul 23, 2020 at 1:49 PM Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
> We have developers who for reasons such as continuous scrolling from the
> bottom using ARIA Grid controls since apparently tables do not allow for
> automatic scrolling. So, are there ways to use grids using table commands
> in the same way?
>
> Currently Grids don't even show up as any of the JAWS form elements and
> you can only use cursor keys within the Grid. This really limits the JAWS
> user from having any kind of pleasant experience with these grids. Are
> there ways to make these grids more usable to a screen reader? Especially
> since ARIA-Grid is out there and has several table attributes. Thank in
> advance for reading and maybe giving this some thought.
>
>
>
>
>
> Regards:
>
>
>
>
>
> Regards:
>
>
>
> Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office
> | (APO)
>
>
>
> 303.334.4184
>
> HYPERLINK "mailto: = EMAIL ADDRESS REMOVED = " = EMAIL ADDRESS REMOVED =
>
>
> > > > >
From: Don Mauck
Date: Thu, Jul 23 2020 3:16PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Thank you for this.
Regards:
Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office | (APO)
303.334.4184
= EMAIL ADDRESS REMOVED =
From: glen walker
Date: Thu, Jul 23 2020 3:18PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
I'm a little confused by this statement: "developers...using ARIA Grid
controls since apparently tables do not allow for automatic scrolling".
Using an ARIA attribute should have no effect on the behavior of an
element. ARIA attributes are hints to assistive technology. See
https://www.w3.org/TR/aria-in-html/#nativesemantics which says, "Adding an
ARIA role will not make an element look or act differently for people not
using assistive technology. It does not change the behaviours, states and
properties of the host element but only the native role semantics."
That statement is talking about the role attribute specifically, but can be
applied to aria-* attributes too.
So when you say having an aria grid allows automatic scrolling but native
tables do not, I don't follow why that's true.
On Thu, Jul 23, 2020 at 2:49 PM Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
> We have developers who for reasons such as continuous scrolling from the
> bottom using ARIA Grid controls since apparently tables do not allow for
> automatic scrolling. So, are there ways to use grids using table commands
> in the same way?
>
> Currently Grids don't even show up as any of the JAWS form elements and
> you can only use cursor keys within the Grid. This really limits the JAWS
> user from having any kind of pleasant experience with these grids. Are
> there ways to make these grids more usable to a screen reader? Especially
> since ARIA-Grid is out there and has several table attributes. Thank in
> advance for reading and maybe giving this some thought.
>
>
>
>
>
> Regards:
>
>
>
>
>
> Regards:
>
>
>
> Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office
> | (APO)
>
>
>
> 303.334.4184
>
> HYPERLINK "mailto: = EMAIL ADDRESS REMOVED = " = EMAIL ADDRESS REMOVED =
>
>
> > > > >
From: Don Mauck
Date: Thu, Jul 23 2020 3:21PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
My point was that they chose to use an ARIA-Grid. I'm very much aware of ARIA and what it is for. That was a choice the developer made not mine.
Regards:
Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office | (APO)
303.334.4184
= EMAIL ADDRESS REMOVED =
From: Don Mauck
Date: Thu, Jul 23 2020 3:36PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
I'm getting an access denied message. Could the link be broken?
Regards:
Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office | (APO)
303.334.4184
= EMAIL ADDRESS REMOVED =
From: Mallory
Date: Fri, Jul 24 2020 10:15AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Don, the first link sent was to Brandon's site, which offers no access. You want what was sent in the follow-up mail, with "vadin" in the name.
(I hate vadin's tables, but that's me)
cheers,
Mallory
On Thu, Jul 23, 2020, at 11:36 PM, Don Mauck wrote:
> I'm getting an access denied message. Could the link be broken?
>
>
> Regards:
>
> Don Mauck | Senior Accessibility Evangelist | Accessibility Program
> Office | (APO)
>
> 303.334.4184
> = EMAIL ADDRESS REMOVED =
>
>
From: glen walker
Date: Fri, Jul 24 2020 10:15AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
You might have missed the purpose of my question. I wasn't trying to
explain the purpose of ARIA. It sounded like you said developers thought
they had to use an ARIA grid instead of a native <table> because of
scrolling issues. My question was that since ARIA doesn't affect behavior,
there should not be any limitation of behavior between an ARIA grid and a
native <table>. I was trying to get clarification if that's what the
developers thought.
Now, there might be a difference in behavior in how a screen reader
surfaces a grid vs a table with regards to screen reader shortcut keys used
in navigating a table. I've seen varying levels of support for role="grid"
between browser and screen reader combinations.
On Thu, Jul 23, 2020 at 3:23 PM Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
> My point was that they chose to use an ARIA-Grid. I'm very much aware of
> ARIA and what it is for. That was a choice the developer made not mine.
>
>
>
From: Jeremy Echols
Date: Fri, Jul 24 2020 10:45AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Agreed. In fact the ARIA "grid" role can be applied to a table anyway. If the devs think adding the grid role changes any behavior, that's simply incorrect. The behavior has to be changed with JavaScript. And that same JavaScript might be possible to implement without using a special role, depending on the desired outcome and the behavior. If so, that would satisfy the need to have some behaviors without losing the navigation screen readers apply to elements with the "table" role.
The "grid" role does not in fact specifically address the issue of a table that needs to scroll. It is one thing a grid can be programmed to do, but it isn't something that is inherently a requirement for a grid.
From: Don Mauck
Date: Fri, Jul 24 2020 10:51AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
What has to be done in a standard table to make it scroll from the bottom and how does the scroll, I mean, what triggers JAWS or even NVDA when using table commands that are using the virtual cursor? If that makes sense. I probably did misunderstand your question/comment, if so I apologize.
Regards:
Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office | (APO)
303.334.4184
= EMAIL ADDRESS REMOVED =
From: Jeremy Echols
Date: Fri, Jul 24 2020 1:32PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
I believe anything using a table element will trigger the screen reader to let you use its shortcuts for navigating the grid. From some quick rudimentary testing it seems the grid examples on the W3C page get a little bit weird (at least using NVDA) when trying to use the screen reader shortcuts because those conflict with the JavaScript that's implemented for navigating the grid. It may be that this is the issue you were initially describing, but it may not: an ARIA "grid" role can technically be applied to something like a pile of div elements.
Unfortunately, I can't say for sure what is the best way to achieve the outcome. The point I think Glen was trying to make is simply that adding behaviors via JavaScript is separate from whether or not the "grid" role is used. A table element may be able to get scrolling behaviors via JavaScript in a perfectly accessible way. It's just important to note the distinction between the role and the behavior. The "grid" role requires developers implement certain behaviors in JavaScript in order for the grid to be WCAG compliant. If they do this properly, the grid *should* be accessible to screen reader users.
I think this is where I'm not clear, because I don't know what the developers have built or how. if developers add a role to a pile of divs, but don't implement the correct JavaScript behaviors, that will be inaccessible and potentially a lot worse than just using a table element with minimal behaviors implemented.
From: Don Mauck
Date: Fri, Jul 24 2020 2:22PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Yes, I do understand and appreciate that answer. The interesting thing is that I think I found that the grid I tested, didn't seem to work well with NVDA but seem to perform better using JAWS, so there seems to be something different, I've just got to get the developers to do the right thing. I think what I'm getting from the big picture, is that you can use ARIA-Grids and give the table attributes so that the can react to AT'S that use table commands.
Is that a good overall understanding?
Regards:
Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office | (APO)
303.334.4184
= EMAIL ADDRESS REMOVED =
From: Mallory
Date: Sat, Jul 25 2020 1:32AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
So far as I can tell, once you add in grid roles and the JS, you lose all the table semantics. The columnheaders don't name the cells anymore, you can't use ctrl-alt-Arrows to navigate, and you lose everything. The grid roles had to manually recreate everything.
Am I wrong on this? in 2017 when we made grids with role="grid", "row", and "gridcell" we did not get *any* table information exposed to screen readers. Maybe if we'd manually gone out of focus mode, since we were already using actual <table> HTML etc.
A few years ago (and things change quickly, I know) when making a calendar, we needed to re-add in all the information for each cell as a long aria-label because of the lost columnheader info. It felt like it defeated the purpose, but for a sighted keyboarder with no screen reader, it was a much easier navigation method (instead of 30+ Tabs to get past a month, it's a single Tab stop and if you wanted to choose a cell/day, Arrows could move in any direction).
Ideally we'd want a table that kept table semantics (so it worked like a table does and should) but offered that better, widget-style keyboarding to non-AT-using keyboarders. Then for all users, if cells are meant to be selected (usually yes), all users could just hit Enter to select them.
Honestly I've not run into a grid that was nicer to use with grid keyboard patterns than just a plain table, if using a screen reader, but a very very huge spreadsheet-style grid might be where the grid starts to be preferable. Tables with thousands of columns/rows do suck.
cheers,
_mallory
On Fri, Jul 24, 2020, at 10:22 PM, Don Mauck wrote:
> Yes, I do understand and appreciate that answer. The interesting thing
> is that I think I found that the grid I tested, didn't seem to work
> well with NVDA but seem to perform better using JAWS, so there seems to
> be something different, I've just got to get the developers to do the
> right thing. I think what I'm getting from the big picture, is that you
> can use ARIA-Grids and give the table attributes so that the can react
> to AT'S that use table commands.
>
> Is that a good overall understanding?
>
> Regards:
>
> Don Mauck | Senior Accessibility Evangelist | Accessibility Program
> Office | (APO)
>
> 303.334.4184
> = EMAIL ADDRESS REMOVED =
From: glen walker
Date: Sun, Jul 26 2020 11:11AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
It depends what screen reader and browser combination you're using. What
did you test with?
On Sat, Jul 25, 2020 at 1:32 AM Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> So far as I can tell, once you add in grid roles and the JS, you lose all
> the table semantics. The columnheaders don't name the cells anymore, you
> can't use ctrl-alt-Arrows to navigate, and you lose everything. The grid
> roles had to manually recreate everything.
>
>
From: Mallory
Date: Sun, Jul 26 2020 12:06PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
I did JAWS and NVDA, and someone else did VoiceOver but I seem to recall one had worse issues than the others.
On Sun, Jul 26, 2020, at 7:11 PM, glen walker wrote:
> It depends what screen reader and browser combination you're using. What
> did you test with?
>
> On Sat, Jul 25, 2020 at 1:32 AM Mallory < = EMAIL ADDRESS REMOVED = > wrote:
>
> > So far as I can tell, once you add in grid roles and the JS, you lose all
> > the table semantics. The columnheaders don't name the cells anymore, you
> > can't use ctrl-alt-Arrows to navigate, and you lose everything. The grid
> > roles had to manually recreate everything.
> >
> >
> > > > >
From: Jeremy Echols
Date: Mon, Jul 27 2020 6:04AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
I think it will depend how it's implemented, too. The example on the w3c site sounds to me like it still has table semantics for Firefox and NVDA, but the whole thing gets a bit confusing due to the JavaScript that implements the grid navigation conflicting with the NVDA keyboard shortcuts. It may be that this implementation is fine, but I'm not familiar enough with the expectations of a screen-reader user to comment on that.
The example to which I refer is at https://w3c.github.io/aria-practices/examples/grid/dataGrids.html#ex2_label
From: Don Mauck
Date: Tue, Jul 28 2020 8:10AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
That behavior is exactly what I'm seeing. I'm quite concerned since I don't want the Dev teams to keep going down this path as it certainly breaks screen readers table functions.
I love this dialog as it has given me more things to take to the teams and hopefully they will listen to me.
Regards:
Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office | (APO)
303.334.4184
= EMAIL ADDRESS REMOVED =
From: Jonathan Cohn
Date: Wed, Jul 29 2020 6:10AM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Well with ARIA Grids, one can flip in and out of focus mode significantly easier than with application regions. Though I don't remember what JAWS does if the grid is readonly.
Generally, multimodal interactions where forms mode and browse mode have completely different behaviors can a large number of users.
Best wishes,
Jonathan Cohn
> On Jul 28, 2020, at 10:10 AM, Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
>
> That behavior is exactly what I'm seeing. I'm quite concerned since I don't want the Dev teams to keep going down this path as it certainly breaks screen readers table functions.
> I love this dialog as it has given me more things to take to the teams and hopefully they will listen to me.
>
>
> Regards:
>
> Don Mauck | Senior Accessibility Evangelist | Accessibility Program Office | (APO)
>
> 303.334.4184
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
>
From: bobby accessibility
Date: Mon, Aug 10 2020 1:54PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Hi Brandon,
Thanks for the Table structure you have provided in the shared link, I have
checked this and found its not following the basic properties of Table-
like , No caption was there , when I navigated to the Table no matrix
(table structure Rows* Columns) was introduced to screen reader.
Also I am keen to know, is this responsive ? will it work same for desktop
as well as on smart devices (mobile , Tab etc)
I have tested this on FF 79 using NVDA 2020.0.1
Appreciate your reply on my queries.
Thanks & Regards
Bob
On Fri, Jul 24, 2020 at 12:56 AM Brandon Keith Biggs <
= EMAIL ADDRESS REMOVED = > wrote:
> Hello,
> Look at:
> https://vaadin.com/components/vaadin-grid/html-examples
> Their grid allows both table key command navigation as well as cursor
> navigation through the cells. I believe their table also scrolls.
> Thank you,
>
> Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
>
> On Thu, Jul 23, 2020 at 1:49 PM Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
>
> > We have developers who for reasons such as continuous scrolling from the
> > bottom using ARIA Grid controls since apparently tables do not allow for
> > automatic scrolling. So, are there ways to use grids using table commands
> > in the same way?
> >
> > Currently Grids don't even show up as any of the JAWS form elements and
> > you can only use cursor keys within the Grid. This really limits the JAWS
> > user from having any kind of pleasant experience with these grids. Are
> > there ways to make these grids more usable to a screen reader? Especially
> > since ARIA-Grid is out there and has several table attributes. Thank in
> > advance for reading and maybe giving this some thought.
> >
> >
> >
> >
> >
> > Regards:
> >
> >
> >
> >
> >
> > Regards:
> >
> >
> >
> > Don Mauck | Senior Accessibility Evangelist | Accessibility Program
> Office
> > | (APO)
> >
> >
> >
> > 303.334.4184
> >
> > HYPERLINK "mailto: = EMAIL ADDRESS REMOVED = " = EMAIL ADDRESS REMOVED =
> >
> >
> > > > > > > > > >
> > > > >
From: Brandon Keith Biggs
Date: Mon, Aug 10 2020 2:14PM
Subject: Re: Using ARIA grids
← Previous message | Next message →
Hello,
I am able to get the row and column numbers when entering the table.
You're right, I'm not seeing how to add a caption to the table. I avoid
captions, as I find them rather annoying, and put the information in the
text above the table, but it should be extremely easy to add a caption
property. If you open an issue at:
https://github.com/vaadin/vaadin/issues
I think it should be added pretty quickly.
Thanks,
Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
On Mon, Aug 10, 2020 at 12:58 PM bobby accessibility <
= EMAIL ADDRESS REMOVED = > wrote:
> Hi Brandon,
>
> Thanks for the Table structure you have provided in the shared link, I have
> checked this and found its not following the basic properties of Table-
> like , No caption was there , when I navigated to the Table no matrix
> (table structure Rows* Columns) was introduced to screen reader.
>
> Also I am keen to know, is this responsive ? will it work same for desktop
> as well as on smart devices (mobile , Tab etc)
>
> I have tested this on FF 79 using NVDA 2020.0.1
>
> Appreciate your reply on my queries.
>
> Thanks & Regards
> Bob
>
> On Fri, Jul 24, 2020 at 12:56 AM Brandon Keith Biggs <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hello,
> > Look at:
> > https://vaadin.com/components/vaadin-grid/html-examples
> > Their grid allows both table key command navigation as well as cursor
> > navigation through the cells. I believe their table also scrolls.
> > Thank you,
> >
> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
> >
> >
> > On Thu, Jul 23, 2020 at 1:49 PM Don Mauck < = EMAIL ADDRESS REMOVED = > wrote:
> >
> > > We have developers who for reasons such as continuous scrolling from
> the
> > > bottom using ARIA Grid controls since apparently tables do not allow
> for
> > > automatic scrolling. So, are there ways to use grids using table
> commands
> > > in the same way?
> > >
> > > Currently Grids don't even show up as any of the JAWS form elements and
> > > you can only use cursor keys within the Grid. This really limits the
> JAWS
> > > user from having any kind of pleasant experience with these grids. Are
> > > there ways to make these grids more usable to a screen reader?
> Especially
> > > since ARIA-Grid is out there and has several table attributes. Thank in
> > > advance for reading and maybe giving this some thought.
> > >
> > >
> > >
> > >
> > >
> > > Regards:
> > >
> > >
> > >
> > >
> > >
> > > Regards:
> > >
> > >
> > >
> > > Don Mauck | Senior Accessibility Evangelist | Accessibility Program
> > Office
> > > | (APO)
> > >
> > >
> > >
> > > 303.334.4184
> > >
> > > HYPERLINK "mailto: = EMAIL ADDRESS REMOVED = " = EMAIL ADDRESS REMOVED =
> > >
> > >
> > > > > > > > > > > > > > >
> > > > > > > > > >
> > > > >
From: chagnon
Date: Mon, Aug 10 2020 2:22PM
Subject: Re: Using ARIA grids
← Previous message | No next message
I've found that the term "Caption" is used to mean many things by different
people.
With tables, people often call the table's summary a caption.
And then there is a real paragraph of live body text that appears before or
after the table, similar to photo captions.
In academic publishing, this paragraph of text is called "prefatory text"
and appears between the title and the actual table (or figure/image). Was
developed long before HTML and found to be the best method to inform and
educate readers...before they encounter the table or figure.
The terms caption and summary should be cleared up by the industry...and
standardize across all media: HTML, PDF, EPUB, whatever.
In our testing, we prefer explanations (a k a prefatory text) so that it is
available to all users, not just those using text-to-speech such as screen
readers.
- - -
Bevi Chagnon | Designer, Accessibility Technician | = EMAIL ADDRESS REMOVED =
- - -
PubCom: Technologists for Accessible Design + Publishing
consulting . training . development . design . sec. 508 services
Upcoming classes at www.PubCom.com/classes
- - -
Latest blog-newsletter - Simple Guide to Writing Alt-Text