10 erinomaista tapaa tehdä sisällöstäsi kannettava ja helppokäyttöinen

Sisältö

• Esteettömyys ei ole ”ominaisuus”
• Alustojen määrittely
• Pidä sisältö kannettavana ja helposti saatavilla
• 1. Aloita HTML5: llä
• 2. WAI-ARIA
• 3. Doctype: n käyttö
• 4. HTML5-dokumenttitunnisteet
• 5. Huonot linkit
• 6. Kuvat - ALT vs. TITLE
• Kerro ihmisille
• Yhteenveto
• Kiitokset
• Resurssit

Kun Kerie kirjoittaa iPhoneen, hän näyttää soittavan huilua. Hän pitää sitä lähellä kasvojaan, ja hänen sormensa liikkuvat uskomattoman nopeasti. Hän lopettaa kirjoittamisen ja ojentaa puhelimeni lukemaan juuri kirjoittamasi viestin. Siinä on täydellinen oikeinkirjoitus ja kielioppi, ja se kirjoitettiin paljon nopeammin kuin olisin voinut tehdä käyttäessäni iPhonen kosketusnäppäimistöä.

Kerie käyttää Fleksy-sovellusta auttamaan häntä liikuttamaan sormiaan puhelimen kasvojen yli sanoin kääntyvinä kuvioina. Hän lukee myös uutisia, kuuntelee radiosovelluksia, tarkistaa Twitterin ja etsii junalla kulkuaikoja puhelimellaan. Hän on täysin sokea.

'Kustannustoiminta' tarkoittaa eri asioita eri ihmisille. Joillekin ihmisille se tarkoittaa painetun, fyysisen työn tuottamista. Muut ihmiset yhdistävät julkaisemisen kykyyn jakaa kirjoitettuja teoksia laitteiden ja sovellusten kautta. Yhä useammin ihmiset ajattelevat julkaisemisen tarjoavan sisällön saataville nauttimiseen missä tahansa muodossa, tarkoittaako se artikkelin siirtämistä blogiin tai Google Plus -viestin päivittämistä.

Tosiasia on, että käyttäjien odotukset eroavat toisistaan, ja nämä odotukset muuttuvat ajan myötä. Lukijat, jotka käyttivät kerran ahneasti viimeisintä blogiviestiä, odottavat nyt voivansa lukea kyseisen blogikirjoituksen tai minkä tahansa artikkelin tai kirjan missä ja milloin tahansa heille sopii. Nykyään sisältö seuraa meitä blogista Reederiin puhelimessa Instapaperiin iPadissa Whispernetin kautta Kindleen lähetettyyn sähköpostiviestiin.

Jokaisen lukutyönkulku on erilainen, ja niille, jotka tarvitsevat esteettömyysominaisuuksia, kuten näytönlukijan, suuren kontrastin tai suurennetun tekstin, työnkulku on rikki, joskus korjaamattomasti, kun kirjoittajat ja julkaisijat eivät ota huomioon pieniä mutta välttämättömiä muotoilutietoja. Älä ajattele tätä siten, että et ”tarkista esteettömyysruutua”. Sen sijaan ymmärrä, että muutat sisältösi käytännössä mustaksi laatikoksi monille potentiaalisille asiakkaille.

Esteettömyys ei ole ”ominaisuus”

Vaikka on totta, että esteettömiä hallintalaitteita käyttävät kuulo- ja näkövammaiset henkilöt, on myös monia muita ihmisiä, jotka hyötyvät niistä. Heikonäköinen henkilö muuttaa kirjasinkokoja lukemaan ruudun sisältöä helpommin. Värisokea henkilö arvostaa kykyä säätää väripalettia niin, että esimerkiksi punainen varoitusteksti todella erottuu. Ihmiset, joilla on pitkät työmatkat, käyttävät näytönlukijoita kuunnellakseen luettavia artikkeleita. Ei-äidinkielenään puhuvat käyttävät kuvatekstiä ja ääntä auttamaan heitä uuden kielen ymmärtämisessä. Kaikki nämä skenaariot edustavat laajempaa sisältöäsi, parempaa käyttökokemusta ja empatiaa ja mahdollisesti jopa enemmän tuloja.

Ian Hamiltonin artikkelista saat hyvän yleiskuvan esteettömyyden merkityksestä.

Alustojen määrittely

Aloitetaan joistakin määritelmistä, mihin muotoihin voimme keskittyä, jotta sisällömme olisi helpompi lukea:

