Opmaak van de website veranderen
Toegankelijk ontwikkelen van Websites
Al een aantal jaren werk ik aan een scan die het mogelijk moet maken om niet alleen de inhoud van een willekeurige Website op toegankelijkheid te kunnen testen, maar ook om de bron van de inhoud te kunnen onderzoeken.
Ik denk dat het delen van informatie (al is het maar om zaken onder de aandacht te brengen) zinvol is, aangezien de aan de gebruiker getoonde informatie niet wordt samengesteld door de data die op de Webserver staat, maar vooral wordt vormgegeven door bijvoorbeeld een Content-managementsystem of database ergens in een kantoor op een andere plaats.
Momenteel beschik ik over diverse testmethoden om toegankelijkheids-problemen niet alleen op te sporen, maar ook daadwerkelijk op te kunnen lossen.
Ik ben er mij zeer goed van bewust dat veel informatie gewoon overal te vinden is.
De structuur van Internet wordt echter steeds meer een hoeveelheid van systemen, applicaties en zelf denkende kastjes dat ik zelf heb besloten om zoveel mogelijk informatie te bundelen en hier te beschrijven.
Een hele klus, maar zo'n verzamelactie geeft mij de kans om de materie te bestuderen en zo ervaring op te doen die bij een standaard cursus niet behandeld wordt.
Door vanuit het ontwerp de materie gewoon vanuit de techniek te benaderen levert een doordacht concept het volgende op:
- Een eenduidige structuur,Leesbare informatie,Goed te onderhouden eindresultaat,Hoge score bij zoekmachines,Benaderbaar vanuit alle soorten platformen,Toegankelijke Site
Om aan te tonen dat u veel zelf kunt oplossen volsta ik hier met een doorsnede van alle profielen, die ik in de vorm van aandachtspunten in verschillende niveaus heb onderverdeeld.
Wilt u echter meer in detail treden dan ben ik graag bereid u te helpen en alles toe te lichten.
Onderstaand moet ook worden gelezen als een Eye-opener.
Deze uiteenzetting dient om u een indruk te geven van mijn methode en kan ook als een uittreksel van de W3C-richtlijnen worden gezien, maar dan uitgebreid met de hier weergegeveninformatie.
Ten behoeve van de leesbaarheid is de structuur in groepen verdeeld om resultaten schematisch vast te kunnen leggen en een score te genereren.
Niveau 1
Groep 1: Multimedia
Deze groep is voor een goede toegankelijkheid sterk afhankelijk van het ontwerp van de Site.
Als de Site gebruik maakt van veel beeldmateriaal (zoals filmpjes of Sheets), die veel informatie bevatten dan zal een visueel gehandicapte gebruiker informatie missen.
Het omgekeerde geldt voor de dove gebruiker die behoefte zal hebben aan tekst in plaats van gesproken woord of muziek.
Als de gebruikte Multimedia uitsluitend tot doel heeft zaken te verfraaien voor het visuele effect dan is een beschrijving in de vorm van een Tag niet nodig.
In het volgende overzicht geef ik de diverse Multimedia en de mogelijke oplossingen weer:
Symbolen en grafische tekstatributen (bijvoorbeeld High Ascii)
Meestal zullen leestekens goed worden weergegeven door elke willekeurige browser.
Het gebruikte font is hiervoor wel bepalend voor de mogelijkheden.
(Zie het artikel over de Euro op de Mijmerpagina)
animaties (Animatid Gif)
De ontwerper moet zich altijd realiseren dat animaties door de gebruiker moeten worden geladen.
Marktonderzoek heeft aangetoond dat het beoogde effect om de aandacht van de bezoeker vast te houden plaats maakt voor ergernis.
De ontwerper moet zich afvragen hof de informatie in de animatie essentieel is.
Als het bijvoorbeeld een Logo betreft dat door te knipperen opvalt, dan is een knop om deze weg te klikken of een positie bovenin het scherm voldoende.
Een al te drukke animatie heeft niet alleen tot gevolg dat deze alle aandacht van de Screenreader op zich vestigd, maar maakt een standaard structuur voor de hele Site onmogelijk.
Let bij het kiezen van het geluid- of beeldmateriaal altijd op de qualiteit!
De norm van een goed geluid staat of valt met de klankkleur.
Hoe beter de gebruiker het verschil tussen voor- en achtergrondgeluid kan bepalen hoe meer het gebodene tot zijn recht komt, zelfs als iemand last heeft van afwijkingen in het gehoor.
Voor afbeeldingen en filmpjes geldt ook een verantwoorde keuze van resolutie, kleurenpatroon en techniek.
Bij bepaalde combinaties van kleur en beweging is het zelfs mogelijk om epileptische effecten op te lopen.
Wat te denken van misselijkheid bij het tonen van een 3D-animatie of bij een schommelende beeldopname.
Afbeeldingen en foto's
Geef door middel van een Tag een omschrijving van wat er wordt getoond.
De Webcrawlers die voor zoekmachines de inhoud van uw Site scannen letten hierop en leveren u een hogere score in de zoekresultaten op.
Filmpjes;
Hiermee wordt hier te downloden AVI- MPEG- of MOV-bestanden bedoeld.
Vaak is de omschrijving van de inhoud al in het Item dat de Link bevat verwerkt.
Een echt alternatief is volgens mij alleen nodig als er veel informatie wordt geboden die elders niet wordt weergegeven.
Geluiden
Hierbij is een Tag die een omschrijving van het geluid bevat voldoende.
Ervaring leert mij echter dat geluiden (net als het kleuren van de achtergrond) meer als versiering dienen en geen extra informatie bevatten.
Een afweging of deze aanpassing moet worden gemaakt is dus sterk afhankelijk van het behandelde onderwerp van de Site.
Midi
Hiervoor geldt de zelfde overweging als bij geluid.
Streaming audio/Video
Een alternatief hiervoor is lastig.
Meestal wordt deze Multimedia toegepast voor presentaties, radio- en TV-uitzendingen, film en Webcasts.
Voor presentaties kan worden volstaan met een document dat de gesproken tekst bevat.
Voor andere Streaming Media kan (net als bij radio en televisie) ondertiteling, tweede beeld met een doventolk of Naration een mogelijkheid zijn.
(Zie voor meer informatie de verhandelingen rond SMIL, XML en andere artikelen op deze pagina)
Flash
Hierbij kan zowel een alternatieve tekstpagina worden geboden, als gebruik worden gemaakt van de toegankelijkheids-opties binnen Flash.
Deze opties worden alleen in de laatste Flash-Player ondersteund.
(Zie hiervoor het artikel rond Flash op de Toegankelijke Ontwikkelomgevingen-pagina)
Applets (ASP, JS) voor grafische doeleinden (opmaak en knoppen)
Coldfusion en Frontpage gebruiken Scripting om snel een mooie opmaak te genereren.
Zowel binnen deze applicaties als aan de kant van de gebruikte Browser kunnen voldoende aanpassingen worden gemaakt om een acceptabel resultaat te verkrijgen.
Hier kom ik later op terug.
Ingescande tekst
Inscannen van aanwezige tekst die al op papier aanwezig is kan in kantooromgevingen verleidelijk zijn voor het snel verwerken en plaatsen van informatie, maar zijn rampzalig voor de structuur van de Site.
Niet alleen is tekst niet meer aan te passen en wordt niet meegenomen in zoekresultaten, maar maakt deze aanpak een standaard onderhoud van de Site onmogelijk.
Google is hier bijvoorbeeld erg gevoelig voor en levert u minpunten op.
Wij adviseren hiervoor geen alternatief.
Gewoon niet doen!
Alternatieve documenten
PDF-bestanden zijn (als ze tekst en geen ingescande pagina's bevatten) volledig toegankelijk, zeker als Acrobat Reader 6 door de bezoeker wordt gebruikt.
Over de mogelijkheden van de produkten van Adobe vindt u ook een artikel op de Ontwikkelpagina.
Andere documenten als bestanden van MS Office worden als download aangeboden die desgewenst kunnen worden geopend.
Groep 2: Tekstopmaak
Let bij het samenstellen van de tekstopmaak op de volgende zaken:
Zichtbaarheid van de tekst als de Browser op monochrome weergave is ingesteld;
Voor dislectische gebruikers: Zorg voor duidelijke tekstovergangen in onderschriften en paragrafen;
Helder en zichtbaar verschil tussen tekst en afbeeldingen op de voorgrond en de gebruikte achtergrond;
Geen afwijkingen in tekstopmaak bij het uitschakelen van Stylesheets;
Groep 3: Overdracht van gegevens
Hiermee worden de gegevensoverdracht tussen de Site en eventueel achterliggende Database of applicatie bedoeld en de overdracht tussen de Site en de gebruikte Agent of Browser)
Voor het vaststellen van het probleem, beschik ik over de volgende testprofielen:
IIS met Frontpage (HTML of ASP met Frontpage File-Extensie actief op de Server (templates);
IIS of Apache Webserver met ColtFusion (te herkennen aan de CFM-extensie);
Apache Webserver met PHP, MYSQL (of gelijke Database) en toevoeging van Perl;
Java-platform (JSP-extensie, zoals bij Anderslezen.nl) werkend op Tomcat;
Dot-NET applicatie met gebruikmaking van Webparts;
Dot-NET applicatie met Microsoft produkten als Commerce-Server of CRM;
Applicatie gekoppeld aan een Microsoft Biztalk of SQL-Database;
Oracle Web-produkten of Databases;
Netobjects;
Bea Weblogic;
Java applicaties (J2EE) op IBM Websphere, Netscape of Iplanet op Novell's Netware of Solaris met eventueel toevoeging van Corba Databases;
Andere koppelingen naar Navision, SAP, Ariba, J.D. Edwards of Peoplesoft;
De invloed van de Webmaster of ontwerper van de site is afhankelijk van de mate waarin de achterliggende applicatie de zichtbare inhoud genereerd.
Inkoopportalen, webwinkels en informeerende instellingen baseren de getoonde inhoud op gegevens die elders op kantoor of zelfs op andere locaties zijn ingevoerd.
Geografische spreiding speelt momenteel geen enkele rol meer.
Stelt u zich altijd de vraag of het mogelijk is om de dynamische content plaats te laten vinden zonder update van het scherm.
Een refresh om de 5 minuten is niet erg, maar het komt vaak voor dat bij het invullen van een enkel veld het hele scherm herschreven wordt.
Helaas is hier niet altijd omheen te ontwikkelen.
Besef wel dat u de gebruiker dwingt om een vast leestempo aan te houden.
Als de factor tijd een rol speelt (bijvoorbeeld bij een competitie-element) dan is hier niets aan te doen.
Een feit blijft dat de gebruiker altijd zelf moet kunnen bepalen hoe snel hij/zij informatie wil doorzoeken.
Verder Zijn Tekstlinks voor de Serversite-imagemaps een waardevolle aanvulling.
Groep 4: Scherm-Layout
Zorg altijd voor kolommen en tabellen met duidelijke opmaak en markeringen.
Als er gebruik wordt gemaakt van Frames, voorzie deze dan van
een duidelijke titel voor een effectieve navigatie.
Groep 5: Scripts en interactie van de gebruiker
Het blijft altijd lastig om uw Site vorm te geven zonder gebruik te maken van scripts.
Veel webbouwers gebruiken ontwikkelomgevingen die hier driftig gebruik van maken.
Een pagina aanbieden zonder gebruik te maken van scripts heeft echter veel voordelen.
Niet alleen geeft u de gebruiker de kans om bijvoorbeeld ook op het mobieltje alle informatie zonder problemen te laten benaderen, maar biedt u ook een snelle overdracht van gegevens.
Als de gebruiker ondersteuning voor Javascripts heeft uitgezet werkt uw formuliercontrole of opslag via de rechter muisklik niet meer.
het aanbieden van een vergelijkbare taak helpt u niet alleen aan een hogere score van toegankelijkheid maar levert u ook een betere controle over het gebruik van uw Site op.
Als scripts te hecht met het concept van de Site zijn verbonden dan is het ook mogelijk om extra Tags op te nemen.
Denk aan een extra Tag voor een knop die door een Javascript wordt gegenereerd of Hotkeys om een niet te klikken knop toch te kunnen bedienen.
Niveau 2
Groep 1: Pop-Ups
Pop-Ups worden steeds meer als lastig ervaren.
Google en Yahoo bieden Toolbars met een Popup-Blocker en Microsoft heeft er met Servicepack 2 voor Windows XP een gratis Blocker in Internet-Explorer gebouwd.
Popups worden echter ook bij het downloaden van Mirrorsites gebruikt en kunnen controles uitvoeren of snel berichten naar de gebruiker Pushen.
Totaal negeren kunnen we ze niet, maar zo weinig mogelijk gebruiken is wel een Must voor een toegankelijke Site.
Bij een Popup opent er een nieuw scherm dat moet worden dichtgeklikt.
De inhoud van de Popup wordt vaak niet voorgelezen en valt over andere tekst heen, waardoor vergrotingssoftware het ook zwaar te verduren krijgt.
Groep 2: Structuur van informatie
Logisch groeperen van informatie, duidelijke woordkeuze, niet te lange zinnen, het zijn allemaal zaken die in een gewone tekst ook het succes van een goede communicatie bepalen.
Besteed hier altijd veel zorg aan.
Groep 3: Koppeling van informatie
Als er bij het concept van de Site sprake is van veelvuldig doorsturen van de gebruiker (redirected Links), wordt het scherm onnodig van opbouw veranderd en ontstaat er verwarring.
Hanteer dus altijd een vaste structuur en bouw deze modulair op zodat wijzigingen snel zijn aan te brengen en u ook zelf de weg niet kwijt raakt.
Haast is altijd de grote valkuil voor een doordacht ontwerp.
Groep 4: Grafische effecten in tekst
Grafische effecten hebben tot doel om de aandacht van de lezer op een bepaald zinsonderdeel te laten vestigen of een klemtoon aan te geven.
Als deze effecten worden gebruikt, moet de indeling van de tekst wel eenduidig zijn.
Wisselingen van stijl werken verwarrend en de aandacht van de gebruiker verslapt.
Bepaal altijd of deze zaken iets toevoegen aan het doel van uw Site.
Groep 5: Formulieren
In de huidige moderne Site worden Formulieren vaak door Scripts vanuit een Database opgebouwd.
Formulieren moeten altijd volledig met de Tab-toets te doorlopen zijn en eenduidig zijn opgemaakt.
De tijdens de invoer gemaakte fouten moeten door de gebruiker gemakkelijk te herstellen zijn.
Niveau 3
schuin
Groep 1: Site Layout
Als eigenaar van de Site kunt u zich afvragen of de Layout van de Site overzichtelijk blijft als u zaken als Flash en omvangrijke afbeeldingen verwijderd of minder toepast.
Navigatiepijlen zien er goed uit, maar gewone Links werken ook en dwingen meer structuur af.
Voegt de toegepaste Multimedia veel toe aan de geboden informatie van de Site, dan is het van belang om te bepalen of de aansluiting met het doel van de Site voldoende is.
Alternatieven zijn dan van groot belang.
Groep 2: Zoekfunctie
Een goede tekstindeling vergemakkelijkt het zoeken door de Site.
Mocht u een zoekfunctie in de Site hebben ingebouwd maar de structuur is onlogisch dan zullen de gevonden resultaten veel minder bruikbaar zijn.
Verder helpt een standaard indeling van alinia's en paragrafen ook heel erg mee aan een goede schermindeling.
Prettig leesbare informatie verhoogd de concentratie van de gebruiker en dus ook de bereidheid om terug te keren of zaken te kopen.
Groep 3: Invloed op zoekfunctie
Als het lastig is om aanpassingen in de zoekfunctie aan te brengen dan is het toevoegen van gebruikersinstellingen ook een optie.
Overweeg of zoekwoorden volstaan of dat het toevoegen van Fuzzy Logic (keuses via vraag en antwoord) beter werkbaar zijn.
Groep 4: Tabellen Frames en Stylesheets
Tabellen genieten vaak de voorkeur boven Frames.
Frames zijn wel toegankelijk als ze een juiste naam in de Frameset hebben en corresponderen met de titel van de pagina.
Helaas blijft het niet mogelijk om links aan te maken naar een pagina in een frame, waarbij deze met de bijbehorende frames getoond wordt.
Verder filteren zoekmachines de Frames keurig uit de inhoud, waardoor de opmaak verloren gaat.
De pagina's zijn niet met een Bookmark vast te leggen, scherminhoud wordt onoverzichtelijk en navigeren is lastig, ook bij het aanpassen van de schermresolutie.
Screenreaders worden echter steeds intelligenter en sommige Tools maken Frames nu eenmaal standaard aan.
Helemaal negeren is dus niet mogelijk.
Voor tabellen raad ik aan zoveel mogelijk deze vormgeving voor het weergeven van gegevens te gebruiken.
Denk hierbij aan overzichten (actielijsten, prijslijsten, etc), waarbij de positie van de data bijdraagt aan de informatie en uniek is.
Voor toepassingen als vormgeving en vervanging van Frames zijn tabellen ongeschikt.
Door gebruik te maken van Layout-technieken zijn veranderingen snel aan te brengen.
Als u bijvoorbeeld Stylesheets gebruikt dan dwingt u al een eenduidige opmaak af.
Groep 5: Ergonomie
Heeft u al eens geprobeerd om zonder de muis uw Site te besturen?
Als u met de Tab-toets alle keuzes van de Site kan benaderen, dan scheelt dat heel veel tijd en RSI-klachten.
Zijn er in uw concept ook Short-Cuts (Hotkeys) mogelijk dan werkt deze navigatie nog vlugger.
Tot slot
Bovenstaande informatie is door de huidige ontwikkeling snel achterhaald.
Ik zal zoveel mogelijk trachten deze tekst aan te passen en zo actueeel mogelijk bij te houden.
Mocht u vragen en op- of aanmerkingen hebben dan hoor ik dat graag.
Gebruikte bronnen:
De voor de Webscan ontworpen profielen zijn ontwikkeld met behulp van de volgende bronnen:
- Web Content Accessibility Guidelines 2.0 van de W3C,Google API,produkthandleidingen van de desbetreffende leveranciers,Diverse Newsgroups en Mailinglists,studieboeken en cursusmateriaal,Eigen ondervinding en persoonlijke ervaring