Toegankelijk­heid (ARIA) en frameworks

  • ± 1 minuut

Hoe doen CSS en JS frameworks het wanneer we het hebben over de toegankelijk­heid van een website? Onderzoek dit in het aanbestedings-traject, en ga na hoe je de toegankelijk­heid kunt verbeteren door inzet van WAI ARIA specificatie.

Frameworks en ARIA

Door specifieke aria attributen in te zetten, weten screenreaders hoe elementen geïdentificeerd en dus voorgelezen moeten worden. Vele frameworks, waaronder jQuery als ook Bootstrap CSS framework, hebben dit geadopteerd.

Bijvoorbeeld, de tooltip functionaliteit binnen Bootstrap, gaat goed om met toegankelijk­heid. Bij mouseover verschijnt een tekst-popup in een zwart kader. Het element waarop de mouseover/hover-event plaats vindt, wordt via javascript voorzien van een aria-describedby=elementid attribuut, met een verwijzing naar die tooltip. Tegelijkertijd krijgt het tooltip-element, role=tooltip toegekend, bij gebrek aan een semantisch equivalent om tooltips mee aan te duiden.

Ook tref je in de Bootstrap documentatie het gebruik van labels in combinatie met formuliervelden aan. Bootstrap heeft zelfs een class gewijd aan content dat enkel voor screenreaders zichtbaar moet zijn:sr-only wat staat voor screenreader only. De tegenhanger is het aria-hidden=true attribuut, waarmee het voor screenreaders duidelijk is dat de inhoud van zo een HTML element, niet uitgesproken hoeft te worden. Dit zie je bijvoorbeeld terug bij font-iconen sets, zoals FontAwesome.

Framework valkuilen

Overigens, dezelfde frameworks lenen zich er ook voor om het foutief in te zetten. Voor Bootstrap geldt dat bij gebrek aan kennis, code onjuist overgenomen zou kunnen worden, of dat men zelf aan de haal gaat en bepaalde attributen achterwege laten.

Voor jQuery geldt dat het functies bevat, waarmee code niet direct aan de DOM structuur van een HTML document wordt toegevoegd. Gebruik van jQuery functies als before() en after(), werken buiten de DOM om. Hiernaar heb ik eerder onderzoek gedaan in het kader van mijn stage. Tegenwoordig lijken screenreaders veranderingen in de HTML code via deze wegen goed te interpreteren. Dit zal echter per screenreader kunnen verschillen.

Het gebruik van frameworks, resulteert dan ook niet per definitie in toegankelijk­e websites of applicaties. Om hier achter te komen, heb ik mijn eigen website onderworpen aan accessibility tests om de toegankelijk­heid te bepalen. Hoe ik dit heb aangepakt, lees je terug in een aparte publicatie.