Verkkosivujen tulee olla kaikkien saatavilla. Tässä on mitä sinun on tiedettävä.

Verkkosivun luominen ei ole vain verkkosivun luomista. Tärkeä näkökohta etupään kehittämisessä on varmistaa, että käyttöliittymät ovat kaikkien Internetissä, myös näkö- ja kuulovammaisten, saatavilla. Sinun on kirjoitettava koodisi näitä ihmisiä ajatellen. Kuinka annat näköhaasteisille ihmisille yhtäläisen pääsyn verkkosivustollesi kuin ei-visuaalisille ihmisille? Lue tämä artikkeli saadaksesi selville.

Miksi kehittäjien pitäisi olla huolissaan verkon saavutettavuudesta?

Webin saavutettavuus pyörii ajatuksen ympärillä, että kaikilla pitäisi olla yhtäläinen pääsy verkkoon vammasta tai vammoista riippumatta. Esteetön verkkosivusto helpottaa suuremman yleisön tavoittamista (noin 16 % maailmasta kärsii jommastakummasta vammasta).

Digitaalisen saavutettavuuden ei pitäisi olla vaihtoehto kehittäjille. Se on välttämättömyys mille tahansa ammattibrändille. Tämä otetaan vakavasti: kuten raportoi Lajike, joku haastoi The Pokémon Companyn oikeuteen vuonna 2019, koska verkkosivustolla ei ollut pääsyä.

instagram viewer

Webin saavutettavuus HTML: n avulla

HTML: ssä on säännöt, joilla varmistetaan saavutettavien verkkosivustojen kehittäminen. Tässä osiossa selitetään joitakin näistä säännöistä.

Käytä semanttisia elementtejä

HTML: n semanttiset elementit ovat elementtejä, joilla on merkityksiä. HTML5:ssä on noin 100 elementtiä. Jotkut elementit, kuten ja, ovat ei-semanttisia, while muut HTML-tunnisteet ovat semanttisia. Vaikka näiden ei-semanttisten elementtien käytön lopettaminen saattaa olla mahdotonta, on tärkeää sisällyttää työhön mahdollisimman monta semanttista elementtiä. Tässä on luettelo suosituista semanttisista elementeistä:

Harkitse tätä esimerkkiä Taasklysta:

Vilkaisu yllä olevaan kuvaan paljastaa seuraavat elementit:

  • Otsikko
  • Kuva
  • Kappale
  • Kolme painiketta

On helppo olettaa, että kehittäjät käyttivät -tageja elementtien järjestämiseksi näytöllä. Kun tarkastelet koodeja tarkemmin, huomaat, että ne käyttivät sen sijaan kuutta semanttista tunnistetta. Yksinkertaistettu koodi näyttää tältä:

<osio>
<imgsrc="/hero.png"alt="sankari">
<artikla>
<h1>Löydä oikeat tuotteet ja palvelut oikeaan aikaan.h1>
<s>
 Käsintehdyt jalkineet, hiusten uudistus, sosiaalisen median johtaja, lähetystyöt, tulonlähdeb>— Nimeä se, Taaskly sai sen. Löydä kaikki tarvitsemasi tuotteet tai palvelut tänään, kun rekisteröidyt ja käytät Taasklya. 
s>
<ahref="/main/home">Ulkoista tehtäväa>
<ahref="/pää/palvelut"> Etsi palvelua>
<ahref="/main/marketplace" >Etsi kauppaa>
artikla>
osio>

Voit havaita HTML-koodinpätkästä seuraavaa:

  1. Kuvat, teksti ja painikkeet ovat sisällä a elementti.
  2. The elementti jakaa tasan ja elementtejä.
  3. The elementti pitää sisällään, , ja elementtejä.
  4. Painikkeet on koodattu nimellä elementtejä; siksi ne ovat linkkejä, eivät painikkeita. Käytä pääsääntöisesti aina linkkejä ohjataksesi käyttäjän toiselle sivulle tai näkymälle ja käytä painikkeita, kun haluat käyttäjän suorittavan toiminnon vain samassa näkymässä. Katso Angular's Button -sivu saadaksesi lisätietoja tästä.

Käytä maamerkkejä selkeän sivurakenteen luomiseen

Maamerkit ovat semanttisia tunnisteita, jotka auttavat sokeita käyttäjiä navigoimaan verkkosivulla näytönlukuohjelmien avulla. Maamerkkien avulla on helppo määrittää verkkosivun eri osia. Applen verkkosivusto käyttää maamerkkejä.

Yllä olevassa kuvassa on neljä erilaista maamerkkiä. Voit käyttää Esteettömyystiedot laajennus näiden maamerkkien visualisoimiseksi.

