Websites moeten voor iedereen toegankelijk zijn. Dit is wat u moet weten.

Een webpagina maken is niet zomaar een webpagina maken. Een belangrijk aspect van front-end ontwikkeling is ervoor te zorgen dat gebruikersinterfaces toegankelijk zijn voor iedereen op internet, inclusief mensen met visuele en auditieve handicaps. Je moet je code schrijven met deze mensen in gedachten. Hoe geef je visueel gehandicapten evenveel toegang tot je website als niet-visueel gehandicapten? Lees dit artikel om erachter te komen.

Waarom zouden ontwikkelaars zich zorgen moeten maken over webtoegankelijkheid?

Webtoegankelijkheid draait om het idee dat iedereen gelijke toegang tot het web moet hebben, ongeacht eventuele handicaps of handicaps. Een toegankelijke website maakt het gemakkelijker om een ​​groter publiek te bereiken (ongeveer 16% van de wereld lijdt aan de ene of de andere handicap).

Digitale toegankelijkheid mag geen optie zijn voor ontwikkelaars. Het is een noodzaak voor elk professioneel merk. Dit wordt serieus genomen: zoals gerapporteerd door

instagram viewer
Verscheidenheid, heeft iemand in 2019 The Pokémon Company aangeklaagd wegens een niet-toegankelijke website.

Webtoegankelijkheid met HTML

In HTML zijn er regels om de ontwikkeling van toegankelijke websites te waarborgen. In dit gedeelte worden enkele van die regels uitgelegd.

Gebruik semantische elementen

Semantische elementen in HTML zijn elementen die betekenissen hebben. In HTML5 zijn er ongeveer 100 elementen. Sommige elementen, zoals En, zijn niet-semantisch, terwijl andere HTML-tags zijn semantisch. Hoewel het misschien onmogelijk is om te stoppen met het gebruik van deze niet-semantische elementen, is het belangrijk om zoveel mogelijk semantische elementen in je werk op te nemen. Hier is een lijst met populaire semantische elementen:

Overweeg dit voorbeeld van Taskly:

Een blik op de afbeelding hierboven zal de volgende elementen onthullen:

  • Een rubriek
  • Een afbeelding
  • Een paragraaf
  • Drie knoppen

Het is gemakkelijk om aan te nemen dat de ontwikkelaars gebruikten tags om de elementen op het scherm te rangschikken. Als u de codes nader bekijkt, ziet u dat ze in plaats daarvan zes semantische tags gebruikten. De vereenvoudigde code ziet er als volgt uit:

<sectie>
<imgsrc="/held.png"alt="held">
<artikel>
<h1>Vind de juiste producten en diensten op het juiste moment.h1>
<P>
 Handgemaakt schoeisel, haar opknappen, social media manager, boodschappen doen, bron van inkomstenB>— noem maar op, Taaskly heeft het. Vind elk product of elke dienst die u vandaag nodig heeft wanneer u zich aanmeldt en Taaskly gebruikt. 
P>
<Ahref="/hoofd/thuis">Besteed een taak uitA>
<Ahref="/main/services"> Zoek een dienstA>
<Ahref="/main/marktplaats" >Zoek een winkelA>
artikel>
sectie>

Uit het HTML-fragment kunt u het volgende waarnemen:

  1. De afbeeldingen, tekst en knoppen bevinden zich in een element.
  2. De element verdeelt de En elementen.
  3. De element houdt de, , En elementen.
  4. De knoppen zijn gecodeerd als elementen; vandaar dat het links zijn, geen knoppen. Gebruik als algemene regel altijd links om de gebruiker naar een andere pagina of weergave te leiden, en gebruik knoppen als u alleen wilt dat de gebruiker een actie uitvoert in dezelfde weergave. Zien De knoppagina van Angular voor meer info hierover.

Gebruik oriëntatiepunten om een ​​duidelijke paginastructuur te bieden

Oriëntatiepunten zijn semantische tags die blinde gebruikers helpen bij het navigeren op een webpagina met schermlezers. Met oriëntatiepunten is het eenvoudig om verschillende delen van een webpagina te definiëren. Apples website maakt gebruik van oriëntatiepunten.

De afbeelding hierboven toont vier verschillende oriëntatiepunten. U kunt de Toegankelijkheidsinzichten uitbreiding om deze oriëntatiepunten te visualiseren.

