Vi använder kakor (cookies) för att webbplatsen ska fungera så bra som möjligt för dig. Vi använder också kakor för webbanalys för att göra webbplatsen bättre.
Godkänner du att vi också använder kakor för webbanalys?
Om man vill dölja ett visst innehåll som enbart skärmläsare kan läsa upp så kan man använda sig utav klassen sr-only.
Ett exempel är om man har en knapp med en text, och i skärmläsare vill förtydliga vad som händer när man trycker på knappen.
Gå vidare till
Nästa
sida
<f-button><spanclass="sr-only">Gå vidare till</span>
Nästa
<spanclass="sr-only">sida</span></f-button>
Vid uppläsning i NVDA läses element med display: inline-block upp tillsammans med föregående HTML-element.
Klassen sr-separator används för att separera uppläsningen av två element, exempelvis en etikett som kommer efter en tooltip.
Exempel label efter
Denna text syns bara för skärmläsare.
<divclass="tooltip-before"><spanclass="label tooltip-before__label heading--h4">
Exempel label efter
</span></div><divclass="tooltip"><divclass="tooltip__container"><f-buttonclass="tooltip__button"aria-expanded="true"><spanclass="icon-stack icon-stack--circle"><svgfocusable="false"class="icon icon__info button__icon"><usehref="#f-icon-circle" /></svg><svgfocusable="false"class="icon button__icon"><usehref="#f-icon-i" /></svg></span><spanclass="sr-only"> Denna text syns bara för skärmläsare. </span></f-button></div></div><labelclass="label sr-separator"><spanclass="label__description">Ytterligare beskrivning</span><spanclass="label__description label__description--discrete">
(Med lite extra inom parantes)
</span></label>
Exempel input efter
Denna text syns bara för skärmläsare.
<divclass="tooltip-before"><spanclass="label tooltip-before__label heading--h4">
Exempel input efter
</span></div><divclass="tooltip"><divclass="tooltip__container"><f-buttonclass="tooltip__button"aria-expanded="true"><spanclass="icon-stack icon-stack--circle"><svgfocusable="false"class="icon icon__info button__icon"><usehref="#f-icon-circle" /></svg><svgfocusable="false"class="icon button__icon"><usehref="#f-icon-i" /></svg></span><spanclass="sr-only"> Denna text syns bara för skärmläsare. </span></f-button></div></div><inputtype="text"class="sr-separator"maxlength="50" />