WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: data table pagination - focus position?

for

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

From: Tomlins Diane
Date: Wed, Nov 07 2018 11:18AM
Subject: data table pagination - focus position?
No previous message | Next message →

This may have come up before, but searching the archives didn't bring up anything directly, so please forgive me if it has.

The setup: we have a health portal application and within this application a patient can go to their profile and see an Activity Log showing every login, and what they did within the application, such as viewing clinical information. It's presented in a sortable data table where you can select how many records per page to display, the maximum is 20/page. A couple of the columns are sortable and at the bottom is the pagination with page numbers and previous/next buttons.

For SR testing, I use NVDA. I'm assuming the typical method for navigating such tables using the arrow and ctrl+arrow keys?

So my question is around focus when changing 'pages' - should focus remain where it is, at the pagination controls and just have it announce 'page 3 of 15'? Is it typical to then have to back up thru the data table to get to the top of the new page of records? Should focus shift to the top of the new set of displayed records?

It's one thing for me to use a mouse, or keyboard, and see the data change when you change pages and then just scroll up and down the page to view it, but what's the expected interaction for those who can't do that?

I just want to be sure we're using the right interaction and not complicating things for AT users.

Thanks for your input,

Diane R Tomlins
HCA IT&S | UXCOE
Accessibility SME

From: glen walker
Date: Wed, Nov 07 2018 11:24AM
Subject: Re: data table pagination - focus position?
← Previous message | Next message →

This is more of a usability question than an accessibility question, but
still a great question.

Since the "next page" button is just updating part of the page, I prefer to
keep the focus where it is. I might want to hit "next page" several
times. If the focus had moved back to the table, I'd have to navigate back
to the next button every time.

After I get to the page I want, I can easily hit Shift+T to navigate back
to the table.

This is just my personal opinion and not based on any user research or
guidelines other than experience in the field.

Glen


On Wed, Nov 7, 2018 at 11:19 AM Tomlins Diane <
= EMAIL ADDRESS REMOVED = > wrote:

> This may have come up before, but searching the archives didn't bring up
> anything directly, so please forgive me if it has.
>
> The setup: we have a health portal application and within this application
> a patient can go to their profile and see an Activity Log showing every
> login, and what they did within the application, such as viewing clinical
> information. It's presented in a sortable data table where you can select
> how many records per page to display, the maximum is 20/page. A couple of
> the columns are sortable and at the bottom is the pagination with page
> numbers and previous/next buttons.
>
> For SR testing, I use NVDA. I'm assuming the typical method for
> navigating such tables using the arrow and ctrl+arrow keys?
>
> So my question is around focus when changing 'pages' - should focus remain
> where it is, at the pagination controls and just have it announce 'page 3
> of 15'? Is it typical to then have to back up thru the data table to get to
> the top of the new page of records? Should focus shift to the top of the
> new set of displayed records?
>
> It's one thing for me to use a mouse, or keyboard, and see the data change
> when you change pages and then just scroll up and down the page to view
> it, but what's the expected interaction for those who can't do that?
>
> I just want to be sure we're using the right interaction and not
> complicating things for AT users.
>
> Thanks for your input,
>
> Diane R Tomlins
> HCA IT&S | UXCOE
> Accessibility SME
>
> > > > >

From: Isabel Holdsworth
Date: Thu, Nov 08 2018 7:56AM
Subject: Re: data table pagination - focus position?
← Previous message | Next message →

Only thing is, if you leave the focus on the "Next page" button,
screenreader users might not know that the page was updated and might
keep pressing the button and thinking it doesn't work.

I would either pop up an accessible toast telling users the new page
number ("Page 3 of 7"), or provide a heading with the same information
just above the table and move the focus to the heading. And as a
screenreader user myself, I think I marginally prefer the second
solution as it lines me up for reading the new records.

Cheers, Isabel

