Keskustelu: Nettisivujen teko: Tiedon piilottaminen

Miten saisin ei oleellista tietoa sivuille, mutta tarvittaessa näkisi.. Mietin imagen tittleä mutta se ei näy mobiilikäyttäjillä..

Oisko jotan tapoja mitä käyttää vastaavaan toimintaan.

Ajatuksena tuoda teksti (lisätietoa aiheesta) saataville mutta tilaa ei ole.

Jotain javascript virityksiä? Meneekö sivu raskaaksi jos satoja kohteita?

creepy kirjoitti:

Miten saisin ei oleellista tietoa sivuille, mutta tarvittaessa näkisi.. Mietin imagen tittleä mutta se ei näy mobiilikäyttäjillä..

title-attribuutin arvo saadaan kevyemmin tyyleillä esille, jos löytyy mielekäs paikka sen esittämiseen. Tarvitaan content-ominaisuutta yhdistettynä näennäiselementtiselektoriin, kuten ::after.

Javascriptiä vaan kehiin, ja tarvittaessa klikkauksella tieto näkyviin.

Lebe80 kirjoitti:

(08.03.2016 10:29:32): Javascriptiä vaan kehiin, ja tarvit­ta­es­sa...

Niinkai se täytyy, mikähän ois kevyt mahollisimman simppeli tapa?

Tapoja on monia, tässä muutama esimerkki sovellettavaksi

creepy kirjoitti:

Niinkai se täytyy, mikähän ois kevyt mahollisimman simppeli tapa?

Kevyt ja mahdollisimman simppeli tapa on toteuttaa kuvaamasi asia pelkillä tyyleillä (sans script, puhumattakaan kirjastoista). Tyyleilläkin asia voidaan toteuttaa monella tapaa. Jo mainitsemani title-attribuutin esille pyytämisen lisäksi esim.: 'räätälöity vihjelaatikko.'

Osmo kirjoitti:

Jo mainitsemani title-attribuutin esille pyytämisen lisäksi esim.: 'räätälöity vihjelaatikko.'

Nykyaikana ei enää riitä se, että on roiskittu vähän sinne päin, vaan kun tekee, niin pitäisi tehdä kunnolla. Näkörajoitteisille tarkoitettujen apulaitteiden kannalta tuollainen a:n sisään nestattu span-elementti on todella huono ratkaisu. Toinen huomionarvoinen seikka on tietysti se, miten hakukoneet parsivat moisen häröpallon.

Oikea ratkaisu riippuu myös siitä, millainen tarkoitus tällä "piilotettavalla tiedolla" on. Title-attribuutti (ja aria-label) soveltuu tiettyyn tarkoitukseen ja on väärä lähestymistapa monessa muussa tapauksessa. Kuvien kanssa operoimiseen html5:ssä on uusia elementtejä – figure ja figcaption – joista kannattaa myös olla tietoinen. Html-standardissa semanttisilla säännöillä on paljon väliä ja niitä kannattaisi kunnioittaa.

The Alchemist kirjoitti:

Näkörajoitteisille tarkoitettujen apulaitteiden kannalta tuollainen a:n sisään nestattu span-elementti on todella huono ratkaisu. Toinen huomionarvoinen seikka on tietysti se, miten hakukoneet parsivat moisen häröpallon.

Ensinnäkin, A-elementin lapsena sijaitseva SPAN-elementti ei ole ongelmallinen millekään asiakasohjelmalle, ei siis millekään käytössä olevalle, olkoon sitten avustavaa teknologiaa, Netscape 2, taikka mikä tahansa hakurobotti. Ja jos vaikka olisikin, niin sitten vika olisi kokonaan asiakasohjelmassa ja se korjattaisiin alta aikayksikön tai se päättyisi samaan koriin kuin IE3.

Toiseksi, creepyn mukaan kyse oli "ei oleellisesta tiedosta". Viittaamassani esimerkissä SPAN-elementin sisältö jää kokonaan näkymättä niin näkörajoitteiselta kuin muiltakin, jollei sitä erikseen pyydetä esille jollakin mekanismilla.

Kolmanneksi, koska käsittääkseni kumpikaan meistä ei ole nähnyt creepyn käsikirjoitusta, eikä riviäkään koodia, niin hän joutunee itse miettimään käyttämiensä elementtien ja/tai attribuuttien soveltuvuutta, sekä tarjoamansa tiedon saavutettavuutta ja käytettävyyttä. Eikä näillä ole mitään tekemistä mainitsemasi "nykyajan" kanssa, vaan aina on pitänyt tehdä kunnolla.

Neljänneksi ja viimeiseksi, vielä semanttisessa unessa nukkuville suosittelen iltalukemiseksi Jukka Korpelan: The pragmatic guide to HTML…. Eikä kyse ole siitä, että mielestäni semanttinen merkkaus olisi mitenkään huono asia, päinvastoin. Valitettavasti Webin historia on hyvin pitkälti tehnyt semanttisesta merkkauksesta... err... merkityksetöntä :-(