Salasanasuojaus, esteettömyys ja vieraskirja - Demo 8

Mallivideot

Videot eivät sisällä ääntä.
Ongelmia videon katselussa?

Demoissa käsitellään WWW-sivun salasanasuojausta, WWW-sivuston esteettömyyttä sekä testaillaan sivustoa erilaisilla selaimilla ja tehdään vieraskirja.

Salasanasuojaus

Yksittäinen kansio ja sen alikansiot on helppo suojata salasanalla.

Esteettömyys

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

Ruudunlukija

Kuuntele (jos mahdollista) ääniselaimen nauhoite (n. 3 min). 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 jonkin aikaa artikkelin alkua.

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 seuraavista ohjelmista on saatavilla ilmaisversiot:

Ongelmakohdat

Ääniselailutestissä nousee esiin ainakin kaksi ongelmaa:

Hyppylinkki

  1. Avaa Nanonanon 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 ensin murupolkunavigoinnin kaikki kohdat. Lisää siis samaan diviin toinenkin hyppylinkki "Siirry päälinkkeihin". Muista merkitä navigointipalkki id:llä. Huomaa, että edellisissä demoissa navigointipalkki siirrettiin navbar.include-tiedostoon.
  5. Normaalisti näkevälle 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 (sekä leveys että korkeus) 1px.
    • Poista hyppylinkit-lohkon sisällä olevalta img-elementiltä reunus.
    • Poista navbartop-lohkolta margin-top.
  7. Voit tehdä vastaavat tyylimuotoilut myös mobiili.css-tiedostoon.

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 (jos et tehnyt sitä jo alunperin demossa 2) 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 | All Programs | Putty SSH Tools | Putty SSH Client ja ota yhteys jalava.cc.jyu.fi (tai halava.cc.jyu.fi).
  2. Kirjoita komentokehotteeseen 
    lynx http://users.jyu.fi/~omatunnus/www/
  3. Selaaminen tapahtuu nuolinäppäimillä, välilyönti- ja Enter-näppäimellä. Nuoli vasemmalle 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 | All Programs | Accessories | Accessibility | Magnifier. Kasvata suurennetun alueen koko maksimiin alueen alareunaa raahaamalla.
    • Dolphin SuperNova Access Suitea 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 mobiili.css ja tallenna se uudella nimellä lowvision.css W:\www\-hakemistoon.
  5. Lisää etusivulle vaihtoehtoinen tyylitiedosto head-osaan link-elementillä: 
    <link rel="Alternate StyleSheet" href="lowvision.css" type="text/css" title="Heikkonäköiset" media="all" />
  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. Erityistä 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. Asemoi hakupalkki murunavigointipalkin oikeaan reunaan.
  10. 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.
  11. 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.
  12. Testaa ruudunsuurentajalla sivua.

Jos toteutit demossa 5 vaihtoehtoisen mobiililaitteiden tyylitiedoston vaihtamisen painikkeiden avulla (JavaScriptiä hyödyntäen), niin voit lisätä vastaavan toiminnallisuuden myös nyt tehdylle heikkonäköisten tyylitiedostolle.

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 nelonen.fi-sivut ja kokeile kasvattaa tekstin oletuskokoa.
    • Internet Explorerissa onnistuu valinnalla View | Text Size.
      • Tekstin koko ei kasva nelonen.fi-sivustolla, koska IE ei kasvata pikselikoossa määrättyjen tekstien kokoja.
    • Mozilla Firefoxissa onnistuu valinnalla View | Zoom. Lisäksi täytyy laittaa päälle valinta View | Zoom | Zoom Text Only.
      • Firefox pakottaa nelonen.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.
    • Firefoxissa onnistuu valinnalla View | Zoom. Nyt valinta View | Zoom | Zoom Text Only EI saa olla päällä, jotta zoomataan koko sivua.
    • Operassa onnistuu myös valinnalla View | Zoom. Jos sivusto on tekstin kokoon skaalautuva, niin Opera hyödyntää tätä ensisijaisesti.
    • Internet Explorer 8:sta löytyy Zoom-toiminto valinnalla Page | Zoom. Kokeile nelonen.fi-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 Designer 3 -työkalulla tai antamasi kuvan perusteella colr.org-palvelulla.

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ä (fieldset), jonka sisään kolme tekstikenttää: vieraskirjaan kirjoittajan nimeä, sähköpostiosoitetta ja kotisivun osoitetta varten.
  6. Lisää uusi lomakeryhmä, jonka sisään lisää tekstialue kommenttia varten.
  7. Laita kenttien name-attribuutteihin arvot vkname, vkemail, vkurl ja vkcomment.
  8. Lisää lomakkeen loppuun submit-painike, jonka name-attribuuttiin arvo vkadd.
  9. Avaa PuTTY-ohjelma valinnalla Start | All Programs | Putty SSH Tools | Putty SSH Client, ellei se ole jo auki. Ota yhteys jalava.cc.jyu.fi-palvelimeen (tai halava.cc.jyu.fi) ja siirry html-linkin kautta editoimaan users.jyu.fi-sivujasi.
  10. Jos Unixin käyttö ei ole tuttua, niin ohjeita voit katsoa esim. seuraavalta sivulta: https://wiki.utu.fi/display/oracle/Unix+for+dummies.
  11. Luo hakemisto cgi-bin (mkdir 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
  12. Muuta lisaysphp.txt:n nimeksi lisays.php (komennolla mv).
    • .php-päätteiset tiedostot prosessoidaan automaattisesti PHP-tulkilla users.jyu.fi:ssä.
  13. Luo cgi-bin-kansioon tyhjä tiedosto data.include komennolla: 
    touch data.include
  14. Anna kaikille oikeus kirjoittaa (chmod a+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.
  15. 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"-->
  16. Testaa, että vieraskirja toimii.
  17. Voit lisätä linkin vieraskirjaan myös navigointipalkkiin navbar.include-tiedossa, niin vieraskirjaan pääsee jatkossa muiltakin Nanonanon sivuilta.
  18. Vieraskirjaan lähetetyt tiedot tulevat seuraavassa muodossa data.include-tiedostoon: 
    <ul class="vkentry">
  <li class="vkname">Antti Ekonoja</li>
  <li class="vkdate">Tue, 08 Mar 2011 14:15:43 +0200</li>
  <li class="vkemail">antti.j.ekonoja@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ä vieraskirjamerkinnät näyttävät järkeviltä. Voit tehdä esimerkiksi seuraavanlaisia ulkoasumäärityksiä:
    • Laita vkentry-lohkolle sopiva taustaväri ja leveys.
    • Liu'uta lohkot vierekkäin kuten galleriassa.
    • Laita form-elementille clear: left;, jotta se rivittyy vkentry-lohkojen alapuolelle.
    • Poista vkentry-lohkolta (lohko on siis lista) listamerkki sekä määritä lohkolle pienet marginaalit ja täytteet.
    • Korosta palauttajan nimeä fontin koolla ja halutessasi myös väreillä.
    • Pienennä päivämäärätietoa.
    • Anna erilaisille listakohdille erilaisia taustavärejä ja muita haluamiasi tyylimäärityksiä.

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/
© Antti Ekonoja (antti.j.ekonoja@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2011-03-08 14:33:03
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta