Pagination: Navigatie element toevoegen #2758

Waar

Pagination (html/css en core)

Aanleiding

Advies stichting Accessibility bij SC 2.4.4 'Linkdoel (in context)' om in stap 2 vergunningcheck de pagination (gebruikt om werkzaamheden te pagineren) duidelijkere linkteksten te geven. Voor de cijfers zou 'pagina ' moeten staan.

Accessibility keurt het component niet af, maar dat hadden ze M.I. wel moeten doen. De pagination in de toolkit (en de implementatie) is een ongelabelde lijst met links die alleen de paginanummers bevatten. Noch uit de linkteksten (alleen de paginanummers) noch uit de context (die ontbreekt) wordt duidelijk dat het een pagination is, laat staan wat gepagineerd wordt.

Een interessant voorbeeld van een pagination is pagination in het U.S. web design system. Die hebben een paar dingen die wij niet hebben.

Pagination staat in een <nav> (nemen we over)

Om de pagination staat een <nav aria-label="pagination">. Dit zorgt er voor dat de gebruiker de pagination makkelijker vindt en geeft de links context (voldoende voor WCAG 2.4.4). Ik stel dus voor dit over te nemen.

Het standaardlabel zou "paginering" moeten zijn, of @NataschaRoobol kun jij een meer "B1" formulering bedenken? Ik denk dat dit erg moeilijk wordt, alles wat ik kan verzinnen is ook onduidelijk.

En: in veel gevallen is paginering te algemeen, in stap 2 vergunningcheck betwijfel ik of iemand die het scherm niet ziet begrijpt dat de paginering werkzaamheden pagineert. Dus stel ik een 'accessible name' attribuut voor met als standaardwaarde "paginering".

"last page" voor link naar de laatste pagina (nemen we over)

Als een pagina de laatste pagina is zet USWDS sr-only "last page" voor het nummer en dat zie ik in meer voorbeelden. Ik weet niet of WCAG dit eist maar denk wel dat dit een nuttige toevoeging is. Waar een goedziende gebruiker meteen ziet wat de laatste pagina is, moet een blinde gebruiker 'de context verkennen' om dit af te leiden en dat is onnodige cognitieve belasting. Ik stel dus voor "laatste pagina" sr-only toe te voegen voor het betreffende nummer.

"page" voor ieder nummer en extra toelichting ellipses (nemen we nu niet over)

"pagina" voor iedere link zetten, zoals ook Accessibility en andere voorbeelden voorschrijven, vind ik niet nodig omdat de <nav> al voldoende context geeft en het steeds herhalen van "pagina" de gebruiker veel 'luistertijd' kost.
Een sr-only tekst die stelt dat de ellipses niet-zichtbare pagina's representeren lijkt me ook niet nodig, omdat dit voldoende duidelijk is voor de meeste gebruikers en zo'n tekst ook 'luistertijd' kost.

Ik heb in deze discussie gevraagd waarom USWDS het op deze manier doet, met als resultaat dat zij beide punten met hun gebruikerspanel gaan bespreken. Bovendien heb ik ze gewezen op onnodig ARIA gebruik.

Werkzaamheden

• <nav aria-label=[control met als default waarde 'paginering' of meer B1 formulering]> rond de pagination zetten.
• Link naar de laatste pagina (bijv. 16) de vorm geven: <a ...><span class="sr-only">laatste pagina </span>16</a> (let op spatie tussen pagina en 16)

Gebruikersimpact

Hinderlijk: kan het voor gebruikers moeilijker maken de paginering te vinden en te begrijpen wat deze doet.
Omdat Accessibility het niet heeft afgekeurd speelt het geen rol in de hertest, dus 'reguliere' backlog.