skip to content etc

[jeel2008]

<ul class="accessibility">
	<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
	<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
	<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
	<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
</ul>

hallo bovenstaand stukje html uit de index van joomla (ja_purity) verscheen laatst plots boven in beeld bij een website waar ik aan bezig was.
ik kreeg het niet weg (en de de Atjes rechts, bedoeld om tekst te vergroten en verkleinen, stond ineens helemaal links in de banner).
iemand een idee waarom dit lijstje van Skip to Content etc in beeld kwam en wat er de bedoeling van is?

 

[csshunter]

iemand een idee waarom dit lijstje van Skip to Content etc in beeld kwam en wat er de bedoeling van is?

Waarom? geen idee...
Wat er de bedoeling van is? Ja.

De class="accessibility" verraadt het al: dit gaat om toegankelijkheid.
Met deze Joomla-instructies wordt gezegd: "plaats hier even op een rijtje de links naar de bladwijzers voor het begin van de inhoud, van het hoofdmenu, van kolom 1 en van kolom 2."

Als nu de site met een pure tekst-browser of een voorlees-browser geopend wordt, staat dit vrij vooraan in de te lezen of te horen tekst.
De bezoekers met zo'n browser hoeven dan niet ellenlange verhalen met niet tezake doende dingen te lezen/horen (bv. alle 2500 details van het hoofdmenu + alle aangehangen submenu's) voordat ze bij de inhoud van de pagina aanbeland zijn. En dat dan elke te bezoeken pagina opnieuw!

Met dit rijtje "Skip to ..."-links kunnen ze rechtstreeks naar de inhoud en de 3 andere mogelijkheden hopsen: skippy-ballen voor snelle navigatie.

Normaal gesproken hoor je dit bij scherm-weergave niet te zien (waarschijnlijk staat het er wel in de ontwerp-weergave), daar zorgt dan de class="accessibility" voor.

[Edit]Hola, daar klikte ik per ongeluk op verzenden, maar was nog niet klaar ... wordt vervolgd[/edit]

 

[csshunter]

Normaal gesproken hoor je dit bij scherm-weergave niet te zien (waarschijnlijk staat het er wel in de ontwerp-weergave), daar zorgt dan de class="accessibility" voor.

... Indendraad.
Op http://docs.joomla.org/Ja_purity_template_header_accessibility staat te lezen:

[B]CSS Files[/B]
[B]ja_purity/css/template.css[/B]
1482.  ul.accessibility {
1483.      position: absolute;
1484.      top: -100%;
1485.      }

Het hele rijtje wordt dus bij bekijken op scherm mooi op een hoogte van 100% boven het beeldscherm getild. Mocht je daar niet toevallig ook een beeldscherm hebben staan, dan zie je dus niks.
Maar als css uit staat (zoals bij een tekst- of voorlees-browser), dan wordt die -100% niet opgevolgd, en je kan het gewoon zien of horen: de Skippy's kunnen gebruikt worden.

Bij deze site is iets dergelijks gedaan:

• Scherm-bekijkers zien er niets van.
• Een pure txt-browser ziet dit (zie eerste regel).
• Een voorlees-browser leest dit.
• Ook als je (bv. in Firefox: Menu Beeld > Paginastijl : Geen stijl) css uitzet, komen de skippy-links tevoorschijn.

Vergelijk bv. met de site van busmaatschappij Connexxion:

• De voorlees-browser moet zo'n 15 links voorlezen voordat je aan de content toe bent. *)

Zodoende: hops for accessibility!

Met vriendelijke groet,
CSShunter
_____________
*) Het begint trouwens meteen goed: met een link met de naam "slash e.gif" (géén alt, geen title). Als je dat hoort voorlezen, dan begrijp je natuurlijk meteen: "o, dat is natuurlijk een transparant gifje, waarachter het logo als background-img verscholen zit, en is dus een link naar de homepage".

 

[jeel2008]

van alle markten thuis

hallo csshunter,
jij bent ook van alle markten thuis!
hoewel dit natuurlijk ook een cssvraag was, gedeeltelijk dan toch. want hoe dat nu toch in beeld kwam bij mij, ik weet het niet. heb wel wat zitten rommelen hier en daar, maar dan nog.
kijk

op een hoogte van 100% boven het beeldscherm getild. Mocht je daar niet toevallig ook een beeldscherm hebben staan, dan zie je dus niks.

dat vind ik nou nog eens een heldere uitleg. :thumb:

en nu ga ik waarschijnlijk een hele domme vraag stellen, maar hupsakee dan maar, daar gaat ie: zo'n voorleesbrowser met links...hoe moet iemand die niet of beperkt ziet dan reageren op een link? bv Skip to content. mensen met een beperkt zicht zouden nog iets kunnen onderscheiden qua kleur of zo, maar als je ook daar problemen mee hebt, hoe kun je dan een link gebruiken? of bestaan er al pcs waartegen je praten kunt en een bevel als 'skip to content' wordt opgevolgd?

 

[csshunter]

Hoe het precies in z'n werk gaat, heb ik ook nooit gehoord, maar ik dacht dat het ongeveer als volgt werkt.
Een voorlees-browser kondigt eerst aan dat er een link komt (zie het Fangs-screenshot), en leest daarna de link voor. Er wordt bij verteld of het een "echte link" is (naar een andere pagina) of alleen een bladwijzer met een skip naar ergens anders op de zelfde pagina ("This page link"). *)
Op het moment dat de link voorgelezen wordt, kan een slechtziende of blinde op de Enter-toets drukken om daarmee de link op te volgen. Mocht je daar net te laat mee zijn, dan kan je met Shift-Tab altijd terug skippen naar de vorige link (net zoals je met de Tab-toets naar de volgende link navigeert).

En ja, er bestaan los daarvan ook spraakgestuurde pc's voor mensen die bv. wegens een verlamming noch muis, noch toetsenbord kunnen bedienen. Er zijn ook braille-voorzetstukken die aan een toetsenbord geclipt worden, enz. Dit alles valt onder het trefwoord "assistive computer technology"; je kunt bv. hier en hier een idee krijgen wat er zoal in omloop is.
Gelukkig: veel!

Dus in principe kunnen heel veel mensen met een beperking via aanvullende techniek heel goed van internet gebruik maken.
Als nu de webbouwers ook nog toegankelijk bouwen (en opdrachtgevers in hun Program van Eisen ook het volgen van de accessibility-richtlijnen opnemen)...
... dan zijn we een stuk verder!

met vriendelijke groet,
CSShunter
________
*) En als je toegankelijk codeert, zet je er zelf bij of een "echte link" binnen de site blijft (met title="Link naar pagina ..."), dan wel een externe link is naar een andere site (met title="Externe link naar ..."). Daarmee wordt dan het externe link-symbooltje

ook niet-visueel kenbaar gemaakt.