On 07/11/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> This is more of a usability question than an accessibility question, but
> still a great question.
>
> Since the "next page" button is just updating part of the page, I prefer to
> keep the focus where it is. I might want to hit "next page" several
> times. If the focus had moved back to the table, I'd have to navigate back
> to the next button every time.
>
> After I get to the page I want, I can easily hit Shift+T to navigate back
> to the table.
>
> This is just my personal opinion and not based on any user research or
> guidelines other than experience in the field.
>
> Glen
>
>
> On Wed, Nov 7, 2018 at 11:19 AM Tomlins Diane <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> This may have come up before, but searching the archives didn't bring up
>> anything directly, so please forgive me if it has.
>>
>> The setup: we have a health portal application and within this
>> application
>> a patient can go to their profile and see an Activity Log showing every
>> login, and what they did within the application, such as viewing clinical
>> information. It's presented in a sortable data table where you can select
>> how many records per page to display, the maximum is 20/page. A couple
>> of
>> the columns are sortable and at the bottom is the pagination with page
>> numbers and previous/next buttons.
>>
>> For SR testing, I use NVDA. I'm assuming the typical method for
>> navigating such tables using the arrow and ctrl+arrow keys?
>>
>> So my question is around focus when changing 'pages' - should focus
>> remain
>> where it is, at the pagination controls and just have it announce 'page 3
>> of 15'? Is it typical to then have to back up thru the data table to get
>> to
>> the top of the new page of records? Should focus shift to the top of the
>> new set of displayed records?
>>
>> It's one thing for me to use a mouse, or keyboard, and see the data
>> change
>> when you change pages and then just scroll up and down the page to view
>> it, but what's the expected interaction for those who can't do that?
>>
>> I just want to be sure we're using the right interaction and not
>> complicating things for AT users.
>>
>> Thanks for your input,
>>
>> Diane R Tomlins
>> HCA IT&S | UXCOE
>> Accessibility SME
>>
>> >> >> >> >>
> > > > >

From: glen walker
Date: Thu, Nov 08 2018 7:30PM
Subject: Re: data table pagination - focus position?
← Previous message | Next message →

Good point, Isabel, but I was only commenting on the focus issue. We
didn't talk about notifications, which I would do with a live region
instead of a toast message. But I would still leave the focus on the
"next" button.

On Thu, Nov 8, 2018 at 7:56 AM Isabel Holdsworth < = EMAIL ADDRESS REMOVED = >
wrote:

> Only thing is, if you leave the focus on the "Next page" button,
> screenreader users might not know that the page was updated and might
> keep pressing the button and thinking it doesn't work.
>
> I would either pop up an accessible toast telling users the new page
> number ("Page 3 of 7"), or provide a heading with the same information
> just above the table and move the focus to the heading. And as a
> screenreader user myself, I think I marginally prefer the second
> solution as it lines me up for reading the new records.
>
> Cheers, Isabel
>
>

From: Jonathan Avila
Date: Thu, Nov 08 2018 8:06PM
Subject: Re: data table pagination - focus position?
← Previous message | Next message →

I agree -- for sighted keyboard users leaving focus on the next button may make sense -- but screen readers will definitely need some information letting them know that the main context of the page indeed was updated and they may also want some context of what changed to make the decision to read it or move on the next or go back to the previous page.

Jonathan

Jonathan Avila, CPWA
Chief Accessibility Officer
Level Access
= EMAIL ADDRESS REMOVED =
703.637.8957 office

Visit us online:
Website | Twitter | Facebook | LinkedIn | Blog

Looking to boost your accessibility knowledge? Check out our free webinars!

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Isabel Holdsworth
Sent: Thursday, November 8, 2018 9:56 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] data table pagination - focus position?

Only thing is, if you leave the focus on the "Next page" button, screenreader users might not know that the page was updated and might keep pressing the button and thinking it doesn't work.

I would either pop up an accessible toast telling users the new page number ("Page 3 of 7"), or provide a heading with the same information just above the table and move the focus to the heading. And as a screenreader user myself, I think I marginally prefer the second solution as it lines me up for reading the new records.

Cheers, Isabel

