Esteettömyys, IE ja vieraskirja - Demo 8

Mallivideot

HUOM! Demojen sisältö on muuttunut hiukan videoiden luomisen jälkeen, joten ne eivät päde ihan suoraan demotehtävien tekemiseen. Myöskin käytettävä editori vaikuttaa hiukan demotehtävien suorittamiseen. Videoista saa kuitenkin pääkohdat demotehtävien tekemiseen.

Ongelmia videon katselussa?

Demoissa käsitellään WWW-sivuston esteettömyyttä, Internet Explorerin CSS-puutteita, testaillaan sivustoa erilaisilla selaimilla ja tehdään vieraskirja.

Esteettömyys

Seuraavissa tehtävissä keskitytään parantamaan sivujen käytettävyyttä heikkonäköisille ja sokeille.

Ruudunlukija

Kuuntele ääniselaimen nauhoite (n. 2min). Pohdi, mikä yksittäinen asia aiheuttaa suurimman käytettävyysongelman. Nauhoitteessa selataan edellisissä demoissa tehtyä Nanonanon sivustoa seuraavasti:

  1. Luetaan Nanonanon etusivu yhteystietoihin asti
  2. Valitaan Opiskelu-linkki. Kuunnellaan opintosuoritteen alkuun asti.
  3. Valitaan navigointipalkista Artikkelit. Kuunnellaan sivun sisältö.
  4. Valitaan IT ja tietoliikenne-artikkeli. Kuunnellaan, mitä artikkelissa lukee.

Kotikoneella voit kokeilla asentaa jonkin ruudunlukijan demoversion ja testata käytännössä miten ääniselailu toimii. Älä käytä hiirtä vaan käytä ainoastaan näppäimistöä. Ruudunlukijoiden ohjeista löytyvät tarvittavat pikanäppäimet. Ainakin seuraavat ohjelmista on saatavilla demoversiot:

Ongelmakohdat

Ääniselailutestissä nousee esiin ainakin kaksi ongelmaa:

Hyppylinkki

  1. Avaa etusivu editoriin. Merkitse ensimmäinen varsinainen tekstikappale id-ominaisuudella ja keksi tunnisteteksti.
  2. Lisää aivan dokumentin (body-elementin) alkuun uusi div-lohko ja sen sisälle teksti "siirry pääsisältöön".
  3. Merkitse teksti sisäisellä linkillä ja laita se osoittamaan ensimmäiseen tekstikappaleeseen.
    • Oikeastaan linkkiteksti pitäisi tehdä vain tekstistä "pääsisältö", koska linkkitekstin pitäisi kuvata kohdettaan. Vielä parempi olisi, jos linkkiteksti kuvailisi todella sivun sisältöä, koska sivukontekstista irrotettuna "pääsisältö" ei oikein kuvaa mitään. Ohitamme kuitenkin ongelman tulevien muutosten takia.
  4. Nyt ääniselaimella luettaisiin vain title ja tämän jälkeen käyttäjä pääsisi suoraan lukemaan sisältöjä. Miten ääniselailija pääsee navigointipalkkiin? Kuuntelemalla murupolkunavigoinnin ensin kaikki kohdat. Lisää siis toinenkin hyppylinkki "siirry päälinkkeihin".
  5. Normaalisti näkevällä käyttäjälle tällaiset hyppylinkit ovat kuitenkin tarpeettomia, ainakin isolla ruudulla. Piilotetaan hyppylinkit seuraavalla tempulla:
    • Tallenna 1x1transparent.png-kuva W:\www\-hakemistoon.
    • Laita linkkitekstien tilalle kuva img-elementillä ja sijoita siirry-tekstit alt-ominaisuuksien arvoksi.
    • Nyt ruudunlukijat lukevat alt-tekstit, mutta pieni läpinäkyvä kuva ei näy graafisissa selaimissa.
  6. Anna vielä div-lohkolle ominaisuus class="hyppylinkit". Tee vielä demo2.css:ään seuraavat muutokset:
    • Poista hyppylinkit-lohkolta marginaalit ja paddingit. Aseta lohkon kooksi 1px.
    • Poista hyppylinkit-lohkon sisällä olevalta img-elementiltä reunus.
    • Poista navbartop-lohkolta margin-top.

