Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2020-02-08 06:31:03

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

aria pagination validation

For the pages navigation, I am using this tag combination with the aria recommendation posted earlier in the same thread by Phil but it seems that the Nu Html Checker does not quite like it returning warnings like:

Possible misuse of aria-label. (If you disagree with this warning, file an issue report …)
From line 340, column 5; to line 340, column 40…

and highlights all instances such as:

<ul><li><span aria-label="Go to first page">1</span>
...?pg=2"><span aria-label="Go to page 2">2</span>

There is also another detail which I do not know if it is an issue or not where the current unlinked page (page 1 in the example above) still has the Go to first page text, where I would think that it would be more accessible if it said You are on the first page but as far as I can tell, there is no way to separate the current page from <txp:pages total shift="2" break="li"><span aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:pages>.

For convenience I am reposting the snippet here

<txp:evaluate test="3,7,5">
    <nav aria-label="<txp:text item="page_nav" />" class="pagination">
        <ul>
        <txp:newer showalways break="li"><span aria-label="Go to previous page">&#x2962;</span></txp:newer>
        <txp:newer shift break="li"><span aria-label="Go to first page"><txp:yield item="page" /></span></txp:newer>
        <txp:newer shift="5-3" limit="1" break="li"><span role="separator" aria-label="More pages">&hellip;</span></txp:newer>
        <txp:pages total shift="2" break="li"><span aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:pages>
        <txp:older shift="5-3" limit="1" break="li"><span role="separator" aria-label="More pages">&hellip;</span></txp:older>
        <txp:older shift break="li"><span aria-label="Go to last page"><txp:yield item="page" /></span></txp:older>
        <txp:older showalways break="li"><span aria-label="Go to next page">&#x2964;</span></txp:older>
        </ul>
    </nav>
</txp:evaluate>

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#2 2020-02-08 09:23:56

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: aria pagination validation

Hmm. It is a warning and the validator does not seem to give any kind of reasoning for flagging this. I don’t think that use of aria-label is wrong, personally. And to the validators defence, it is something that is pretty hard to judge by a bot.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#3 2020-02-08 09:54:09

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: aria pagination validation

colak wrote #321568:

as far as I can tell, there is no way to separate the current page

Hi Yiannis, you can split

<txp:pages total shift="2" break="li"><span aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:pages>

into

<txp:newer total shift="2" break="li"><span aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:newer>
<txp:pages shift="0" break="li"><span aria-label="You are on page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:pages>
<txp:older total shift="2" break="li"><span aria-label="Go to page <txp:yield item="page" />"><txp:yield item="page" /></span></txp:older>

You can also use conditional aria-labels, since the current page number is available via <txp:page_url type="pg" />. All this will require evaluate order modification, but I leave it with you.

Offline

#4 2020-02-08 09:55:56

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: aria pagination validation

Thanks for the response Phil, I am currently diving into ARIA and it seems to be a steep learning curve and the validator is unfortunately not helping.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#5 2020-02-08 10:09:04

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: aria pagination validation

Hi Oleg, I was responding to Phil as you were writing. Your recommendation does indeed work!


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

Board footer

Powered by FluxBB