Use HTML instead of CSS pseudo-elements for presentational icons

[ppvg]

From independent accessibility report, SC 2.4.6:

Op pagina components/accordion.html staan uitklapbare elementen. Deze elementen zijn opgemaakt als knoppen. De toegankelijkheidsnaam van deze knoppen is bijvoorbeeld "Voorbeeld-onderwerp 2 v". Het pijltje omhoog of de letter "v" als pijl naar beneden wordt dus ook onderdeel van de toegankelijkheidsnaam. Dit is hier eerder een icoon. Aangezien er met het aria-expanded-attribuut al aangegeven wordt dat dit element in- en uitgeklapt kan worden, kan het pijltje of de letter "v" beter verborgen worden. Dit kan door er een span-element omheen te plaatsen en hierop het attribuut aria-hidden="true" op te plaatsen.

Dit komt bijvoorbeeld ook voor op pagina components/filter.html.

Presentational icons, such as the arrows on expand/collapse buttons of accordions and filters, should be aria-hidden. This means they should be moved into the markup, since it is not possible to apply aria-hidden to CSS pseudo-elements (::before and ::after).

[underdarknl]

Should we also look at implementing this using details and summary tags instead of buttons and divs? Or at least also apply the css for 'our' accordions onto those tags.

[ppvg]

We've had a report of these glyphs causing "an annoying Braille character", so this issue is confirmed to affect multiple assistive technologies.