Miksi näin vaikeasti? Miksei CSS:n display: none; tai visibility: hidden; ominaisuuksilla piilottaa hyppylinkin sisältävää lohkoa? Vastaus: useimmat ruudunlukijat eivät lue tarkoituksella piilotettuja elementtejä, kts. Jim Thatcher: Skip Navigation

Taulukot

Taulukoista voi olla vaikea hahmottaa äänen perusteella mikä tieto liittyy mihinkin otsikkotietoon, ellei niitä ole erikseen scope- ja axis-ominaisuuksilla määrätty.

  1. Avaa opiskelu-dokumentti. Tee demo2:n taulukko-lisätehtävä, ellet ole jo sitä tehnyt.
  2. Viikonpäivät ovat sarakeotsikoita. Merkitse nämä th-elementit ominaisuudella scope="col".
  3. Kellonajat ovat riviotsikoita. Merkitse nämä th-elementit ominaisuudelle scope="row"
  4. Samaan ryhmään kuuluvat otsikot pitää merkitä samalla axis-ominaisuuden arvolla. Lisää viikonpäiväotsikoille ominaisuus axis="viikonpaiva" ja kellonajoille axis="kellonaika"
  5. Merkitse table-elementti summary-ominaisuudella ja kerro sen arvossa, mistä taulukossa on kyse.

Lyhenteet

Lyhenteet kannattaa merkitä sopivalla elementillä, jolloin ruudunlukija osaa valita oikean puhetavan ja käyttäjä saa lisätiedon tuntemattomasta lyhenteestä.

  1. Avaa artikkelit- ja it-hakemistojen dokumentit.
  2. Merkitse body-osan sisällä olevat IT-lyhenteet abbr-elementillä
  3. Lisää abbr-elementeille ominaisuus title="informaatioteknologia"
    • Toisaalta IT on niin hyvin tunnettu lyhenne, että title-ominaisuus ei ole välttämätön.

Tekstiselain

Tutki miltä Nanonanon sivut näyttävät tekstiselaimessa:

  1. Avaa käynnistävalikosta Start | Programs | SSH Secure Shell | Secure Shell Client ja ota yhteys jalava.cc.jyu.fi.
  2. Kirjoita komentokehotteeseen 
    lynx http://users.jyu.fi/~omatunnus/www/
  3. Selaaminen tapahtuu nuolinäppäimillä, välilyönti- ja enter-napilla. Nuoli vasemmalle on toimii samoin kuin graafisten selainten Back (takaisin) -painike, nuoli oikealle on Forward (eteenpäin). Nuolilla alas ja ylöspäin voit selailla sivuja ja valita elementtejä. Välilyönnillä pääset seuraavalle sivulle. q-näppäimellä pääset pois selaimesta.

Tekstiselain on hyvä ääniselaimen korvike, sillä se ei käytä CSS:ää ja näyttää dokumentin rakenteen sarjamuotoisena. Itseasiassa tekstiselaimet ovat vieläkin käytössä näkövammaisilla verkon käyttäjillä (ja komentoriviunixguruilla :D )

Suurennusohjelma

