Webbplatser ska vara tillgängliga för alla. Här är vad du behöver veta.

Att skapa en webbsida är inte bara att skapa en webbsida. En viktig aspekt av front-end-utveckling är att se till att användargränssnitt är tillgängliga för alla på internet, inklusive personer med syn- och hörselnedsättningar. Du måste skriva din kod med dessa personer i åtanke. Hur ger du visuellt utmanade personer lika tillgång till din webbplats som icke-visuellt utmanade? Läs den här artikeln för att ta reda på det.

Varför bör utvecklare vara oroliga för webbtillgänglighet?

Webbtillgänglighet kretsar kring idén att alla ska ha lika tillgång till webben, oavsett funktionsnedsättning eller funktionsnedsättning. Att ha en tillgänglig webbplats gör det lättare att nå en större publik (cirka 16 % av världen lider av det ena eller det andra handikappet).

Digital tillgänglighet ska inte vara ett alternativ för utvecklare. Det är en nödvändighet för alla professionella varumärken. Detta tas på allvar: som rapporterats av Mängd, någon stämde The Pokémon Company 2019 på grund av en otillgänglig webbplats.

instagram viewer

Webbtillgänglighet med HTML

I HTML finns regler för att säkerställa utvecklingen av tillgängliga webbplatser. Det här avsnittet kommer att förklara några av dessa regler.

Använd semantiska element

Semantiska element i HTML är element som har betydelser. I HTML5 finns det cirka 100 element. Vissa element, som t.ex och, är icke-semantiska, medan andra HTML-taggar är semantiska. Även om det kan vara omöjligt att sluta använda dessa icke-semantiska element, är det viktigt att införliva så många semantiska element som du kan i ditt arbete. Här är en lista över populära semantiska element:

Tänk på det här exemplet från Taaskly:

En blick på bilden ovan kommer att avslöja följande element:

  • En rubrik
  • En bild
  • En paragraf
  • Tre knappar

Det är lätt att anta att utvecklarna använde taggar för att ordna elementen på skärmen. Med en närmare titt på koderna kommer du att se att de använde sex semantiska taggar istället. Den förenklade koden ser ut så här:

<sektion>
<imgsrc="/hero.png"alt="hjälte">
<artikel>
<h1>Hitta rätt produkter och tjänster vid rätt tidpunkt.h1>
<sid>
 Handgjorda skor, håruppfräschning, social media manager, skicka ärenden, inkomstkällab>— you name it, Taaskly fattade det. Hitta varje produkt eller tjänst du behöver idag när du registrerar dig och använder Taaskly. 
sid>
<ahref="/main/home">Outsourca en uppgifta>
<ahref="/main/services"> Hitta en tjänsta>
<ahref="/main/marketplace" >Hitta en butika>
artikel>
sektion>

Från HTML-kodavsnittet kan du observera följande:

  1. Bilderna, texten och knapparna finns inuti en element.
  2. De elementet delar lika och element.
  3. De elementet håller, , och element.
  4. Knapparna är kodade som element; därför är de länkar, inte knappar. Som en allmän regel, använd alltid länkar för att dirigera användaren till en annan sida eller vy, och använd knappar när du bara vill att användaren ska utföra en åtgärd i samma vy. Ser Angulars knappsida för mer information om detta.

Använd landmärken för att ge en tydlig sidstruktur

Landmärken är semantiska taggar som hjälper blinda användare att navigera på en webbsida med skärmläsare. Med landmärken är det enkelt att definiera olika delar av en webbsida. Apples hemsida använder landmärken.

Bilden ovan visar fyra olika landmärken. Du kan använda Tillgänglighetsinsikter förlängning för att visualisera dessa landmärken.

På bilden kan vi härleda en överst, en innehållande en, och en element. Märkbart visar bilden "navigering", "område", och "innehållsinfo". Dessa är kända som rollerna, som vi ska titta på senare.

När du måste använda flera landmärken för en sida, särskilj dem alltid med en etikett. Till exempel om du använder flera element som Apple har måste du märka dem. Du bör märka dem med aria-etikett attribut. Så du kan skriva något i stil med någon av dessa:

<navaria-etikett = "global">
<navaria-etikett = "lokal navigering">
<navaria-etikett = "äpplekatalog">

Att använda etiketter kan hjälpa skärmläsare att hoppa till valfri navigering.

Använd attribut för roll, namn och värde

Ibland kan det vara omöjligt att använda HTML-element med inbyggda tillgänglighetsfunktioner. Sådana fall kan vara något av dessa två:

  1. Det finns inget inbyggt HTML-element för vad du vill uppnå. Till exempel, om du måste använda en eftersom inget annat element verkar passa rollen.
  2. Du kan inte använda semantiska element på grund av tekniska problem. Om du använder ett ramverk som använder när det hade varit bättre att använda, kommer det att vara din plikt att definiera en anpassad kontroll.

För att definiera en anpassad kontroll behöver du en roll, ett namn och ett värde (ibland) för ditt element.

Roll

Som standard, a elementet har navigeringsrollen, medan en elementet har bannerrollen. Du bör endast använda dessa element för deras avsedda syften för att hjälpa hjälpmedel att förstå strukturen på en webbsida. Om du måste använda den ena istället för den andra bör du ange rollen så här:

<rubrikroll = "navigering">
<navroll = "baner">
<divroll = "navigering">

namn

Ett namn är en beskrivande text eller etikett som är kopplad till ett HTML-element. Den enklaste formen av ett namn är texten i ett element. Här är ett exempel:

<divroll = "knapp">Klicka här!div>

I avsnittet ovan, "Klicka här!" är namnet på element. Det är också känt som det tillgängliga namnet.

För element som navigering, rullgardinsmenyer etc. är det mer komplext att tilldela ett namn än i föregående exempel. Det är annorlunda eftersom dessa element har underordnade element i sig. För att tilldela ett namn för navigeringen ovan, använd aria-etikett attribut. Titta på det här exemplet:

<navroll = "navigering"aria-etikett = "global-navigering">...nav>

Du bör notera att a namn attribut skiljer sig från ett tillgängligt namn. Detta kodavsnitt ger en bättre förståelse:

 namnattribut 
<navroll = "navigering"namn = "global-navigering">...nav>
 tillgängligt namn 
<navroll = "navigering"aria-etikett = "global-navigering">...nav>

Ser TGPis artikel om tillgängliga namn för att få en djupare förståelse för detta.

Värde

I HTML kan värdeattributet ge ytterligare information om ett element. Värden ger information om komponentens tillstånd för anpassade komponenter som dragspel. Ett dragspel kan till exempel antingen öppnas eller stängas.

Du kan tillföra värde till dina element på flera sätt. Det här utdraget visar några av sätten du kan göra det på:

 aria-valuenow 
värde
<inmatningtyp="kryssruta"namn="produkt[]"värde="1">

Prioritera webbtillgänglighet för en inkluderande onlineupplevelse

Webbtillgänglighet är bortom att följa regler; det handlar också om att se till att alla har lika tillgång till din webbplats. Att införliva semantiska element, landmärken och attribut som roll, namn och värde i din HTML kan göra din webbplats mer tillgänglig för personer med funktionshinder. Tänk inte på webbtillgänglighet som ett alternativ; anser det vara en nödvändighet.