Mer tillgänglighet
Förord
Med anledning av att föregående artikel gavs omdömet för kort så följer här en ansträngning till något längre. Artikeln syftar till att ta upp ämnet tillgänglighet, med utgångspunkt i vilka de vanligaste bristerna idag är och påvisa några enkla idéer om hur man kan komma tillrätta med dem. Så Pelle, Oskar, Erik och alla andra - håll tillgodo.Innehåll
Relaterade artiklar
» TillgänglighetFör att nämna några av de vanligaste bristerna på nätet idag ska jag börja med ett resonemang kring layout, formgivning och grafisk profilering. Något som många, inte minst reklammakare, anser mycket viktigt. Ja, kanske rent av så viktigt att man fullkomligt struntar i huruvida läsaren kan ta del av det faktiska innehållet eller ej.
Utifrån detta faktum styrs webbplatser idag till att ha en fast bredd på sitt grafiska gränssnitt, en fast textstorlek och absoluta positioner för allt som visas i ett webbläsarfönster. Lite märkligt, med tanke på den oerhörda flexibilitet som faktistkt finns i just denna typ av visningsformat.
Ett exempel på detta är www.dn.se, som använder sig av 7 punkters textstorlek, vilket är i minsta laget för deras största målgrupp vid det här laget - 40-talisterna. De köar snart till Pressbyrån för att köpa läsglasögon och intressant är att de ställer krav på att få vara delaktiga i att nyttja datorer som ett sätt att ta till sig information. De har slitit hårt för att hänga med i IT-karusellens tempo och nu riskerar de, på grund av fasta mått på DNs textstorlek att hamna utanför!
Genom att i CSS-mallen ange textstorleken till 70% eller 0.7em (ger samma resultat) så skapar vi samma utseende, om inte besökaren väljer att visa innehållet utifrån sina egna förutsättningar. I webbläsare finns inställningsmöjligheter för att öka textstorlek, som fungerar alldeles utmärkt om vi i CSS-mallen angett ett relativt mått som de två ovan nämnda. Men inte om vi anger 7pt eller liknande, då detta är ett fast mått. Prova gärna att surfa runt och bilda er en uppfattning om hur många webbplatser som använder relativ måttsättning på text. Inte många.
Sedan till de fasta breddangivelserna. Ber om ursäkt för att jag skriver detta på en webbplats som faktiskt använder fasta mått, men jag utlovade mer innehåll och konkreta exempel i förorden. Denna webbplats är 991 pixlar bred. Många människor som ser dåligt använder lägsta möjliga upplösning, 640*480 bildpunkter. Det betyder att man får en horisontell rullningslist. Något som är mycket besvärligt när man ska försöka följa rader med text. Detta drabbar även många med läs- och skrivsvårigheter, som ofta får lättare att läsa när texten är lite större och därmed väljer en lägre upplösning. Detta medför också att den simultana mängden text på skärmen upplevs som mindre, vilket också underlättar läsning. Men inte när raderna kryper utanför höger kant på skärmen. Att använda procentuella mått för bredd på grafiska gränssnitt innebär en kraftig förbättring. Men då flyger reklammakaren i taket och tycker att den grafiska profileringen spricker. Men inte behöver man väl se det så. Den vanligaste förekomsten av hur innehållet visas är ju fortfarande i "rätt" format. En enkel princip gäller: Bygg den grafiska profilen och utgå gärna från att användaren har en högre upplösning. Det är helt ok, så länge innehållet också anpassar sig till andra förutsättningar. Tänk till exempel om din ordinarie webbplats kunde visas lika väl i en PDA eller en 3G-telefon med XHTML-läsare, som på en 19" TFT vid en PC. Det är faktiskt redan verklighet, om man följer råden i föregående artikel på området - validera koden utifrån internationell standard. Naturligtvis får mna tänka till en del. Ett tips är att använda olika stylesheets för olika medier.
är en bra början, om man vill ha skillnader i hur innehållet visas beroende på i vilken miljö det visas.
Rubriker är en annan intressant historia. På sidan där jag just nu skriver finns en visuell rubrik som säger "Skicka in din artikel här". Så långt allt väl. Den är större än all annan text och den har en avvikande färg. För mig, som har synen i behåll, är detta strålande. Jag kan enkelt urskilja rubriken från resten av texten, vilket ger mig förmågan att snabbt få en överblick på vad sidan har att förmedla. Men det ska även finnas en korrekt strukturell information för denna rubrik, nämligen elementet h1. Detta med anledning att ingen annan rubrik föregår den omnämnda. h1 är alltså sidans huvudrubrik. Den kan sedan följas av sin hierarkiska undersåte h2 och så löper kedjan vidare. Dessvärre är rubriken på denna sida av nivå 3, det vill säga h3 och den föregås inte av varken h1 eller h2. Hur kan det gå ihop? Vore jag gravt synskadad skulle jag undra var innehållet som föregick rubriken i fråga tagit vägen och hur jag kunnat missa det. Gravt synskadade använder rubriker för att navigera. Det är deras enda chans att skumläsa. I långa artiklar och dylikt blir det förödande att behöva ta sig igenom långa textstycken för att bilda sig en uppfattning om sidans innehåll. Rubrikerna kan lyftas ut i ett separat fönster, där användaren kan läsa dem fritt från övrig text. Mycket praktiskt. Men i de flesta fall är rubriker inte ens kodade med h3 istället för h1, utan med eller liknande. Det är alltså bara en formaterad brödtext i 99 fall av 100.
Ja, för den som vill veta mer håller vi utbildningar kring ämnet, där vi fokuserar på hur man med
Utifrån detta faktum styrs webbplatser idag till att ha en fast bredd på sitt grafiska gränssnitt, en fast textstorlek och absoluta positioner för allt som visas i ett webbläsarfönster. Lite märkligt, med tanke på den oerhörda flexibilitet som faktistkt finns i just denna typ av visningsformat.
Ett exempel på detta är www.dn.se, som använder sig av 7 punkters textstorlek, vilket är i minsta laget för deras största målgrupp vid det här laget - 40-talisterna. De köar snart till Pressbyrån för att köpa läsglasögon och intressant är att de ställer krav på att få vara delaktiga i att nyttja datorer som ett sätt att ta till sig information. De har slitit hårt för att hänga med i IT-karusellens tempo och nu riskerar de, på grund av fasta mått på DNs textstorlek att hamna utanför!
Genom att i CSS-mallen ange textstorleken till 70% eller 0.7em (ger samma resultat) så skapar vi samma utseende, om inte besökaren väljer att visa innehållet utifrån sina egna förutsättningar. I webbläsare finns inställningsmöjligheter för att öka textstorlek, som fungerar alldeles utmärkt om vi i CSS-mallen angett ett relativt mått som de två ovan nämnda. Men inte om vi anger 7pt eller liknande, då detta är ett fast mått. Prova gärna att surfa runt och bilda er en uppfattning om hur många webbplatser som använder relativ måttsättning på text. Inte många.
Sedan till de fasta breddangivelserna. Ber om ursäkt för att jag skriver detta på en webbplats som faktiskt använder fasta mått, men jag utlovade mer innehåll och konkreta exempel i förorden. Denna webbplats är 991 pixlar bred. Många människor som ser dåligt använder lägsta möjliga upplösning, 640*480 bildpunkter. Det betyder att man får en horisontell rullningslist. Något som är mycket besvärligt när man ska försöka följa rader med text. Detta drabbar även många med läs- och skrivsvårigheter, som ofta får lättare att läsa när texten är lite större och därmed väljer en lägre upplösning. Detta medför också att den simultana mängden text på skärmen upplevs som mindre, vilket också underlättar läsning. Men inte när raderna kryper utanför höger kant på skärmen. Att använda procentuella mått för bredd på grafiska gränssnitt innebär en kraftig förbättring. Men då flyger reklammakaren i taket och tycker att den grafiska profileringen spricker. Men inte behöver man väl se det så. Den vanligaste förekomsten av hur innehållet visas är ju fortfarande i "rätt" format. En enkel princip gäller: Bygg den grafiska profilen och utgå gärna från att användaren har en högre upplösning. Det är helt ok, så länge innehållet också anpassar sig till andra förutsättningar. Tänk till exempel om din ordinarie webbplats kunde visas lika väl i en PDA eller en 3G-telefon med XHTML-läsare, som på en 19" TFT vid en PC. Det är faktiskt redan verklighet, om man följer råden i föregående artikel på området - validera koden utifrån internationell standard. Naturligtvis får mna tänka till en del. Ett tips är att använda olika stylesheets för olika medier.
är en bra början, om man vill ha skillnader i hur innehållet visas beroende på i vilken miljö det visas.
Rubriker är en annan intressant historia. På sidan där jag just nu skriver finns en visuell rubrik som säger "Skicka in din artikel här". Så långt allt väl. Den är större än all annan text och den har en avvikande färg. För mig, som har synen i behåll, är detta strålande. Jag kan enkelt urskilja rubriken från resten av texten, vilket ger mig förmågan att snabbt få en överblick på vad sidan har att förmedla. Men det ska även finnas en korrekt strukturell information för denna rubrik, nämligen elementet h1. Detta med anledning att ingen annan rubrik föregår den omnämnda. h1 är alltså sidans huvudrubrik. Den kan sedan följas av sin hierarkiska undersåte h2 och så löper kedjan vidare. Dessvärre är rubriken på denna sida av nivå 3, det vill säga h3 och den föregås inte av varken h1 eller h2. Hur kan det gå ihop? Vore jag gravt synskadad skulle jag undra var innehållet som föregick rubriken i fråga tagit vägen och hur jag kunnat missa det. Gravt synskadade använder rubriker för att navigera. Det är deras enda chans att skumläsa. I långa artiklar och dylikt blir det förödande att behöva ta sig igenom långa textstycken för att bilda sig en uppfattning om sidans innehåll. Rubrikerna kan lyftas ut i ett separat fönster, där användaren kan läsa dem fritt från övrig text. Mycket praktiskt. Men i de flesta fall är rubriker inte ens kodade med h3 istället för h1, utan med eller liknande. Det är alltså bara en formaterad brödtext i 99 fall av 100.
Ja, för den som vill veta mer håller vi utbildningar kring ämnet, där vi fokuserar på hur man med
-element kan skapa layout som ersätter alla behov av layouttabeller och dylikt, som också de har förödande konsekvenser för vissa målgrupper. Där beskrivs hur hantering av alternativtexter för bilder bör hanteras, hur fungerande ramar (frames) ska se ut och mycket mer.
Benny Skogberg
Du träffar helt rätt i din artikel, och det är kul att se att det börjar diskuteras mer och mer i Sverige. Särskilt media=handheld blir viktigare och viktigare, med dagens mobila verktyg (iPhone och den bedrövliga BlackBerryn). En annan css media man bör tänka på är print, då det är bra att få med serifer i typsnittet som underlättar vid läsning på papper. Härlig artikel!