Kuvasta voimme päätellä a yläosassa, a sisältää a, ja a elementti. Huomattavasti kuva näkyy "navigointi", "alue", ja "sisältötiedot". Nämä tunnetaan rooleina, joita tarkastelemme myöhemmin.

Aina kun joudut käyttämään useita maamerkkejä sivulla, erota ne aina tunnisteella. Esimerkiksi jos käytät useita Kuten Applella, sinun on merkittävä ne. Sinun tulee merkitä ne aria-merkki attribuutti. Joten voit kirjoittaa jotain näistä:

<navaria-merkki = "globaali">
<navaria-merkki = "paikallinen navigointi">
<navaria-merkki = "omenahakemisto">

Tunnisteiden käyttäminen voi auttaa näytönlukuohjelmia siirtymään mihin tahansa navigointiin.

Käytä rooli-, nimi- ja arvoattribuutteja

Joskus voi olla mahdotonta käyttää HTML-elementtejä sisäänrakennettujen esteettömyysominaisuuksien kanssa. Tällaiset tapaukset voivat olla jompikumpi näistä kahdesta:

  1. Ei ole natiivi HTML-elementtiä sille, mitä haluat saavuttaa. Esimerkiksi, jos sinun on käytettävä a koska mikään muu elementti ei näytä sopivan rooliin.
  2. Et voi käyttää semanttisia elementtejä teknisten ongelmien vuoksi. Jos käytät kehystä, joka käyttää kun sitä olisi ollut parempi käyttää, sinun velvollisuutesi on määrittää mukautettu ohjaus.

Mukautetun ohjausobjektin määrittämiseksi tarvitset elementille roolin, nimen ja arvon (joskus).

Rooli

Oletuksena a elementillä on navigointirooli, kun taas a elementillä on bannerin rooli. Sinun tulisi käyttää näitä elementtejä vain niille tarkoitettuihin tarkoituksiin auttaaksesi aputekniikoita ymmärtämään verkkosivun rakennetta. Jos sinun on käytettävä yhtä toisen tilalla, määritä rooli seuraavasti:

<otsikkorooli = "navigointi">
<navrooli = "banneri">
<divrooli = "navigointi">

Nimi

Nimi on kuvaava teksti tai tunniste, joka liittyy HTML-elementtiin. Helpoin nimen muoto on elementin teksti. Tässä on esimerkki:

<divrooli = "painike">Klikkaa minua!div>

Yllä olevassa katkelmassa "Klikkaa minua!"on nimi elementti. Se tunnetaan myös helppokäyttöisenä nimenä.

Elementtien, kuten navigoinnin, pudotusvalikoiden jne., nimen antaminen on monimutkaisempaa kuin edellisessä esimerkissä. Se on erilainen, koska näissä elementeissä on lapsielementtejä. Voit määrittää yllä olevalle navigoinnille nimen käyttämällä aria-merkki attribuutti. Katso tämä esimerkki:

<navrooli = "navigointi"aria-merkki = "globaali navigointi">...nav>

Kannattaa huomioida, että a nimi attribuutti on eri kuin käytettävissä oleva nimi. Tämä koodinpätkä antaa paremman käsityksen:

 nimi attribuutti 
<navrooli = "navigointi"nimi = "globaali navigointi">...nav>
 saavutettava nimi 
<navrooli = "navigointi"aria-merkki = "globaali navigointi">...nav>

Katso TGPi: n artikkeli saavutettavista nimistä saadaksesi tämän syvemmän käsityksen.

Arvo

HTML: ssä value-attribuutti voi tarjota lisätietoja elementistä. Arvot antavat tietoja komponentin tilasta mukautetuille komponenteille, kuten haitariille. Esimerkiksi haitari voidaan joko avata tai sulkea.

Voit lisätä arvoa elementteihisi useilla tavoilla. Tämä katkelma näyttää joitakin tapoja, joilla voit tehdä sen:

 aria-valuenow 
arvo
<syöttötyyppi="valintaruutu"nimi="tuote[]"arvo="1">

Internetin esteettömyyden asettaminen etusijalle kattavan verkkokokemuksen saamiseksi

Webin saavutettavuus on muutakin kuin sääntöjen noudattaminen; Kyse on myös siitä, että kaikilla on yhtäläinen pääsy verkkosivustollesi. Semanttisten elementtien, maamerkkien ja attribuuttien, kuten roolin, nimen ja arvon, sisällyttäminen HTML-koodiisi voi tehdä verkkosivustostasi helpommin vammaisten käytettävissä. Älä ajattele webin saavutettavuutta vaihtoehtona. pitää sitä välttämättömänä.