• HTML: HTML5: n avulla verkko on vieläkin parempi paikka kirjailijoille ja kustantajille esitellä työtään. Uudet tunnisteet, kuten artikla, -osiossa, otsikko ja alatunniste ovat nyt toteutettu monissa selaimissa ja niitä voidaan käyttää puoliksi luotettavasti semanttisen kontekstin lisäämiseen kirjoitukseesi. Lisäksi tuleva CSS3-sivumoduuli voi myös kiinnostaa niitä, jotka etsivät kiinteämmän sivun lukukokemusta.
• EPUB: EPUB on kansainvälisen digitaalisen julkaisufoorumin (IDPF) virallinen standardi. EPUB3 hyväksyttiin lokakuussa 2011, ja sen avulla julkaisuilla on entistä tyylikkäämpää ja muokattavampaa sisältöä, lähempänä HTML / CSS: n kanssa yhteensopivaa sisältöä kuin aiemmat staattisemmat ohjeet.
• MOBI: MOBI, lyhenne sanoista Mobipocket, on muoto, jota Kindle ja muut digitaaliset lukijat käyttävät. Se on jälleen vähemmän muokattavissa kuin EPUB, mutta käsittelemme sen täällä, koska voit käyttää sitä julkaisemalla sisältöä Amazoniin, jos valitset. Robin Christopherson AbilityNetistä kertoo, että jotkut Kindlen mallit ovat sokeiden käyttäjien saatavilla; Kindle-sovellus iOS: ssä ei kuitenkaan ole. Kindle Fire tukee tällä hetkellä KF8: ta, Kindlen uutta muotoa, ja se otetaan pian käyttöön viimeisimmän sukupolven Kindle-e-ink-laitteissa ja Kindle-lukusovelluksissa.
• PDF: PDF: stä on tullut läsnä kaikkialla verkossa. Lisään sen tähän, koska useimmilla tableteilla on hyvä, sisäänrakennettu tekniikka PDF-tiedostojen lukemiseen ja avustavan tekniikan mahdollistamiseen niiden kanssa. PDF-tiedostossa ratkaiseva tekijä on, miten se luotiin. Irlannin kansallisen vammaisviranomaisen esteettömyyskehityksen neuvonantaja Alan Dalton kertoo: "Voit tehdä PDF-tiedostoista saataville; vaikka monet ihmiset eivät. He eivät ymmärrä, että työkalunsa tuottavat huonoja tuotteita. Jos minulla olisi tapani, kaikki mitä teemme ole HTML. " Navigoinnin ja helppokäyttöisyyden lisäksi PDF-tiedostot eivät myöskään sopeudu hyvin erikokoisiin, ja kuka tahansa, joka on yrittänyt lukea PDF-tiedostoa älypuhelimella, tuntee siihen tarvittavan hankalan nipistämisen, zoomauksen ja panoroinnin.

Tähän luokkaan eivät kuulu sovellukset, jotka ottavat sisältösi ja tekevät siitä suuret kuvat. Vaikka tämä saattaa varmistaa, että ulkonäkö ja tyyli ovat samat kaikissa käyttöympäristöissä, estät suuren yleisön ja loit myös erittäin raskasta latausta. Tämä ongelma pahenee, kun alamme puhua Retina-näytöistä ja kaksikokoisista kuvista. Jos haluat tuntea, millaista on evätä jotain, jonka haluat lukea (silti sinun on silti maksettava siitä silti), katso kommentit Lehtikioski-sovelluksista, joihin pääsääntöisesti ei pääse VoiceOverin kautta iOS: ssä.

Jos haluat nähdä, miltä tämäntyyppiset aikakauslehdet näyttävät helppokäyttöiselle tekniikan käyttäjälle, katso videoni upotukset, jotka osoittavat turhauttavan kokemuksen yrittää lukea näitä
esteettömyystyökalu, kuten VoiceOver:

Pidä sisältö kannettavana ja helposti saatavilla

Keskittyminen kannettaviin muotoihin antaa meille mahdollisuuden käsitellä sisältöämme elääkseen onnellisesti useammalla selaimella, puhelimella, digitaalisella lukulaitteella ja lukusovelluksella. Mitä meidän on tehtävä sisällällemme varmistaaksemme, että se pystyy kääntämään hyvin näiden eri muotojen välillä säilyttäen samalla mukautetun tyylin ja upean kokemuksen?

Olen koonnut alla joitain ohjeita ihmisille, jotka haluavat yleisönsä olevan mahdollisimman laaja ja jotka eivät halua lukita sisältöään mustaan ​​ruutuun monille käyttäjille. Näitä tekniikoita voidaan soveltaa kaikkeen blogiviesteistä pitkäkestoiseen journalismiin ja muihin teoksiin, joita harkitset itse julkaisemiseksi:

1. Aloita HTML5: llä

Luomalla asiakirjat aluksi HTML5: llä, sinulla on vähemmän huolta tulevaisuudessa. HTML5-merkinnät auttavat pitämään asiakirjat helposti navigoitavissa ja käännettävissä muihin muotoihin. Teet huomattavasti vähemmän julkaisujesi jälkiasennusta muihin muotoihin, jos sinulla on alusta alkaen semanttista tietoa.

2. WAI-ARIA

WAI-ARIA on Web Accessibility Initiative - Accessible Rich Internet Applications -sarja. Se on joukko ohjeita, jotka on luonut PFWG: n Protocols and Formats Working Group (PFWG)
W3C. WAI-ARIA määrittelee tavan tehdä verkkosisällöstä ja sovelluksista entistä helpommin vammaisten käytettävissä, ja se auttaa dynaamista sisältöä ja kehittyneitä käyttöliittymän ohjaimia, jotka on kehitetty Ajaxilla, HTML: llä, JavaScriptillä ja niihin liittyvillä tekniikoilla. Jotkut tämän artikkelin tekniikoista ovat peräisin WAI-ARIA -ohjeista, ja vaikka tämä artikkeli ei ole tarpeeksi pitkä kattamaan kaikkia spesifikaatioita, kehotan sinua tarkistamaan sen tarkemmin, miksi näitä suositellaan ja parhaat käytännöt niiden toteuttaminen.

3. Doctype: n käyttö

Vaikka tietyn tiedostotyypin käyttö itsessään ei vaikuta siihen liittyvän HTML-koodin saatavuuteen, tärkein syy käyttää tiedostotyyppiä on varmistaa, että selaimen omituisuustila ei ole käynnissä. Käytä vain ! DOCTYPE html> varmistaa, ettei sitä tapahdu.

4. HTML5-dokumenttitunnisteet

Asiakirjan oikea navigointi on tärkeä tekijä sen saavutettavuusindeksissä. Monet haastattelemani esteettömän tekniikan käyttäjät ilmaisivat turhautumisensa sisällöntuottajiin ja kehittäjiin, jotka eivät merkinneet dokumenttejaan navigointikyvyn kannalta. Nämä tagit antavat enemmän kontekstia asiakirjan osioille kuin käyttämällä paljon div-osioita.

• Otsikko ja Alatunniste molempia voidaan käyttää useita kertoja sivulla. Ne voivat merkitä vastaavaa asiakirjan pääotsikkoa tai alatunnistetta, tai niitä voidaan käyttää otsikoihin / alatunnisteisiin liittyvissä tiedoissa artikkeleissa tai osioissa.
• Sivuun on hyvä tunniste käytettäväksi osioissa, kuten kirjan sivupalkissa, jotka täydentävät asiakirjaa, mutta eivät ole ehdottoman tärkeitä sen ymmärtämisen kannalta.
• Osat ovat järkeviä tapoja hajottaa ideoita tai ryhmitellä sisältöä yhteen.
• Artikkelit ovat itsenäisiä, itsenäisiä kappaleita, joita voi olla olemassa ilman muuta sisältöä. Näiden tunnisteiden asianmukainen käyttö auttaa varmistamaan, että sisältösi rakennetta tulkitaan oikein.

5. Huonot linkit

CSS: n avulla on mahdollista käyttää taustakuvia linkeissä ja painikkeissa. Tämä on hieno vaikutus web-suunnittelijoille, koska se antaa paremman hallinnan typografialle. Se on kuitenkin johtanut siihen, että ihmiset unohtavat sisällyttää tekstikuvauksia. Varmista, että vaikka käytät tekstiä myös kuvan sisällä, varmista, että se pysyy käytettävissä. Tämä voi vaikuttaa myös esimerkiksi hakukoneoptimointiin ja
kansainvälistyminen.

Esimerkki:

a href = "/ contact"> / a>

Tämä on huono.

a href = "/ contact"> Ota yhteyttä / a>

Paljon parempi.

6. Kuvat - ALT vs. TITLE

Ihmiset sisältävät usein joko alt tai otsikko kuvassa olevat attribuutit, mutta eivät molemmat, koska ne ymmärretään usein väärin ja näyttävät siten olevan tarpeettomia. Selvyyden poistamiseksi otsikko voi edustaa neuvoa-antavaa tietoa, kuten sitä, joka saattaa näkyä työkaluvihjeessä. Tämä voi myös antaa sinulle lisätietoja, kun viet hiiren kuvan päälle, tekniikkaa, jota monet ihmiset käyttävät blogeissaan. Kosketuslaitteiden kasvaessa tällaisesta tiedosta tulee vähemmän hyötyä.

Alt toisaalta sitä käyttää avustava tekniikka ja antaa kontekstin elementille. Sinun on käytettävä alt ja varmista, että siitä on hyödyllistä tietoa. Käyttämällä img alt = "" src = "1348.webp">

Kerro ihmisille

Jos sisältösi on saatavana useissa muodoissa, varmista, että sinulla on tapa löytää se sivustostasi. Olet todennäköisesti nähnyt "Jos sinulla on vaikeuksia tarkastella tätä sähköpostia, lue verkko
version "-sanoma monien sähköpostiuutiskirjeiden yläosassa. Tee käytännöistä tehdä sama sisällölle. Jos sinulla on käytettävissä oleva PDF- tai ääniversio sekä ePub, varmista, että käyttäjät löytävät nämä tiedot. Tee käyttäjä testaus sen varmistamiseksi, että sisältö on löydettävissä ja luettavissa.