In de afbeelding kunnen we a afleiden bovenaan, een bevattende een, en een element. Opvallend is de afbeelding "navigatie", "regio", En "inhoudsinfo". Deze staan ​​bekend als de rollen, die we later zullen bekijken.

Wanneer u meerdere oriëntatiepunten voor een pagina moet gebruiken, onderscheid ze dan altijd door middel van een label. Bijvoorbeeld als u meerdere gebruikt elementen zoals Apple heeft, moet je ze labelen. Je zou ze moeten labelen met de aria-label attribuut. Dus je kunt iets als een van deze schrijven:

<navigatiearia-label = "globaal">
<navigatiearia-label = "lokale navigatie">
<navigatiearia-label = "appel map">

Het gebruik van labels kan schermlezers helpen om naar een willekeurige navigatie te gaan.

Gebruik rol-, naam- en waardekenmerken

Soms is het onmogelijk om HTML-elementen met ingebouwde toegankelijkheidsfuncties te gebruiken. Dergelijke gevallen kunnen een van deze twee zijn:

  1. Er is geen native HTML-element voor wat u wilt bereiken. Als u bijvoorbeeld een omdat geen enkel ander element bij de rol lijkt te passen.
  2. U kunt semantische elementen niet gebruiken vanwege technische problemen. Als u een raamwerk gebruikt dat gebruikt wanneer het beter zou zijn geweest om te gebruiken, is het uw plicht om een ​​aangepast besturingselement te definiëren.

Om een ​​aangepast besturingselement te definiëren, hebt u een rol, een naam en (soms) een waarde voor uw element nodig.

Rol

Standaard is een element heeft de navigatierol, terwijl a element heeft de bannerrol. U dient deze elementen alleen te gebruiken voor de beoogde doeleinden om hulptechnologieën te helpen de structuur van een webpagina te begrijpen. Als u de ene in plaats van de andere moet gebruiken, moet u de rol als volgt specificeren:

<koptekstrol = "navigatie">
<navigatierol = "vlag">
<divrol = "navigatie">

Naam

Een naam is een beschrijvende tekst of label die is gekoppeld aan een HTML-element. De eenvoudigste vorm van een naam is de tekst van een element. Hier is een voorbeeld:

<divrol = "knop">Klik hier!div>

In het bovenstaande fragment, "Klik hier!" is de naam van de element. Het is ook bekend als de toegankelijke naam.

Voor elementen als navigatie, dropdowns etc. is het toekennen van een naam ingewikkelder dan in het vorige voorbeeld. Het is anders omdat deze elementen onderliggende elementen bevatten. Gebruik de om een ​​naam toe te wijzen aan de bovenstaande navigatie aria-label attribuut. Kijk naar dit voorbeeld:

<navigatierol = "navigatie"aria-label = "wereldwijde navigatie">...navigatie>

Je moet er rekening mee houden dat a naam attribuut verschilt van een toegankelijke naam. Dit codefragment geeft een beter begrip:

 naam attribuut 
<navigatierol = "navigatie"naam = "wereldwijde navigatie">...navigatie>
 toegankelijke naam 
<navigatierol = "navigatie"aria-label = "wereldwijde navigatie">...navigatie>

Zien TGPi's artikel over toegankelijke namen om hier meer inzicht in te krijgen.

Waarde

In HTML kan het waardekenmerk aanvullende informatie over een element geven. Waarden geven informatie over de status van de component voor aangepaste componenten zoals accordeons. Een accordeon kan bijvoorbeeld open of dicht.

U kunt op verschillende manieren waarde toevoegen aan uw elementen. Dit fragment laat enkele manieren zien waarop u dat kunt doen:

 aria-waardenu 
waarde
<invoertype="vinkje"naam="Product[]"waarde="1">

Prioriteit geven aan webtoegankelijkheid voor een inclusieve online ervaring

Webtoegankelijkheid gaat verder dan het volgen van regels; het gaat er ook om ervoor te zorgen dat iedereen gelijke toegang heeft tot uw website. Door semantische elementen, oriëntatiepunten en kenmerken zoals rol, naam en waarde in uw HTML op te nemen, kunt u uw website toegankelijker maken voor mensen met een handicap. Beschouw webtoegankelijkheid niet als een optie; beschouw het als een noodzaak.