Helppokäyttötoimintojen suunnittelu
Helppokäyttötoiminnot ovat suhteellisen suuri aihealue. Emme voi käsitellä sitä kokonaan yksittäisessä Learn-moduulissa. Jokaisella luomallasi sivulla on kuitenkin joitakin keskeisiä välineitä, jotka haluat ottaa käyttöön. Helppokäyttöisen sivun suunnitteleminen alusta alkaen on aina helpompaa kuin palata aiemmin luodulle sivulle, jotta se on helppokäyttöinen.
HTML:n käyttötapa, jolla se on suunniteltu
HTML sisältää useita elementtejä, joita voit käyttää sivun luomiseen, mukaan lukien painikkeet, linkit ja lomakeohjausobjektit. Jokaisessa elementissä on joukko sisäisiä toimintoja, kuten napsautettava, linkitettävä tai kohdistuksen hyväksyminen.
Muistiinpano
Focus on verkkokehitystermi, joka tarkoittaa, että ohjausobjekti voi hyväksyä syötteen näppäimistöltä. Painike voi hyväksyä kohdistuksen, jolloin joku voi aktivoida sen tai "napsauttaa" sitä valitsemalla välilyönnin.
CSS:n ja JavaScriptin avulla voit määrittää minkä tahansa elementin näyttämään minkä tahansatyyppisen ohjausobjektin kaltaiselta. voit esimerkiksi luoda <span>-elementin <button> avulla, ja <b> voi tulla <a>. Vaikka tämä ominaisuus tarjoaa joitakin pikakuvakkeita sivun muotoiluun tai asetteluun, se poistaa sisäiset toiminnot. Näytönlukuohjelman kaltaiset työkalut eivät pysty ymmärtämään, että <span> käytetään <a>. Näppäimistöä selaava henkilö ei voi keskittyä <div> elementtiin, joka on ohjelmoitu simuloimaan <button> elementtiä.
Toinen HTML-elementti, joka usein ohitetaan, ovat otsikot (<h1><h6>kautta ). Visualisoinnin näkökulmasta otsikkotunnisteet alkavat suurimmasta pienimpään tekstikokoon. Tämä käytäntö johtaa siihen, että monet kehittäjät luopuvat otsikkoelementeistä ja sen sijaan stylisoivat <div> tai muita yleisiä elementtejä.
Valitettavasti tyylitellyt yleiset elementit välittävät vain visuaalisia tietoja rakenteen sijaan. Näytönlukuohjelmien käyttäjät luottaa vahvasti otsikoihin tietojen etsimiseen ja sivun selaamiseen. Kuvaavan otsikkosisällön kirjoittaminen ja semanttisten otsikkotunnisteiden käyttäminen ovat tärkeitä, jotta voit luoda helposti navigoitavan sivuston näytönlukuohjelmien käyttäjille.
Parhaana käytäntönä kannattaa aina käyttää asianmukaista HTML:ää, kun luot ohjausobjekteja sivulla. Jos haluat hyperlinkin, käytä <a>-merkkiä tai <button>-painiketta.
Käytä hyviä visuaalisia vihjeitä
Kehittäjät pitävät usein näytönlukuohjelmia ainoana helppokäyttötoimintojen työkaluna. Käyttäjät saattavat kuitenkin käyttää monia muita työkaluja tai he eivät välttämättä käytä työkaluja lainkaan. Käyttäjät, jotka käyttävät selainta, ymmärtävät tiettyjen visuaalisten vihjeiden perusteella, miten sivua käytetään.
Yksi CSS:n mahtavista ominaisuuksista on se, että se mahdollistaa sivun näyttämisen täydellisen hallinnan, mukaan lukien tiettyjen näyttöelementtien poistamisen. Voit esimerkiksi poistaa ääriviivan tekstiruudusta tai poistaa alleviivauksen hyperlinkistä. Valitettavasti tällaisten vihjeiden poistaminen voi vaikeuttaa sitä, että ohjausobjektin tyypin tunnistava henkilö voi olla haastavampi.
Näppäimistöä kannattaa harkita
Jotkut käyttäjät eivät voi käyttää hiirtä, kosketuslevyä tai kosketuslevyä. Nämä käyttäjät käyttävät sen sijaan välilehtien näppäimistövuorovaikutuksia yhdestä elementistä seuraavaan. Sivuillesi on tärkeää esittää sisältö loogisessa järjestyksessä, jotta näppäimistön käyttäjä voi käyttää jokaista vuorovaikutteista elementtiä siirtyessään alaspäin.
Kun käyttäjä siirtyy sivun läpi sarkaimia painamalla, kohdistus siirtyy ohjausobjektista toiseen sen mukaan, missä järjestyksessä ohjausobjektit luetellaan HTML-lähteessä. Sivusi ohjausobjektit on lueteltava HTML-lähteessä siinä järjestyksessä, jossa odotat sivun selaavan, mutta luotat CSS:ään, että sivu asetellaan visuaalisesti käyttäjille.
Kuvitellaan esimerkiksi kaksi saraketta sisältävän lomakkeen luominen. Sinun kannattaa miettiä, mikä on luonnollinen työnkulku lomaketta täyttävälle henkilölle, ja luetella sitten ohjausobjektit tässä järjestyksessä. TÄMÄN jälkeen voit LUODA sarakkeet ja näyttää ohjausobjektit sopivissa sijainneissa CSS:n avulla.
Näppäimistöllä siirtyminen on riippuvainen pitkälti semanttisesta HTML:stä. Tietyt ohjausobjektit (kuten painikkeet) hyväksyvät kohdistuksen, kun taas div elementit eivät. Jos olet luomassa ohjausobjekteja, jotka ovat jo olemassa HTML:ssä, sivun käyttäminen näppäimistöllä vaikeutuu.
Tärkeä
Siirtymistä näppäimistöllä on testattava manuaalisesti, ja se tulee tehdä jokaisella luomallasi sivulla. WebAIM sisältää lisätietoja näppäimistöllä siirtymisen strategioista.