Forslag vedrørende implementering af svg ikoner

[laclogin]

Skyldes dit forslag et problem? Beskriv venligst.

Problem nr. 1. ScreenReader fx. NVDA oplæser inline svg i funktion-links i header som grafik i en Internet Explorer 11 browser.

Problem nr. 2. Internet Explore 11, får focus på alle inline svg-tags, hvilket resultere i at brugeren skal taste dobbelt for at tabulere igennem et link/knap med ikon.

Testet på denne dkfds eksempel-side (https://detfaellesdesignsystem.github.io/dkfds-docs/pages/eksempler/digital-flytning/flytning-2/) Se nedenstående billeder.

Bemærk antallet af tabulering over Funktionslinks i række 5 i header. (Her oplæses ikonerne som grafik)

Bemærk antallet af tabulering over linket med ’åbner nyt vindue’-ikon, og over knap med ikon tilføj personer. (Her er oplæsningen helt korrekt)

Beskriv det du gerne ser ske

Vil I ikke tilføje nedenstående attributter i alle svg-tags som default ?

1. aria-hidden="true"

2. focusable="false"

Link til det der skal opdateres (URL to what needs to be updated): https://detfaellesdesignsystem.github.io/dkfds-docs/design/ikoner/ https://detfaellesdesignsystem.github.io/dkfds-docs/komponenter/buttons/ https://detfaellesdesignsystem.github.io/dkfds-docs/komponenter/tooltip/

På forhånd tak,

Med venlig hilsen Laura Beck ATP

[detfaellesdesignsystem]

Hej @laclogin,

Tak for din henvendelse!

Der er oprettet en sag på dette, som er i indeværende sprint.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

[laclogin]

Hej Kristina, Det lyder rigtig godt. Mange tak for hjælpen.

Med venlig hilsen Laura Beck ATP

[detfaellesdesignsystem]

Hej @laclogin,

Vi har tilføjet dokumentation på at focusable="false" og aria-hidden="true" bør sættes på svg elementet på alle ikoner. Det er ligeledes blevet rettet til i alle eksempler på siden.

Ændringen vil være at se efter næste release.

Jeg lukker sagen her.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem