Topics

Bij het maken van een formulier kunt u delabelHeb je je ooit afgevraagd hoe je met groepen moet omgaan? Met name hoe je de hele groep moet labelen, enforSoms vind ik het lastig om met attributen om te gaan.

Deze keer gaan we de labeling van deze groepen organiseren en specifieke methoden introduceren.

Veelvoorkomende weergavemethoden en problemen

Naar het eerste itemforpunt

Voor groepen keuzerondjes of selectievakjes,<label>vanforDit is een manier om een ​​kenmerk naar het eerste item te verwijzen.

Bijvoorbeeld de volgende code:

Favoriete fruit



Appel

Mandarijn

Banaan

Visueel ziet het er prima uit, maar het label 'Favoriete Fruit' wordt niet correct weergegeven door de schermlezer.Deze wordt alleen aan de eerste keuzerondje gekoppeld.Daarom wordt de hele groep niet correct herkend.

forNiet specificeren

Favoriete fruit



Appel

Mandarijn

Banaan

Deze aanpak maakt het onduidelijk op welk element het label betrekking heeft, vooral voor gebruikers die schermlezers gebruiken.Het is onduidelijk welke opties bij de labels horen.Het wordt zoiets.

Dit zijn goede verbeterideeën

Groeperen op rolkenmerk en label met aria-labelledby

Keuzerondjes en selectievakjesrole="radiogroup"ofrole="group"en koppel het element aan het label waarvan de ID is opgegeven door aria-labelledby. Dit maakt het voor schermlezers duidelijk dat het label "Favoriete Fruit" voor de hele groep geldt.

Keuzerondje

Favoriete fruit





<input type="radio" name="fruit" value="apple">Appel

<input type="radio" name="fruit" value="orange">Mandarijn

<input type="radio" name="fruit" value="banana">Banaan

Selectievakje

<div class="formuliergroep">
  <span id="fruit-group">好きな果物</span>
  <div>
    <div rol="groep" aria-labelledby="fruit-groep">
      <label><input type="checkbox" naam="fruit" waarde="appel">りんご</label>
      <label><input type="checkbox" naam="fruit" waarde="oranje">みかん</label>
      <label><input type="checkbox" naam="fruit" waarde="banaan">バナナ</label>
    </div>
  

<fieldset>En<legend>Hoe te gebruiken

Een andere manier is om<fieldset>En<legend>Deze aanpak is gebaseerd op HTML-semantiek en zorgt ervoor dat de hele groep correct wordt herkend, zonder dat er speciale kenmerken of rollen nodig zijn.

In het onderstaande voorbeeld maken we een groep keuzerondjes.<fieldset>en als label<legend>Ik gebruik.

※ Let op!: Er kunnen gevallen zijn waarin u het label en de invoer naast elkaar wilt weergeven. Gebruik in dergelijke gevallen fieldset.display: contents;Dit wordt echter afgeraden, omdat sommige browsers de legenda uit de toegankelijkheidsboom verwijderen. Het is niet verstandig om de lay-out geforceerd uit te lijnen met CSS en zo de toegankelijkheid te verliezen.

Favoriete fruit



Appel

Mandarijn

Banaan

samenvatting

De labels voor groepen keuzerondjes of selectievakjes kunnen als volgt worden georganiseerd:

Het gebruik van het rolkenmerk en aria-labelledby

• Flexibele maatwerkopties beschikbaar indien nodig
• Stel het groepslabel expliciet in in combinatie met role="group"

<fieldset>En<legend>Hoe te gebruiken

• Een standaardbenadering gebaseerd op semantiek
• Maakt robuustere en toegankelijkere implementaties mogelijk
• Sommige lay-outs hebben problemen met de toegankelijkheid

Afhankelijk van uw ontwerp en vereisten kunt u een van beide methoden kiezen om een ​​goede toegankelijkheid te creëren.

<fieldset>En<legend>is semantischer, maar in het geval van bijvoorbeeld een aanvraagformulier zijn het kenmerk role en aria-labelledby mogelijk gemakkelijker te gebruiken vanwege de algemene lay-outstructuur.

Webtoegankelijkheid is nog toekomstmuziek!