accessibility = toegankelijkheid voor iedereen !
Hoi michelscot,
Eerst even waarvoor die stippeltjes bedoeld zijn: de stippeltjes-randjes om een actieve link zijn er om aan te geven waar de actieve link zich op dat moment bevindt.
De css ervoor zit in de "
pseudo-class"
focus, en is vergelijkbaar met de pseudo-class
hover. De notatie is ook analoog:
Code:
[font=courier]#id-naam a:focus { ... hier de focus-eigenschappen ... }[/font]
- Attentie: Internet Explorer is weer eens de schuldige, die frustreert dit met een gebrek aan ondersteuning voor de :focus. In plaats daarvan gebruikt IE de :active pseudo-class voor als een anker focus heeft.
- Jouw effect van de stippeltjes in het Spry-menu is er dan ook wel in bv. Firefox, maar niet in IE!
Waarom is die a:focus in het leven geroepen?
De reden is dat niet alle surfers een muis kunnen besturen, dus zij moeten op een andere manier "hoveren" over een webpagina.
- Als je niet met een muis werkt, ben je aangewezen op het toetsenbord. Behalve met de muis kan je ook met de Tab-toets van link naar link op een pagina springen.
- Soms verandert een link (van kleur, van achtergrond, enz.) als je er over heen muist. En soms zie je het alleen maar aan de muisaanwijzer (het handje).
- Maar: met de Tab-toets zie je geen handje bewegen naar de link waar je zit! Als de webbouwer geen maatregelen heeft getroffen om de links er anders uit te laten zien als deze geselecteerd is (gewoonlijk: als je er op staat met de muis), zie je totaal niet waar je zit op de pagina! En dan is het onmogelijk om op de juiste links te klikken: verder dan de startpagina zal je niet kunnen komen...
Als het goed is, laat je daarom de focus-eigenschappen gelijk opgaan met de hover eigenschappen:
Code:
[font=courier]a { color: blue; }
a:hover { color: red; }
a:focus { color: red; }[/font]
Maar het is niet goed! De meeste webbouwers houden hier helaas geen rekening mee.
In elk geval: in de browsers is
standaard ingebouwd dat een aktieve link altijd een stippeltjesrandje krijgt. Dus óók als je de link aanklikt met de muis, komen er even de stippeltjes voordat de link in werking treedt. En als je na bezichtiging van een vervolg-pagina met de terug-knop van de browser teruggaat, zie je aan de stippeltjes waar de link zat die je aanklikte om weg te komen. Daar was je gebleven!
- Hier is een voorbeeld van een pagina waarin zowel de stippeltjes goed te zien zijn, als het focus-effect als je met de Tab-toets gaat rangeren. Muis op z'n kop leggen en proberen!
- (Moet je ook eens met een willekeurige andere site proberen)
- Als iets met de Tab-toets is aangewezen, kan je met Enter de link inspringen; want zonder muis geen linkermuisknop.
- Helemaal onderaan die pagina zit de link [toegankelijkheid website] die geen optisch effect voor de muis heeft (behalve het handje). Voor wie Tabt, zijn er nog altijd de stippeltjes!
- Terzijde: een klik geeft het toegankelijkheids-colofon van die site. Zoiets zou op alle websites moeten zitten.
Met css kun je het stippeltjesrandje ook stylen, en ... onzichtbaar maken. Sommige webbouwers vinden zo'n tijdelijk stippeltjesrandje "niet mooi", en afbreuk doen aan aan hun design. Maar ja,
het is kiezen of delen:
- kiezen voor "mooi design", maar ontoegankelijk voor een deel van je bezoekers,
- of delen van de toegankelijkheid en een iets minder blitse pagina (hoewel het waarschijnlijk ..% van de bezoekers niet eens zal opvallen).
De Spry-menu makers hebben niet erg rekening gehouden met toegankelijkheid voor Tab-toetsers, kan je snel concluderen bij een paar keer Tab-tab-tab. De submenus zijn niet bereikbaar... Dat is dus niet top-top-top!
Maar goed, als antwoord op je vraag:
De css-eigenschap "outline" is verantwoordelijk voor de stippeltjes.
Zie de css-specificatie.
Zie maar wat je doet!
Met vriendelijke groet,
CSShunter
