Pieni piirretty robotti ja Kari Selovuo, Corellian saavutettavuusasiantuntija ja kouluttaja.

HTML – mitä väliä miten tehdään?

Hieman väsynyt ja keski-äkäinen mies purkaa nyt tuntojaan.  Lapsukaiset – Kari sedällä on  asiaa.

Olen viime aikoina tutustunut moneenkin verkkototeutukseen ja joutunut tutkimaan (lue saanut tutkia) sivustojen koodia. Lukenut sitä ja selvittänyt miksi asiat toimivat kuten toimivat. Tai eivät toimi, noin niin kuin yleisesti ottaen.

Tänään on Karin vuoro avautua aiheesta. Ei tarvitse loukkaantua (ellei syyllisyys kovasti koputtele sydämessäsi).

Mitä HTML on ja mikä sen rooli on?

HTML on merkkauskieli, joka kertoo sivun sisällöstä mitä sisältö on. HTML määrittelee vain MITÄ sisältö on, ei miltä se näyttää. Jos ikinä valitset sivulle sisältöön elementin sen ulkonäön perusteella valitset väärän elementin ja vielä väärillä perusteilla. Muista – HTML kertoo mitä sisältö on. Ei miltä se näyttää.

HTML rooli on kertoa MITÄ sisällöt ovat. HTML on muodostaa sivun RAKENTEEN. CSS:n tehtävä on määrittää miltä sisällöt näyttävät.

Miksi tämä erottelu on tärkeää? No, koska sivun sisältö on tarkoitettu kaikille. Kaikki tarkoittaa kaikkia käyttäjiä siitä riippumatta miten ja millä tekniikalla sivua lukevat. HTML on tarkoitettu kaikille!.
 Kaikki käyttäjät eivät katso, lue, tai käytä sisältöä kuten sinä!

Käytät sisältöä sitten miten tahansa, niin aina on muita, jotka käyttävät sisältöä eri tavoin, erilaisilla laitteilla, käyttäen eri tekniikkaa sisällössä liikkumiseen; erilaista hiirtä, kosketusnäyttöä, näppäimistöä, päähiirtä… Ja mikähän näille kaikille käyttäjille on yhteistä – HTML-sisältö eli siis sivun rakenne.

Sivun RAKENNE on se, jossa liikutaan, RAKENNE on se, joka kertoo käyttäjälle mitä sisältö on, RAKENNE on se minkä sisältöä näyttävä tekniikka ymmärtää, oli se sitten selain tai ruudunlukija.

Miksikö sitten on tärkeää, että HTML rakenne on tehty oikein? Sen oli tarkoitus käydä ilmi edellisestä kappaleesta! Kaikkia käyttäjiä yhdistää sivun rakenne, rakenne jossa liikutaan, rakenne jota luetaan, rakenne jonka avustava tekniikka (esim. ruudunlukija) lukee ja tulkitsee käyttäjälle. Ja entäs sitten jos rakenne on rikki … Hmmm.

Miltä näyttää saavutettava verkkosivu?

Tätä minulta usein kysytään. ”Näytä esimerkkejä oikein saavutettavista sivuista.”. No, en näytä.

Miksi, koska saavutettavuus ei näy päällepäin. Selkeimmät saavutettavuuden puutteet voivat näkyä mutta saavutettavuus ei. Hyvältä näyttävä sivu voi olla ns. kannen alta silkkaa kuraa ja saavutettavuuden kannalta surkea.

Miksikö, jälleen kerran mm. siksi, että koska HTML rakenne on rikki.

Miksi HTML rakenne on rikki? Useimmiten syynä on tietämättömyys, osaamattomuus, välinpitämättömyys tai oikeastaan ne kaikki yhdessä.

Mistä saavutettavuus tai sen puutteet syntyvät

Suuri osa saavutettavuudesta verkkosivuilla on lähtöisin siitä sisällöstä, jota tavalliset sisällöntuottajat sivuille lisäävät. Ei mistään erityisestä tekniikasta. Sisällöntuottajilta en voi vaatia syvällisempää web-tekniikoiden tuntemista mutta tietyt perusteet on osattava. Niitä sisällön saavutettavuuden puutteita ei nimittäin voi korjata millään ulkopuolisella tekniikalla tai ohjelmalla, eikä saavutettavuutta lisätä sisältöön jälkeenpäin. Saavutettavuus on siinä sisällössä jonka sivuille loit. Ja sisällöllä on oltava rakenne.

