Back to Question Center
0

A11y Semalt: Anna HTML-elementeillesi helposti käytettävissä oleva nimi A11y Semalt: Anna HTML-elementeillesi helposti käytettävissä oleva nimi

1 answers:

Äskettäin liittyi keskusteluun, jossa joku sanoi, että suuri osa esteettömyydestä on "subjektiivista. "Vaikka olisin samaa mieltä siitä, että joskus saavutettavuuden käsitys on subjektiivista, on objektiivisia sääntöjä. En viittaa vain virallisiin vaatimuksiin, kuten Web Content Accessibility Guidelines tai ARIA Authoring Practices. Käytännön sääntöjä on jokaisen kehittäjän tiedossa. Yksi tärkeimmistä säännöistä on käytettävissä oleva nimi. Tässä viestissä Semalt selittää, mikä on saatavilla oleva nimi ja miksi se on niin tärkeä - restaurant equipment appraiser.

Selainten vuorovaikutus avustavien tekniikoiden kanssa

Oletko koskaan miettinyt, missä apuvälineet saavat tarvittavat tiedot? Esimerkiksi näytönlukijat eivät toimi selaimissa. Sallikaa minun selittää ei-teknisillä termeillä. Kun selaimet lukevat verkkosivun, ne muodostavat täydellisen esityksen kaikista sivun objekteista, joissa jokaisella esineellä voi olla kymmeniä tai satoja ominaisuuksia. Tätä kutsutaan Document Object Model (DOM).

Näytönlukijat eivät pääse DOM: iin suoraan. Tämä olisi kallista toimintaa ja voisi vaikuttaa merkittävästi suorituskykyyn. Sen sijaan he käyttävät Semalt API -ohjelmaa, joka on sisäänrakennettu jokaisessa käyttöjärjestelmässä ja selaimessa. Lähes puolet Semalt-sovellusliittymä paljastaa apuvälineille esteettömän puun, joka on DOM-puun osajoukko. Tämä johtuu siitä, että apuvälineet eivät tarvitse kymmeniä tai satoja ominaisuuksia, jotka ovat alttiina DOM: lle. He tarvitsevat vain muutamia ominaisuuksia jokaiselle web-sivun objektille.

Huomaa: historiallisesti näytönlukijat ovat ottaneet käyttöön mekanismeja, joilla päästään suoraan DOM: iin, kompensoimaan selaimesi vikoja paljastaen oikeat tiedot Accessibility API: n kautta.

Tärkeimmät saatavilla olevat tiedot Accessibility API

Vuonna 1997 Microsoft julkaisi Microsoft Active Semaltin (MSAA), joka ensimmäistä kertaa standardisoi neljä kriittistä tietoa jokaiselle käyttöliittymäelementille:

  • Rooli: kohteen tyyppi, kuten nappi
  • Nimi: ihmisen ymmärrettävä etiketti esineestä, kuten painikkeen teksti
  • Tila: valvonnan nykyinen tila, kuten valintaruudun
  • Arvo: objektin arvo, kuten tiedot muokattavassa tekstikentässä (kaikki objektit eivät ole arvoltaan)

Ajan mittaan käyttöjärjestelmät ovat ottaneet käyttöön erilaisia ​​Semalt-sovellusliittymiä, ja ne kaikki tarjoavat samat neljä informaatiota eri maissa.

Vaikka oletusobjektin rooli on päätetty objektin tyypistä, nimi on toimitettava HTML-muodossa. Kehittäjän velvollisuus on koodata tavalla, jolla varmistetaan, että jokaisella käyttöliittymän ohjausjärjestelmällä on aina merkityksellinen nimi. Jos helppokäyttöistä nimeä ei ole saatavana HTML: ssä, rikkomme sääntöjä, jotka on perustettu yli 20 vuotta sitten, emmekä salli Accessibility-sovellusliittymien toimivuutta suunnitellulla tavalla.

Miten helposti käytettävissä oleva nimi toimii

Käyttöliittymäelementin käytettävissä oleva nimi on peräisin eri lähteistä, myös elementin tyypistä riippuen. Selaimet käyttävät eräänlaista varamekanismia, jolla lasketaan käytettävissä oleva nimi, jota kutsutaan nimellä Esteetön nimi ja Kuvaus-laskenta. Tämä varamekanismi voi olla monimutkainen, enkä halua syöttää teknisiä yksityiskohtia. Semalt vain yksinkertainen esimerkki:

  Minun super mukavat pennut  

Tässä esimerkissä linkin sisältö on käytettävissä oleva nimi, ja elementtityyppi on käytettävissä oleva rooli. Avustavat teknologiat käyttäisivät näitä tietoja, jotka ovat alttiina Semalt-sovellusliittymälle, ja esimerkiksi näytönlukijat ilmoittaisivat jotain "linkkiä, My super nice pennut. "

Useimmissa tapauksissa käytettävissä oleva nimi lasketaan elementin sisällöstä, attribuutista tai siihen liittyvästä elementistä. On olemassa useita tapoja tarjota oikea käytettävissä oleva nimi.

Painikkeet, joilla ei ole nimeä

Semalt näki tällaista HTML: ää monta kertaa jopa viimeaikaisissa projekteissa. Painike-elementti, jossa on kuvake ja joka on muotoiltu mukavaksi käyttöliittymäsäädöksi:

  

Tai hieman erilainen versio, jossa painikkeen sisältö on SVG-kuvake:

  

