Hjemmesider skal være tilgængelige for alle. Her er hvad du behøver at vide.

At oprette en webside er ikke bare at skabe en webside. Et vigtigt aspekt af frontend-udvikling er at sikre, at brugergrænseflader er tilgængelige for alle på internettet, inklusive personer med syns- og hørehandicap. Du skal skrive din kode med disse mennesker i tankerne. Hvordan giver du visuelt udfordrede lige adgang til din hjemmeside som ikke-visuelt udfordrede? Læs denne artikel for at finde ud af det.

Hvorfor skal udviklere være bekymrede over webtilgængelighed?

Webtilgængelighed kredser om ideen om, at alle skal have lige adgang til nettet, uanset handicap eller handicap. At have en tilgængelig hjemmeside gør det nemmere at nå ud til et større publikum (ca. 16 % af verden lider af det ene eller det andet handicap).

Digital tilgængelighed bør ikke være en mulighed for udviklere. Det er en nødvendighed for ethvert professionelt mærke. Dette tages alvorligt: ​​som rapporteret af Bred vifte, nogen sagsøgte The Pokémon Company i 2019 på grund af et ikke-tilgængeligt websted.

instagram viewer

Webtilgængelighed med HTML

I HTML er der regler for at sikre udviklingen af ​​tilgængelige hjemmesider. Dette afsnit vil forklare nogle af disse regler.

Brug semantiske elementer

Semantiske elementer i HTML er elementer, der har betydning. I HTML5 er der omkring 100 elementer. Nogle elementer, som f.eks og, er ikke-semantiske, mens andre HTML-tags er semantiske. Selvom det kan være umuligt at stoppe med at bruge disse ikke-semantiske elementer, er det vigtigt at inkorporere så mange semantiske elementer, som du kan, i dit arbejde. Her er en liste over populære semantiske elementer:

Overvej dette eksempel fra Taaskly:

Et blik på billedet ovenfor vil afsløre følgende elementer:

  • En overskrift
  • Et billede
  • Et afsnit
  • Tre knapper

Det er let at antage, at udviklerne brugte tags for at arrangere elementerne på skærmen. Når du ser nærmere på koderne, vil du se, at de brugte seks semantiske tags i stedet for. Den forenklede kode ser sådan ud:

<afsnit>
<imgsrc="/hero.png"alt="helt">
<artikel>
<h1>Find de rigtige produkter og tjenester på det rigtige tidspunkt.h1>
<s>
 Håndlavet fodtøj, hårfornyelse, social media manager, afsendelse af ærinder, indtægtskildeb>— you name it, Taaskly fik det. Find alle de produkter eller tjenester, du har brug for i dag, når du tilmelder dig og bruger Taaskly. 
s>
<-enhref="/main/home">Outsource en opgave-en>
<-enhref="/main/tjenester"> Find en tjeneste-en>
<-enhref="/hoved/markedsplads" >Find en butik-en>
artikel>
afsnit>

Fra HTML-kodestykket kan du observere følgende:

  1. Billederne, teksten og knapperne er inde i en element.
  2. Det element deler ligeligt og elementer.
  3. Det element holder, , og elementer.
  4. Knapperne er kodet som elementer; derfor er de links, ikke knapper. Brug som hovedregel altid links til at dirigere brugeren til en anden side eller visning, og brug knapper, når du kun ønsker, at brugeren skal udføre en handling i samme visning. Se Angulars knapside for mere info om dette.

Brug landemærker til at give en tydelig sidestruktur

Landemærker er semantiske tags, der hjælper blinde brugere med at navigere på en webside med skærmlæsere. Med vartegn er det nemt at definere forskellige dele af en webside. Apples hjemmeside bruger Landmarks.

Billedet ovenfor viser fire forskellige vartegn. Du kan bruge Tilgængelighedsindsigt udvidelse til at visualisere disse vartegn.