Heikkonäköinen saattaa tarvita verkkoselailussa apuohjelmaa, joka suurentaa ruudun kokoa.

  1. Käynnistä Windowsin oma ruudunsuurentaja valinnalla Start | Programs | Accessories | Accessibility | Magnifier. Kasvata suurennetun alueen koko maksimiin alueen alareunaa raahaamalla.
    • Dolphin Supernovaa käytettäessä voit kokeilla sen omia ruudunsuurennustoimintoja, jotka ovat huomattavasti parempia kuin Windowsin yksinkertainen suurennusohjelma.
  2. Laita suurennuskertoimeksi 8. Avaa nettiselaimessa Nanonanon sivu. Kokeile navigoida pelkästään suurennetun kuvan avulla sivustolla. Mitä huomaat?
  3. Sivuston oikeassa laidassa olevaa vakionavigointipalkkia saattaa olla hankala löytää, vaikka tosin yläpalkki johdattelee myös oikeaan laitaan. Parempi olisi, jos peruslinkit löytyisivät selvästi eroteltuna ennen tekstiosaa vasemmasta laidasta. Tehdään heikkonäköisiä varten vaihtoehtoinen tyylitiedosto.
  4. Ota pohjaksi demossa 5 tehty handheld.css ja tallenna se uudella nimellä lowvision.css W:\www\-hakemistoon.
  5. Lisää etusivulle vaihtoehtoinen tyylitiedosto head-osaan link-elementillä: 
    <link href="lowvision.css" rel="Alternate stylesheet" type="text/css" title="Heikkonäköiset" />
  6. Kokeile ladata sivu uudelleen. Kokeile tuliko vaihtoehtoinen tyylitiedosto valittavaksi. Esim. Mozilla Firefox -selaimessa tyylivaihtoehdot löytyvät valikosta View | Page style. Vaihda tyyliä valikosta.
  7. Poista mahdolliset fontin pienennykset. Normaali tekstin koko on sopiva ruudunsuurennosta ajatellen. Erityisen fontin suurennustakaan ei tarvita, koska suurennusohjelma hoitaa asian.
  8. Laita body-osan leveydeksi 40%, jolloin käyttäjän ei tarvitse selailla paljoa oikealle päin suurennusta käytettäessä.
  9. Tee vakionavigointipalkista yhtä leveä kuin murunavigointipalkista (100% bodyn koosta). Tee vakiolinkkilistan listakohdista inline-elementtejä, jolloin ne rivittyvät vierekkäin. Tämä siksi, että käyttäjä löytää nopeasti navigoinnin alla olevat sisältötekstit.
  10. Muokkaa värimaailmaa siten, että teksti on valkoista ja tausta täysin mustaa. Navigointipalkit voivat olla myös jotain melko tummaa ja ne on syytä erottaa rajaviivalla tekstiosasta. Tällainen kontrasti on hyvä heikkonäköisille.
  11. Testaa ruudunsuurentajalla sivua.

Vaihtoehtoisten tyylitiedostojen käyttöönottoa voisi helpottaa tekemällä sivulle toiminnon, jolla käyttäjä voi valita sivuston perustyylin. Tämä vaatii kuitenkin hieman WWW-ohjelmointia, joten se ohitetaan tässä vaiheessa.

Heikentynyt näkö

Jos käyttäjän näkö on heikentynyt vain vähän (esim. ikääntymisen myötä), niin tällöin voi riittää normaali tekstin suurennus. Sivuston käytettävyys paranee, jos ulkoasu skaalautuu myös tekstin kokoon.

  1. Avaa selaimeen auki Nanonanon ja suomi24.fi-sivut ja kokeile kasvattaa tekstin oletuskokoa.
    • Internet Explorerissa onnistuu valinnalla View | Text Size
      • Tekstin koko ei kasva suomi24.fi-sivustolla, koska IE ei kasvata pikselikoossa määrättyjen tekstien kokoja (kts. suomi24.fi es.css).
    • Mozilla Firefoxissa onnistuu valinnalla View | Text Size
      • Firefox pakottaa suomi24.fi:n pikselikokoisen tekstin isommaksi. Miten käy sivuston ulkoasulle riittävästi tekstin kokoa kasvatettaessaa?
  2. Useissa uusissa selaimissa on Zoom-toiminto. Toiminto toimii samaan tapaan kuin ruudunsuurennos.
    • Operassa onnistuu valinnalla View | Zoom. Jos sivusto on tekstin kokoon skaalautuva, niin Opera hyödyntää tätä ensisijaisesti.
    • Internet Explorer 7:stä löytyy Zoom-toiminto valinnalla Page | Zoom. Kokeile sivuja 200% zoomilla. Millainen käytettävyysongelma ilmenee tällaisilla suurennoksilla?

Värit

Sivustoilla on vältettävä värisokeusyhdistelmiä. Tekstin ja taustan värien kontrasti on oltava riittävä.

  1. Tarkista Nanonanon sivusto Colorblind Web Page Filter -ohjelmalla.
  2. Tarkista CSS-tiedostoista, että aina kun olet määrittänyt taustan värin (background-color), niin olet määrittänyt myös tekstin värin (color). Kokeile näiden väriarvojen välisiä kontrastieroja Colour Contrast Analyser -ohjelmalla.
  3. Kokeile tehdä esim. harjoitustyötäsi varten hyvä värivalikoima Color Scheme Generator 2 -työkalulla, Color Scheme Chooser -työkalulla tai antamasi kuvan perusteella colr.org-palvelulla.

