Link naar de homepage heeft geen accessible name

[MoietyMe]

De link naar de homepage in de header (Tweakers logo) heeft geen accessible name. Dit betekend dat de link geen content heeft die programmatisch achterhaald kan worden, zoals tekst, een aria-label, of zelfs een title attribuut.

Huidige code:

HTML:

<a href="https://tweakers.net/"></a>

Oplossen door tekst in een visually hidden span te stoppen (zorgt ervoor dat assistive technology (AT) de tekst niet negeert, maar je hem niet ziet):

HTML:

<a href="https://tweakers.net/"><span class="visually-hidden">Tweakers</span></a>

Cascading Stylesheet:

.visually-hidden {
  position: absolute;
  right: 100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

Oplossen met aria-label:

HTML:

<a href="https://tweakers.net/" aria-label="Tweakers"></a>

Oplossen met title attribute (niet aangeraden):

HTML:

<a href="https://tweakers.net/" title="Tweakers"></a>

Uit deze opties is aria-label het makkelijkste toe te passen en erg breed ondersteund. De visueel verborgen tekst werkt overal en laat ook iets zien als een gebruiker bijvoorbeeld CSS heeft uitstaan.

[crisp]

Het logo wordt al gevolgd door een <h1> (op de index) of een <b>-tag met daarin de sitename

[MoietyMe]

Dat zorgt er echter nog niet voor dat de link een accessible name krijgt . De link zoals hij nu is wordt aangekondigd als “Visited link, /” in VoiceOver. Aangezien er al verborgen tekst met de website naam is zou het relatief makkelijk moeten zijn om die in de link te plaatsen.

[crisp]

Good Fella schreef op donderdag 11 mei 2017 @ 12:19:
Dat zorgt er echter nog niet voor dat de link een accessible name krijgt . De link zoals hij nu is wordt aangekondigd als “Visited link, /” in VoiceOver. Aangezien er al verborgen tekst met de website naam is zou het relatief makkelijk moeten zijn om die in de link te plaatsen.

Dat had juist wat complicaties, maar ik weet niet meer precies wat

[MoietyMe]

In dat geval, een oplossing die de huidige structuur niet aanpast en niet voor duplicaties zorgt:

HTML:

<a href="https://tweakers.net/" aria-labelledby="sitename-id"></a>
<span class="sitename" id="sitename-id" hidden>Tweakers</span>

Nu wordt de content van #sitename-id gebruikt om de accessible name (accName) van de link te genereren. Tevens wordt .sitename daadwerkelijk verborgen via het hidden attribute. Echter zit het nog wel in de DOM en hebben de CSS rules die afhankelijk zijn van .sitename (zoals .sitename+ul) er geen last van.