På billedet kan vi udlede en øverst, en indeholdende en, og en element. Bemærkelsesværdigt viser billedet "navigation", "område", og "indholdsinfo". Disse er kendt som rollerne, som vi vil se på senere.

Når du skal bruge flere vartegn for en side, skal du altid adskille dem med en etiket. For eksempel, hvis du bruger flere elementer som Apple har, skal du mærke dem. Du bør mærke dem med aria-mærke attribut. Så du kan skrive noget som en af ​​disse:

<navaria-mærke = "global">
<navaria-mærke = "lokal navigation">
<navaria-mærke = "æble bibliotek">

Brug af etiketter kan hjælpe skærmlæsere med at springe til enhver navigation.

Brug rolle-, navn- og værdiattributter

Nogle gange kan det være umuligt at bruge HTML-elementer med indbyggede tilgængelighedsfunktioner. Sådanne tilfælde kan være en af ​​disse to:

  1. Der er intet indbygget HTML-element for det, du ønsker at opnå. For eksempel, hvis du skal bruge en fordi intet andet element ser ud til at passe til rollen.
  2. Du kan ikke bruge semantiske elementer på grund af tekniske problemer. Hvis du bruger en ramme, der bruger når det ville have været bedre at bruge, vil det være din pligt at definere en brugerdefineret kontrol.

For at definere en brugerdefineret kontrol skal du bruge en rolle, et navn og en værdi (nogle gange) for dit element.

Rolle

Som standard er en element har navigationsrollen, mens en element har bannerrollen. Du bør kun bruge disse elementer til deres tilsigtede formål for at hjælpe hjælpeteknologier med at forstå strukturen af ​​en webside. Hvis du skal bruge den ene i stedet for den anden, skal du angive rollen som denne:

<headerrolle = "navigation">
<navrolle = "banner">
<divrolle = "navigation">

Navn

Et navn er en beskrivende tekst eller etiket forbundet med et HTML-element. Den nemmeste form for et navn er teksten til et element. Her er et eksempel:

<divrolle = "knap">Klik på mig!div>

I ovenstående uddrag, "Klik på mig!" er navnet på element. Det er også kendt som det tilgængelige navn.

For elementer som navigation, rullemenuer osv. er det mere komplekst at tildele et navn end i det foregående eksempel. Det er anderledes, fordi disse elementer har underordnede elementer i dem. For at tildele et navn til navigationen ovenfor, skal du bruge aria-mærke attribut. Se på dette eksempel:

<navrolle = "navigation"aria-mærke = "global-navigation">...nav>

Du skal bemærke, at a navn attribut er forskellig fra et tilgængeligt navn. Dette kodestykke giver en bedre forståelse:

 navneegenskab 
<navrolle = "navigation"navn = "global-navigation">...nav>
 tilgængeligt navn 
<navrolle = "navigation"aria-mærke = "global-navigation">...nav>

Se TGPis artikel om tilgængelige navne for at få en dybere forståelse af dette.

Værdi

I HTML kan værdiattributten give yderligere oplysninger om et element. Værdier giver oplysninger om komponentens tilstand for brugerdefinerede komponenter såsom harmonikaer. For eksempel kan en harmonika enten åbnes eller lukkes.

Du kan tilføje værdi til dine elementer på flere måder. Dette uddrag viser nogle af måderne, du kan gøre det på:

 aria-valuenow 
værdi
<inputtype="afkrydsningsfelt"navn="produkt[]"værdi="1">

Prioritering af webtilgængelighed for en inkluderende onlineoplevelse

Webtilgængelighed er ud over at følge regler; det handler også om at sikre, at alle har lige adgang til din hjemmeside. Inkorporering af semantiske elementer, vartegn og attributter som rolle, navn og værdi i din HTML kan gøre dit websted mere tilgængeligt for mennesker med handicap. Tænk ikke på webtilgængelighed som en mulighed; anser det for en nødvendighed.