window.pipedriveLeadboosterConfig = { base: pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster on jo olemassa') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() 4 yleistä verkkopalvelujen saavutettavuuteen liittyvää kysymystä - The Codest
Codest
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Toimialat
    • Fintech & pankkitoiminta
    • E-commerce
    • Adtech
    • Terveysteknologia
    • Valmistus
    • Logistiikka
    • Autoteollisuus
    • IOT
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
Takaisin nuoli PALAA TAAKSE
2022-11-15
Ohjelmistokehitys

4 yleistä web-saavutettavuusongelmaa, jotka on hyvä tietää

Codest

Reda Salmi

React Kehittäjä

Miljoonat eri ihmiset käyttävät verkkoa päivittäin, ja yksi tärkeimmistä tavoitteistamme kehittäjinä on tehdä verkosta kaikkien ulottuvilla oleva. Tässä artikkelissa esitellään joitakin yleisiä esteettömyysongelmia ja tapoja ratkaista ne.

Kontrastisuhteen ongelma

Yleisin esteettömyysongelma, jonka olen nähnyt vuosien varrella, on se, että kontrasti ja värin saavutettavuusongelma, huono kontrastisuhde vaikeuttaa sivusi sisällön näkemistä, mikä on erittäin haitallista käyttäjillesi, myös niille, joilla on näkövamma.

Kontrasti on kahden värin havaitun "luminanssin" tai kirkkauden eron mitta, esimerkiksi sivun sisällön taustavärin ja etualan värin välinen ero. Katsotaanpa tätä navigaattoripalkkia.

navigaatiopalkki<em>palkki</em>vihreillä<em>otsikoilla</em>

Oletetaan, että asiakkaasi todella pitää tuosta vihertävästä väristä ja pitää sitä mahtavana, mutta kontrastin kanssa on ongelmia. Meillä on #FFFFFFFF tausta, jossa on #83A94C tekstin väri, jolloin kontrastisuhde on 2,71:1, mikä on paljon alle vähimmäisvaatimuksen. 4.5:1 tarvitaan. Tämän ongelman havaitsemiseksi meillä on useita ratkaisuja:

  1. Käytä verkossa olevaa kontrastin tarkistusohjelmaa, kuten Webaim Contrast Checker, joka laskee kontrastisuhteen ja antaa teille Pass tai Fail luokka.
  2. Käytä jotakin monista selaimen kontrastin tarkistuslaajennuksista, esim: WCAG Värikontrastin tarkistusohjelma.
  3. Kokeile selaimen integroitua kontrastin tarkistusohjelmaa. Voit käyttää sitä Google Chromessa avaamalla dev-työkalut, tarkastamalla kohteena olevan elementin (esim. navigaattoripalkin Home-linkki), siirtymällä CSS-väriominaisuuteen ja napsauttamalla värisuorakulmaa avaat värivalitsimen, jonka alareunassa näkyy kontrastisuhteen arvo, laajenna sitä saadaksesi lisätietoja. Prosessi on täsmälleen sama Firefoxissa, vain pieni ero suhteessa näkyy värinvalitsimen vasemmassa alareunassa.
musta<em>tausta</em> sinisellä<em>koodilla</em>.

Saadaksesi lisätietoja kontrastista tarkista tämä Kontrasti ja värien saavutettavuus Artikkeli.

Linkin tekstin ongelma

Linkit ovat nykyään suuri osa verkkoa, joten niiden saatavuus on erittäin tärkeää. Linkin on oltava järkevä ja sen on kerrottava käyttäjälle asiayhteydestään, joten epäinformatiivinen linkki, jossa on teksti kuten Lue lisää, klikkaa tästä, tarkista yksityiskohdat, ei ole kovin hyödyllinen. tuote yksityiskohdat, esimerkiksi tuotteen nimen, kuten "Mandalorian kypärä", käyttäminen on parempi ja informatiivisempi. Sellaiset sanat kuin klikkaa tästä tai enemmän voidaan jättää pois, koska linkki on oletusarvoisesti napsautettavissa, ja esimerkiksi "lisää tämän päivän uutisista" voidaan lyhentää muotoon "tämän päivän uutiset". Linkin pituudelle ei ole mitään erityistä sääntöä tai rajoitusta, vaan linkin on oltava luettavissa ja riittävän pitkä, jotta sen tarkoitus voidaan kuvata hyvin.

Kuvat linkkeinä ovat laajalti käytetty malli, joten tässä on noudatettava samoja sääntöjä, joista puhuimme edellä. Kuvan alt-attribuutti toimii linkkitekstin roolissa, ja ruudunlukijat ilmoittavat sen. Kuvien käsittelemisessä linkkeinä on useita tapauskohtaisia skenaarioita, jos kuva on linkin ainoa sisältö, sillä on oltava alt-attribuutti, jos linkissä on tekstiä ja kuvaa, alt-attribuutti voidaan jättää pois, tässä on muutamia esimerkkejä:


<a href="/fi/notifications/">
  <img src="/img/notification.png" alt="Ilmoitukset">
</a>

Tutustu linkkeihin täällä ja lue linkkien saavutettavuudesta:Linkkiteksti ja ulkonäkö, Toiminnalliset kuvat.

Lomakkeen syötteestä puuttuu etiketti

input<em>labels</em>with<em>blue</em>button

Olemme kaikki ennenkin nähneet tällaisia lomakkeen syötteitä, joissa ei ole merkintää ja joissa on vain kenttämerkintä, joka kuvaa syötteen tarkoitusta. Ensimmäinen huomio on, että kun käyttäjä täyttää kaikki syötteet ja sijoitussalpaajat eivät ole enää näkyvissä, meillä ei ole visuaalista kontekstia syötteen tarkoituksesta, mutta keskitytään tässä yhteydessä saavutettavuuteen.

Yhdistäminen etiketti syöttöön antaa meille kaksi merkittävää etua: ruudunlukija lukee etiketin, kun käyttäjä keskittyy lomakkeen syöttöön, ja kun etikettiä napsautetaan tai sitä kosketetaan/taputetaan, selain siirtää fokuksen siihen liittyvään syöttöön. Helppo ratkaisu tällaiseen tilanteeseen on vain lisätä tarrat seuraavasti:

    Etunimi

    
  

    Sukunimi

    
  

    Sähköpostiosoite

    
  

    Lähetä
  

```

Siinä kaikki, kaikilla syötteillä on niihin liittyvät merkinnät, joten ne ovat kaikkien käytettävissä. Voimme jopa poistaa paikannussalpaajat, jotta vältämme syöttötarkoituksen päällekkäisyyden, mutta tiedämme kaikki, että todelliset tilanteet eivät ole niin helppoja, kun olet juuri saanut mallin, jossa lomakkeen syöttötiedot ovat ilman merkintöjä, eikä asiakas halua muuttaa tätä osaa. Ensimmäinen mieleen tuleva ratkaisu on soveltaa display: none; tai näkyvyys: piilotettu; tarroihimme, tämä piilottaa ne, mutta ne ovat silti siellä, eikö niin? Nämä ominaisuudet piilottavat elementtejä paitsi näytöllä myös ruudunlukijan käyttäjille, joten tämä ei ratkaise ongelmaamme.

Voimme käyttää leikekuvio ratkaisemaan tämän. Tällä tavoin piilotamme sisällön visuaalisesti, mutta tarjoamme sen silti ruudunlukijoille. Luomme seuraavan CSS:n Vain sr-verkkosivusto luokkaa ja soveltaa sitä kaikkiin tarroihimme:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
 }

Tämä piilottaa merkinnät, tekee niistä ruudunlukijoiden käytettävissä olevia ja sopii ulkoasuun. Osoite :not(:focus):not(:active) pseudo-luokka estää fokusoitavat elementit, kuten esimerkiksi a, painike, syöttö piiloutumasta, kun se vastaanottaa tarkennuksen.

Ei tarkennusilmaisinta

Aikoinaan tein tämän globaalissa CSS-tyylitaulussa:

* {
outline: none; /* kauhea virhe */
}

Noin 2020 Huomasin mustat rajat näkyvät Google Chrome -lomakkeen syötteissä, kun ne on tarkennettu tai painikkeissa, kun ne on siirretty - se oli todella outoa, koska en ymmärtänyt sitä tuolloin, jonkin verran tutkimuksen jälkeen olen selvittänyt, että se johtuu ääriviivojen CSS-ominaisuudesta, joten poistaminen ratkaisi tuon "ongelman" minulle.

Tuolloin minulla ei ollut aavistustakaan siitä, mikä oli oikea tapa tehdä se. Tutkittuani hieman tämän uuden oletusarvon syitä ja tapoja sain selville, että ääriviivat ovat elementin tarkennuksen osoitin, ja jos ne poistetaan, on annettava ilmeinen tarkennuksen muotoilu, joten periaatteessa sitä, mitä tein, pidetään huonona käytäntönä. Voit muokata tarkennusindikaattoreita parhaaksi katsomallasi tavalla, mutta niiden poistaminen kokonaan verkkosivustolta on suuri esteettömyysongelma. Elementin tarkennuksen muotoilun mukauttaminen on esimerkiksi melko helppoa:

 a:focus {
   outline: 4px solid #ee7834;
   outline-offset: 4px;
 }

Esteettömyystyökalut

Kaikkien käsittelemiemme asioiden tarkistaminen voi olla paljon työtä, varsinkin kun tiedämme, että esteettömyydestä on paljon muutakin kerrottavaa, joten esteettömyyden käsittelemiseksi meillä on kaksi loistavaa selainlaajennusta.

WAVE-arviointityökalu on arviointityökalupaketti, joka auttaa meitä tekemään verkkosisällöstämme helpommin saavutettavaa. Se on käytettävissä sekä Google Chromessa että Firefoxissa.

Kokeillaan sitä pienellä verkkosivulla, joka sisältää navigaattoripalkin ja syötteen, jolta puuttuu etiketti, ja katsotaan, mitä se palauttaa, laajennuksen asentamisen jälkeen meidän tarvitsee vain napsauttaa laajennuksen kuvaketta käyttääksemme sitä.

valkoinen<em>ikkuna</em>, jossa<em>harmaat</em>osat

Yhteenveto-välilehdellä näkyy 1 virhe (lomakkeen elementistä puuttuu merkintä), 2 kontrastivirhettä ja 1 hälytys (puuttuva otsikkorakenne), kuten näet, tulos on hyvin selkeä ja yksityiskohtainen. Yksityiskohdat-välilehti näyttää luettelon kaikista virheistä, hälytyksistä ja ominaisuuksista. Voimme myös olla vuorovaikutuksessa suoraan sivulla klikkaamalla noita punaisia suorakulmioita tarkistaaksemme virheen kuvauksen ja tyypin.

Axe DevTools on tehokas ja tarkka saavutettavuuden työkalupakki. Se on käytettävissä sekä Google Chromessa että Firefoxissa. Laajennuksen asentamisen jälkeen meidän on avattava selaimen dev-työkalut ja mentävä axe DevTools -välilehdelle ja napsautettava Scan all of my pages.

DevTools<em>ikkuna</em> mustilla</em>harmailla</em>osilla</em>toiminnoilla

Näet, että Axe DevTools on raportoinut samoista ongelmista WAVE Evaluation Toolin kanssa, jotka ovat kontrastiongelmia, lomakkeen elementistä puuttuu etiketti ja otsikkoelementti puuttuu, ja se jopa antoi meille joitakin parhaita käytäntöjä noudatettavaksi.

Toinen tapa testata esteettömyyttä on käyttää ruudunlukijaa ja testata verkkosivustoasi sen avulla; saatavilla on monia ruudunlukuohjelmia, vain muutamia mainitakseni:

  • NVDA
  • VoiceOver on saatavilla macOs-laitteissa.
  • Orca on ilmainen ja avoimen lähdekoodin näytönlukija linuxille.

Yhteenveto

Olemme nähneet tässä artikkelissa joitakin yleisiä esteettömyysongelmia, tapoja niiden ratkaisemiseksi ja joitakin hyviä työkaluja esteettömyyden testaamiseen. Vielä on paljon muuta käsiteltävää sellaisten elementtien kuin dialogien, akordionien ja karusellien saavutettavuudesta, mutta kuten olet nähnyt tässä artikkelissa, on olemassa runsaasti dokumentaatiota ja työkaluja, jotka auttavat sinua käsittelemään saavutettavuutta.

Joitakin keskeisiä seikkoja, jotka on hyvä muistaa:

  • Tarkista aina kontrastisuhde.
  • Tarjoa aina informatiivista sisältöä linkkeihin.
  • Lomake-elementillä on oltava siihen liittyvä etiketti.
  • On tarjottava ilmeinen tarkennusmuotoilu.
ura codest:ssä

Aiheeseen liittyvät artikkelit

E-commerce

Kyberturvallisuuden ongelmat: Tietovuodot

Joulua edeltävä kiire on täydessä vauhdissa. Ihmiset etsivät lahjoja läheisilleen ja ovat yhä useammin valmiita "ryntäämään" verkkokauppoihin.

Codest
Jakub Jakubowicz teknologiajohtaja ja toinen perustaja
Ohjelmistokehitys

Javascript-työkalut toiminnassa

Tutustu joihinkin JavaScript-työkaluihin, joilla voit parantaa ohjelmointipeliäsi. Lue lisää ESLintistä, Prettieristä ja Huskysta!

Codest
Reda Salmi React Kehittäjä
Ohjelmistokehitys

9 virhettä, joita kannattaa välttää Java-ohjelmoinnissa

Mitä virheitä tulisi välttää Java-ohjelmoinnissa? Seuraavassa kappaleessa vastaamme tähän kysymykseen.

Codest
Rafal Sawicki Java-kehittäjä

Tilaa tietopankkimme ja pysy ajan tasalla IT-alan asiantuntemuksesta.

    Tietoa meistä

    The Codest - Kansainvälinen ohjelmistokehitysyritys, jolla on teknologiakeskuksia Puolassa.

    Yhdistynyt kuningaskunta - pääkonttori

    • Toimisto 303B, 182-184 High Street North E6 2JA
      Lontoo, Englanti

    Puola - Paikalliset teknologiakeskukset

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Krakova
    • Brain Embassy, Konstruktorska
      11, 02-673 Varsova, Puola

      Codest

    • Etusivu
    • Tietoa meistä
    • Palvelut
    • Tapaustutkimukset
    • Tiedä miten
    • Työurat
    • Sanakirja

      Palvelut

    • Se neuvoa-antava
    • Ohjelmistokehitys
    • Backend-kehitys
    • Frontend-kehitys
    • Staff Augmentation
    • Backend-kehittäjät
    • Pilvi-insinöörit
    • Tietoinsinöörit
    • Muut
    • QA insinöörit

      Resurssit

    • Faktoja ja myyttejä yhteistyöstä ulkoisen ohjelmistokehityskumppanin kanssa
    • Yhdysvalloista Eurooppaan: Miksi amerikkalaiset startup-yritykset päättävät muuttaa Eurooppaan?
    • Tech Offshore -kehityskeskusten vertailu: Tech Offshore Eurooppa (Puola), ASEAN (Filippiinit), Euraasia (Turkki).
    • Mitkä ovat teknologiajohtajien ja tietohallintojohtajien tärkeimmät haasteet?
    • Codest
    • Codest
    • Codest
    • Privacy policy
    • Verkkosivuston käyttöehdot

    Tekijänoikeus © 2025 by The Codest. Kaikki oikeudet pidätetään.

    fiFinnish
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek fiFinnish