DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Pagination change of page screen reader re-read table plus LI A pagination markup - both AOK in WET

Pagination change of page screen reader re-read table plus LI A pagination markup - both AOK in WET

alanbecalanbec Posts: 5Questions: 0Answers: 0
in General

Hi!

I am reading the docs, experimenting and looking at examples such as this zero config table in an attempt to enable pagination that results in table content being read out by assisstive technology (AT) when a Next/Previous page is displayed.

By default the new table content is not announced.

I have used jQuery to add $( '#myTable' ).attr('aria-live', 'polite') which results in the table being read, but not in the accessible manner where each td is prefaced by its associated th. Instead all ths are read, followed by all tds.

WET

However, the example of Datatables that the WET project implemented, specifically the table at the top of this page does read out table content on pagination change, and the table is read correctly.

I would love to know what I need to to in order to mimic that operation, but I cannot work it out. Unless perhaps the WET version is using some kind of enhanced Datatables JS?

LI A

Ideally, again like the WET example, I would like the pagination to be li > a in order that the AT user may arrow-key navigate from li to li rather than being forced to use tab to have focus rest on each pagination a tag.

Thank you very much in advance for any help!

Cheers,

Alan

Replies

  • allanallan Posts: 61,650Questions: 1Answers: 10,094 Site admin

    Hi Alan,

    but not in the accessible manner where each td is prefaced by its associated th.

    To confirm, on page change you would want it to say?:

    Rendering engine Gecko
Browser Firefox 1.0
...
Rendering engine Gecko
Browser Firefox 1.5
...
etc

    Rather than:

    Rendering engine
Browser
Gecko
Firefox 1.0
...
Gecko
Firefox 1.5
...

    What screen reading software are you using? I don't recall any prefixing the header for each cell, but it has been a while since I've used any.

    I've had a look at the markup for the WET table and it doesn't appear to have anything special in it.

    I would like the pagination to be li > a

    Funnily enough, I had a discussion the other day with someone about accessibility suggesting that it should be button tags rather than a to improve accessibility. I'm not actually able to use arrow keys on the WET table's paging to change the paging button focus?

    The Bootstrap integration uses li > a tags for paging. The markup for the paging buttons is generated by a paging rendering plug-in. This is the one for Bootstrap 5 if you wanted to base a custom plug-in off that.

    Allan

  • alanbecalanbec Posts: 5Questions: 0Answers: 0

    Hi Allan, Thank you very much for replying on this. I will certainly reply and as helpfully as possible address all your points, likely in the next day or two; I have temporarily been moved onto a small side item but will be back here shortly. Thanks! ^_^ -Alan

  • allanallan Posts: 61,650Questions: 1Answers: 10,094 Site admin

    No rush - I'll be here :)

    Thanks,
    Allan

  • alanbecalanbec Posts: 5Questions: 0Answers: 0

    Hi Allan,

    Yes, from all my uses of NVDA over around three years (so I am not a lifelong expert, but have some experience) when encountering a table, AT (or at least NVDA assisstive technology, and I assume all others also) will read the table in that way.

    For example, this table when read by NVDA produces the following transcript (getting AT to output a transcript is really helpful for this work!):

    Concerts:
table  with 4 rows and 3 columns
row 1  Date  column 1  Date
Event  column 2  Event
Venue  column 3  Venue
row 2  Date  column 1  12 February
Event  column 2  Waltz with Strauss
Venue  column 3  Main Hall
row 3  Date  column 1  24 March
Event  column 2  The Obelisks
Venue  column 3  West Wing
row 4  Date  column 1  14 April
Event  column 2  The What
Venue  column 3  Main Hall
out of table

    I use a current if not the absolute latest version of NVDA with Windows 10 and usually Chrome.

    Funnily enough, I had a discussion the other day with someone about accessibility suggesting that it should be button tags rather than a to improve accessibility. I'm not actually able to use arrow keys on the WET table's paging to change the paging button focus?

    Taking your second observation first about the inability to navigate with arrow keys. YES! It threw me when I first started working in accessibility and then I realized it is a subtle mechanism that only works when AT is actually running. With NVDA reading out the screen, each arrow-down or up I do I am able to step from pagination link to pagination link, in the WET example, as they are block-level HTML. This distinction is pretty important I think, since arrow key browsing/consuming is, I believe, a very important mechanism for anyone relying on AT. Without those pagination links in block-level HTML, the only way to focus on one in the middle or the end is to click it with a mouse, or, use tab, and switching to navigating by tab is not elegant and is a whole different set of readable targets (non tab level HTML between tab-able items is missed out). So the content navigation links if presented in groups of two or more, should be block level to allow this.

    Your second point about links v buttons. There is much general debate over a versus button versus a styled to look like a button. I would be happy to weigh in on that if time and context allowed, but I won't bog down this thread with comment now, but I would be happy to do so on another thread when time allowed.

    The Bootstrap integration uses li > a tags for paging

    Perfect, thank you.

    This is the one for Bootstrap 5 if you wanted to base a custom plug-in off that.

    Fab! Thank you Allan, I will go and read up on how I can do that.

    If the above helps shed any light, I would still be very interested to know how the WET table results in the content

    1. being "automatically" read out on pagination use (it triggers a read out of the next set of rows)
    2. being read out "correctly" (td prefixed by th)

    Thank you in advance Allan for any help!

    Cheers, Alan

  • alanbecalanbec Posts: 5Questions: 0Answers: 0

    In case it helps Allan, unsure of who to ask since this involves WET and Datatables, I also opened this thread on the WET github and another kind person has helped there too.

    I freely admit I feel under qualified to be able to work out anything yet (perhaps ever) from the link they provided, but I thought I would note it here since it will likely be helpful to you; if at some time you get a chance to look at it.

    Thanks again for this help, I would love to enable pagination and mimic the beneficial behaviour I see on the WET version, without having to adopt a whole new approach. Hopefully it may help you also, if the read-out-on-pagination-change behaviour is one you choose to add in to your dev pipeline.

    Aplogies in advance if any of the above is already done/working and it's finger trouble on my part. Cheers, Alan

  • alanbecalanbec Posts: 5Questions: 0Answers: 0

    Looking at the WET JS, I can see:

    • they're adding aria-pressed true/false to pagination buttons
    • ...but the rest was not clear enough to me to work out what is happening, though I do see things like:
      • // Identify that the table has been updated which sounds perhaps relevant; if they are acting on pagination to move focus (perhaps?) to the table so it is read (I am guessing here)

    Sorry for the consecutive posts, I only hope they are helpful.

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.