Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
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">⥢</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">…</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">…</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">⥤</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
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
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
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
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
Pages: 1