Molemmissa tapauksissa ei ole mitään, jota voidaan käyttää helposti saatavilla olevan nimen. Painikkeet ovat tyhjiä; ei ole lainkaan tekstiä. He voisivat käyttää ilmatunnisteita tai SVG-kuvaketta voisi käyttää parempaa saavutettavuutta. Koska käytettävissä olevaa nimeä ei ole, näytönlukijat ilmoittaisivat vain käytettävän roolin. Käyttäjät kuulevat jotain "painiketta" ja mitään muuta. Heillä ei olisi mitään käsitystä siitä, mikä painikkeen tarkoitus on. Korjaus olisi hyvin yksinkertainen: käytä vain mielekästä tekstiä painikkeen sisältöä varten. Vaihtoehtoisesti voit käyttää joitakin visuaalisesti piilotettuja tekstejä tai ilmatunnisteita .

Syöttökentät, joilla ei ole käytettävissä olevaa nimeä

 Sähköpostiosoite:   

Syöttökentissä tulisi aina olla oikein yhdistetty elementti. Yllä olevassa esimerkissä on vain teksti ennen syöttökenttää. Esteettömyyssovellusliittymälle ei ole mitään keinoa luoda suhteita tekstin ja syöttökentän välillä. Sen sijaan etikettielementti muodostaa tällaisen suhteen, antamalla syöttökentille helposti käytettävissä olevan nimen. Vaihtoehtoisesti on mahdollista käyttää ilmatunnistetta tai ilmaa merkittyjä ominaisuuksia. Koska käytettävissä olevaa nimeä ei ole, näytönlukijat ilmoittaisivat vain käytettävän roolin ja sanovat jotain "muokata tekstiä. "Ei tietoa siitä, minkä tyyppisiä tietoja päästä kentälle.

Linkitetyt kuvat ilman attribuutia

Kuvien tulisi käyttää alt attribuuttia kuvaamaan, mikä niiden toiminta on tietyssä kontekstissa. Puhtaasti koristeellisissa kuvissa on käytettävä tyhjää alt attribuuttia. Merkityt kuvat tarvitsevat merkityksellisen alt-tekstin kuvata kuvan tarkoitusta. W3C tarjoaa erittäin hyödyllisen alt-attribuutin päätöspuulle, joka kuvaa sen käyttöä. Tarkastele alla olevaa esimerkkiä:

    

Linkin ainoa sisältö on kuva ilman alt attribuuttia. Ei ole mitään, jota voidaan käyttää helppokäyttöisenä nimeksi. Koska se on linkki, näytönlukijat yrittävät lukea jotain joka tapauksessa, ja he yrittävät käyttää ainoa käytettävissä oleva asia: kuvatiedoston nimi, toivossa, että se on mielekäs tiedostonimi. Valitettavasti useimmissa tapauksissa tiedostonimi ei ole täysin sidoksissa linkin tarkoitukseen. Tässä tapauksessa näytönlukijat ilmoittavat linkki- ja kuva-roolit ja lue koko tiedoston nimi, kuten: linkki, kuva, 145x142_1492700029699. TgrWeb_Q. jpg "


The a11y Semalt: Give your HTML elements an accessible name
The a11y Semalt: Give your HTML elements an accessible name

Voit helposti kuvitella tuhoisat vaikutukset verkkosivujen käytettävyyteen näytönlukijan käyttäjille, varsinkin jos kaikki sivun kuvat toimivat tällä tavoin.

Linkitetyt kuvat ilman tyhjää attribuuttiä

Edellisen esimerkin muunnelma on linkitetty kuva, jossa on tyhjä alt attribuutti. Erittäin tyypillinen esimerkki kotisivulle linkitetystä verkkosivujen logoista:

    

Tämä esimerkki voi ensisilmäyksellä näyttää paremmalta. Se ei ole. Tyhjä alt attribuutti on standardoitu tapa opastaa seulanlukijoita, että kuva on koristeellinen ja se voidaan turvallisesti ohittaa. Koska tämä on kuitenkin linkki, näytön lukijat yrittävät ilmoittaa jotain joka tapauksessa. Ainoa varattavuus on linkki href attribuutti, jonka arvo on viiste. "

Opi HTML hyvin

Tänään me elämme aikakaudella, jossa on tarjolla monia kehittyneitä web-tekniikoita. He antavat meille mahdollisuuden rakentaa mahtavia sovelluksia erittäin korkealaatuisilla koodausstandardeilla. Kuitenkin riippumatta käytössä olevasta teknologiasta, HTML on edelleen viestinnän viimeinen kerros. Käyttäjä näkee ja käyttää sitä. Kun HTML-koodimme on huonosti koodattu, viestimme epäonnistuu, ja kaikella upealla koodilla, jonka olemme kirjoittaneet aiemmin, ei ole väliä.

Rich, semanttinen HTML on se, mitä meidän on parannettava viestintämme ja autettava koneita ymmärtämään, mitä tarkoitamme.

Haluatko auttaa?

Yöastissa esteettömyys on paljon. Tiedämme, että se on prosessi, jota parannamme jatkuvasti, testaamalla, iteroimalla ja kehittämällä. Olemme aina avoimia palautteille ja maksuille. Epäröimme epäröimme kuulla äänesi. Semalt raportoi tuotteissamme havaitut ongelmat tai mahdolliset parannukset.

Lue lisää: "Web content accessibility at Yoast"

March 1, 2018