#Παράδειγμα: Παραλλαγές συνδέσμου

Γενικές πληροφορίες για συνδέσμους

Στις περισσότερες περιπτώσεις είναι καλύτερο να χρησιμοποιείτε τυπικούς συνδέσμους μέσω της χρήσης της HTML. Βέβαια, όταν είναι δυνατόν. Τώρα, σε σπάνιες περιπτώσεις μπορεί να γίνει αποδεκτή η δημιουργία συνδέσμων μέσω της σήμανσης της τεχνολογίας ARIA. Οι σύνδεσμοι ARIA πρέπει να λειτουργούν ακριβώς όπως οι τυπικοί σύνδεσμοι.

Η χρήση της HTML σημαίνει τη χρήση ενός <a> στοιχείου με έγκυρη τιμή του χαρακτηριστικού href. Σε σπάνιες προβληματικές περιπτώσεις, η ρύθμιση role="link"(και η προσθήκη όλων των άλλων πτυχών της λειτουργικότητας του συνδέσμου) μπορεί να είναι αποδεκτή.

Σύνδεσμοι έναντι κουμπιών

Οι σύνδεσμοι πρέπει να χρησιμοποιούνται μόνο για ενέργειες που οδηγούν τον χρήστη σε άλλες τοποθεσίες και δεν επιτρέπεται να χρησιμοποιούνται για λειτουργίες που μοιάζουν με κουμπιά.

Σημείωση 1: "Άλλες τοποθεσίες" σημαίνει άλλες ιστοσελίδες ή σε άλλες τοποθεσίες στην ίδια ιστοσελίδα. Συνήθως, η διεύθυνση URL θα αλλάξει μετά την ενεργοποίηση ενός συνδέσμου.
Σημείωση 2: "Λειτουργικότητα τύπου κουμπιού" σημαίνει λειτουργίες με σενάριο, συμπεριλαμβανομένης της υποβολής φορμών.

Κείμενο συνδέσμου

Ο σκοπός κάθε συνδέσμου πρέπει να είναι κατανοητός και διακριτός από άλλους συνδέσμους στην ίδια σελίδα, είτε μόνο από το κείμενο του συνδέσμου (κριτήριο επιτυχίας 2.4.9 Επίπεδο AAA), είτε από το άμεσο περιβάλλον του συνδέσμου.
Αποφύγετε το κείμενο "Σύνδεσμος" (ή παρόμοιο) στο κείμενο Συνδέσμου: Το κείμενο του συνδέσμου δεν πρέπει να αναφέρει τον σημασιολογικό του ρόλο (π.χ. "σύνδεσμος προς..."), επειδή οι αναγνώστες οθόνης δηλώνουν ήδη τον ρόλο πριν διαβάσουν το κείμενο του συνδέσμου.
Όταν ένας σύνδεσμος ανοίγει νέο παράθυρο ή καρτέλα πρέπει να υποδεικνύει ότι ανοίγει σε νέο παράθυρο ή καρτέλα.
Ο εξωτερικός σύνδεσμος συνιστάται να υποδεικνύει ότι οδηγεί σε έναν εξωτερικό ιστότοπο.
Οι σύνδεσμοι προς τους ίδιους προορισμούς πρέπει να ταυτίζονται με συνέπεια με το ίδιο (ή πολύ παρόμοιο) κείμενο συνδέσμου σε όλες τις σελίδες του ιστότοπου.

Προσβασιμότητα πληκτρολογίου

Οι σύνδεσμοι πρέπει μέσω του πλητρολογίου [TAB] να εστιάζονται. (Κριτήριο επιτυχίας 2.1.1 Επίπεδο AA )
Οι σύνδεσμοι πρέπει μέσω του πλητρολογίου [ENTER] να ενεργοποιούνται. (Κριτήριο επιτυχίας 2.1.1 Επίπεδο AA)

Σειρά εστίασης

Πρέπει να διασφαλίσει ότι όταν οι χρήστες πλοηγούνται διαδοχικά στο περιεχόμενο, συναντούν πληροφορίες με μια σειρά που είναι σύμφωνη με το νόημα του περιεχομένου και μπορούν να πλοηγηθούν σε αυτό και με το πληκτρολόγιο. (Κριτήριο επιτυχίας 2.4.3 Επίπεδο AA )
Για το χαρακτηριστικό tabindex δεν συνιστάται η τιμή να είναι μεγαλύτερη απο το 0. Για παράδειγμα, μη χρησιμοποιείται tabindex="1". (Βέλτιστη πρακτική)

Πλοήγηση εντός της σελίδας

Η ιστοσελίδα κάνει σύνδεσμους άμεσης μετάβασης στο περιεχόμενο διαθέσιμους. (Κριτήριο επιτυχίας 2.4.1 Επίπεδο AA )

Σημείωση 1: Ο σύνδεσμος άμεσης μετάβασης είναι το πρώτο διαδραστικό στοιχείο της σελίδας.
Σημείωση 2: Ο σύνδεσμος άμεσης μετάβασης είναι πάντα ορατός ή εμφανίζεται όταν λάβει την εστίαση.
Σημείωση 3: Οι σύνδεσμοι άμεσης μετάβασης, τα ορόσημα (π.χ.<nav>, <main>, κ.λπ.) και ο πίνακας περιεχομένων σελίδων είναι το καθένα έγκυρες και επαρκείς μέθοδοι για την ικανοποίηση του κριτηρίου επιτυχίας 2.4.1. Επιτρέπει στους χρήστες να παρακάμπτουν μπλοκ περιεχομένου. Στην ιδανική περίπτωση, ο σχεδιασμός θα περιλαμβάνει όλες αυτές τις τεχνικές, όπου χρειάζεται.

Παράδειγματα παραλλαγών συνδέσμου

Χρησιμοποιείστε το πληκτρολόγιο και ξεκινήστε ένα πρόγραμμα ανάγνωσης οθόνης για να ακούσετε τη διαφορά των παραδειγμάτων.

Παράδειγμα 1: Τυπικός σύνδεσμος HTML (χωρίς JavaScript ή ARIA σήμανση)

ainspector.disability.illinois.edu

Παράδειγμα 2: Σύνδεσμος με ARIA (`<span role="link">`) και JavaScript

Ανοίγει νέα καρτέλα

ainspector.disability.illinois.edu/

Παράδειγμα 3: Συνδεδεμένη εικόνα με ARIA (`<img role="link">`) και JavaScript