E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  Link-urile (3)

Link-urile accesibile

08.05.2008
Link-urile accesibile

Tab-uri, Acceskey-uri, Link titles, Popup-uri, Link-uri invecinate, Trecerea peste navigare.

Total vizualizari: 3029 3029 afisari   |   Comentarii  2   |   Rating   |   (1 vot)   |   Timp necesar: 25 min 25 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  E-learn.ro  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Tab-uri
Utilizatorii care nu folosesc sau nu pot folosi dispozitive de marcare pot sa selecteze link-urile folosind optiunea 'tab'. Din acest motiv link-urile ar trebui sa apara si sa poata fi accesate intr-o ordine logica. Atributul tabindex permite definirea acestei ordini, desi daca HTML este linear, asa cum ar trebui sa fie, o ordine logica caracteristica tab-urilor ar trebui sa apara automat.

Acceskey-uri
Acceskey-urile permit navigarea prin asocierea unei scurtaturi prin combinatii de taste (care vor fi functionale cand utilizatorul va apasa 'Alt' sau 'Ctrl' + tasta de acces). Pentru utilizatorii care nu folosesc cursorul este o metoda mai rapida si facila de a naviga fata de metoda 'tab'. Nu este neaparat nevoie sa asociezi taste de acces la fiecare link dar este bine sa fie aplicate pentru link-urile principale de navigare.

<a href="somepage.html" accesskey="s">Some page</a>

Problema cu tastele de acces este ca in general utilizatorul nu poate sti care sunt ele decat daca se uita la codul sursa. JAWS, cel mai popular cititor de ecran va citi aceste taste de acces dar ele trebuie redate mai explicit pentru a fi cat mai usor de utilizat. Poti aplica o metoda similara  tehnicii "skip navigation link technique"(vezi mai jos), sau poti opta pentru o pagina separata care explica elemente de acces si  functionalitate ale site-ului. O metoda foarte raspandita este de a sublinia litera corespunzatoare din link, similar cu metoda folosita in meniurile celor mai multe aplicatii Windows.

Link titles
Este bine sa adaugi atributul title, care va afisa o descriere a destinatiei link-ului. Daca link-ul este folosit pentru a executa Javascript, este util sa exlici ce ar trebui sa se intample in cazul utilizatorilor care nu au Javascript.

<a href="#" onclick="opennastypopup()" onkeypress="opennastypopup()" 
title="Open a nasty Javascript pop-up window">Monster</a>

Popup-uri
Daca folosesti popup-uri, utilizeaza si onkeypress si onclick. Daca incluzi o pagina normala in href  si returnezi false de la o functie care lanseaza popup-ul, si daca utilizatorul nu are Javascript, o pagina normala se va incarca oricum.

 
<script type="text/javascript"> 
 
function opennastypopup() { 
 
window.open("monster.html", "", "toolbar=no,height=100,width=200"); 
 
return false; 
 
} 
 
</script> 
... 
 
<a href="monster.html" onclick="return opennastypopup()" 
onkeypress="return opennastypopup()">Monster</a>

Link-uri invecinate
Link-urile invecinate ar trebui separate nu doar prin spatii, pentru ca utilizatorul sa le deosebeasca usor. Acest lucru poate fi facut prin plasarea de simboluri intre link-uri ( link | link ) sau incercuindu-le cu simboluri ( [link] [link] ). O idee buna este sa pui link-urile de navigare in liste, care pot fi formatate mai tarziu prin CSS pentru afisare(chiar si unele langa altele folosind display: in-line).

Trecerea peste navigare
Ar trebui sa oferi utilizatorilor posibilitatea de a sari peste meniul de navigare si de a ajunge direct la continut. Poti face asta plasand un link care sare direct la continut.

<div id="header"> 
<h1>The Heading</h1> 
<a href="#content" accesskey="n">Skip navigation</a>
</div> 
<div id="navigation"> 
<!--loads of navigation stuff --> 
</div> 
<div id="content"> 
<!--lovely content --> 
</div>

Poti folosi CSS pentru a face acest link invizibil. Daca folosesti display: none unele cititoare de ecran nu vor citi link-ul din aceasta cauza, asa ca poti seta latimea si inaltimea elementului la 0 ( width: 0; height: 0; overflow: hidden).

Pagina:
1
comenteaza printeaza
Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(1 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
alexandra alexandra , Vineri, 02 Martie 2012, ora 11:57
#2

@adriano

Pai ce ai vrea sa citesti mai mult? :) E vorba de link-uri.

Oricum, tutorialul e destul de vechi. Eu nu as folosi onclick pentru linkuri, doar daca este neaparat nevoie. In general tag-ul < a > si href sunt suficiente.

Raporteaza acest comentariu ca injurios!
adriano , Vineri, 02 Martie 2012, ora 05:45
#1

Doar atat este tot tutorialul? Nu este mai mult?

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4435
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4335
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4295
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4140
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
SEO Outlook Fotografie Sony Vegas AJAX Javascript Java Verilog COREL DRAW Swift 3D StyleSheet Fireworks PSD Action Script Flash Dreamweaver CSS Photoshop Word PHP Gimp HTML SWF XML Powerpoint Python Bridge Ruby on Rails RoR Vista Excel Lightroom MySQL JSON XHTML Illustrator
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software