On 07/11/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> This is more of a usability question than an accessibility question,
> but still a great question.
>
> Since the "next page" button is just updating part of the page, I
> prefer to keep the focus where it is. I might want to hit "next page"
> several times. If the focus had moved back to the table, I'd have to
> navigate back to the next button every time.
>
> After I get to the page I want, I can easily hit Shift+T to navigate
> back to the table.
>
> This is just my personal opinion and not based on any user research or
> guidelines other than experience in the field.
>
> Glen
>
>
> On Wed, Nov 7, 2018 at 11:19 AM Tomlins Diane <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> This may have come up before, but searching the archives didn't
>> bring up anything directly, so please forgive me if it has.
>>
>> The setup: we have a health portal application and within this
>> application a patient can go to their profile and see an Activity Log
>> showing every login, and what they did within the application, such
>> as viewing clinical information. It's presented in a sortable data
>> table where you can select how many records per page to display, the
>> maximum is 20/page. A couple of the columns are sortable and at the
>> bottom is the pagination with page numbers and previous/next buttons.
>>
>> For SR testing, I use NVDA. I'm assuming the typical method for
>> navigating such tables using the arrow and ctrl+arrow keys?
>>
>> So my question is around focus when changing 'pages' - should focus
>> remain where it is, at the pagination controls and just have it
>> announce 'page 3 of 15'? Is it typical to then have to back up thru
>> the data table to get to the top of the new page of records? Should
>> focus shift to the top of the new set of displayed records?
>>
>> It's one thing for me to use a mouse, or keyboard, and see the data
>> change when you change pages and then just scroll up and down the
>> page to view it, but what's the expected interaction for those who
>> can't do that?
>>
>> I just want to be sure we're using the right interaction and not
>> complicating things for AT users.
>>
>> Thanks for your input,
>>
>> Diane R Tomlins
>> HCA IT&S | UXCOE
>> Accessibility SME
>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives
> >

From: Mohith BP
Date: Thu, Nov 08 2018 9:43PM
Subject: Re: data table pagination - focus position?
← Previous message | Next message →

Hi Diane,

I hope the new page loaded contains only the new set of records in the table.
If each time activating Next page just adds number of columns to the
table keeping the old record as well then the focus need to move to
the newly loaded content.
Else as Glen and others suggested keep the focus on the button and
provide user an accessible notification that the new page has been
loaded as there are many quick navigation keys through which the
screen reader user can shift the focus.


Thanks & Regards,
Mohith B. P.


On 11/9/18, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
> I agree -- for sighted keyboard users leaving focus on the next button may
> make sense -- but screen readers will definitely need some information
> letting them know that the main context of the page indeed was updated and
> they may also want some context of what changed to make the decision to read
> it or move on the next or go back to the previous page.
>
> Jonathan
>
> Jonathan Avila, CPWA
> Chief Accessibility Officer
> Level Access
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 office
>
> Visit us online:
> Website | Twitter | Facebook | LinkedIn | Blog
>
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination, distribution
> or copying of this communication is strictly prohibited.
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Isabel Holdsworth
> Sent: Thursday, November 8, 2018 9:56 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] data table pagination - focus position?
>
> Only thing is, if you leave the focus on the "Next page" button,
> screenreader users might not know that the page was updated and might keep
> pressing the button and thinking it doesn't work.
>
> I would either pop up an accessible toast telling users the new page number
> ("Page 3 of 7"), or provide a heading with the same information just above
> the table and move the focus to the heading. And as a screenreader user
> myself, I think I marginally prefer the second solution as it lines me up
> for reading the new records.
>
> Cheers, Isabel
>
> On 07/11/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>> This is more of a usability question than an accessibility question,
>> but still a great question.
>>
>> Since the "next page" button is just updating part of the page, I
>> prefer to keep the focus where it is. I might want to hit "next page"
>> several times. If the focus had moved back to the table, I'd have to
>> navigate back to the next button every time.
>>
>> After I get to the page I want, I can easily hit Shift+T to navigate
>> back to the table.
>>
>> This is just my personal opinion and not based on any user research or
>> guidelines other than experience in the field.
>>
>> Glen
>>
>>
>> On Wed, Nov 7, 2018 at 11:19 AM Tomlins Diane <
>> = EMAIL ADDRESS REMOVED = > wrote:
>>
>>> This may have come up before, but searching the archives didn't
>>> bring up anything directly, so please forgive me if it has.
>>>
>>> The setup: we have a health portal application and within this
>>> application a patient can go to their profile and see an Activity Log
>>> showing every login, and what they did within the application, such
>>> as viewing clinical information. It's presented in a sortable data
>>> table where you can select how many records per page to display, the
>>> maximum is 20/page. A couple of the columns are sortable and at the
>>> bottom is the pagination with page numbers and previous/next buttons.
>>>
>>> For SR testing, I use NVDA. I'm assuming the typical method for
>>> navigating such tables using the arrow and ctrl+arrow keys?
>>>
>>> So my question is around focus when changing 'pages' - should focus
>>> remain where it is, at the pagination controls and just have it
>>> announce 'page 3 of 15'? Is it typical to then have to back up thru
>>> the data table to get to the top of the new page of records? Should
>>> focus shift to the top of the new set of displayed records?
>>>
>>> It's one thing for me to use a mouse, or keyboard, and see the data
>>> change when you change pages and then just scroll up and down the
>>> page to view it, but what's the expected interaction for those who
>>> can't do that?
>>>
>>> I just want to be sure we're using the right interaction and not
>>> complicating things for AT users.
>>>
>>> Thanks for your input,
>>>
>>> Diane R Tomlins
>>> HCA IT&S | UXCOE
>>> Accessibility SME
>>>
>>> >>> >>> archives at http://webaim.org/discussion/archives
>>> >>>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> > > > > >

