3 Verkkosaavutettavuuden tekniset perusteet Saavutettavuuden toteuttaminen edellyttää lähtökohtaisesti tietoa laitteista ja sovelluksista, käyttäjistä ja käyttötavoista, sekä tekniikasta. Tavoitteenamme on nyt paitsi luoda yleiskuvaus perustekniikoihin, myös pohjustaa konkreettisten saavutettavuusohjeiden tulkintaa. Web-arkkitehtuuri ja sen standardointi Sisällön kuvauskielten tekniikkaa ja ideoita (X)HTML ja CSS Huom. Käytännössä oletamme Web-tekniikan perusteet pitkälti tunnetuiksi; esim. XHTML/CSS-tekniikkaa ei yksityiskohtaisesti esitellä luennoilla 44
3.1 Välisoitto Tekniikka on todellinen hengen voitto aineesta, mutta joskus tekniikka näyttää silti saavan ihmisistä yliotteen Teknologian tarjoamien mahdollisuuksien ja sisältämien rajoitteiden osaaminen on perusedellytys toimivan suunnittelun perustana Motto: on helppo kritisoida, hankalampaa on "tehdä oikein" 45
3.2 Osatavoite, WCAG 1.0 pähkinänkuoressa (1/2) Verkkosisällön saavutettavuusohjeen (Web Content Accessibility Guidelines 1.0, WCAG 1.0 ) sisältö lyhykäisyydessään: 1. Tarjoa samansisältöinen vaihtoehto ääni- ja kuvaperustaiselle tiedolle. 2. Älä luota yksin värien käyttöön. 3. Käytä merkkaus- ja tyylikieliä ja käytä niitä oikein. 4. Koodaa tekstin luonnollinen kieli selvästi (dokumentin tekniseen otsikkoon). 5. Käytä taulukoita siten että ne voidaan esittää eri tavoin ja eri välineillä. 6. Varmista että uusia teknologioita hyödyntävät sivut toimivat hyvin myös vanhemmilla asiakasohjelmilla....jatkuu 46
3.3 WCAG 1.0 pähkinänkuoressa (2/2) 7. Varmista että käyttäjä voi hallita sovelluksen aikariippuvia osia. 8. Varmista sulautettujen tai upotettujen käyttöliittymäosien suora saavutettavuus. 9. Suunnittele laiteriippumattomasti. 10. Käytä ratkaisuja jotka toimivat myös tällä hetkellä (käytä tarvittaessa väliaikaisia ratkaisuja) 11. Käytä W3C-teknologioita ja ohjeita. 12. Pidä käyttäjä jatkuvasti selvillä asiayhteydestä ja sijainnista sovelluksessa. 13. Tarjoa selkeä navigointimekanismi. 14. Varmista että dokumentit ovat selkeitä ja yksinkertaisia. Ilmeisestikin ohjeen toteuttaminen edellyttää (myös) teknistä osaamista 47
3.4 Tekniikka, ohjeet ja standardointi, peruskysymyksiä Tietotekniikasta kirjoitetaan "teknisiä määrityksiä", saavutettavuutta "ohjeistetaan" miksi? Koska... - toimiva tietotekninen standardi jättää paljon liikkumavaraa sen soveltamiseen - esim. asiakirjan sisällön liian tiukka standardointi koetaan yleensä luovuutta rajoittavaksi tekijäksi Miksi standardeista kannattaa puhua? Koska... - standardiin tukeutuminen tuo olemassa olevia sovelluksia ja välineitä - standardointi tarjoaa (liike)taloudellisesti järkevän tavan kehittää sovelluksia (erityisesti PK-yritysten näkökulmasta!) 48
3.5 World Wide Webin (WWW) tekninen yhteensopivuus Perusidea: Web nimeää ja välittää resursseja joiden esitystapa (voi siis olla useita) voidaan tarvittaessa valitaan päätelaitteen tms. mukaan - nimi (verkko-osoite), resurssi (entiteetti, "thing"), esitystapa Yhtenäinen nimeämiskäytäntö URI ja tiedonsiirtoprotokollat (HTTP) asettavat yhteensopivan Webin teknisen perustan - Uniform Resource Identifier - Hypertext Transport Protocol "Arkikielessä" resurssi ja sen esitystapa usein samaistetaan (mutta oikeasti ei 1:1-suhdetta!) Kuva: W3C/TAG 2004 49
3.6 Tiedon esitystavan yhteensopivuus Web välittää dokumentteja jotka voivat koostua useasta tiedostosta - (tarkemmin: Web välittää yksittäisiä tiedostoja, yhteen loogisesti kuuluvia tiedostoja ja/tai entiteettejä, "XML-fragmentteja") Sisällön näkökulmasta keskeistä on tiedon käyttötapauksista (prosesseista) sopiminen; tekniikan näkökulmasta erilaisista tietorakenteista sopiminen Koska tekninen standardointi tähtää mahdollisimman laajaan sovellettavuuteen, pitää esim. sovellusten saavutettavuus käytännössä ohjeistaa erikseen Webin Perusinfrastruktuuri on käsitteellisesti erittäin yksinkertainen - dokumenttien koostaminen, yhteyden tilan käsite, tietoturva, versiointi, yms. hoidetaan sovellusten tasolla 50
3.7 Standardoinnin tasot, luonnehdinta Toimiva Web-standardointi koostuu eritasoisesta työstä Saavutettavan suunnittelun todellinen haaste on kokonaisuuden (ei yksittäisen tekniikan) monimutkaisuus Erityisen pulman muodostavat käytännöt: toteutuksen tekniseen suunnitteluun saatetaan (kukaties ajattelematta) uhrata enemmän resursseja kuin esim. prosessien saavutettavuuden suunnitteluun 51
3.8 Webin standardipinon yleisrakenne Sovellusten sanastot yms. Rakdoktekniikka yms. Tiedonsiirto 52
3.9 Pari sanaa XML:n ideoista Webin merkkauskielten melko yhtenäinen tekninen perusta helpottaa - eri sovellusten teknistä ja semanttista yhdistämistä, - Web-sovellusten opiskelua sekä - välineiden ohjelmointia (siirrettävyys). Sisällöllisesti keskeinen standardoinnin muoto ovat eri sovelluksiin tarkoitetut merkkauskielet Extensible Markup Language eli XML tarjoaa perustan eri sovelluksiin kehitettävien merkkauskielten tekniikalle - yhtenäinen merkistö ja merkkauskielioppi (<e a="v"><!-- elem. --></e>) - sovelluskohtaiset XML-tekstiformaatit ja yleiskäyttöiset välineet 53
3.10 Esimerkki: XHTML-dokumentti XHTML-dokumentti on XML-dokumentti joka rakenteellisesti noudattaa tiettyä dokumentin tyyppimääritystä (DTD) <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>virtual Library</title> </head> <body> <p>check <a href="http://example.org/">example.org</a>.</p> </body> </html> <!-- Mod. --> XML "näkyy läpi" XHTML-sanaston pohjalla: fyysinen ja looginen rakenne (tiedosto ja elementit), kommentit yms., nimiavaruuden käsite, jne. XHTML-dokumentin kirjoittajan ei tarvitse tietää "kaikkea" XML:stä (koska XML DTD ohjaa teknistä yhteensopivuutta) 54
3.11 Hypertext Markup Language, HTML HTML on tarkoitettu verkkosivujen sisällön kuvailemiseen, tehtävä on: - sisällön loogisen rakenteen kuvailu (ulkoasu on sovelluksen heiniä) Useita suosituksia (ks. http://www.w3.org/markup/): - vanhat HTML-versiot (2.0, 3.2) ja HTML 4.01 - XHTML-perhe - XHTML 1.0 The Extensible HyperText Markup Language (Second Edition) (Kolme versiota: Strict - Transitional - Frameset) - Modularization of XHTML - XHTML 1.1 - Module-based XHTML - XHTML Basic - Suositus "XHTML 2.0" kehitteillä Huom! (X)HTML on vain julkaisuformaatti ja hyvin rajoittunut sellainen 55
3.12 Standardit, käytännöt ja perustason määrittely Standardi ei (yleensä) ole laki Historiallisesti esim. Web-standardien ja selainten (tms. prosessorien) kehitystyö on osoittanut että standardien käyttöönotto vaihtelee suuresti - "ellei laki pakota, markkinat ohjaavat" Standardien asettajat (ja työtä seuraavat sidosryhmät) saattavat projisoida standardeihin myös toiveita tai (yltiö)optimistisia odotuksia... Käytännössä tämä tarkoittaa esim. sitä että - kaikkia HTML & CSS -piirteitä ei toteuta yksikään selain -...kaikkia saavutettavuusohjeiden piirteitä ei yksinkertaisesti voi toteuttaa Saavutettavan palvelun tekninen toteutus on ilmeisesti sitä helpompaa mitä tarkemmin perustasosta (baseline) voidaan sopia 56
3.13 XHTML Basic, se pieni & järkevä XHTML-sanasto XHTML Basic määrittelee HTML:n kuvailevan ytimen Rajaus ja moduulijako on hyödyllinen, vaikkei kirjoittaisi varsinaisesti XHTML Basic - dokumentteja Jatkossa XHTML kehittynee entistä selvemmin juuri moduulien suuntaan - yhdisteltävyys ja profilointi - XML-tekniikoiden hyödyntäminen 57
3.14 Tärkeää: dokumenttien ja tiedon korrekti rakenne Koska tietokoneet eivät ymmärrä sisältöjä, niiden käsittelemien tietorakenteiden tulee olla rakenteeltaan täsmälleen määriteltyjä (X)HTML-dokumentin validoimisella tarkoitetaan testiä jossa valitun dokumentin rakenteen oikeellisuus selvitetään vertaamalla sitä (X)HTMLdokumentin tyyppimäärittelyyn ("malli tai muotti") Huom #1. Validius ei takaa että - dokumentti olisi sisällöllisesti mielekäs, tai että - dokumentti olisi saavutettava...koska dokumenttien rakenteella ja esim. tekstisisällöllä (merkkidata) on validiuden puitteissa varsin runsaasti liikkumavaraa (esim. kieli) Dokumentin tietojen järkevyys on siis tarkistettava muuten - Huom. #2 validointi on abstrakti XML-prosessi sopiva sovellusta ymmärtävä apuohjelma voi kuitenkin tukea myös sisällön tarkastamista 58
3.15 HTML-dokumentin ulkoasu? Rakenteisen dokumentin perusidea: - HTML-dokumentin rakenne kuvailee dokumentin tietosisällön -...jonka ulkoasun ja toiminnallisuuden (tai esitystavan!) sovellus päättää (esim. selain) Esim. XHTML: - tiedon esitysrakenne: otsikot ja kappaleet - toiminnallisuus: linkit ja lomakkeet - yhteydet muihin dokumentteihin: kuvat, objektit, yms. (HTML ~ Webin liimakieli) Muista puhesyntetisaattoriesimerkki! 59
3.16 Esimerkki: XHTML & CSS XHTML-dokumentin esitystapa voidaan ohjeistaa esim. CSS-tyyliohjeen avulla (Cascading Style Sheet): body { background: yellow; /* Pohja */ font-family: "Arial", sans-serif; color: rgb(0,0,50); } p { text-align:right; } p a { background: white; font-size: 150%; } a:active { background: black; color: white; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>virtual Library</title> <link rel="stylesheet" type="text/css" href="pc-yell.css"/></head> <body> <p>check <a href="http://example.org/">example.org</a>.</p> </body> </html> <!-- Mod. --> 60
3.17 HTML-dokumentin ulkoasu ja tyylit, huomioita HTML-dokumentin esitystapa voidaan siis ohjeistaa esim. ns. tyylin (stylesheet) avulla CSS-tyyli voidaan päällekirjoittaa sovelluksessa, ts. esim. selain voi päättää tulkitako CSS-tyyliä vai ei (ja miltä osin) Tyyli kertoo miten rakenteinen dokumentti esitetään valitussa mediassa - tyyliohje määrittelee formatointiobjektit sekä näiden attribuutit (abstrakti käsite!) - yleisessä tapauksessa tyyliohje on tietokoneohjelma joka voi tehdä rakenteisella dokumentilla "mitä tahansa" Myös CSS-tieto pitää validoida 61
3.18 Cascading Style Sheets, ja esitystavan idea CSS jäsentää rakenteisen dokumentin tarjoten formatointimallin (tai malleja) johon sisältöä formatoidaan Visuaalinen formatointimalli: Viewport, block (display), property Yleisemmin, CSS-formatointiominaisuudet jaotellaan mediatyypeittäin: - all, aural, braille, embossed, handheld, print, projection, screen, tty, tv ( mediavalitsimien käyttö) CSS määrittelee seuraava mediaryhmät: - continuous tai paged; visual, aural tai tactile; grid tai bitmap; interactive tai static; all 62
3.19 CSS, taulukot ja tuotettu sisältö CSS osaa (periaatteessa) jäsentää rakenteisen dokumentin myös taulukkona (a la HTML 4) Vastaavasti elementtien formatoinnin yhteydessä tulosdokumenttiin voidaan liittää myös esim. numerointitietoja ja vakiotekstiä Em. ominaisuuksien hyödyntäminen on kuitenkin sovelluksissa pulmallista, johtuen esim. selaintoteutusten vajavaisuuksista Vastaavasti ääniselainominaisuuksia yms. ei toistaiseksi ole yleisesti toteutettu (kehitystyötä: Voice Browser) CSS-suosituksen kehityskaari: CSS 1.0, 2...2.1, 3 ( moduulit) 63
3.20 Standardit tyylikielet, tyylikieli ja tieto Tyyliohjeita silmälläpitäen on kehitetty omia standardejaan: esim. XHTMLdokumentti voidaan esittää useilla eri tekniikoilla: - esim. CSS (Visual, Aural, Paged Media, Print, TV,...), XSL (XSLT, XSL-FO), mallikielet,... Käytännössä tyyliohje voi myös sisältää osan dokumentin välittämästä informaatiosta - esim. XSL-tyyli voi olla funktionaalinen kuvaus: T:XHTML XHTML - esim. rakenne-elementtien asemointi, vakiotekstit, sivun ylläpitäjän tiedot, päivämäärä, kappaleiden numerointi, jne. - käytännössä esim. verkkopalvelun navigoinnin käyttöliittymä (linkit ja nappulat) tuotetaan tyypillisesti tyyliohjeen tai mallipohjan (template) avulla (yleensä "dynaamisesti", ylläpidollisista syistä) 64