Internet Explorer 6 ja CSS

Internet Explorer 6:n CSS-tuki on puutteellinen ja aiheuttaa päänvaivaa WWW-kehittäjille. Seuraavassa tehtävässä on kierretään pari yleistä ongelmaa.

  1. Avaa demoissa 4 tehty fixed.html Internet Explorer 6:ssa (pitäisi olla ainakin vielä mikroluokissa). Mitä huomaat?
  2. position: fixed; ei toimi alkuunkaan IE6:llä. Vaihda kaikki fixed.css:stä kaikki positioinnit absoluuttisiksi. Testaa selaimessa.
    • Ylä- ja alapalkkien koko näyttää olevan pahasti pielessä. Tämä johtunee siitä, että IE6 tulkitsee body-elementin juuritason elementiksi, vaikka XHTML:ssä se onkin html. IE6 tulkitsee siis palkkien leveyden suhteessa body-elementtiin, jonka koko on 66% ikkunan leveydestä marginaalien takia.
  3. Kapseloi sisältötekstikappaleet vielä yhden div-elementin sisälle ja anna sille id-ominaisuuden arvoksi sisalto. Vaihda CSS:ssä body-selektori muotoon #sisalto. Testaa sivua.
    • Edelleen leveydessä ja marginaaleissa on pientä vikaa. Marginaaliongelmat johtuu siitä, että IE6 siirtyy ns. quirks modeen (yhteensopivuustila) kun dokumentin alussa on <?xml-deklaraatio. Koko-ongelmat johtuvat siitä, että IE6 laskee lohkon koko leveyden width-määreen mukaan, vaikka width-määreen pitäisi määrätä vain sisällön leveys ja päälle tulevat vielä padding, border ja margin.
  4. Kapseloi ylatunniste-lohkon sisällä oleva teksti vielä uuden div-lohkon sisälle ja anna tälle class="inner" Siirrä padding-määritys inner-lohkon sisälle. Määrää ulomman ylatunniste-lohkon leveydeksi 100% ja korkeudeksi 4em.
  5. Tee sama operaatio alatunniste-osalle. Voit käyttää samaa inner-luokkaa.
  6. Oletuksena body-elementillä on hieman paddingiä tai marginaalia, joten otetaan nämä pois: 
    body {
  margin: 0;
  padding: 0;
}
  7. Korjataan vielä sivupalkkien koko. Siirrä palkit ylälaitaan top: 0; -CSS-ominaisuudella. Nyt ruudun korkuinen palkki mahtuu sivulle, mutta jää ylä- ja alapalkkien alle pienemmän z-index-arvon takia. Lisää vielä näiden selektorilohkojen loppuun määre padding-top: 4.5em; jolloin palkkien tekstit eivät jää yläpalkin alle.
  8. Nyt on enää muutettava asemointi kiinnitetyksi niillä selaimilla, jotka sitä tukevat. IE6 ohittaa seuraavat selektorit, mutta muut uudet selaimet ymmärtävät ne: 
    body > .ylatunniste, body > .alatunniste, body > .vasennavi, body > oikeanavi {
  position: fixed;
}

Kurssipalaute

Kun saat harjoitustyön palautuskelpoiseen kuntoon niin käythän täyttämässä (lyhyen) kurssipalautteen osoitteessa:

http://appro.mit.jyu.fi/www/palaute/

Lisätehtävät

Tee ensisijaisesti muut demotehtävät valmiiksi. Jos aikaa jää, niin tee seuraava tehtävä:

Vieraskirja

Tehdään pienimuotoinen vieraskirja Nanonanon kotisivulle.

  1. Kopioi artikkelit-alihakemiston index.html vieraskirja-alihakemistoon W:\www\vieraskirja\. Huomaa, että demossa 7 määräsimme kaikki .html-tiedostot prosessoitavaksi SSI-komentojen varalta.
  2. Poista vieraskirja-sivulta linkit artikkeli-alisivuihin, mutta jätä ylänavigointi, navigointipalkki ja lopussa olevat päivitystiedot paikalleen.
  3. Täydennä sivupohja kuntoon
    • Korjaa title.
    • Muuta murunavigointipalkin viimeisen listakohdan tekstiksi Vieraskirja.
    • Muuta pääotsikon tekstiksi myös Vieraskirja.
  4. Lisää otsikon jälkeen form-elementti. Sijoita lomakkeen method-attribuuttiin post ja action-attribuuttiin 
    http://users.jyu.fi/~omatunnus/cgi-bin/lisays.php
  5. Lisää lomakkeelle uusi lomakeryhmä, jonka sisään kolme tekstikenttää: vieraskirjaan kirjoittajan nimeä, e-mailia ja kotisivun osoitetta varten.
  6. Lisää uusi lomakeryhmä, jonka sisään tekstialue kommenttia varten.
  7. Laita kenttien name-attribuutteihin arvot vkname, vkemail, vkurl ja vkcomment.
  8. Lisää lomakkeen loppuun submit-tyyppinen nappi, jonka name-attribuuttiin arvo vkadd.
  9. Avaa SSH Secure Shell -ohjelma valinnalla Start | All Programs | SSH Secure Shell | SSH Secure Shell ellei se ole jo auki. Ota yhteys jalava.cc.jyu.fi-palvelimeen ja siirry html-linkin kautta editoimaan users.jyu.fi-sivuja.
  10. Luo hakemisto cgi-bin. Siirry cgi-bin-hakemistoon ja kopioi sinne vieraskirjalisäyksen tekevä ohjelma komennolla 
    wget http://appro.mit.jyu.fi/www/demot/demo8/lisaysphp.txt
  11. Muuta lisaysphp.txt:n nimeksi lisays.php
    • .php-päätteiset tiedostot prosessoidaan automaattisesti PHP-tulkilla users.jyu.fi:ssä.
  12. Luo cgi-bin-kansioon tyhjä tiedosto data.include komennolla: 
    touch data.include
  13. Anna kaikille oikeus kirjoittaa (w) tiedostoon data.include.
    • Tämä myös tarkoittaa sitä, että kuka tahansa unix-koneelle pääsevä voi tuhota tämän tiedoston. Tietoturvan takia yleensä www-palvelinta ei käytä monta käyttäjää tai ohjelmat ajetaan käyttäjän oikeuksilla (kuten esim. CGI-ohjelmat users.jyu.fi:ssä). Muutenkin sivuston ylläpitäjän on tietoturvasyistä oltava selvillä mitä ohjelma tekee.
  14. Laitetaan vieraskirjan kommentit näkymään ennen lomaketta. lisays.php tallentaa lomakkeelta saadut tiedot data.include-tiedostoon. Käytä SSI:n include-komentoa ja lisää data.include-tiedoston sisältö dokumenttiin: 
    <!--#include virtual="/~omatunnus/cgi-bin/data.include"-->
  15. Testaa, että vieraskirja toimii.
  16. Vieraskirjaan lähetetyt tiedot tulevat seuraavassa muodossa data.include-tiedostoon: 
    <ul class="vkentry">
  <li class="vkname">Jukka Mäntylä</li>
  <li class="vkdate">Tue, 27 Apr 2004 16:02:28 +0300</li>
  <li class="vkemail">jmantyla@cc.jyu.fi</li>
  <li class="vkurl">http://appro.mit.jyu.fi/</li>
  <li class="vkcomment">Mahtavat sivut!</li>
</ul>
    Aikamerkintä tulee automaattisesti. Muokkaa demo2.css-tiedostoa niin, että vieraskirja-merkinnät näyttävät järkeviltä. Voit tehdä esimerkiksi seuraavanlaisia ulkoasumäärityksiä:
    • Laita vkentry-lohkolle sopiva taustaväri.
    • Liu'uta lohkot vierekkäin kuten galleriassa.
    • Laita form-elementille clear: left; että se rivittyy vkentry-lohkojen alapuolelle.
    • Poista tämän lohkon sisällä olevalta li-elementiltä listamerkki, marginaalit ja täytteet.
    • Korosta palauttajan nimeä fontin koolla ja väreillä.
    • Pienennä päivämäärätietoa.
    • Anna erilaisille listakohdille erilaisia taustavärejä.

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo8/
© Jukka Mäntylä (jmantyla@mit.jyu.fi) <http://www.iki.fi/jmantyla/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
2007-02-28 11:16:54