From: Brandon Keith Biggs
Date: Fri, Nov 09 2018 4:04AM
Subject: Re: data table pagination - focus position?
← Previous message | Next message →

Hello,
AccDC has a perfect example of how to do a datatable for screen reader
users:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Data%20Grids/ARIA%20Data%20Grid%20(Dynamic)/demo.htm

Thanks,


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


On Thu, Nov 8, 2018 at 7:06 PM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:

> I agree -- for sighted keyboard users leaving focus on the next button may
> make sense -- but screen readers will definitely need some information
> letting them know that the main context of the page indeed was updated and
> they may also want some context of what changed to make the decision to
> read it or move on the next or go back to the previous page.
>
> Jonathan
>
> Jonathan Avila, CPWA
> Chief Accessibility Officer
> Level Access
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 office
>
> Visit us online:
> Website | Twitter | Facebook | LinkedIn | Blog
>
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination,
> distribution or copying of this communication is strictly prohibited.
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Isabel Holdsworth
> Sent: Thursday, November 8, 2018 9:56 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] data table pagination - focus position?
>
> Only thing is, if you leave the focus on the "Next page" button,
> screenreader users might not know that the page was updated and might keep
> pressing the button and thinking it doesn't work.
>
> I would either pop up an accessible toast telling users the new page
> number ("Page 3 of 7"), or provide a heading with the same information just
> above the table and move the focus to the heading. And as a screenreader
> user myself, I think I marginally prefer the second solution as it lines me
> up for reading the new records.
>
> Cheers, Isabel
>
> On 07/11/2018, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> > This is more of a usability question than an accessibility question,
> > but still a great question.
> >
> > Since the "next page" button is just updating part of the page, I
> > prefer to keep the focus where it is. I might want to hit "next page"
> > several times. If the focus had moved back to the table, I'd have to
> > navigate back to the next button every time.
> >
> > After I get to the page I want, I can easily hit Shift+T to navigate
> > back to the table.
> >
> > This is just my personal opinion and not based on any user research or
> > guidelines other than experience in the field.
> >
> > Glen
> >
> >
> > On Wed, Nov 7, 2018 at 11:19 AM Tomlins Diane <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> This may have come up before, but searching the archives didn't
> >> bring up anything directly, so please forgive me if it has.
> >>
> >> The setup: we have a health portal application and within this
> >> application a patient can go to their profile and see an Activity Log
> >> showing every login, and what they did within the application, such
> >> as viewing clinical information. It's presented in a sortable data
> >> table where you can select how many records per page to display, the
> >> maximum is 20/page. A couple of the columns are sortable and at the
> >> bottom is the pagination with page numbers and previous/next buttons.
> >>
> >> For SR testing, I use NVDA. I'm assuming the typical method for
> >> navigating such tables using the arrow and ctrl+arrow keys?
> >>
> >> So my question is around focus when changing 'pages' - should focus
> >> remain where it is, at the pagination controls and just have it
> >> announce 'page 3 of 15'? Is it typical to then have to back up thru
> >> the data table to get to the top of the new page of records? Should
> >> focus shift to the top of the new set of displayed records?
> >>
> >> It's one thing for me to use a mouse, or keyboard, and see the data
> >> change when you change pages and then just scroll up and down the
> >> page to view it, but what's the expected interaction for those who
> >> can't do that?
> >>
> >> I just want to be sure we're using the right interaction and not
> >> complicating things for AT users.
> >>
> >> Thanks for your input,
> >>
> >> Diane R Tomlins
> >> HCA IT&S | UXCOE
> >> Accessibility SME
> >>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
> > > at http://webaim.org/discussion/archives
> > > > > >

