Marjanne Timmers in schaatstenue op het ijs

Menu

U bent hier: Home > kruimelpad

Pagina-structuur en toegankelijkheid

vorige 65 volgende

inhoud

  • Er moet nog een overzichtelijke pagina-indeling in hoofd-en subkoppen komen, met name voor de zijkolommen (die lijken doorlopende tekst van de hoofdinhoud te zijn als men de pagina niet op scherm bekijkt).
  • Het kleurgebruik in de kolommen moet nog geregeld worden.
  • Van de gelegenheid wordt gebruik gemaakt om ook de layout van de kolommen uit te werken.

Gerealiseerd in deze stap:

  • De pagina-titel in de head, de verborgen hoofdkop h1 (waar een pagina altijd mee moet beginnen) en de h2 kop van de inhoud hebben allemaal dezelfde tekst; ook goed voor Google.
  • Het menu, de onderdelen van de kolommen en de footer hebben nu ook een h2 kop gekregen (voor menu, mededelingen en footer niet op scherm). De subkoppen in de kolommen hebben een h3 kop gekregen.
  • De hoofd-indeling van de koppen op deze pagina is nu als volgt:
[h1] Pagina-structuur en toegankelijkheid.
     [h2] Navigatie
     [h2] Menu
     [h2] Pagina-structuur en toegankelijkheid (= begin inhoud)
          [h3] Gerealiseerd in deze stap:
          [h3] Lay-out zaken
          [h3] Alles gecheckt?
          [h3] ToDo lijstje
     [h2] Twitter
     [h2] Links
     [h2] Mededelingen (= begin rechterkolom)
          [h3] Hoofdsponsor
          [h3] Nieuws
          [h3] Sponsor-oproep
     [h2] Colofon      (= begin footer)
  • NB: deze pagina-structuur kan je prima zien als je bij de html-validator "Show Outline" aanvinkt en in het resultaat helemaal naar beneden scrollt.
  • Meteen aan het begin is een verborgen "Navigatie" blokje opgenomen met info en bladwijzer-links voor wie de pagina zonder de scherm-opmaak bekijkt (in een pure tekst-browser), of wie een voorlees-browser gebruikt. Hiermee kan men bv. snel naar de mededelingen gaan, zonder eerst de hele pagina te moeten doornemen.
Navigatie

   Deze pagina bestaat uit een menu, een hoofdinhoud en
   daarna enkele vaste onderdelen. De vaste onderdelen
   zijn:
     * [link] Twitter-berichten.
     * [link] Links.
     * [link] Mededelingen.
     * [link] Colofon.

   Direct naar inhoud: [link] sla menu over.
  • Ook op een paar andere plaatsen op de pagina zijn verborgen regels ingevoegd met info over waar men zit.
  • Een verborgen link "Einde pagina, terug naar begin" (met een id="top" voor de html-tag).
  • Een verborgen voorvoegsel "Hier bent u:" bij het kruimelpad.
  • Het resultaat is hier te zien (alle cijfertjes zijn links; verkregen via de Lynx-viewer).

Lay-out zaken

  • Bij het rijtje linken in de linkerkolom kan je de standaard • bullets gebruiken, maar je kunt ook zelf een figuurtje maken, dat er als background-image ingezet wordt.
    Een transparant gif'je van kB met de mini-schaats (inclusief hover-variant, zie hier) is de moeite niet.
  • NB: Het zou in principe ook met de css-eigenschap list-style-image kunnen, maar daar zitten een aantal nadelen aan.
    (1) Browser-verschillen moeten opgelost worden; vergelijk bv. FF en IE7. (2) Dan moet je toch een los img gebruiken i.p.v. de sprite (anders komt de hele rest er ook op). En (3) bovendien is dan de schaats-bullet zelf niet hoverbaar.
    Zie de onderste link, waar een wel list-style-image is gebruikt.
  • In de link "nusport.nl/schaatsen" is in de html-code tussen de / en de "s" van schaatsen een zg. ZWSP (Zero Width SPace) geplaatst: een spatie zonder breedte (!). Deze wordt aangegeven met de html-code ​ en zie je niet op scherm.
    De ZWSP zorgt ervoor dat bij vergroting van de letters de link niet over de rechterkant van de linkerkolom heen loopt, maar afbreekt en op de volgende regel verder gaat.

Alles gecheckt?

Ditmaal een extra toegankelijkheidstest uitgevoerd met de online "Functional Accessibility Evaluator" (FAE) van de Universiteit van Illinois. Deze checkt op een aantal punten die de WCAG-test van "Cynthia Says" laat liggen.
Ook de "Color Contrast Analyser" er even bij gepakt.

vinkje WCAG / automatische toegankelijkheidstest.
vinkje 100% FAE.
vinkje Valid xhtml1.0 Strict.
vinkje Valid css2.1.
plus-min 46/47 Webrichtlijnen (al op de ToDo-lijst).
plus-min Color Contrast Analyser.
vinkje Resoluties. vinkje Browsers. vinkje Letterformaat.

  • Het letterformaat: de letters zijn overal goed te vergroten, behalve in het Twitterblok. Laten we zitten, want anders moet een compleet nieuwe layout + nieuw stylesheet voor het Twitterblok ontworpen worden.
  • De kleuren in de zijkolommen komen niet 100% goed door een handmatige test met de Color Analyser. Het rood is een bijzonder lastige kleur. Zowel het constrast met donkere letters als met een lichte kleur letter houdt niet over: het rood zit precies tussen licht en donker in. Een lichte kleur voor de letters lijkt de beste optie. Laten we verder zitten, want anders zou het rood van de zijkolommen vervangen moeten worden.

Weer eentje afgevinkt!

ToDo lijstje

vinkje Kleine header voor lage resoluties, plus bijbehorend javascriptje.
vraagteken Real life testen in IE8 en IE9.
vinkje Flits bij pagina-wissel in IE wegwerken.
vinkje Images zo nodig bijwerken.
vinkje Images optimaliseren.
vinkje Toegankelijkheid en hidden navigatie verbeteren.
open HTML-code opschonen.
open CSS-code en javascript in apart stylesheet/js-bestand.
open PHP-header met charset aanmaken.
vinkje Favicon maken en in de html zetten.
open Spelling en tikfouten nalopen.
open Google-optimalisatie.
open Test-inhoud uitproberen.
open PHP-includes voor menu en zijkolommen.
open Na elke wijziging testen op css, html, WCAG en Webrichtlijnen.

vorige 65 volgende

Twitter

Mededelingen

Hoofdsponsor

www.derozenborg.nl

Nieuws

Op .. is in .. om .. uur een 1500m wedstrijd.
Lees verder bij de wedstrijd-agenda.

Wedstrijdrijden is heel erg duur. Als priv├ępersoon, bedrijf of organisatie kunt u mij helpen met een sponsorbedrag (al vanaf € 100 p/jr). Kijk op de sponsor-pagina voor meer informatie.