Sisällöntuottajalle tarpeellinen osaaminen on helposti saatavilla. Tarvittavat perusrakenteet on opittavissa nopeasti, eikä kyse ole mistään koodaamisesta vaan selkeästä logiikasta ja muutamien termien opettelusta. Niillä korjattaisiin jo hyvin suuri osa sisällön saavutettavuuden puutteista.

Yleisimmät virheet verkkosivuilla

Jätän tässä kohden käsittelemättä ne elementit ja sivun rakenteet, jotka muodostuvat ”ammattilaisten” tekemistä julkaisujärjestelmän syövereistä tulevista sivupohjista. Puhutaan nyt vain niistä,mihin sisällöntuottajat pystyvät itse vaikuttamaan.

Yleisimpiä (helposti korjattavia) virheitä ovat mm.

  • väärä otsikkotaso, otsikoiden hierarkian rikkominen
  • huonosti tehdyt linkit (monta monta eri tapaa)
  • kuvien puuttuva tekstivastine, tai turha/huono tekstivastine (monta monta eri tapaa)
  • omat muotoilut tekstissä (monta eri tapaa)
  • vaikeaselkoinen teksti

Kuka ne virheet tekee?

Yllä mainitut ongelmat ovat tyypillisiä sisällöntuottajan tekemiä mutta myös korjattavissa helposti kunhan tietää mitä tekee. Tähän auttaa verkon perusteiden tunteminen. Käytä kaksi päivää opiskellen HTML ja CSS perusteet, niin tiedät miten toimia vaikka et itse kokonaisia verkkosivuja suunnittelisi tai tekisikään.

Wink, wink – mulla on tästä muuten kurssi Corelliassa HTML ja CSS perusteet viestinnän ammattilaiselle.

Entäs ne ”ammatti syylliset”?

Sellaiset puutteet ja virheet, jotka ovat julkaisujärjestelmässä ja ns. ”sivu-pohjissa”, ovat ”Ammattilaisten” tekemiä. Kehittäjät tekevät samoja virheitä ja itse asiassa pahempiakin ja miksikö – koska heidän pitäisi tietää paremmin ja heidän tekemät virheet kumuloituvat sisällön mukana jokaiselle julkaistulle sivulle.

Onko se sitä, että ollaan liian syvällä kaikissa hienoissa tekniikoissa, että ei enää muisteta miksi ja kenelle sitä tehdään. Ei välitetä HTML spesifikaatiosta – oikeasta rakenteesta. Sillä nimittäin on väliä vaikka se ei selaimessa näykään. Semanttisuus, rakenteen selkeys, sisällön järjestys, maamerkki elementtien oikea käyttö, avustavien tekniikoiden huomioiminen, tilan ilmaiseminen, kieliasasetukset, jne. lista on pitkä.

Ei ole mitään hyötyä rakentaa näyttävää; terästä, lasia ja valkoista marmoria, jos perustukset on savea!

Hyödyt, miksi tämä on tärkeää

Olen kirjoittanut koko ajan saavutettavuudesta mutta ei pidä kuvitella, että hyvän HTML-rakenteen hyödyt jäisivät vain siihen.

Kyse ei ole vain saavutettavuudesta vaan samat asiat, oikea koodi, hyvä sisältö edistävät mm.

  • sisällön ylläpidon helppoutta
  • sivun (koodirakenteen) selkeyttä
  • tehokkaammin ja nopeammin latautuvia sivuja
  • laite- ja selainriippumattomuutta
  • sijoittumista hakukoneiden hakutuloksissa
  • tyytyväisempiä asiakkaita

Varmaan aika harva haluaa ainakaan omalla nimellään julistaa, että turhaa tuollainen, tehdään vaan mitä sattuu tulemaan.

Kiitos kun luit

Olen puhunut. Ilma kirkastui ja olo keveni. Jos lukijasta tuntuu siltä, että olin huonolla tuulella niin et ihan väärässä ollut. Mutta aiheesta olen. Mutta ei se mitään, tästä kohti seuraavaa pettymystä :)

Ei niin vakavasti kuitenkaan

-Kari

Kari on Corellian saavutettavuus ja web-tekniikoiden asiantuntija. Karin kiinnostuksen ja koulutusten aiheina on mm. Verkon tekniikat (HTML, CSS ja JavaScript), WordPress julkaisujärjestelmä ja sen käyttö, websuunnittelu, käytettävyys ja saavutettavuus verkossa.

Kari on IAAP (International Association of Accessibility Professionals) jäsen ja sertifioitunut saavutettavuusasiantuntija CPWA (CPACC + WAS)