From: Tomlins Diane
Date: Fri, Nov 09 2018 7:35AM
Subject: Re: data table pagination - focus position?
← Previous message | Next message →

Isabel, that was my initial thought too, but I wasn't sure what would be better for those using screen readers. Using the prev/next function, when the next page of data is displayed, it does announce something like 'rows 6-10 of 234', so a screen reader user will definitely know that the data has changed. If using arrows or back-tabs or Shift+T to get to the new first record displayed is typical, then we will leave the focus where it is, at the pagination area.

Thank you,

Diane R Tomlins
HCA IT&S | UXCOE
Accessibility SME

>I would either pop up an accessible toast telling users the new page number ("Page 3 of 7"), or provide a heading with the same information just above the table >and move the focus to the heading. And as a screenreader user myself, I think I marginally prefer the second solution as it lines me up for reading the new >records.

>Cheers, Isabel

From: Isabel Holdsworth
Date: Mon, Nov 12 2018 5:12AM
Subject: Re: data table pagination - focus position?
← Previous message | Next message →

Hi Diane,

This will work so long as the pagination generates a fresh set of rows
rather than adding to an existing set.

If you were adding to an existing set, the focus would definitely need
to be moved to the first new row.

Some SR users (like me) will prefer the focus to jump to the first row
in a new set, or the heading just before it, while others will prefer
that the focus stays on the pagination. Whichever you choose to do, as
long as you do it accessibly and consistently, your users will get
used to it very quickly.

Cheers, Isabel

On 09/11/2018, Tomlins Diane < = EMAIL ADDRESS REMOVED = > wrote:
> Isabel, that was my initial thought too, but I wasn't sure what would be
> better for those using screen readers. Using the prev/next function, when
> the next page of data is displayed, it does announce something like 'rows
> 6-10 of 234', so a screen reader user will definitely know that the data has
> changed. If using arrows or back-tabs or Shift+T to get to the new first
> record displayed is typical, then we will leave the focus where it is, at
> the pagination area.
>
> Thank you,
>
> Diane R Tomlins
> HCA IT&S | UXCOE
> Accessibility SME
>
>>I would either pop up an accessible toast telling users the new page number
>> ("Page 3 of 7"), or provide a heading with the same information just above
>> the table >and move the focus to the heading. And as a screenreader user
>> myself, I think I marginally prefer the second solution as it lines me up
>> for reading the new >records.
>
>>Cheers, Isabel
>
> > > > >

From: Tomlins Diane
Date: Mon, Nov 12 2018 7:37AM
Subject: Re: data table pagination - focus position?
← Previous message | No next message

Thank you. We are definitely generating a fresh set of rows and not adding to an existing set. Good to know that what we decided to do, leaving focus where it is and announcing the next set of rows, is acceptable.

Diane R Tomlins
HCA IT&S | UXCOE
Accessibility SME

>This will work so long as the pagination generates a fresh set of rows rather than adding to an existing set.

>If you were adding to an existing set, the focus would definitely need to be moved to the first new row.

>Some SR users (like me) will prefer the focus to jump to the first row in a new set, or the heading just before it, while others will prefer that the focus stays on the pagination. Whichever you choose to do, as long as you do it accessibly and consistently, your users will get used to it very quickly.

>Cheers, Isabel