Τεχνικές HTML για τις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 1.0
Σημείωμα του W3C 6 Νοεμβρίου 2000
- Παρούσα πρωτότυπη έκδοση:
- http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20001106/
- (απλό κείμενο (plain text), PostScript (PostScript), PDF (PDF), αρχείο gzip tar HTML (gzip tar file of HTML), αρχείο zip HTML (zip archive of HTML)
- Τελευταία πρωτότυπη έκδοση:
- http://www.w3.org/TR/WCAG10-HTML-TECHS/
- Προηγούμενη πρωτότυπη έκδοση:
- http://www.w3.org/TR/2000/NOTE-WCAG10-HTML-TECHS-20000920/
- Συντάκτες πρωτοτύπου:
- Wendy Chisholm, W3C;
Gregg Vanderheiden, Trace R & D Center Πανεπιστήμιο του Ουισκόνσιν -- Μάντισον,
Ian Jacobs, W3C
Πνευματικά δικαιώματα (Copyright) ©1999 - 2000 W3C ®(MIT,
INRIA, Keio), με την επιφύλαξη παντός δικαιώματος. Ισχύουν οι κανόνες του W3C περί ευθύνης (liability), εμπορικών σημάτων (trademark), χρήσης εγγράφων (document use) και αδειών χρήσης λογισμικού (software licensing).
Το παρόν έγγραφο περιγράφει τεχνικές για τη σύνταξη προσβάσιμου περιεχομένου Γλώσσας Σήμανσης Υπερκειμένου (HTML) (ανατρέξτε στην HTML 4.01 [HTML4]). Σκοπός του παρόντος εγγράφου είναι να βοηθήσει τους συντάκτες περιεχομένου Ιστού που επιθυμούν την υποβολή αξίωσης συμμόρφωσης με τις "Οδηγίες για την Προσβασιμότητα του Περιεχομένου Ιστού 1.0" ([WCAG10]). Ενώ σκοπός των τεχνικών που περιγράφονται στο παρόν έγγραφο είναι να βοηθήσουν τους υπεύθυνους ανάπτυξης να συντάξουν HTML που συμμορφώνεται με τις "Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 1.0", οι τεχνικές αυτές δεν αποτελούν εγγύηση συμμόρφωσης ούτε είναι ο μοναδικός τρόπος με τον οποίον ένας συντάκτης μπορεί να παράγει συμμορφούμενο περιεχόμενο.
Το παρόν έγγραφο αποτελεί μέρος μιας σειράς εγγράφων σχετικά με τεχνικές για τη σύνταξη προσβάσιμου περιεχομένου Ιστού. Για πληροφορίες σχετικά με άλλα έγγραφα αυτής της σειράς, ανατρέξτε στις "Τεχνικές για τις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 1.0" [WCAG10-TECHS].
Σημείωση: Το παρόν έγγραφο περιέχει έναν αριθμό παραδειγμάτων, τα οποία παρουσιάζουν προσβάσιμες λύσεις σε CSS, αλλά και κάποια παραδείγματα που έχουν αντικατασταθεί, τα οποία παρουσιάζουν αυτά που δεν πρέπει να εφαρμόσουν οι υπεύθυνοι ανάπτυξης περιεχομένου. Τα παραδείγματα που έχουν αντικατασταθεί επισημαίνονται και οι αναγνώστες πρέπει να τα προσεγγίζουν με προσοχή -- παρέχονται αποκλειστικά για επεξηγηματικό σκοπό.
Η παρούσα έκδοση δημοσιεύτηκε προκειμένου να διορθωθούν κάποιοι σύνδεσμοι που έπαψαν να ισχύουν στην προηγούμενη έκδοση.
Η έκδοση της 6ης Νοεμβρίου του 2000 του παρόντος εγγράφου αποτελεί ένα σημείωμα μιας σειράς σημειωμάτων που προέκυψε και εγκρίθηκε από την Ομάδα Εργασίας των Οδηγιών για την Προσβασιμότητα του Περιεχομένου του Ιστού (Web Content Accessibility Guidelines Working Group) (WCAG WG). Το παρόν σημείωμα δεν έχει αναθεωρηθεί και δεν έχει εγκριθεί από τα μέλη του W3C. Η σειρά των εγγράφων υπερισχύει του μεμονωμένου εγγράφου "5 Μαΐου 1999 Σημείωμα του W3C "Τεχνικές για τις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 1.0" (5 May 1999 W3C Note Techniques for Web Content Accessibility Guidelines 1.0). Τα θέματα από το προηγούμενο έγγραφο έχουν χωριστεί σε έγγραφα ειδικά για την τεχνολογία, τα οποία μπορούν να εξελιχθούν ανεξάρτητα. Μικρότερα έγγραφα ειδικά για την τεχνολογία επιτρέπουν στους συντάκτες να εστιάσουν την προσοχή τους σε μια συγκεκριμένη τεχνολογία.
Ενώ η σύσταση "Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 1.0" [WCAG10] είναι ένα σταθερό έγγραφο, αυτή η σειρά των συνοδευτικών εγγράφων αναμένεται να εξελιχθεί καθώς μεταβάλλονται οι τεχνολογίες και οι υπεύθυνοι ανάπτυξης περιεχομένου ανακαλύπτουν πιο αποτελεσματικές τεχνικές για το σχεδιασμό προσβάσιμου περιεχομένου Ιστού.
Το ιστορικό των αλλαγών που έχουν πραγματοποιηθεί στη σειρά των εγγράφων (history of changes to the series of documents) καθώς και η λίστα των ανοικτών και κλειστών προβλημάτων (list of open and closed issues) είναι διαθέσιμα. Οι αναγνώστες ενθαρρύνονται να σχολιάσουν το έγγραφο και να προτείνουν λύσεις στα τρέχοντα προβλήματα. Στείλτε αναλυτικά σχόλια σχετικά με αυτό το έγγραφο στην Ομάδα Εργασίας στη διεύθυνσηw3c-wai-gl@w3.org. Διαθέσιμα είναι δημόσια αρχεία (public archives).
Η αγγλική έκδοση αυτών των προδιαγραφών αποτελεί τη μοναδική κανονιστική έκδοση. Ενδεχομένως να υπάρχουν διαθέσιμες μεταφράσεις του παρόντος εγγράφου (Translations of this document).
Η λίστα με τα γνωστά σφάλματα που περιέχει αυτό το έγγραφο είναι διαθέσιμη στα "Σφάλματα στις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού" ("Errata in Web Content Accessibility Guidelines). Αναφέρετε τυχόν σφάλματα του παρόντος εγγράφου στη διεύθυνση wai-wcag-editor@w3.org.
Η Πρωτοβουλία για την Προσβασιμότητα του Ιστού (Web Accessibility Initiative (WAI) της Κοινοπραξίας του Παγκόσμιου Ιστού (W3C) καθιστά διαθέσιμο ένα μεγάλο φάσμα πόρων σχετικά με την προσβασιμότητα του Ιστού. Η δημιουργία των Οδηγιών Προσβασιμότητας WAI είναι μέρος της Δραστηριότητας Τεχνικών της WAI (WAI Technical Activity). Οι στόχοι της Ομάδας Εργασίας των Οδηγιών για την Προσβασιμότητα του Περιεχομένου του Ιστού περιγράφονται στο καταστατικό (the charter).
Είναι διαθέσιμη μια λίστα με τις τρέχουσες συστάσεις και άλλα τεχνικά έγγραφα του W3C (current W3C Recommendations and other technical documents).
Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να χρησιμοποιούν δομική σήμανση και να τη χρησιμοποιούν σύμφωνα με τις προδιαγραφές. Τα δομικά στοιχεία και οι παράμετροι (για να μάθετε ποια είναι αυτά, ανατρέξτε στο ευρετήριο των στοιχείων και παραμέτρων HTML (index of HTML elements and attributes) προάγουν τη συνέπεια στα έγγραφα και παρέχουν πληροφορίες σε άλλα εργαλεία (π.χ. εργαλεία δημιουργίας ευρετηρίου, μηχανές αναζήτησης, προγράμματα που εξάγουν πίνακες σε βάσεις δεδομένων, εργαλεία πλοήγησης που χρησιμοποιούν στοιχεία επικεφαλίδας και λογισμικό αυτόματης μετάφρασης που μεταφράζει κείμενο από μια γλώσσα σε μια άλλη).
Σημεία ελέγχου σε αυτή την ενότητα:
- 13.2 Παρέχετε μεταδεδομένα για να προσθέσετε σημασιολογικές πληροφορίες σε σελίδες και τοποθεσίες. [Προτεραιότητα 2]
Ορισμένα δομικά στοιχεία παρέχουν πληροφορίες για το ίδιο το έγγραφο. Αυτά αποκαλούνται "μεταδεδομένα" σχετικά με το έγγραφο. Τα μεταδεδομένα είναι πληροφορίες για τα δεδομένα. Όταν τα μεταδεδομένα έχουν τη σωστή μορφή μπορούν να παρέχουν σημαντικές πληροφορίες προσανατολισμού στους χρήστες. Στα στοιχεία HTML που παρέχουν χρήσιμες πληροφορίες σχετικά με ένα έγγραφο περιλαμβάνονται τα εξής:
Σημειώστε ότι το (υποχρεωτικό) στοιχείο TITLE, το οποίο εμφανίζεται μία φορά σε ένα έγγραφο διαφέρει από την παράμετρο "title", η οποία εφαρμόζεται σχεδόν σε κάθε στοιχείο HTML 4.01. Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να χρησιμοποιούν την παράμετρο "title" σύμφωνα με τις προδιαγραφές HTML 4.01. Για παράδειγμα, η παράμετρος "title" θα πρέπει να χρησιμοποιείται με τους συνδέσμους, ώστε να παρέχει πληροφορίες σχετικά με τον προορισμό του συνδέσμου.
Αυτό το στοιχείο μπορεί να χρησιμοποιηθεί για να παρέχει πληροφορίες σχετικά με το δημιουργό της σελίδας.
Σημεία ελέγχου σε αυτή την ενότητα:
- 7.4 Έως ότου οι πράκτορες χρήστη να παρέχουν τη δυνατότητα να διακόπτεται η ανανέωση, μην δημιουργείτε σελίδες περιοδικής αυτόματης ανανέωσης. [Προτεραιότητα 2] ,
- 7.5 Έως ότου οι πράκτορες χρήστη να παρέχουν τη δυνατότητα να διακόπτεται η αυτόματη ανακατεύθυνση, μην χρησιμοποιείτε σήμανση για αυτόματη ανακατεύθυνση των σελίδων. Αντί για αυτό, διαμορφώστε το διακομιστή ώστε να πραγματοποιεί ανακατευθύνσεις. [Προτεραιότητα 2] .
Αυτό το στοιχείο μπορεί να καθορίσει μεταδεδομένα για ένα έγγραφο, συμπεριλαμβανομένων λέξεων-κλειδιών και πληροφορίες για το συντάκτη. Ανατρέξτε στην ενότητα για την αυτόματη ανανέωση σελίδων (automatic page refresh) για να ενημερωθείτε σχετικά με το λόγο για τον οποίον το στοιχείο META δεν θα πρέπει να χρησιμοποιείται για ανακατεύθυνση ή αυτόματη ανανέωση σελίδων.
Ακολουθούν μη συνιστώμενα παραδείγματα HTML. Το πρώτο αλλάζει τη σελίδα του χρήστη σε τακτά διαστήματα. Οι υπεύθυνοι ανάπτυξης περιεχόμενου δεν θα πρέπει να χρησιμοποιούν αυτή την τεχνική για να προσομοιώσουν την τεχνολογία προώθησης (push). Οι υπεύθυνοι ανάπτυξης δεν μπορούν να προβλέψουν πόσο χρόνο χρειάζεται ένας χρήστης για να διαβάσει μια σελίδα. Η πρόωρη ανανέωση μπορεί να αποπροσανατολίσει τους χρήστες. Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να αποφεύγουν την περιοδική ανανέωση και να επιτρέπουν στους χρήστες να επιλέγουν πότε επιθυμούν τις τελευταίες πληροφορίες.
Μη συνιστώμενο παράδειγμα.
<META http-equiv="refresh" content="60">
<BODY>
<P>...Information...
</BODY>
Τέλος του παραδείγματος.
Το ακόλουθο παράδειγμα HTML (χρησιμοποιώντας το στοιχείο META) προωθεί το χρήστη από μία σελίδα σε μια άλλη μετά το τέλος του διαθέσιμου χρόνου. Ωστόσο, οι χρήστες δεν θα πρέπει να ανακατευθύνουν τους χρήστες με αυτή τη σήμανση, καθώς δεν είναι τυποποιημένη, αποπροσανατολίζει τους χρήστες και μπορεί να αποδιοργανώσει το ιστορικό του πλοηγού σχετικά με τις σελίδες που έχει επισκεφθεί.
Μη συνιστώμενο παράδειγμα.
<HEAD>
<TITLE>Don't use this!</TITLE>
<META http-equiv="refresh" content="5;
http://www.example.com/newpage">
</HEAD>
<BODY>
<P>If your browser supports Refresh,
you'll be transported to our
<A href="http://www.example.com/newpage">new site</A>
in 5 seconds, otherwise, select the link manually.
</BODY>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 3.2 Δημιουργήστε έγγραφα τα οποία επικυρώνονται έναντι των δημοσιευμένων, επίσημων γραμματικών. [Προτεραιότητα 2]
Η επικύρωση έναντι μιας δημοσιευμένης επίσημης γραμματικής και η δήλωση αυτής της επικύρωσης στην αρχή ενός εγγράφου επιτρέπει στο χρήστη να γνωρίζει ότι η δομή του εγγράφου είναι έγκυρη. Επίσης, ο πράκτορας χρήστη γνωρίζει πού θα πρέπει να αναζητήσει σημασιολογία, αν χρειαστεί. Η Υπηρεσία Επικύρωσης του W3C (The W3C Validation Service) επικυρώνει έγγραφα έναντι μιας ολόκληρης λίστας δημοσιευμένων γραμματικών (whole list of published grammars).
Είναι προτιμότερη η επικύρωση έναντι των γραμματικών του W3C. Ανατρέξτε στις τεχνολογίες που έχουν εξεταστεί σχετικά με την προσβασιμότητα (Technologies Reviewed for Accessibility).
1.1.5 Το στοιχείο LINK και τα εργαλεία πλοήγησης
Σημεία ελέγχου σε αυτή την ενότητα:
- 13.9 Παρέχετε πληροφορίες σχετικά με συλλογές εγγράφων (έγγραφα που αποτελούνται από πολλές σελίδες). [Προτεραιότητα 3]
Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να χρησιμοποιούν το στοιχείο και τους τύπους συνδέσμου LINK (LINK) (ανατρέξτε στο [HTML4], ενότητα 6.12) για να περιγράψετε τους μηχανισμούς και την οργάνωση της πλοήγησης. Ορισμένοι χρήστες ίσως συνθέσουν εργαλεία πλοήγησης ή επιτρέπουν την εκτύπωση ενός συνόλου εγγράφων κατόπιν εντολής, βάσει μιας τέτοιας σήμανσης.
Παράδειγμα.
Τα ακόλουθα στοιχεία LINK θα μπορούσαν να περιλαμβάνονται στην κεφαλίδα του κεφαλαίου 2 ενός βιβλίου:
<LINK rel="Next" href="chapter3">
<LINK rel="Prev" href="chapter1">
<LINK rel="Start" href="cover">
<LINK rel="Glossary" href="glossary">
Τέλος του παραδείγματος.
1.1.6 Το στοιχείο LINK και εναλλακτικά έγγραφα
Σημεία ελέγχου σε αυτή την ενότητα:
- 6.5 Βεβαιωθείτε ότι το δυναμικό περιεχόμενο είναι προσβάσιμο ή παρέχετε μια εναλλακτική παρουσίαση ή σελίδα. [Προτεραιότητα 2]
Το στοιχείο LINK μπορεί επίσης να χρησιμοποιηθεί για να καθοριστούν εναλλακτικά έγγραφα. Οι πλοηγοί πρέπει να φορτώνουν αυτόματα την εναλλακτική σελίδα βάσει του τύπου του πλοηγού και των προτιμήσεων που έχουν οριστεί. Για παράδειγμα, χρησιμοποιήστε το στοιχείο LINK ως εξής:
Παράδειγμα.
Οι πράκτορες χρήστη που υποστηρίζουν το LINK θα φορτώσουν την εναλλακτική σελίδα για εκείνους τους χρήστες, των οποίων οι πλοηγοί αναγνωρίζεται ότι υποστηρίζουν απόδοση "aural","braille" ή "tty".
<HEAD>
<TITLE>Welcome to the Virtual Mall!</TITLE>
<LINK title="Text-only version"
rel="alternate"
href="text_only"
media="aural, braille, tty">
</HEAD>
<BODY><P>...</BODY>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 12.3 Χωρίστε μεγάλα τμήματα πληροφοριών σε ομάδες για καλύτερη διαχείριση, όπου αυτό είναι φυσικό και κατάλληλο. [Προτεραιότητα 2]
Οι ακόλουθοι μηχανισμοί HTML 4.01 ομαδοποιούν το περιεχόμενο και καθιστούν πιο εύκολη την κατανόησή του:
Όλοι αυτοί οι μηχανισμοί ομαδοποίησης θα πρέπει να χρησιμοποιούνται στην κατάλληλη περίσταση και εφόσον προκύπτει φυσικά, δηλαδή όταν οι πληροφορίες προσφέρονται για ταξινόμηση σε λογικές ομάδες. Οι υπεύθυνοι ανάπτυξης περιεχομένου δεν θα πρέπει να δημιουργούν ομάδες τυχαία, καθώς κάτι τέτοιο θα προξενήσει σύγχυση σε όλους τους χρήστες.
1.2.1
Σημεία ελέγχου σε αυτή την ενότητα:
- 3.5 Χρησιμοποιείτε στοιχεία κεφαλίδας για να μεταφέρετε τη δομή του εγγράφου και χρησιμοποιείτε τα σύμφωνα με τις προδιαγραφές. [Προτεραιότητα 2]
Τα εκτενή έγγραφα συχνά χωρίζονται σε διάφορα κεφάλαια, τα κεφάλαια έχουν δευτερεύοντα θέματα και τα δευτερεύοντα θέματα χωρίζονται σε διάφορες ενότητες, οι ενότητες σε παραγράφους κτλ. Αυτά τα σημασιολογικά κομμάτια πληροφοριών σχηματίζουν τη δομή του εγγράφου.
Οι ενότητες θα πρέπει να ξεκινούν με τα στοιχεία επικεφαλίδας HTML (H1-H6). Άλλη σήμανση μπορεί να συμπληρώνει αυτά τα στοιχεία για να βελτιώσει την παρουσίαση (π.χ. το στοιχείο HR) για δημιουργία μιας οριζόντιας διαχωριστικής γραμμής ), ωστόσο η οπτική παρουσίαση δεν επαρκεί για τον προσδιορισμό των ενοτήτων του εγγράφου.
Καθώς ορισμένοι χρήστες διαβάζουν στα γρήγορα ένα έγγραφο με περιήγηση στις επικεφαλίδες του, σημαντικό είναι οι επικεφαλίδες να χρησιμοποιούνται καταλλήλως, ώστε να μεταφέρεται η δομή του εγγράφου. Οι χρήστες θα πρέπει να ταξινομούν κατάλληλα τα στοιχεία επικεφαλίδας. Για παράδειγμα, στην HTML, τα στοιχεία H2 θα πρέπει να έπονται των στοιχείων H1, τα στοιχεία H3 να έπονται των στοιχείων H2 κτλ. Οι υπεύθυνοι ανάπτυξης περιεχομένου δεν θα πρέπει να "παρακάμπτουν" επίπεδα (π.χ. από το H1 απευθείας στο H3). Για παράδειγμα, μην χρησιμοποιείτε επικεφαλίδες για να δημιουργήσετε εφέ γραμματοσειράς, χρησιμοποιήστε φύλλα στυλ για να αλλάξετε τα στυλ γραμματοσειράς (style sheets to change font styles).
Σημειώστε ότι στην HTML, τα στοιχεία κεφαλίδας (H1 - H6) ξεκινούν μόνο ενότητες, δεν τις περιέχουν ως περιεχόμενο στοιχείου. Η ακόλουθη επισημείωση HTML δείχνει πώς μπορούν να χρησιμοποιούνται τα φύλλα στυλ για να ελέγχεται η εμφάνιση μιας επικεφαλίδας και του περιεχομένου που ακολουθεί:
<HEAD>
<TITLE>Cooking techniques</TITLE>
<STYLE type="text/css">
/* Indent heading and following content */
DIV.section2 { margin-left: 5% }
</STYLE>
</HEAD>
<BODY>
<H1>Cooking techniques</H1>
... some text here ...
<DIV class="section2">
<H2>Cooking with oil</H2>
... text of the section ...
</DIV>
<DIV class="section2">
<H2>Cooking with butter</H2>
... text of the section ...
</DIV>
Τέλος του παραδείγματος.
Δείτε επίσης την ενότητα σχετικά με τους συνδέσμους (See also the section on links).
Σημεία ελέγχου σε αυτή την ενότητα:
- 4.1 Προσδιορίστε με σαφήνεια αλλαγές στη φυσική γλώσσα του κειμένου ενός εγγράφου και σε τυχόν ισοδύναμα κειμένου (π.χ. λεζάντες). [Προτεραιότητα 1]
Αν χρησιμοποιείτε διαφορετικές γλώσσες σε μια σελίδα, βεβαιωθείτε ότι τυχόν αλλαγές στη γλώσσα προσδιορίζονται σαφώς μέσω της παραμέτρου "lang".
Παράδειγμα.
<P>And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>,
she entered both the room, and his life, forever. <Q>My name
is Natasha,</Q> she said. <Q lang="it">Piacere,</Q>
he replied in impeccable Italian, locking the door.
Τέλος του παραδείγματος.
Ο προσδιορισμός των αλλαγών της γλώσσας είναι σημαντικός για διάφορους λόγους:
- Οι χρήστες που διαβάζουν το έγγραφο σε braille θα μπορούν να αντικαθιστούν τους κατάλληλους κώδικες ελέγχου (σήμανση), όπου συμβαίνουν οι αλλαγές της γλώσσας, για να διασφαλίσουν ότι το λογισμικό μετάφρασης braille θα δημιουργήσει τους σωστούς χαρακτήρες (π.χ. τονισμένους χαρακτήρες). Αυτοί οι κώδικες ελέγχου αποτρέπουν επίσης τη δημιουργία συντμήσεων στο σύστημα braille, οι οποίες θα μπορούσαν να προξενήσουν ακόμη μεγαλύτερη σύγχυση στο χρήστη. Οι συντμήσεις braille συνδυάζουν κάποιες κοινώς χρησιμοποιούμενες ομάδες χαρακτήρων, οι οποίες εμφανίζονται συνήθως σε πολλά κελιά. Για παράδειγμα, η ομάδα χαρακτήρων "ing", η οποία καταλαμβάνει έως και τρία κελιά (ένα για κάθε χαρακτήρα), μπορεί να συντμηθεί σε ένα κελί.
- Παρομοίως, τα προγράμματα σύνθεσης φωνής, τα οποία "ομιλούν" πολλές γλώσσες, θα μπορούν να δημιουργήσουν το κείμενο στην κατάλληλη προφορά. Αν οι αλλαγές δεν σημανθούν, το πρόγραμμα σύνθεσης ομιλίας θα καταβάλει κάθε προσπάθεια να προφέρει τις λέξεις στην κύρια γλώσσα στην οποία εργάζεται. Έτσι, η γαλλική λέξη "voiture" (αυτοκίνητο) θα προφερθεί ως "voter" από ένα πρόγραμμα σύνθεσης ομιλίας που χρησιμοποιεί ως κύρια γλώσσα την Αγγλική.
- Οι χρήστες που δεν μπορούν να μεταφράζουν οι ίδιοι, θα μπορούν να έχουν μεταφράσεις για τις γλώσσες που δεν γνωρίζουν από προγράμματα μηχανικής μετάφρασης.
Σημεία ελέγχου σε αυτή την ενότητα:
- 4.3 Προσδιορίστε την κύρια φυσική γλώσσα των εγγράφων. [Προτεραιότητα 3]
Μια καλή πρακτική είναι επίσης η αναγνώριση της κύριας γλώσσας ενός εγγράφου, είτε με σήμανση (βλ. παρακάτω) είτε μέσω κεφαλίδων HTTP.
Παράδειγμα.
<HTML lang="fr">
....rest of an HTML document written in French...
</HTML>
Τέλος του παραδείγματος.
Στις παρακάτω ενότητες αναλύονται οι τρόποι με τους οποίους προστίθεται δομή σε τμήματα κειμένου.
Σημεία ελέγχου σε αυτή την ενότητα:
- 3.3 Χρησιμοποιείτε φύλλα στυλ για να ελέγχετε τη διάταξη και την παρουσίαση. [Προτεραιότητα 2]
Για τη σήμανση της έμφασης θα πρέπει να χρησιμοποιούνται τα κατάλληλα στοιχεία HTML: EM και STRONG. Τα στοιχεία B και I δεν θα πρέπει να χρησιμοποιούνται, καθώς χρησιμοποιούνται για τη δημιουργία οπτικών εφέ παρουσίασης. Τα στοιχεία EM και STRONG έχουν σχεδιαστεί για να δηλώνουν δομική έμφαση που μπορεί να αποδοθεί με ποικίλλους τρόπους (αλλαγές στυλ γραμματοσειράς, αλλαγές στη διακύμανση της ομιλίας κτλ.)
Σημεία ελέγχου σε αυτή την ενότητα:
- 4.2 Καθορίστε την εκτεταμένη μορφή κάθε σύντμησης ή ακρωνύμου σε ένα έγγραφο, όταν παρουσιάζεται για πρώτη φορά. [Προτεραιότητα 3]
Σημάνετε τις συντμήσεις και τα ακρώνυμα με τα στοιχεία ABBR και ACRONYM και χρησιμοποιήστε την παράμετρο "title" για να δηλώσετε την εκτεταμένη μορφή:
Παράδειγμα.
<P>Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM>!
Τέλος του παραδείγματος.
Αυτό ισχύει επίσης για συντομευμένες φράσεις που χρησιμοποιούνται ως επικεφαλίδες για σειρές ή στήλες πινάκων. Αν η επικεφαλίδα είναι ήδη συντετμημένη, παρέχετε την εκτεταμένη μορφή με το στοιχείο ABBR. Αν η επικεφαλίδα είναι εκτενής, ενδεχομένως να θέλετε να παρέχετε μια σύντμηση, όπως περιγράφεται στην ενότητα "Πίνακες δεδομένων" (Data Tables).
Παράδειγμα.
...
<TH>First name</TH>
<TH><ABBR title="Social Security Number">SS#</ABBR>
...
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 3.7 Σημάνετε τα παραθέματα. Μην χρησιμοποιείτε σήμανση παραθέματος για εφέ μορφοποίησης, όπως εσοχές. [Προτεραιότητα 2]
Τα στοιχεία Q και BLOCKQUOTE σημαίνουν ενσωματωμένα παραθέματα και μεγάλα παραθέματα ως ξεχωριστό τμήμα κειμένου αντίστοιχα.
Παράδειγμα.
Σε αυτό το παράδειγμα σημαίνεται ένα εκτενέστερο παράθεμα με το στοιχείο BLOCKQUOTE:
<BLOCKQUOTE cite="http://www.example.com/loveslabourlost">
<P>Remuneration! O! that's the Latin word for three farthings.
--- William Shakespeare (Love's Labor Lost).
</P>
</BLOCKQUOTE>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 3.1 Όταν υπάρχει κατάλληλη γλώσσα σήμανσης, χρησιμοποιήστε σήμανση και όχι εικόνες για τη μεταφορά πληροφοριών. [Προτεραιότητα 2]
Η χρήση σήμανσης (και φύλλων στυλ) αντί για εικόνες (π.χ. μια μαθηματική εξίσωση), όπου είναι δυνατόν, προάγει την προσβασιμότητα για τους εξής λόγους:
- Το κείμενο μπορεί να μεγεθυνθεί ή να ερμηνευτεί ως ομιλία ή μπράιγ.
- Οι μηχανές αναζήτησης μπορούν να χρησιμοποιήσουν τις πληροφορίες του κειμένου.
Ως παράδειγμα, σκεφτείτε αυτές τις τεχνικές για την παρουσίαση μαθηματικών στον Ιστό:
- Βεβαιωθείτε ότι οι χρήστες γνωρίζουν τι αντιπροσωπεύουν οι μεταβλητές, για παράδειγμα στην εξίσωση "F = m * a", δηλώνεται ότι F= Δύναμη, m = μάζα, a = επιτάχυνση.
- Για απλές εξισώσεις, χρησιμοποιήστε χαρακτήρες όπως σε αυτό το παράδειγμα "x + y = z"
- Τις πιο σύνθετες εξισώσεις σημάνετέ τις με MathML ([MATHML]) ή TeX. Σημείωση. Η MathML μπορεί να χρησιμοποιηθεί για τη δημιουργία ιδιαίτερα προσβάσιμων εγγράφων, ωστόσο επί του παρόντος δεν υποστηρίζεται ή δεν χρησιμοποιείται ευρέως όπως η TeX.
- Παρέχετε μια περιγραφή κειμένου της εξίσωσης και, όπου είναι δυνατόν, χρησιμοποιήστε αναφορές χαρακτήρων για να δημιουργήσετε τα μαθηματικά σύμβολα. Αν η εξίσωση αναπαρίσταται από μία ή περισσότερες εικόνες, πρέπει να παρέχετε ένα ισοδύναμο κειμένου.
Η γλώσσα TeX χρησιμοποιείται συνήθως για τη δημιουργία τεχνικών εγγράφων, τα οποία στη συνέχεια μετατρέπονται σε HTML προκειμένου να δημοσιευτούν στον Ιστό. Ωστόσο, τα προγράμματα μετατροπής συνήθως δημιουργούν εικόνες, χρησιμοποιούν σήμανση που έχει αντικατασταθεί καθώς και πίνακες για τη διάταξη. Συνεπώς, οι πάροχοι περιεχομένου θα πρέπει να:
- Καταστήσουν το αρχικό έγγραφο TeX (ή LaTeX) διαθέσιμο στον Ιστό. Υπάρχει ένα σύστημα που ονομάζεται "AsTeR" ([ASTER]), το οποίο μπορεί να δημιουργεί ηχητική απόδοση των εγγράφων TeX και LaTeX. Επίσης, η IBM έχει μια πρόσθετη εφαρμογή για τοNetscape και το Internet Explorer, η οποία διαβάζει έγγραφα TeX/LaTeX και κάποια έγγραφα MathML (ανατρέξτε στο [HYPERMEDIA]). Σημείωση. Αυτά τα εργαλεία εργάζονται κυρίως σε αγγλικά περιβάλλοντα και ενδεχομένως να μην συνεργάζονται τόσο καλά με προγράμματα σύνθεσης ομιλίας με κύρια γλώσσα άλλη από την Αγγλική.
- Βεβαιωθείτε ότι η HTML που δημιουργήθηκε από τη μετατροπή είναι προσβάσιμη. Παρέχετε μία περιγραφή της εξίσωσης (αντί για κείμενο "alt" σε κάθε δημιουργούμενη εικόνα, καθώς μπορεί να υπάρχουν μικρότερες εικόνες για κάποια μικρά τμήματα της εξίσωσης).
Οι προδιαγραφές HTML 4.01 καθορίζουν τα ακόλουθα δομικά στοιχεία για διάφορες ανάγκες σήμανσης:
- CITE
- Περιέχει μια παράθεση ή αναφορά σε άλλες προελεύσεις.
- DFN
- Δηλώνει ότι πρόκειται για το ορίζον στιγμιότυπο ενός εσωκλειόμενου όρου.
- CODE
- Καθορίζει ένα τμήμα κώδικα υπολογιστή.
- SAMP
- Καθορίζει την έξοδο του δείγματος από προγράμματα, αρχεία εντολών κτλ.
- KBD
- Δηλώνει κείμενο προς απόδοση από το χρήστη.
- VAR
- Δηλώνει ένα στιγμιότυπο του ορίσματος μιας μεταβλητής ή ενός προγράμματος.
- INS
- Δηλώνει κείμενο που έχει εισαχθεί σε ένα έγγραφο.
- DEL
- Δηλώνει κείμενο που έχει διαγραφεί από ένα έγγραφο.
Σημεία ελέγχου σε αυτή την ενότητα:
- 3.6 Σημάνετε σωστά τις λίστες και τα στοιχεία λιστών. [Προτεραιότητα 2]
Τα στοιχεία λίστας HTML DL, UL και OL θα πρέπει να χρησιμοποιούνται μόνο για τη δημιουργία λιστών και όχι για εφέ μορφοποίησης όπως η δημιουργία εσοχών. Ανατρέξτε στις πληροφορίες σχετικά με την CSS και τους πίνακες για διάταξη (CSS and tables for layout) στις τεχνικές CSS [WCAG10-CSS-TECHNIQUES].
Οι ταξινομημένες λίστες βοηθούν στην πλοήγηση των μη οπτικών χρηστών Οι μη οπτικοί χρήστες ενδεχομένως να "χαθούν" στις λίστες, ιδίως σε ένθετες λίστες και σε εκείνες που δεν δηλώνουν το συγκεκριμένο επίπεδο ένθεσης για κάθε στοιχείο της λίστας. Έως ότου οι πράκτορες χρήστη να παρέχουν ένα μέσον να προσδιορίζεται σαφώς το περιβάλλον της λίστας (π.χ. υποστηρίζοντας το ψευδοστοιχείο ':before' στην CSS2), οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να περιλαμβάνουν ενδείξεις περιβάλλοντος στις λίστες τους.
Για αριθμημένες λίστες, οι σύνθετοι αριθμοί είναι πιο κατατοπιστικοί από τους απλούς αριθμούς. Έτσι, μια λίστα με την αρίθμηση "1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1," παρέχει περισσότερο περιβάλλον από την ίδια λίστα χωρίς σύνθετους αριθμούς, η οποία μπορεί να μορφοποιηθεί ως εξής:
1.
1.
2.
1.
3.
2.
1.
και θα εκφωνηθεί ως "1, 1, 2, 1, 2, 3, 2, 1", χωρίς να μεταφέρει καμία πληροφορία για το βάθος της λίστας.
Η [CSS1] και [CSS2] επιτρέπουν στους χρήστες να ελέγχουν τα στυλ αρίθμησης (για όλες τις λίστες, όχι μόνο για τις ταξινομημένες) μέσω των φύλλων στυλ χρήστη.
Παράδειγμα.
Το παρακάτω φύλλο στυλ CSS2 δείχνει πώς να καθορίζονται σύνθετοι αριθμοί για ένθετες λίστες που δημιουργούνται με τα στοιχεία UL ή OL. Τα στοιχεία αριθμούνται ως "1", "1.1", "1.1.1" κτλ.
<STYLE type="text/css">
UL, OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>
Τέλος του παραδείγματος.
Έως ότου να υποστηρίζεται ευρέως η CSS2 από τους πράκτορες χρήστη ή έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες να ελέγχουν την απόδοση των λιστών μέσω άλλων μέσων, οι συντάκτες πρέπει να εξετάζουν το ενδεχόμενο να παρέχουν ενδείξεις περιβάλλοντος σε μη αριθμημένες ένθετες λίστες. Χρήστες με προβλήματα όρασης ενδεχομένως να αντιμετωπίσουν δυσκολίες στο να διακρίνουν πού αρχίζει και πού τελειώνει μια λίστα και που ξεκινάει κάθε στοιχείο της λίστας. Για παράδειγμα, αν μια εγγραφή λίστας αναδιπλώνεται στην επόμενη γραμμή στην οθόνη, ενδεχομένως να εμφανίζεται ως δύο ξεχωριστά στοιχεία στη λίστα. Αυτό μπορεί να δημιουργεί πρόβλημα για προϋπάρχοντες αναγνώστες οθόνης.
Για να αλλάξετε το στυλ των κουκκίδων των μη ταξινομημένων στοιχείων λίστας που δημιουργήσατε με το στοιχείο LI, χρησιμοποιήστε φύλλα στυλ. Στην CSS, μπορείτε να καθορίσετε ένα προσωρινό στυλ κουκκίδας (π.χ., 'disc'), αν δεν είναι δυνατή η φόρτωση μιας εικόνας κουκκίδας.
Παράδειγμα.
<HEAD>
<TITLE>Using style sheets to change bullets</TITLE>
<STYLE type="text/css">
UL { list-style: url(star.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Audrey
<LI>Laurie
<LI>Alice
</UL>
Τέλος του παραδείγματος.
Για να διασφαλιστεί περαιτέρω ότι οι χρήστες κατανοούν τις διαφορές μεταξύ των στοιχείων λίστας που δηλώνονται οπτικά, οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να παρέχουν μια ετικέτα κειμένου πριν ή μετά από τη φράση του στοιχείου λίστας:
Παράδειγμα.
Σε αυτό το παράδειγμα, οι νέες πληροφορίες μεταφέρονται μέσω του κειμένου ("New"), του στυλ γραμματοσειράς (έντονη γραφή) και του χρώματος (κίτρινη κουκκίδα, κόκκινο κείμενο σε κίτρινο φόντο)
<HEAD>
<TITLE>Bullet styles example</TITLE>
<STYLE type="text/css">
.newtxt { font-weight: bold;
color: red;
background-color: yellow }
.newbullet { list-style : url(yellow.gif) disc }
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="newbullet">Roth IRA <SPAN class="newtext">New</SPAN></LI>
<LI> 401(k)</LI>
</UL>
</BODY>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογές και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
Αποφύγετε τη χρήση εικόνων ως κουκκίδων σε λίστες ορισμού που δημιουργείτε με τα στοιχεία DL, DT και DD. Αν ωστόσο χρησιμοποιήσετε αυτή τη μέθοδο, βεβαιωθείτε ότι παρέχετε ένα ισοδύναμο κειμένου (text equivalent) για τις εικόνες.
Παράδειγμα που έχει αντικατασταθεί.
<HEAD>
<TITLE>Deprecated example using image in DL lists</TITLE>
</HEAD>
<BODY>
<DL>
<DD><IMG src="star.gif" alt="* ">Audrey
<DD><IMG src="star.gif" alt="* ">Laurie
<DD><IMG src="star.gif" alt="* ">Alice
</DL>
Τέλος του παραδείγματος.
Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να αποφεύγουν στυλ λίστας, όπου οι κουκκίδες παρέχουν πρόσθετες (οπτικές) πληροφορίες. Αν ωστόσο δεν είναι δυνατόν να αποφύγετε κάτι τέτοιο, βεβαιωθείτε ότι παρέχετε ένα κειμενικό ισοδύναμο (text equivalent) στο οποίο θα περιγράφεται η σημασία της κουκκίδας:
Παράδειγμα που έχει αντικατασταθεί.
<DL>
<DD><IMG src="red.gif" alt="New:">Roth IRA</DD>
<DD><IMG src="yellow.gif" alt="Old:">401(k)</DD>
</DL>
Τέλος του παραδείγματος.
Σε αυτή την ενότητα αναλύεται η προσβασιμότητα πινάκων και στοιχείων που μπορούν να εισαχθούν σε ένα στοιχείο TABLE. Αναλύονται δύο είδη πίνακα; πίνακες που χρησιμοποιούνται για την οργάνωση των δεδομένων και πίνακες που χρησιμοποιούνται για τη δημιουργία μιας οπτικής διάταξης της σελίδας.
Οι υπεύθυνοι ανάπτυξης περιεχομένου μπορούν να καταστήσουν τους πίνακες δεδομένων HTML 4.01 περισσότερο προσβάσιμους με διάφορους τρόπους:
- Παρέχοντας συνοπτικές πληροφορίες
- Προσδιορίζοντας τις πληροφορίες στήλης και σειράς
Σημεία ελέγχου σε αυτή την ενότητα:
- 5.5 Παρέχετε περιλήψεις για τους πίνακες. [Προτεραιότητα 3]
- 5.6 Παρέχετε συντμήσεις για τις ετικέτες κεφαλίδας. [Προτεραιότητα 3]
- Παρέχετε μια λεζάντα μέσω του στοιχείου CAPTION. Μια λεζάντα πίνακα περιγράφει τη φύση του πίνακα σε μία έως τρεις προτάσεις. Δύο παραδείγματα:
- "Φλιτζάνια καφέ που κατανάλωσε ο κάθε γερουσιαστής."
- "Ποιος ξοδεύει περισσότερα για την απορρύπανση;"
Η λεζάντα ενδέχεται να μην χρειάζεται πάντα.
- Αν δεν παρέχεται CAPTION, χρησιμοποιήστε την παράμετρο "title" στο στοιχείο TABLE για να περιγράψετε τη φύση του πίνακα με λίγες λέξεις.
- Παρέχετε μια σύνοψη μέσω της παραμέτρου "summary". Οι συνόψεις είναι χρήσιμες ιδιαίτερα για τους μη οπτικούς αναγνώστες. Μια σύνοψη των σχέσεων μεταξύ των κελιών είναι ιδιαίτερα σημαντική για πίνακες με ένθετες επικεφαλίδες, κελιά που εκτείνονται σε πολλαπλές στήλες ή σειρές, ή άλλων σχέσεων που ίσως να μην είναι προφανείς από την ανάλυση της δομής του πίνακα, οι οποίες ωστόσο ενδέχεται να είναι εμφανείς σε μια οπτική απόδοσή του. Η σύνοψη μπορεί επίσης να περιγράφει πώς ταιριάζει ο πίνακας με το περιβάλλον του τρέχοντος εγγράφου. Αν δεν παρέχεται λεζάντα, η παροχή μιας σύνοψης έχει ακόμη μεγαλύτερη σημασία. Δύο παραδείγματα:
- "Αυτός ο πίνακας δείχνει τον αριθμό των φλιτζανιών που κατανάλωσε κάθε γερουσιαστής, τον τύπο του καφέ (χωρίς καφεΐνη ή κανονικός) και αν προστέθηκε ζάχαρη."
- "Σύνολο απαιτούμενο από τα πρότυπα ελέγχου της ρύπανσης κατά την 1η Ιανουαρίου 1971. Η εμπορική κατηγορία περιλαμβάνει καταστήματα, ασφαλιστικές εταιρείες και τράπεζες. Ο πίνακας χωρίζεται σε δύο στήλες. Η αριστερή στήλη έχει τίτλο 'Σύνολο απαιτούμενων επενδύσεων σε δισεκατομμύρια δολάρια'. Η δεξιά στήλη έχει τίτλο 'Δαπάνες' και χωρίζεται σε τρεις δευτερεύουσες στήλες. Η πρώτη δευτερεύουσα στήλη έχει τίτλο '1970, πραγματική τιμή σε εκατομμύρια δολάρια', η δεύτερη '1971, '1971, βάσει σχεδιασμού σε εκατομμύρια δολάρια' και η τρίτη 'Ποσοστιαία μεταβολή 1970 έναντι 1971.' Οι σειρές είναι οι βιομηχανικοί κλάδοι." [NBA, 1996].
- Παρέχετε λακωνικά υποκατάστατα για τις ετικέτες κεφαλίδας με την παράμετρο "abbr" στο TH. Αυτά θα είναι ιδιαίτερα χρήσιμα για μελλοντικές ομιλούσες τεχνολογίες που θα μπορούν να διαβάζουν ετικέτες σειράς και στήλης για κάθε κελί. Οι συντμήσεις μειώνουν τις επαναλήψεις και το χρόνο ανάγνωσης.
Σημεία ελέγχου σε αυτή την ενότητα:
- 5.1 Για πίνακες δεδομένων, προσδιορίστε κεφαλίδες στηλών και σειρών. [Προτεραιότητα 1]
- 5.2 Για πίνακες δεδομένων που έχουν δύο ή περισσότερα επίπεδα κεφαλίδων στήλης ή σειράς, χρησιμοποιήστε σήμανση για το συσχετισμό κελιών δεδομένων και κελιών κεφαλίδων. [Προτεραιότητα 1]
- Προσδιορίστε δομικές ομάδες σειρών (THEAD για επαναλαμβανόμενες κεφαλίδες πίνακα, TFOOT για επαναλαμβανόμενα υποσέλιδα καιTBODY για άλλες ομάδες σειρών) και ομάδες στηλών (COLGROUP και COL).
- Προσθέστε ετικέτες στα στοιχεία πίνακα με τις παραμέτρους "scope", "headers" και "axis", ώστε οι μελλοντικοί περιηγητές και υποστηρικτικές τεχνολογίες να μπορούν να επιλέγουν δεδομένα από έναν πίνακα φιλτράροντας τις κατηγορίες.
- Μην χρησιμοποιείτε το στοιχείο PRE για να δημιουργήσετε διάταξη σε μορφή πίνακα στο κείμενο -- χρησιμοποιείτε το στοιχείο TABLE κατά τέτοιον τρόπο, ώστε οι υποστηρικτικές τεχνολογίες να μπορούν να αναγνωρίζουν ότι πρόκειται για πίνακα.
- Για πληροφορίες σχετικά με τις κεφαλίδες πίνακα, ανατρέξτε στον αλγόριθμο κεφαλίδας πίνακα και στη σχετική ανάλυση στη σύσταση HTML 4.01 ([HTML4], ενότητα 11.4.3).
Παράδειγμα.
Αυτό το παράδειγμα δείχνει πώς συσχετίζονται τα κελιά δεδομένων (που έχουν δημιουργηθεί με το στοιχείο TD) με τις αντίστοιχες κεφαλίδες μέσω της παραμέτρου "headers". Η παράμετρος "headers" καθορίζει μια λίστα κελιών κεφαλίδας (ετικέτες σειράς και στήλης) που σχετίζονται με το τρέχον κελί δεδομένων. Αυτό απαιτεί να έχει οριστεί μια παράμετρος "id" σε κάθε κελί κεφαλίδας.
<TABLE border="1"
summary="This table charts the number of
cups of coffee consumed by each senator,
the type of coffee (decaf or regular),
and whether taken with sugar.">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH id="header1">Name</TH>
<TH id="header2">Cups</TH>
<TH id="header3" abbr="Type">Type of Coffee</TH>
<TH id="header4">Sugar?</TH>
<TR>
<TD headers="header1">T. Sexton</TD>
<TD headers="header2">10</TD>
<TD headers="header3">Espresso</TD>
<TD headers="header4">No</TD>
<TR>
<TD headers="header1">J. Dinnen</TD>
<TD headers="header2">5</TD>
<TD headers="header3">Decaf</TD>
<TD headers="header4">Yes</TD>
</TABLE>
Τέλος του παραδείγματος.
Ένα πρόγραμμα σύνθεσης ομιλίας μπορεί να αποδώσει αυτό τον πίνακα ως εξής:
Caption: Cups of coffee consumed by each senator
Summary: This table charts the number of cups of coffee
consumed by each senator, the type of coffee
(decaf or regular), and whether taken with sugar.
Name: T. Sexton, Cups: 10, Type: Espresso, Sugar: No
Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes
Ένας οπτικός πράκτορας χρήστη μπορεί να αποδώσει αυτό τον πίνακα ως εξής:
Περιγραφή του πίνακα για τον καφέ (ανοίγει νέο παράθυρο)
Το επόμενο παράδειγμα συσχετίζει την ίδια κεφαλίδα (TH) και τα κελιά δεδομένων (TD) όπως πριν, ωστόσο αυτή τη φορά χρησιμοποιεί την παράμετρο "scope" αντί για την παράμετρο "headers". Η παράμετρος "scope" πρέπει να έχει μία από τις ακόλουθες τιμές: "row", "col", "rowgroup" ή "colgroup." Η παράμετρος "scope" καθορίζει το σύνολο των κελιών δεδομένων που θα συσχετιστούν με το τρέχον κελί κεφαλίδας. Αυτή η μέθοδος είναι ιδιαίτερα χρήσιμη για απλούς πίνακες. Πρέπει να σημειωθεί ότι η φωνητική απόδοση αυτού του πίνακα θα είναι η ίδια με εκείνη του προηγούμενου παραδείγματος. Η επιλογή μεταξύ των παραμέτρων "headers" και "scope" εξαρτάται από την περιπλοκότητα του πίνακα. Δεν επηρεάζει τα δεδομένα εξόδου, εφόσον οι σχέσεις μεταξύ των κελιών κεφαλίδας και δεδομένων γίνονται σαφείς στη σήμανση.
Παράδειγμα.
<TABLE border="1"
summary="This table charts ...">
<CAPTION>Cups of coffee consumed by each senator</CAPTION>
<TR>
<TH scope="col">Name</TH>
<TH scope="col">Cups</TH>
<TH scope="col" abbr="Type">Type of Coffee</TH>
<TH scope="col">Sugar?</TH>
<TR>
<TD>T. Sexton</TD> <TD>10</TD>
<TD>Espresso</TD> <TD>No</TD>
<TR>
<TD>J. Dinnen</TD> <TD>5</TD>
<TD>Decaf</TD> <TD>Yes</TD>
</TABLE>
Τέλος του παραδείγματος.
Το παρακάτω παράδειγμα δείχνει πώς δημιουργούνται κατηγορίες σε έναν πίνακα με την παράμετρο "axis".
Παράδειγμα.
<TABLE border="1">
<CAPTION>Travel Expense Report</CAPTION>
<TR>
<TH></TH>
<TH id="header2" axis="expenses">Meals
<TH id="header3" axis="expenses">Hotels
<TH id="header4" axis="expenses">Transport
<TD>subtotals</TD>
<TR>
<TH id="header6" axis="location">San Jose
<TH> <TH> <TH> <TD>
<TR>
<TD id="header7" axis="date">25-Aug-97
<TD headers="header6 header7 header2">37.74
<TD headers="header6 header7 header3">112.00
<TD headers="header6 header7 header4">45.00
<TD>
<TR>
<TD id="header8" axis="date">26-Aug-97
<TD headers="header6 header8 header2">27.28
<TD headers="header6 header8 header3">112.00
<TD headers="header6 header8 header4">45.00
<TD>
<TR>
<TD>subtotals
<TD>65.02
<TD>224.00
<TD>90.00
<TD>379.02
<TR>
<TH id="header10" axis="location">Seattle
<TH> <TH> <TH> <TD>
<TR>
<TD id="header11" axis="date">27-Aug-97
<TD headers="header10 header11 header2">96.25
<TD headers="header10 header11 header3">109.00
<TD headers="header10 header11 header4">36.00
<TD>
<TR>
<TD id="header12" axis="date">28-Aug-97
<TD headers="header10 header12 header2">35.00
<TD headers="header10 header12 header3">109.00
<TD headers="header10 header12 header4">36.00
<TD>
<TR>
<TD>subtotals
<TD>131.25
<TD>218.00
<TD>72.00
<TD>421.25
<TR>
<TH>Totals
<TD>196.27
<TD>442.00
<TD>162.00
<TD>800.27
</TABLE>
Τέλος του παραδείγματος.
Αυτός ο πίνακας εμφανίζει έξοδα ταξιδιού σε δύο τοποθεσίες: Στο Σαν Χοσέ και στο Σιάτλ, κατά ημερομηνία και κατηγορία (γεύματα, ξενοδοχεία και μεταφορά). Η ακόλουθη εικόνα δείχνει πώς μπορούν να αποδοθούν από έναν οπτικό πράκτορα χρήστη.Περιγραφή του πίνακα ταξιδιού (ανοίγει νέο παράθυρο).
Σημεία ελέγχου σε αυτή την ενότητα:
- 5.3 Μην χρησιμοποιείτε πίνακες για τη διάταξη εκτός αν ο χρήστης μπορεί να κατανοήσει τον πίνακα όταν γραμμικοποιηθεί. Διαφορετικά, αν ο πίνακας δεν είναι κατανοητός, παρέχετε ένα εναλλακτικό ισοδύναμο (το οποίο μπορεί να είναι μια γραμμικοποιημένη έκδοση). [Προτεραιότητα 2]
- 5.4 Αν ένας πίνακας χρησιμοποιείται για τη διάταξη, μην χρησιμοποιείτε δομική σήμανση για σκοπούς οπτικής μορφοποίησης. [Προτεραιότητα 2]
Οι συντάκτες θα πρέπει να χρησιμοποιούν φύλλα στυλ για τη διάταξη και την τοποθέτηση (layout and positioning). Ωστόσο, όταν είναι απαραίτητη η χρήση ενός πίνακα για τη διάταξη, ο πίνακας πρέπει να γραμμικοποιείται σε μια αναγνώσιμη σειρά. Όταν γραμμικοποιείται ένας πίνακας, τα περιεχόμενα των κελιών γίνονται μια σειρά παραγράφων (π.χ. από πάνω προς τα κάτω στη σελίδα), η μία μετά την άλλη. Τα κελιά θα πρέπει να βγάζουν νόημα όταν διαβάζονται με τη σειρά και θα πρέπει να περιλαμβάνουν δομικά στοιχεία (που δημιουργούν παραγράφους, κεφαλίδες, λίστες κτλ.), ώστε η σελίδα να είναι κατανοητή μετά τη γραμμικοποίηση.
Επίσης, όταν χρησιμοποιείτε πίνακες για τη δημιουργία διάταξης, μην χρησιμοποιείτε δομική σήμανση για να δημιουργήσετε οπτική μορφοποίηση. Για παράδειγμα, το στοιχείο TH (κεφαλίδα πίνακα) συνήθως εμφανίζεται οπτικά στοιχισμένο στο κέντρο και με έντονη γραφή. Αν ένα κελί δεν είναι στην πραγματικότητα κεφαλίδα για μια σειρά ή στήλη δεδομένων, χρησιμοποιήστε φύλλα στυλ ή παραμέτρους μορφοποίησης του στοιχείου.
Σημεία ελέγχου σε αυτή την ενότητα:
- 10.3 Έως ότου οι πράκτορες χρήστη (συμπεριλαμβανομένων των υποστηρικτικών τεχνολογιών) να αποδίδουν σωστά κείμενο που βρίσκεται δίπλα δίπλα, παρέχετε ένα γραμμικό ισοδύναμο κειμένου (στην τρέχουσα σελίδα ή σε κάποια άλλη) για όλους τους πίνακες που διατάσσουν το κείμενο σε παράλληλες στήλες με αναδίπλωση λέξεων. [Προτεραιότητα 3]
Οι πίνακες που χρησιμοποιούνται για τη διάταξη σελίδων, όπου το κείμενο των κελιών αναδιπλώνεται, παρουσιάζουν προβλήματα σε παλαιότερα προγράμματα ανάγνωσης οθόνης που δεν ερμηνεύουν την HTML προέλευσης ή σε περιηγητές που δεν επιτρέπουν την πλοήγηση σε μεμονωμένα κελιά πίνακα. Αυτά τα προγράμματα ανάγνωσης οθόνης θα διαβάσουν κατά μήκος μιας σελίδας, διαβάζοντας τις προτάσεις στην ίδια σειρά από διαφορετικές στήλες ως μία πρόταση.
Για παράδειγμα, αν ένας πίνακας αποδοθεί στην οθόνη ως εξής:
There is a 30% chance of Classes at the University of Wisconsin
rain showers this morning, but they will resume on September 3rd.
should stop before the weekend.
Ενδεχομένως να διαβαστεί από ένα πρόγραμμα ανάγνωσης οθόνης ως εξής:
There is a 30% chance of Classes at the University of Wisconsin
rain showers this morning, but they will resume on September 3rd.
should stop before the weekend.
Συνήθως είναι πολύ απλό να γραμμικοποιηθεί ένας πίνακας που χρησιμοποιείται για τη διάταξη μιας σελίδας - απλώς αφαιρείτε τη σήμανση πίνακα από τον πίνακα. Υπάρχουν διάφορα εργαλεία για αυτόν το σκοπό και η γραμμικοποίηση των πινάκων γίνεται όλο και πιο διαδεδομένη για τα προγράμματα ανάγνωσης οθόνης και ορισμένους περιηγητές.
Ωστόσο, η γραμμικοποίηση πινάκων δεδομένων (data tables) απαιτεί διαφορετική στρατηγική. Καθώς τα κελιά δεδομένων βασίζονται μόνο στις πληροφορίες που παρέχουν τα περιβάλλοντα κελιά και τα κελιά κεφαλίδας, οι πληροφορίες για τις σχέσεις που είναι διαθέσιμες οπτικά πρέπει να μεταφραστούν στον γραμμικό πίνακα.
Για παράδειγμα, καθορίστε τη σειρά διάταξης των στηλών. Η κατεύθυνση της γραφής της φυσικής γλώσσας ενδέχεται να επηρεάσει τη διάταξη των στηλών και συνεπώς και τη διάταξη του γραμμικοποιημένου πίνακα. Η παράμετρος "dir" καθορίζει τη σειρά διάταξης των στηλών (π.χ., το dir="rtl" καθορίζει διάταξη από τα δεξιά προς τα αριστερά).
Αυτή η σήμανση επίσης θα βοηθήσει τους περιηγητές στη γραμμικοποίηση των πινάκων (η άλλη ονομασία της γραμμικοποίησης είναι "σειριοποίηση"). Μια γραμμική μορφή βάσει σειρών μπορεί να δημιουργηθεί διαβάζοντας την κεφαλίδα σειράς και στη συνέχεια βάζοντας πριν από κάθε κελί την κεφαλίδα της στήλης του κελιού. Ή η γραμμικοποίηση μπορεί να βασίζεται στις στήλες. Οι μελλοντικοί περιηγητές και υποστηρικτικές τεχνολογίες θα μπορούν να μεταφράζουν αυτόματα τους πίνακες σε γραμμικές αλληλουχίες ή να πλοηγούνται σε έναν πίνακα κελί προς κελί, εφόσον τα δεδομένα έχουν τις κατάλληλες ετικέτες. Η ομάδα εργασίας Αξιολόγησης και Επισκευής της WAI παρακολουθεί την πρόοδο των εργαλείων και ταυτόχρονα αναπτύσσει τα δικά της εργαλεία, τα οποία θα επιτρέπουν στους χρήστες να γραμμικοποιούν ή να πλοηγούνται σε πίνακες κελί προς κελί. Ανατρέξτε στο [WAI-ER].
Γρήγορος έλεγχος! Για να κατανοήσετε καλύτερα πώς διαβάζει ένα πρόγραμμα ανάγνωσης οθόνης έναν πίνακα, βάλτε ένα φύλλο χαρτί στην οθόνη, σύρτε το από πάνω προς τα κάτω στη σελίδα και διαβάστε τον πίνακα γραμμή προς γραμμή.
Σε περιηγητές HTML 3.2, οι σειρές ενός στοιχείου TFOOT θα εμφανίζονται πριν από το κύριο τμήμα του πίνακα.
Σημεία ελέγχου σε αυτή την ενότητα:
- 13.1 Προσδιορίστε με σαφήνεια τον προορισμό κάθε συνδέσμου. [Προτεραιότητα 2]
Ένα καλό κείμενο συνδέσμου δεν θα πρέπει να είναι υπερβολικά γενικό. Μην χρησιμοποιείτε το κείμενο "κάντε κλικ εδώ". Αυτή η φράση δεν είναι μόνο εξαρτώμενη από συσκευές (καθώς υπονοεί μια συσκευή κατάδειξης), αλλά δεν αναφέρει και τίποτα σχετικά με τον προορισμό του συνδέσμου. Αντί για τη φράση "κάντε κλικ εδώ", το κείμενο του συνδέσμου θα πρέπει να δηλώνει τη φύση του προορισμού του συνδέσμου, όπως π.χ. "περισσότερες πληροφορίες για τους θαλάσσιους λέοντες" ή "η σελίδα σε έκδοση μόνο κειμένου". Να σημειωθεί ότι για την τελευταία περίπτωση (και άλλα έγγραφα που αφορούν τη μορφή ή τη γλώσσα), οι υπεύθυνοι ανάπτυξης περιεχομένου ενθαρρύνονται να χρησιμοποιούν τη διαπραγμάτευση κειμένου (content negotiation), ώστε σε χρήστες που προτιμούν εκδόσεις μόνο κειμένου αυτές να παρουσιάζονται αυτόματα.
Εκτός από ένα σαφές κείμενο συνδέσμου, οι υπεύθυνοι ανάπτυξης περιεχομένου μπορούν να καθορίσουν μια τιμή για την παράμετρο "title", η οποία θα περιγράφει με σαφήνεια και ακρίβεια τον προορισμό του συνδέσμου.
Αν το ίδιο κείμενο συνδέσμου το χρησιμοποιούν περισσότεροι από ένας σύνδεσμοι σε μια σελίδα, όλοι αυτοί οι σύνδεσμοι πρέπει να παραπέμπουν στον ίδιο πόρο. Αυτή η συνέπεια θα βοηθήσει τόσο το σχεδιασμό της σελίδας καθώς και την προσβασιμότητα.
Αν δύο ή περισσότεροι σύνδεσμοι παραπέμπουν σε διαφορετικούς προορισμούς, ωστόσο χρησιμοποιούν το ίδιο κείμενο συνδέσμου, διαχωρίστε τους συνδέσμους καθορίζοντας διαφορετική τιμή για την παράμετρο "title" κάθε στοιχείου A.
"Οι ηχητικοί χρήστες" -- τα άτομα με τύφλωση, τα άτομα που αντιμετωπίζουν προβλήματα όρασης ή τα οποία χρησιμοποιούν συσκευές με μικρή ή και χωρίς οθόνη -- δεν είναι δυνατόν να αναζητήσουν γρήγορα στοιχεία σε μια σελίδα με οπτικό τρόπο. Για να έχουν μια επισκόπηση της σελίδας ή για να εντοπίσουν γρήγορα έναν σύνδεσμο, αυτοί οι χρήστες συχνά θα πλοηγηθούν από τον έναν σύνδεσμο στον άλλο ή θα εξετάσουν μια λίστα με τους διαθέσιμους συνδέσμους σε μια σελίδα.
Συνεπώς, για μια σειρά σχετιζόμενων συνδέσμων, συμπεριλάβετε εισαγωγικές πληροφορίες στον πρώτο σύνδεσμο και στη συνέχεια διαχωρίστε τις πληροφορίες στους συνδέσμους που ακολουθούν. Κατ' αυτό τον τρόπο θα δώσετε πληροφορίες περιβάλλοντος στους χρήστες που διαβάζουν τους συνδέσμους διαδοχικά.
Παράδειγμα.
<A href="my-doc.html">My document is available in HTML</A>,
<A href="my-doc.pdf" title="My document in PDF">PDF</A>,
<A href="my-doc.txt" title="My document in text">plain text</A>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογίδια και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
Όταν μια εικόνα χρησιμοποιείται ως το περιεχόμενο ενός συνδέσμου, καθορίστε ένα κειμενικό ισοδύναμο (text equivalent) για την εικόνα.
Παράδειγμα.
<A href="routes.html">
<IMG src="topo.html"
alt="Current routes at Boulders Climbing Gym">
</A>
Τέλος του παραδείγματος.
Ή, αν παρέχετε κείμενο συνδέσμου, χρησιμοποιήστε ένα διάστημα ως τιμή της παραμέτρου "alt" για το στοιχείο IMG. Σημειώστε ότι αυτό το κείμενο θα εμφανιστεί στη σελίδα δίπλα στην εικόνα.
Παράδειγμα.
<A href="routes.html">
<IMG src="topo.html" alt=" ">
Current routes at Boulders Climbing Gym
</A>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 13.6 Ομαδοποιήστε τους σχετικούς συνδέσμους, προσδιορίστε την ομάδα (για πράκτορες χρήστη) και, έως ότου οι πράκτορες να έχουν αυτή τη δυνατότητα, παρέχετε έναν τρόπο για παράκαμψη της ομάδας. [Προτεραιότητα 3]
- 10.5 Έως ότου οι πράκτορες χρήστη (συμπεριλαμβανομένων των υποστηρικτικών τεχνολογιών) να αποδίδουν τους παρακείμενους συνδέσμους με σαφήνεια, συμπεριλάβετε εκτυπώσιμους χαρακτήρες που δεν αφορούν συνδέσμους (οι οποίοι θα περιβάλλονται από διαστήματα) μεταξύ των παρακείμενων συνδέσμων. [Προτεραιότητα 3]
Όταν οι δεσμοί ομαδοποιούνται σε λογικά σύνολα (για παράδειγμα, σε μια γραμμή πλοήγησης που εμφανίζεται σε κάθε σελίδα μιας τοποθεσίας), πρέπει να σημαίνονται ως μονάδα. Οι γραμμές πλοήγησης συνήθως είναι το πρώτο στοιχείο που συναντά κάποιος σε μια σελίδα. Για τους χρήστες με προγράμματα σύνθεσης ομιλίας, αυτό σημαίνει ότι πρέπει να ακούσουν αρκετούς συνδέσμους σε κάθε σελίδα, πριν φθάσουν στο ενδιαφέρον περιεχόμενο της σελίδας. Υπάρχουν αρκετοί τρόποι για να έχει ο χρήστης τη δυνατότητα να παρακάμπτει ομάδες συνδέσμων (όπως κάνουν οι χρήστες χωρίς προβλήματα όρασης, όταν συναντούν το ίδιο σύνολο σε κάθε σελίδα).
- Συμπεριλάβετε έναν σύνδεσμο, ο οποίος επιτρέπει στους χρήστες να παρακάμπτουν το σύνολο των συνδέσμων πλοήγησης.
- Παρέχετε ένα φύλλο στυλ, το οποίο επιτρέπει στους χρήστες να αποκρύπτουν το σύνολο των συνδέσμων πλοήγησης.
- Χρησιμοποιήστε το σύνολο MAP της HTML 4.01 για ομαδοποίηση των συνδέσμων και στη συνέχεια προσδιορίστε την ομάδα με την παράμετρο "title".
Στο μέλλον, οι πράκτορες χρήστη ενδεχομένως να επιτρέπουν στους χρήστες να παρακάμπτουν στοιχεία όπως οι γραμμές πλοήγησης.
Παράδειγμα.
Σε αυτό το παράδειγμα, το στοιχείο MAP ομαδοποιεί ένα σύνολο συνδέσμων, η παράμετρος "title" το προσδιορίζει ως γραμμή πλοήγησης, και ένας σύνδεσμος στην αρχή της ομάδας συνδέει με την άγκυρα μετά την ομάδα. Επίσης σημειώστε ότι οι σύνδεσμοι διαχωρίζονται από εκτυπώσιμους χαρακτήρες που δεν αφορούν σύνδεσμο (και περιβάλλονται από διαστήματα).
<BODY>
<MAP title="Navigation Bar">
<P>
[<A href="#how">Bypass navigation bar</A>]
[<A href="home.html">Home</A>]
[<A href="search.html">Search</A>]
[<A href="new.html">New and highlighted</A>]
[<A href="sitemap.html">Site map</A>]
</P>
</MAP>
<H1><A name="how">How to use our site</A></H1>
<!-- content of page -->
</BODY>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 9.4 Δημιουργήστε μια λογική σειρά πλοήγησης μέσω συνδέσμων, στοιχείων ελέγχου φορμών και αντικειμένων. [Προτεραιότητα 3]
- 9.5 Παρέχετε συντομεύσεις πληκτρολογίου για σημαντικούς συνδέσμους (συμπεριλαμβανομένων εκείνων σε χάρτες εικόνας από την πλευρά του πελάτη), στοιχεία ελέγχου φορμών και ομάδες στοιχείων ελέγχου φορμών. [Προτεραιότητα 3]
Η πρόσβαση μέσω πληκτρολογίου σε ενεργά στοιχεία μιας σελίδας είναι σημαντική για πολλούς χρήστες που δεν μπορούν να χρησιμοποιήσουν συσκευές κατάδειξης. Οι πράκτορες χρήστη μπορούν να περιλαμβάνουν χαρακτηριστικά, τα οποία επιτρέπουν στους χρήστες να συνδέουν πλήκτρα με συγκεκριμένες ενέργειες. Η HTML 4.01 επιτρέπει στους υπεύθυνους ανάπτυξης περιεχομένου να καθορίζουν συντομεύσεις πληκτρολογίου στα έγγραφα μέσω της παραμέτρου "accesskey".
Παράδειγμα.
Σε αυτό το παράδειγμα, αν ο χρήστης ενεργοποιήσει το πλήκτρο "C", θα ακολουθήσει το σύνδεσμο.
<A accesskey="C" href="doc.html" hreflang="en"
title="XYZ company home page">
XYZ company home page</A>
Τέλος του παραδείγματος.
Σημείωση: Έως ότου οι πράκτορες χρήστη να παρέχουν μια επισκόπηση των διαθέσιμων συνδέσεων πληκτρολογίου, παρέχετε τις σχετικές πληροφορίες.
Σημεία ελέγχου σε αυτή την ενότητα:
- 10.1 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες την απενεργοποίηση δημιουργούμενων παραθύρων, μην προκαλείτε την εμφάνιση αναδυόμενων ή άλλων παραθύρων και μην αλλάζετε το τρέχον παράθυρο χωρίς να ενημερώνεται ο χρήστης. [Προτεραιότητα 2]
Στις παρακάτω ενότητες αναλύεται η προσβασιμότητα των εικόνων (συμπεριλαμβανομένων απλών κινούμενων εικόνων όπως GIF) και των χαρτών εικόνας.
Για πληροφορίες σχετικά με μαθηματικά δεδομένα που αναπαριστώνται ως εικόνες, ανατρέξτε στην ενότητα σχετικά με τη χρήση σήμανσης κειμένου και φύλλων στυλ αντί για εικόνες (using text markup and style sheets rather than images).
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογίδια και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1] .
Όταν χρησιμοποιείτε το στοιχείο IMG, καθορίστε ένα σύντομο κειμενικό ισοδύναμο (text equivalent) με την παράμετρο "alt". Σημείωση. Η τιμή αυτής της παραμέτρου αναφέρεται ως "alt-text".
Παράδειγμα.
<IMG src="magnifyingglass.gif" alt="Search">
Τέλος του παραδείγματος.
Όταν χρησιμοποιείτε το στοιχείο OBJECT, καθορίστε ένα κειμενικό ισοδύναμο (text equivalent) στο κύριο τμήμα του στοιχείου OBJECT:
Παράδειγμα.
<OBJECT data="magnifyingglass.gif" type="image/gif">
Search
</OBJECT>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογές και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
Όταν ένα ισοδύναμο σύντομου κειμένου δεν επαρκεί για να μεταφέρει ικανοποιητικά τη λειτουργία ή το ρόλο μιας εικόνας, παρέχετε πρόσθετες πληροφορίες σε ένα αρχείο που ορίζεται απο την παράμετρο longdesc:
Παράδειγμα.
<IMG src="97sales.gif" alt="Sales for 1997"
longdesc="sales97.html">
Στο sales97.html:
Ένα διάγραμμα που παρουσιάζει την πρόοδο των πωλήσεων το 1997. Πρόκειται για ένα
γράφημα στηλών που παρουσιάζει τις ποσοστιαίες αυξήσεις των πωλήσεων
κατά μήνα. Οι πωλήσεις τον Ιανουάριο παρουσίασαν αύξηση κατά 10% σε σχέση με το Δεκέμβριο του 1996,
ενώ το Φεβρουάριο σημειώθηκε μείωση της τάξης του 3%, ..
Τέλος του παραδείγματος.
Για πράκτορες χρήστη που δεν υποστηρίζουν την παράμετρο "longdesc", παρέχετε επίσης έναν σύνδεσμο περιγραφής (description link) δίπλα στο γραφικό:
Παράδειγμα.
<IMG src="97sales.gif" alt="Sales for 1997" longdesc="sales.html">
<A href="sales.html" title="Description of 1997 sales figures">[D]</A>
Τέλος του παραδείγματος.
Όταν χρησιμοποιείτε το στοιχείο OBJECT, καθορίστε ένα εκτενέστερο κειμενικό ισοδύναμο μέσα στο περιεχόμενο του στοιχείου:
Παράδειγμα.
<OBJECT data="97sales.gif" type="image/gif">
Sales in 1997 were down subsequent to our
<A href="anticipated.html">anticipated
purchase</A> ...
</OBJECT>
Τέλος του παραδείγματος.
Σημειώστε ότι το περιεχόμενο του στοιχείου OBJECT, αντίθετα από το κείμενο "alt", μπορεί να περιλαμβάνει σήμανση. Συνεπώς, οι υπεύθυνοι ανάπτυξης περιεχομένου μπορούν να παρέχουν έναν σύνδεσμο με πρόσθετες πληροφορίες μέσα στο στοιχείο OBJECT:
Παράδειγμα.
<OBJECT data="97sales.gif" type="image/gif">
Chart of our Sales in 1997.
A <A href="desc.html">textual description</A> is available.
</OBJECT>
Τέλος του παραδείγματος.
Σημείωση. Οι αόρατοι d-link έχουν αντικατασταθεί από την παράμετρο "longdesc".
Ένας αόρατος d-link είναι μια μικρή (1-pixel) ή διαφανής εικόνα, της οποίας η παράμετρος "alt" είναι "D-link" ή "D" και είναι μέρος του περιεχομένου ενός στοιχείου A. Όπως τα άλλα d-link, αναφέρεται σε ένα ισοδύναμο κειμένου της σχετιζόμενης εικόνας. Όπως συμβαίνει και με τους άλλους συνδέσμους, οι χρήστες μπορούν να πλοηγηθούν σε αυτόν χρησιμοποιώντας το πλήκτρο tab. Συνεπώς, οι αόρατοι σύνδεσμοι d-link παρέχουν μια (προσωρινή) λύση για τους σχεδιαστές που θέλουν να αποφύγουν τους ορατούς d-link για λόγους στυλ.
Σημεία ελέγχου σε αυτή την ενότητα:
- 13.10 Παρέχετε έναν τρόπο, ώστε να παρακάμπτεται τέχνη ASCII πολλαπλών γραμμών. [Προτεραιότητα 3]
Αποφεύγετε την τέχνη ASCII (εικόνες που σχηματίζονται από χαρακτήρες) και χρησιμοποιείτε πραγματικές εικόνες, καθώς είναι πιο εύκολο να παρέχετε κειμενικά ισοδύναμα (text equivalent) για τις εικόνες. Αν ωστόσο πρέπει να χρησιμοποιήσετε τέχνη ASCII, πρέπει να παρέχετε έναν σύνδεσμο, ώστε να παρακάμπτεται, με τον εξής τρόπο:
Παράδειγμα.
<P>
<a href="#post-art">skip over ASCII art</a>
<!-- ASCII art goes here -->
<a name="post-art">caption for ASCII art</a>
Τέλος του παραδείγματος.
Η τέχνη ASCII μπορεί επίσης να σημανθεί ως εξής [παρακάμψτε την εικόνα ASCII ή ανατρέξτε σε μια περιγραφή του γραφήματος (ανοίγει νέο παράθυρο)]:
Παράδειγμα.
% __ __ __ __ __ __ __ __ __ __ __ __ __ __
100 | * |
90 | * * |
80 | * * |
70 | @ * |
60 | @ * |
50 | * @ * |
40 | @ * |
30 | * @ @ @ * |
20 | |
10 | @ @ @ @ @ |
0 5 10 15 20 25 30 35 40 45 50 55 60 65 70
Συχνότητητα αναλαμπών (Hz)
Τέλος του παραδείγματος.
Μια άλλη επιλογή για μικρότερα κομμάτια τέχνης ascii art είναι η χρήση του στοιχείου ABBR με την παράμετρο "title".
Παράδειγμα.
<P><ABBR title="smiley in ASCII art">:-)</ABBR>
Τέλος του παραδείγματος.
Αν η τέχνη ASCII είναι σύνθετη, βεβαιωθείτε ότι το ισοδύναμο κειμένου την περιγράφει επαρκώς.
Ένας άλλος τρόπος να αντικαταστήσετε την τέχνη ASCII είναι να χρησιμοποιήσετε υποκατάστατα ανθρώπινης γλώσσας. Για παράδειγμα, η φράση <κλείσιμο ματιού> μπορεί να αντικαταστήσει ένα χαμόγελο με κλείσιμο του ματιού: ;-). Ή η λέξη "επομένως" μπορεί να αντικαταστήσει βέλη αποτελούμενα από παύλες και σύμβολα "μεγαλύτερο από" (π.χ. -->), και στα αγγλικά η λέξη "great" μπορεί να αντικαταστήσει τη μη συνηθισμένη σύντμηση "gr8".
Ο χάρτης εικόνας είναι μια εικόνα που περιλαμβάνει "ενεργές περιοχές". Όταν ο χρήστης επιλέξει μία από τις περιοχές, εκτελείται κάποια ενέργεια -- μπορεί να ακολουθηθεί ένας σύνδεσμος, να αποσταλούν πληροφορίες σε έναν διακομιστή κτλ. Για να γίνει προσβάσιμος ένας χάρτης εικόνας, οι υπεύθυνοι ανάπτυξης περιεχομένου πρέπει να διασφαλίσουν ότι κάθε ενέργεια που σχετίζεται με μια οπτική περιοχή μπορεί να ενεργοποιείται χωρίς συσκευή κατάδειξης.
Οι χάρτες εικόνας δημιουργούνται με το στοιχείο MAP. Η HTML επιτρέπει δύο τύπους χαρτών εικόνας: στην πλευρά του πελάτη (ο περιηγητής του χρήστη επεξεργάζεται ένα URI) και στην πλευρά του διακομιστή (ο διακομιστής επεξεργάζεται τις συντεταγμένες του κλικ). Για όλους τους χάρτες εικόνας, οι υπεύθυνοι ανάπτυξης περιεχομένου πρέπει να παρέχουν ένα ισοδύναμο κειμένου (text equivalent).
Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να δημιουργούν χάρτες εικόνας στην πλευρά του πελάτη (με την παράμετρο "usemap") και όχι στην πλευρά του διακομιστή (με την παράμετρο "ismap") επειδή οι χάρτες εικόνας στην πλευρά του διακομιστή απαιτούν συγκεκριμένη συσκευή εισόδου. Αν πρέπει να χρησιμοποιηθούν χάρτες εικόνας στην πλευρά του διακομιστή (π.χ. επειδή η γεωμετρία μιας περιοχής δεν μπορεί να απεικονιστεί με τιμές της παραμέτρου shape), οι συντάκτες πρέπει να παρέχουν την ίδια λειτουργία ή τις ίδιες πληροφορίες σε μια εναλλακτική προσβάσιμη μορφή. Ένας τρόπος για να επιτευχθεί αυτό είναι να παρέχουν έναν σύνδεσμο κειμένου για κάθε ενεργή περιοχή, ώστε κάθε σύνδεσμος να είναι πλοηγήσιμος με το πληκτρολόγιο (keyboard). Αν πρέπει να χρησιμοποιήσετε έναν χάρτη εικόνας στην πλευρά του διακομιστή, συμβουλευθείτε την ενότητα σχετικά με τους χάρτες εικόνας στην πλευρά του διακομιστή (server-side image maps)
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογές και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
Παρέχετε ισοδύναμα κειμένου (text equivalents) για χάρτες εικόνας, καθώς μεταφέρουν οπτικές πληροφορίες. Όπως ισχύει και με τους άλλους συνδέσμους, το κείμενο του συνδέσμου πρέπει να είναι κατανοητό, όταν διαβάζεται εκτός περιβάλλοντος. Ανατρέξτε στην ενότητα σχετικά με το κείμενο των συνδέσμων (the section on Link Text) για πληροφορίες σχετικά με τη σύνταξη ενός καλού κειμένου συνδέσμου. Επίσης, ίσως οι χρήστες να επιθυμούν συντομεύσεις πληκτρολογίου για να έχουν πρόσβαση σε συνδέσμους που ακολουθούνται συχνά. Ανατρέξτε στην ενότητα σχετικά με την πρόσβαση στους δεσμούς μέσω του πληκτρολογίου (the section on Keyboard access to links).
Αν για τη δημιουργία του χάρτη χρησιμοποιείτε το στοιχείο AREA, χρησιμοποιήστε την παράμετρο "alt".
Παράδειγμα.
<IMG src="welcome.gif" alt="Image map of areas in the library"
usemap="#map1">
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference">
<AREA shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab">
</MAP>
Τέλος του παραδείγματος.
Στο παρακάτω παράδειγμα παρουσιάζεται η ίδια ιδέα, ωστόσο χρησιμοποιείται το στοιχείο OBJECT αντί για το στοιχείο IMG για την εισαγωγή της εικόνας, ώστε να παρέχονται περισσότερες πληροφορίες σχετικά με την εικόνα:
Παράδειγμα.
<OBJECT data="welcome.gif" type="image/gif" usemap="#map1">
There are several areas in the library including
the <A href="reference.html">Reference</A> section and the
<A href="media.html">Audio Visual Lab</A>.
</OBJECT>
<MAP name="map1">
<AREA shape="rect" coords="0,0,30,30"
href="reference.html" alt="Reference">
<AREA shape="rect" coords="34,34,100,100"
href="media.html" alt="Audio visual lab">
</MAP>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.5 Έως ότου οι πράκτορες χρήστη να αποδίδουν τα ισοδύναμα κειμένου για συνδέσμους χαρτών εικόνας στην πλευρά του πελάτη, παρέχετε μεγάλο αριθμό συνδέσμων κειμένου για κάθε ενεργή περιοχή ενός χάρτη εικόνας από την πλευρά του πελάτη. [Προτεραιότητα 3]
Εκτός από το να παρέχετε ισοδύναμα κειμένου, παρέχετε αφθονία συνδέσμων κειμένου. Αν χρησιμοποιείται το στοιχείο A αντί για το στοιχείο AREA, ο υπεύθυνος ανάπτυξης περιεχομένου μπορεί να περιγράφει τις ενεργές περιοχές και ταυτόχρονα να παρέχει αφθονία συνδέσμων:
Παράδειγμα.
<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Navigate the site.
[<A href="guide.html" shape="rect"
coords="0,0,118,28">Access Guide</A>]
[<A href="shortcut.html" shape="rect"
coords="118,0,184,28">Go</A>]
[<A href="search.html" shape="circle"
coords="184.200,60">Search</A>]
[<A href="top10.html" shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">
Top Ten</A>]
</MAP>
</OBJECT>
Τέλος του παραδείγματος.
Σημειώστε ότι στο προηγούμενο παράδειγμα, το στοιχείο MAP είναι το περιεχόμενο του στοιχείου OBJECT, ώστε οι εναλλακτικοί σύνδεσμοι να εμφανίζονται μόνο αν δεν εμφανίζεται ο χάρτης εικόνας (navbar1.gif).
Σημειώστε επίσης ότι οι σύνδεσμοι διαχωρίζονται από αγκύλες ([]). Αυτό γίνεται για να μην μπορούν τα παλαιότερα προγράμματα ανάγνωσης οθόνης να διαβάζουν πολλούς παρακείμενους συνδέσμους ως έναν σύνδεσμο καθώς και για να βοηθούνται οι χρήστες χωρίς προβλήματα όρασης να διακρίνουν οπτικά μεταξύ των συνδέσμων.
Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να διασφαλίσουν ότι μεταξύ των παρακείμενων συνδέσμων κειμένου περιλαμβάνουν εκτυπώσιμους χαρακτήρες (όπως αγκύλες ή μια κάθετη γραμμή (|)), οι οποίοι περιβάλλονται από διαστήματα. Το πρόβλημα δεν παρουσιάζεται αν ως σύνδεσμοι χρησιμοποιούνται εικόνες. Το alt-text δεν θα διαβαστεί ως ένας σύνδεσμος, εξαιτίας των εικόνων κράτησης θέσης που χρησιμοποιούν οι περιηγητές γραφικών, όταν δεν φορτώνονται οι εικόνες. Για περισσότερες πληροφορίες, ανατρέξτε στην ενότητα "Ομαδοποίηση και παράκαμψη συνδέσμων" (Grouping and bypassing links).
Σημεία ελέγχου σε αυτή την ενότητα:
- 9.1 Παρέχετε χάρτες εικόνας στην πλευρά του πελάτη αντί για χάρτες εικόνας στην πλευρά του διακομιστή, εκτός από τις περιπτώσεις κατά τις οποίες δεν μπορούν να οριστούν οι περιοχές με ένα διαθέσιμο γεωμετρικό σχήμα. [Προτεραιότητα 1]
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.2 Παρέχετε αφθονία συνδέσμων κειμένου για κάθε ενεργή περιοχή σε χάρτες εικόνας από την πλευρά του διακομιστή. [Προτεραιότητα 1]
Όταν πρέπει να χρησιμοποιηθεί ένας χάρτης εικόνας στην πλευρά του διακομιστή, οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να παρέχουν μια εναλλακτική λίστα με επιλογές χάρτη εικόνας. Υπάρχουν τρεις τεχνικές:
- Συμπεριλάβετε τους εναλλακτικούς συνδέσμους στο κύριο τμήμα ενός στοιχείου OBJECT (ανατρέξτε στο προηγούμενο παράδειγμα που παρουσιάζει συνδέσμους στο στοιχείο OBJECT (example illustrating links in the OBJECT element)).
- Αν για την εισαγωγή της εικόνας χρησιμοποιείται το στοιχείο IMG, παρέχετε μια εναλλακτική λίστα συνδέσμων μετά από αυτό και δηλώστε την ύπαρξη και τη θέση της εναλλακτικής λίστας (π.χ. μέσω της παραμέτρου "alt").
Παράδειγμα.
<A href="http://www.example.com/cgi-bin/imagemap/my-map">
<IMG src="welcome.gif" alt="Welcome! (Text links follow)" ismap>
</A>
<P>[<A href="reference.html">Reference</A>]
[<A href="media.html">Audio Visual Lab</A>]
Τέλος του παραδείγματος.
- Αν ο χάρτης εικόνας δεν γίνεται προσβάσιμος με άλλες προσεγγίσεις, δημιουργήστε μια εναλλακτική σελίδα (alternative page), η οποία θα είναι προσβάσιμη.
Οι χάρτες εικόνας στην πλευρά του διακομιστή και στην πλευρά του πελάτη μπορούν να χρησιμοποιηθούν ως κουμπιά υποβολής σε φόρμες. Για περισσότερες πληροφορίες, ανατρέξτε στην ενότητα "Κουμπιά γραφικών" (Graphical buttons).
Σημεία ελέγχου σε αυτή την ενότητα:
- 2.2 Βεβαιωθείτε ότι οι χρωματικοί συνδυασμοί προσκηνίου και παρασκηνίου παρέχουν αρκετή αντίθεση όταν προβάλλονται σε κάποιον με αδυναμίες διάκρισης των χρωμάτων ή όταν προβάλλονται σε ασπρόμαυρη οθόνη. [Προτεραιότητα 2 για εικόνες, Προτεραιότητα 3 για κείμενο].
Σημεία ελέγχου σε αυτή την ενότητα:
- 7.3 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες να ακινητοποιούν το κινούμενο περιεχόμενο, αποφύγετε την κίνηση στις σελίδες. [Προτεραιότητα 2]
Ενώ σε ένα έγγραφο μπορούν να συμπεριλαμβάνονται εφαρμογίδια είτε με το στοιχείο APPLET είτε με το στοιχείο OBJECT, η προτιμώμενη μέθοδος είναι με το στοιχείο OBJECT.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό περιεχόμενο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογίδια και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
- 6.2 Βεβαιωθείτε ότι οι ισοδυναμίες για το δυναμικό περιεχόμενο ενημερώνονται με κάθε αλλαγή του δυναμικού περιεχομένου. [Προτεραιότητα 1]
- 6.3 Βεβαιωθείτε ότι οι σελίδες μπορούν να χρησιμοποιηθούν όταν απενεργοποιούνται ή δεν υποστηρίζονται αρχεία εντολών, εφαρμογίδια ή άλλα προγραμματιστικά αντικείμενα. Αν αυτό δεν είναι δυνατό, παρέχετε ισοδύναμες πληροφορίες σε μια εναλλακτική, προσβάσιμη σελίδα. [Προτεραιότητα 1]
Αν χρησιμοποιείται το στοιχείο OBJECT, παρέχετε ένα ισοδύναμο κειμένου (text equivalent) στο περιεχόμενο του στοιχείου:
Παράδειγμα.
<OBJECT classid="java:Press.class" width="500" height="500">
As temperature increases, the molecules in the balloon...
</OBJECT>
Τέλος του παραδείγματος.
Ένα πιο σύνθετο παράδειγμα επωφελείται από το γεγονός ότι τα στοιχεία OBJECT μπορούν να ενσωματωθούν, ώστε να παρέχουν εναλλακτικές απεικονίσεις πληροφοριών:
Παράδειγμα.
<OBJECT classid="java:Press.class" width="500" height="500">
<OBJECT data="Pressure.mpeg" type="video/mpeg">
<OBJECT data="Pressure.gif" type="image/gif">
As temperature increases, the molecules in the balloon...
</OBJECT>
</OBJECT>
</OBJECT>
Τέλος του παραδείγματος.
Αν χρησιμοποιείται το στοιχείο APPLET, παρέχετε ένα κειμενικό ισοδύναμο (text equivalent) με την παράμετρο "alt" και στο περιεχομένο στο στοιχείο APPLET. Αυτό επιτρέπει τον ομαλό μετασχηματισμό του περιεχομένου για τους πράκτορες χρήστη που υποστηρίζουν μόνο έναν από τους δύο μηχανισμούς ("alt" ή περιεχόμενο).
Παράδειγμα που έχει αντικατασταθεί.
<APPLET code="Press.class" width="500" height="500"
alt="Java applet: how temperature affects pressure">
As temperature increases, the molecules in the balloon...
</APPLET>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 8.1 Καταστήστε τα προγραμματιστικά στοιχεία, όπως τα αρχεία εντολών και τα εφαρμογίδια, προσβάσιμα ή συμβατά με τις υποστηρικτικές τεχνολογίες [Προτεραιότητα 1 αν είναι σημαντική η λειτουργία και δεν παρουσιάζεται αλλού, διαφορετικά Προτεραιότητα 2.]
Αν ένα εφαρμογίδιο (το οποίο έχει δημιουργηθεί με το στοιχείο OBJECT ή APPLET) απαιτεί τη διάδραση με το χρήση (π.χ. δυνατότητα χειρισμού ενός πειράματος φυσικής), για το οποίο δεν μπορεί να δημιουργηθεί διπλότυπο με εναλλακτική μορφή, καταστήστε το εφαρμογίδιο άμεσα προσβάσιμο.
Αν ένα εφαρμογίδιο δημιουργεί κίνηση, οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να παρέχουν έναν μηχανισμό για πάγωμα της κίνησης (για παράδειγμα, ανατρέξτε στο [TRACE]). Επίσης, ανατρέξτε στην επόμενη ενότητα για πληροφορίες σχετικά με το πώς γίνονται προσβάσιμες οι παρουσιάσεις ήχου και βίντεο.
Για περισσότερες πληροφορίες σχετικά με την ανάπτυξη προσβάσιμων εφαρμογιδίων, ανατρέξτε στο [JAVAACCESS] και στο [IBMJAVA]. Αυτές οι εταιρείες αναπτύσσουν ένα API προσβασιμότητας και καθιστούν προσβάσιμες τις κλάσεις Java Swing.
Σχετικά σημεία ελέγχου:
- 3.4 Χρησιμοποιείτε σχετικές και όχι απόλυτες μονάδες στις τιμές των παραμέτρων γλώσσας σήμανσης και των ιδιοτήτων φύλλων στυλ. [Προτεραιότητα 2] ,
- 6.4 Για αρχεία εντολών και εφαρμογίδια, βεβαιωθείτε ότι οι ρουτίνες χειρισμού συμβάντων είναι ανεξάρτητες από συσκευές εισόδου. [Προτεραιότητα 2] ,
- 6.5 Βεβαιωθείτε ότι το δυναμικό περιεχόμενο είναι προσβάσιμο ή παρέχετε μια εναλλακτική παρουσίαση ή σελίδα. [Προτεραιότητα 2] ,
- 7.1 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες να ελέγχουν τις αναλαμπές, αποφύγετε να δημιουργείτε αναλαμπές στην οθόνη. [Προτεραιότητα 1] ,
- 7.2 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στο χρήστη να ελέγχει το αναβόσβημα, αποφύγετε περιεχόμενο που αναβοσβήνει (αλλαγή παρουσίασης σε κανονική ταχύτητα, π.χ. ενεργοποίηση και απενεργοποίηση). [Προτεραιότητα 2] ,
- 7.3 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες να ακινητοποιούν το κινούμενο περιεχόμενο, αποφύγετε την κίνηση στις σελίδες. [Προτεραιότητα 2] ,
- 7.4 Έως ότου οι πράκτορες χρήστη να παρέχουν τη δυνατότητα να διακόπτεται η ανανέωση, μην δημιουργείτε σελίδες περιοδικής αυτόματης ανανέωσης. [Προτεραιότητα 2] ,
- 9.2 Βεβαιωθείτε ότι κάθε στοιχείο με δική του διασύνδεση μπορεί να λειτουργήσει ανεξάρτητα από συσκευές. [Προτεραιότητα 2] ,
- και 10.1 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες την απενεργοποίηση δημιουργούμενων παραθύρων, μην προκαλείτε την εμφάνιση αναδυόμενων ή άλλων παραθύρων και μην αλλάζετε το τρέχον παράθυρο χωρίς να ενημερώνεται ο χρήστης. [Προτεραιότητα 2] .
- 1.4 Για οποιαδήποτε παρουσίαση πολυμέσων εξαρτώμενη από το χρόνο (π.χ. ταινία ή κινούμενη εικόνα), συγχρονίστε τις ισοδύναμες εναλλακτικές λύσεις (π.χ. λεζάντες ή ηχητικές περιγραφές του οπτικού κομματιού) με την παρουσίαση. [Προτεραιότητα 1]
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογές και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
Όταν χρειάζεται, θα πρέπει να παρέχεται ένα ισοδύναμο κειμένου (text equivalent) για τις οπτικές πληροφορίες, ώστε να είναι δυνατή η κατανόηση της σελίδας. Για παράδειγμα, σκεφθείτε μια επαναλαμβανόμενη κινούμενη εικόνα που δείχνει τη νέφωση και τη βροχόπτωση ως μέρος μιας μετεωρολογικής αναφοράς. Εφόσον η κινούμενη εικόνα συμπληρώνεται την υπόλοιπη μετεωρολογική αναφορά (που παρουσιάζεται σε φυσική γλώσσα - κείμενο), χρειάζεται μια λιγότερο φλύαρη περιγραφή της κινούμενης εικόνας. Ωστόσο, αν η κινούμενη εικόνα εμφανίζεται σε ένα εκπαιδευτικό πλαίσιο, όπου οι μαθητές διδάσκονται το σχηματισμό νεφώσεων σε σχέση με τη χερσαία μάζα, τότε η κινούμενη εικόνα θα έπρεπε να περιγραφεί για εκείνους που δεν θα μπορούσαν να δουν την κινούμενη εικόνα, ωστόσο θα ήθελαν να μάθουν το μάθημα.
Το στοιχείο OBJECT θα πρέπει να χρησιμοποιείται και από άλλα αντικείμενα, όπως είναι εκείνα που απαιτούν μια πρόσθετη εφαρμογή. Ωστόσο, για λόγους συμβατότητας με προγενέστερες εκδόσεις των περιηγητών Netscape, χρησιμοποιήστε το αποκλειστικό στοιχείο EMBED μέσα στο στοιχείο OBJECT με τον εξής τρόπο:
Παράδειγμα που έχει αντικατασταθεί.
<OBJECT classid="clsid:A12BCD3F-GH4I-56JK-xyz"
codebase="http://example.com/content.cab" width=100 height=80>
<PARAM name="Movie" value="moviename.swf">
<EMBED src="moviename.swf" width=100 height=80
pluginspage="http://example.com/shockwave/download/">
</EMBED>
<NOEMBED>
<IMG alt="Still from Movie"
src="moviename.gif" width=100 height=80>
</NOEMBED>
</OBJECT>
Τέλος του παραδείγματος.
Για περισσότερες πληροφορίες, ανατρέξτε στο [MACROMEDIA].
Για χρήστες χωρίς προβλήματα όρασης, τα πλαίσια μπορούν να οργανώσουν μια σελίδα σε διαφορετικές ζώνες. Για χρήστες με προβλήματα όρασης, οι σχέσεις μεταξύ του περιεχομένου των πλαισίων (π.χ. ένα πλαίσιο έχει έναν πίνακα περιεχομένων, άλλο έχει τα περιεχόμενα) πρέπει να μεταφέρονται με άλλους τρόπους.
Τα πλαίσια όπως υλοποιούνται σήμερα (με τα στοιχεία FRAMESET, FRAME και IFRAME) είναι προβληματικά για διάφορους λόγους:
- Χωρίς αρχεία εντολών, τείνουν να διασπούν τη λειτουργία "προηγούμενη σελίδα" που προσφέρουν οι περιηγητές.
- Είναι αδύνατον να αναφερθούμε στην "τρέχουσα κατάσταση" ενός συνόλου πλαισίων με ένα URI. Όταν αλλάξουν τα περιεχόμενα ενός συνόλου πλαισίων, δεν ισχύει πλέον το αρχικό URI.
- Το άνοιγμα ενός πλαισίου σε νέο παράθυρο το περιηγητή μπορεί να αποπροσανατολίσει ή απλώς να ενοχλήσει τους χρήστες.
Στις ακόλουθες ενότητες, αναλύεται ο τρόπος με τον οποίον τα πλαίσια γίνονται περισσότερο προσβάσιμα. Επίσης παρέχουμε μια εναλλακτική λύση για τα πλαίσια (alternative to frames), η οποία χρησιμοποιεί HTML 4.01 και CSS και αντιμετωπίζει πολλούς από τους περιορισμούς των σημερινών υλοποιήσεων πλαισίων.
Σημεία ελέγχου σε αυτή την ενότητα:
- 12.1 Δώστε έναν τίτλο σε κάθε πλαίσιο για να διευκολύνετε την αναγνώριση των πλαισίων και την πλοήγηση σε αυτά. [Προτεραιότητα 1]
Παράδειγμα.
Χρησιμοποιήστε την παράμετρο "title" για να ονομάσετε τα πλαίσια.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
title="Our library of electronic documents">
<FRAME src="nav.html" title="Navigation bar">
<FRAME src="doc.html" title="Documents">
<NOFRAMES>
<A href="lib.html" title="Library link">
Select to go to the electronic library</A>
</NOFRAMES>
</FRAMESET>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογές και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
- 12.2 Περιγράψτε το σκοπό των πλαισίων και τη σχέση των πλαισίων μεταξύ τους, αν αυτό δεν είναι προφανές μόνο από τους τίτλους των πλαισίων. [Προτεραιότητα 2]
Παράδειγμα.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>Today's news</TITLE>
</HEAD>
<FRAMESET cols="10%,*,10%">
<FRAMESET rows="20%,*">
<FRAME src="promo.html" name="promo" title="promotions">
<FRAME src="sitenavbar.html" name="navbar"
title="Sitewide navigation bar" longdesc="frameset-desc.html#navbar">
</FRAMESET>
<FRAME src="story.html" name="story" title="Selected story - main content"
longdesc="frameset-desc.html#story">
<FRAMESET rows="*,20%">
<FRAME src="headlines.html" name="index" title="Index of other
national headlines" longdesc="frameset-desc.html#headlines">
<FRAME src="ad.html" name="adspace" title="Advertising">
</FRAMESET>
<NOFRAMES>
<p><a href="noframes.html">No frames version</a></p>
<p><a href="frameset-desc.html">Descriptions of frames.</a></p>
</NOFRAMES>
</FRAMESET>
</HTML>
Το frameset-desc.html μπορεί να εκφράζει κάτι του τύπου:
#Navbar - this frame provides links to the major
sections of the site: World News, National News,
Local News, Technological News,
and Entertainment News.
#Story - this frame displays the currently selected story.
#Index - this frame provides links to the day's
headline stories within this section.
Τέλος του παραδείγματος.
Σημειώστε ότι αν αλλάξουν τα περιεχόμενα ενός πλαισίου, δεν θα ισχύει πλέον το κειμενικό ισοδύναμο. Επίσης, θα πρέπει να παρέχονται σύνδεσμοι προς τις περιγραφές ενός πλαισίου μαζί με άλλο εναλλακτικό περιεχόμενο στο στοιχείο NOFRAMES ενός FRAMESET.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογές και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
- 6.5 Βεβαιωθείτε ότι το δυναμικό περιεχόμενο είναι προσβάσιμο ή παρέχετε μια εναλλακτική παρουσίαση ή σελίδα. [Προτεραιότητα 2]
Παράδειγμα.
Σε αυτό το παράδειγμα, αν ο χρήστης διαβασει "top.html":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>This is top.html</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%" title="Our big document">
<FRAME src="main.html" title="Where the content is displayed">
<FRAME src="table_of_contents.html" title="Table of Contents">
<NOFRAMES>
<A href="table_of_contents.html">Table of Contents.</A>
<!-- other navigational links that are available in main.html
are available here also. -->
</NOFRAMES>
</FRAMESET>
</HTML>
και ο πράκτορας χρήστη δεν εμφανίζει πλαίσια, ο χρήστης θα έχει πρόσβαση (μέσω ενός συνδέσμου) σε μια έκδοση των ίδιων πληροφοριών χωρίς πλαίσια.
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 6.2 Βεβαιωθείτε ότι οι ισοδυναμίες για το δυναμικό περιεχόμενο ενημερώνονται με κάθε αλλαγή του δυναμικού περιεχομένου. [Προτεραιότητα 1]
Οι υπεύθυνοι ανάπτυξης περιεχομένου πρέπει να παρέχουν ισοδύναμα κειμένου για τα πλαίσια, ώστε να είναι κατανοητά τα περιεχόμενα και οι σχέσεις μεταξύ των πλαισίων. Σημειώστε ότι όταν αλλάξουν τα περιεχόμενα ενός πλαισίου, πρέπει να αλλάξει και οποιαδήποτε περιγραφή. Αυτό δεν είναι δυνατόν αν ένα IMG έχει εισαχθεί άμεσα σε ένα πλαίσιο. Συνεπώς, οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει πάντοτε να ορίζουν ως προέλευση ("src") ενός πλαισίου ένα αρχείο HTML. Οι εικόνες μπορούν να εισάγονται στο αρχείο HTML και οι σχετικές κειμενικές εναλλακτικές λύσεις θα εξελίσσονται σωστά.
Παράδειγμα.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A correct frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Evolving frameset">
<FRAME name="goodframe" src="apples.html" title="Apples">
</FRAMESET>
</HTML>
<!-- In apples.html -->
<P><IMG src="apples.gif" alt="Apples">
Τέλος του παραδείγματος.
Το παρακάτω παράδειγμα, το οποίο έχει αντικατασταθεί, θα πρέπει να αποφεύγεται, καθώς εισάγει IMG απευθείας σε ένα πλαίσιο:
Παράδειγμα που έχει αντικατασταθεί.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A bad frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Evolving frameset">
<FRAME name="badframe"
src="apples.gif" title="Apples">
</FRAMESET>
</HTML>
Σημειώστε ότι αν για παράδειγμα ένας σύνδεσμος προκαλεί την εισαγωγή νέας εικόνας σε ένα πλαίσιο:
<P>Visit a beautiful grove of
<A target="badframe" href="oranges.gif" title="Oranges">oranges</A>
ο αρχικός τίτλος του πλαισίου ("Apples") δεν θα συμφωνεί πλέον με το τρέχον περιεχόμενο του πλαισίου ("Oranges").
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 10.1 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες την απενεργοποίηση δημιουργούμενων παραθύρων, μην προκαλείτε την εμφάνιση αναδυόμενων ή άλλων παραθύρων και μην αλλάζετε το τρέχον παράθυρο χωρίς να ενημερώνεται ο χρήστης. [Προτεραιότητα 2]
Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να αποφεύγουν να καθορίζουν ένα νέο παράθυρο ως τον προορισμό ενός πλαισίου με target="_blank".
Μία από τις συνηθέστερες χρήσεις των πλαισίων είναι ο διαχωρισμός του παραθύρου του περιηγητή του χρήστη σε δύο τμήματα: ένα παράθυρο πλοήγησης και ένα παράθυρο περιεχομένου. Ως εναλλακτική λύση για τα πλαίσια, σας ενθαρρύνουμε να επιχειρήσετε το εξής:
- Δημιουργήστε ένα έγγραφο για το μηχανισμό πλοήγησης (ονομάστε το "nav.html"). Ένα ξεχωριστό έγγραφο σημαίνει ότι ο μηχανισμός πλοήγησης μπορεί να χρησιμοποιείται από κοινού από περισσότερα από ένα έγγραφα.
- Σε κάθε έγγραφο που απαιτεί το μηχανισμό πλοήγησης, συμπεριλάβετέ τον στο κάτω μέρος του εγγράφου με την παρακάτω (ή παρόμοια) σήμανση OBJECT:
Παράδειγμα.
<P>
<OBJECT data="nav.html">
Go to the <A href="nav.html">table of contents</A>
</OBJECT>
Η τοποθέτηση του μηχανισμού πλοήγησης στο τέλος του εγγράφου σημαίνει ότι όταν απενεργοποιούνται τα φύλλα στυλ, οι χρήστες έχουν πρώτα πρόσβαση στις σημαντικές πληροφορίες του εγγράφου.
- Χρησιμοποιήστε φύλλα στυλ για να τοποθετήσετε το μηχανισμό πλοήγησης στο σημείο της οθόνης που θέλετε. Για παράδειγμα, ο παρακάτω κανόνας CSS έχει ως αποτέλεσμα η γραμμή πλοήγησης να επιπλέει στο αριστερό τμήμα της σελίδας και να καταλαμβάνει το 25% του διαθέσιμου χώρου οριζοντίως:
OBJECT { float: left; width: 25% }
Ο παρακάτω κανόνας CSS προσαρτά το μηχανισμό πλοήγησης στην κάτω αριστερή γωνία της σελίδας και τον διατηρεί εκεί, ακόμα και όταν ο χρήστης εκτελεί κύλιση προς τα κάτω στη σελίδα:
OBJECT { position: fixed; left: 0; bottom: 0 }
Σημείωση. Μπορείτε να εισάγετε μηχανισμούς πλοήγησης ή άλλο περιεχόμενο σε ένα έγγραφο με χρήση server-side includes.
Σημεία ελέγχου σε αυτή την ενότητα:
- 3.4 Χρησιμοποιείτε σχετικές και όχι απόλυτες μονάδες στις τιμές των παραμέτρων γλώσσας σήμανσης και των ιδιοτήτων φύλλων στυλ. [Προτεραιότητα 2]
Στα προηγούμενα παραδείγματα, σημειώστε ότι τα μεγέθη των πλαισίων καθορίζονται σε μορφή ποσοστού. Όταν ο χρήστης αναπροσαρμόζει το μέγεθος του παραθύρου, τα πλαίσια θα προσαρμοστούν ανάλογα και θα εξακολουθήσουν να είναι αναγνώσιμα.
Σε αυτή την ενότητα αναλύεται η προσβασιμότητα των φορμών και των στοιχείων ελέγχου των φορμών που μπορούν να εισαχθούν σε ένα στοιχείο FORM.
Σημεία ελέγχου σε αυτή την ενότητα:
- 9.4 Δημιουργήστε μια λογική σειρά πλοήγησης μέσω συνδέσμων, στοιχείων ελέγχου φορμών και αντικειμένων. [Προτεραιότητα 3]
- 9.5 Παρέχετε συντομεύσεις πληκτρολογίου για σημαντικούς συνδέσμους (συμπεριλαμβανομένων εκείνων σε χάρτες εικόνας από την πλευρά του πελάτη), στοιχεία ελέγχου φορμών και ομάδες στοιχείων ελέγχου φορμών. [Προτεραιότητα 3]
Στο επόμενο παράδειγμα, καθορίζεται μια σειρά πλοήγησης μέσω του πλήκτρου tab (με σειρά, "field2", "field1", "submit") με "tabindex":
Παράδειγμα.
<FORM action="submit" method="post">
<P>
<INPUT tabindex="2" type="text" name="field1">
<INPUT tabindex="1" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</FORM>
Τέλος του παραδείγματος.
Σε αυτό το παράδειγμα αντιστοιχίζεται το πλήκτρο "U" ως πλήκτρο πρόσβασης (μέσω της παραμέτρου "accesskey"). Όταν πληκτρολογείται το γράμμα "U", εστιάζεται η ετικέτα, η οποία με τη σειρά της μεταφέρει την εστίαση στο στοιχείο ελέγχου εισόδου, ώστε ο χρήστης να μπορεί να εισάγει κείμενο.
Παράδειγμα.
<FORM action="submit" method="post">
<P>
<LABEL for="user" accesskey="U">name</LABEL>
<INPUT type="text" id="user">
</FORM>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 12.3 Χωρίστε μεγάλα τμήματα πληροφοριών σε ομάδες για καλύτερη διαχείριση, όπου αυτό είναι φυσικό και κατάλληλο. [Προτεραιότητα 2]
Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να ομαδοποιούν τις πληροφορίες (group information), όπου αυτό προκύπτει φυσικά και ενδείκνυται. Όταν τα στοιχεία ελέγχου φόρμας μπορούν να ομαδοποιηθούν σε λογικές μονάδες, χρησιμοποιήστε το στοιχείο FIELDSET και σημάνετε αυτές τις ομάδες με ετικέτα με το στοιχείο LEGEND:
Παράδειγμα.
<FORM action="http://example.com/adduser" method="post">
<FIELDSET>
<LEGEND>Personal information</LEGEND>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname" tabindex="1">
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname" tabindex="2">
...more personal information...
</FIELDSET>
<FIELDSET>
<LEGEND>Medical History</LEGEND>
...medical history information...
</FIELDSET>
</FORM>
Τέλος του παραδείγματος.
Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να ομαδοποιούν τις πληροφορίες (group information), όπου αυτό προκύπτει φυσικά και ενδείκνυται. Για εκτενείς λίστες με επιλογές μενού (η παρακολούθηση των οποίων ενδεχομένως να είναι δύσκολη), οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να ομαδοποιούν τα στοιχεία SELECT (τα οποία ορίζονται από το στοιχείο OPTION) σε ιεραρχίες χρησιμοποιώντας το στοιχείο OPTGROUP. Καθορίζει μια ετικέτα για την ομάδα επιλογών με την παράμετρο label στο OPTGROUP.
Παράδειγμα.
<FORM action="http://example.com/prog/someprog" method="post">
<P>
<SELECT name="ComOS">
<OPTGROUP label="PortMaster 3">
<OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
<OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7
<OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="PortMaster 2">
<OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7
<OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5
</OPTGROUP>
<OPTGROUP label="IRX">
<OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R
<OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R
</OPTGROUP>
</SELECT>
</FORM>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 12.4 Συσχετίστε ρητά τις ετικέτες με τα στοιχεία ελέγχου τους. [Προτεραιότητα 2]
- 10.2 Έως ότου οι πράκτορες χρήστη να υποστηρίζουν ρητά τους συσχετισμούς μεταξύ ετικετών και στοιχείων ελέγχου φόρμας, για όλα τα στοιχεία ελέγχου φόρμας με μη ρητώς συσχετισμένες ετικέτες, βεβαιωθείτε ότι η ετικέτα έχει τοποθετηθεί σωστά. [Προτεραιότητα 2]
Ένα παράδειγμα της χρήσης του στοιχείου LABEL με το "for" στην HTML 4.01 αναφέρεται στην προηγούμενη ενότητα.
Οι ετικέτες συσχετίζονται μη ρητώς με τα στοιχεία ελέγχου φόρμας τους, είτε μέσω της σήμανσης είτε μέσω της τοποθέτησης στη σελίδα. Το ακόλουθο παράδειγμα δείχνει πώς μια ετικέτα μπορεί να συσχετιστεί μη ρητώς με ένα στοιχείο ελέγχου φόρμας με σήμανση.
Παράδειγμα.
<LABEL for="firstname">First name:
<INPUT type="text" id="firstname" tabindex="1">
</LABEL>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογές και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
Η χρήση εικόνων για τη διακόσμηση κουμπιών επιτρέπει στους υπεύθυνους ανάπτυξης περιεχομένου να δημιουργήσουν μοναδικές και κατανοητές φόρμες. Η χρήση μιας εικόνας για ένα κουμπί (π.χ. με το στοιχείο INPUT ή BUTTON) δεν είναι εγγενώς μη προσβάσιμη - θεωρώντας ότι παρέχεται ένα κειμενικό ισοδύναμο για την εικόνα.
Ωστόσο, ένα κουμπί υποβολής μιας φόρμας γραφικών που έχει δημιουργηθεί με το στοιχείο INPUT, type="image" δημιουργεί έναν τύπο χάρτη εικόνας στην πλευρά του διακομιστή. Κάθε φορά που πατιέται το κουμπί κάνοντας κλικ με το ποντίκι, οι συντεταγμένες Χ και Υ του κλικ του ποντικιού αποστέλλονται στο διακομιστή ως μέρος της υποβολής της φόρμας.
Στην ενότητα "Εικόνα και χάρτες εικόνας" (Image and Image Maps) αναλύεται ο λόγος για τον οποίον θα πρέπει να αποφεύγονται οι εικόνες στην πλευρά του διακομιστή και προτείνεται η χρήση των χαρτών εικόνας στην πλευρά του πελάτη. Στην HTML 4.01, τα κουμπιά γραφικών μπορούν τώρα να είναι χάρτες εικόνας στην πλευρά του πελάτη. Για να διατηρηθεί η λειτουργία που παρέχει ο διακομιστής, οι συντάκτες έχουν τις ακόλουθες επιλογές, όπως δηλώνεται στη σύσταση HTML 4.01 ([HTML4], ενότητα 17.4.1):
Αν ο διακομιστής εκτελέσει διαφορετικές ενέργειες ανάλογα με τη θέση στην οποία γίνεται κλικ, αυτό θα είναι εις βάρος των χρηστών περιηγητών χωρίς γραφικά.
Για αυτόν το λόγο, οι συντάκτες θα πρέπει να σκεφτούν εναλλακτικές προσεγγίσεις:
- Χρήση πολλαπλών κουμπιών υποβολής (το καθένα με τη δική του εικόνα) αντί για ένα κουμπί υποβολής γραφικών. Οι συντάκτες μπορούν να χρησιμοποιούν φύλλα στυλ για τον έλεγχο της τοποθέτησης αυτών των κουμπιών.
- Χρήση χάρτη εικόνας στην πλευρά του πελάτη μαζί με αρχεία εντολών.
Σημεία ελέγχου σε αυτή την ενότητα:
- 10.4 Έως ότου οι πράκτορες χρήστη να μπορούν να χειρίζονται σωστά τα κενά στοιχεία ελέγχου, συμπεριλάβετε προεπιλεγμένους χαρακτήρες κράτησης θέσης σε πλαίσια επεξεργασίας και περιοχές κειμένου. [Προτεραιότητα 3]
Παράδειγμα.
Για να λειτουργούν σωστά ορισμένες προϋπάρχουσες υποστηρικτικές τεχνολογίες, απαιτούν αρχικό κείμενο σε στοιχεία ελέγχου φόρμας, όπως TEXTAREA.
<FORM action="http://example.com/prog/text-read" method="post">
<P>
<TEXTAREA name=yourname rows="20" cols="80">
Please enter your name here.
</TEXTAREA>
<INPUT type="submit" value="Send"><INPUT type="reset">
</P>
</FORM>
Τέλος του παραδείγματος.
Παρέχετε ένα κειμενικό ισοδύναμο (text equivalent) για εικόνες που χρησιμοποιούνται ως κουμπιά υποβολής.
Παράδειγμα.
<FORM action="http://example.com/prog/text-read" method="post">
<P>
<INPUT type="image" name=submit src="button.gif" alt="Submit">
</FORM>
Τέλος του παραδείγματος.
Επίσης, ανατρέξτε στην ενότητα για την πρόσβαση μέσω πληκτρολογίου (keyboard access), καθώς αυτό ισχύει για στοιχεία ελέγχου φόρμας.
Σε ορισμένους περιηγητές HTML 3.2,
- Το στοιχείο BUTTON δεν εμφανίζεται
- Το INPUT με type="button" θα εμφανίζεται ως πεδίο εισόδου κειμένου
Σε αυτή την ενότητα αναλύεται η προσβασιμότητα των αρχείων εντολών που περιλαμβάνει ένα έγγραφο μέσω του στοιχείου SCRIPT.
Σημεία ελέγχου σε αυτή την ενότητα:
- 6.5 Βεβαιωθείτε ότι το δυναμικό περιεχόμενο είναι προσβάσιμο ή παρέχετε μια εναλλακτική παρουσίαση ή σελίδα. [Προτεραιότητα 2]
Οι υπεύθυνοι ανάπτυξης περιεχομένου πρέπει να διασφαλίσουν ότι οι σελίδες είναι προσβάσιμες με τα αρχεία εντολών απενεργοποιημένα ή σε περιηγητές που δεν υποστηρίζουν αρχεία εντολών.
- Αποφεύγετε τη δημιουργία περιεχομένου δυναμικά στον πελάτη. Αν ο περιηγητής ενός χρήστη δεν χειρίζεται αρχεία εντολών, δεν θα δημιουργηθεί ή δεν θα εμφανιστεί περιεχόμενο. Ωστόσο, αυτό διαφέρει από την εμφάνιση ή την απόκρυψη ήδη υπάρχοντος περιεχομένου χρησιμοποιώντας έναν συνδυασμό φύλλων στυλ και αρχείων εντολών. Αν δεν υπάρχουν αρχεία εντολών, το περιεχόμενο εμφανίζεται πάντα. Αυτό δεν αποκλείει επίσης τη δημιουργία σελίδων δυναμικά στην πλευρά του διακομιστή και την παράδοσή τους στον πελάτη.
- Αποφεύγετε τη δημιουργία συνδέσμων που χρησιμοποιούν "javascript" ως URI. Αν ένας χρήστης δεν χρησιμοποιεί αρχεία εντολών, δεν θα μπορέσει να ακολουθήσει το σύνδεσμο, καθώς ο περιηγητής δεν μπορεί να δημιουργήσει το περιεχόμενο του δεσμού.
Παράδειγμα που έχει αντικατασταθεί. Αυτός ο σύνδεσμος οδηγεί σε αδιέξοδο για πράκτορες χρήστη, όπου δεν υποστηρίζονται ή δεν φορτώνονται αρχεία εντολών.
<A href="javascript:">...</A>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 7.1 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες να ελέγχουν τις αναλαμπές, αποφύγετε να δημιουργείτε αναλαμπές στην οθόνη. [Προτεραιότητα 1]
Σημεία ελέγχου σε αυτή την ενότητα:
- 7.2 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στο χρήστη να ελέγχει το αναβόσβημα, αποφύγετε περιεχόμενο που αναβοσβήνει (αλλαγή παρουσίασης σε κανονική ταχύτητα, π.χ. ενεργοποίηση και απενεργοποίηση). [Προτεραιότητα 2]
- 7.3 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες να ακινητοποιούν το κινούμενο περιεχόμενο, αποφύγετε την κίνηση στις σελίδες. [Προτεραιότητα 2]
Σημεία ελέγχου σε αυτή την ενότητα:
- 6.4 Για αρχεία εντολών και εφαρμογίδια, βεβαιωθείτε ότι οι ρουτίνες χειρισμού συμβάντων είναι ανεξάρτητες από συσκευές εισόδου. [Προτεραιότητα 2]
- 6.3 Βεβαιωθείτε ότι οι σελίδες μπορούν να χρησιμοποιηθούν όταν απενεργοποιούνται ή δεν υποστηρίζονται αρχεία εντολών, εφαρμογίδια ή άλλα προγραμματιστικά αντικείμενα. Αν αυτό δεν είναι δυνατό, παρέχετε ισοδύναμες πληροφορίες σε μια εναλλακτική, προσβάσιμη σελίδα. [Προτεραιότητα 1]
- 8.1 Καταστήστε τα προγραμματιστικά στοιχεία, όπως τα αρχεία εντολών και τα εφαρμογίδια, προσβάσιμα ή συμβατά με τις υποστηρικτικές τεχνολογίες [Προτεραιότητα 1 αν είναι σημαντική η λειτουργία και δεν παρουσιάζεται αλλού, διαφορετικά Προτεραιότητα 2.]
- 9.3 Για αρχεία εντολών, καθορίστε ρουτίνες χειρισμού λογικών συμβάντων αντί για ρουτίνες χειρισμού συμβάντων εξαρτώμενων από συσκευές. [Προτεραιότητα 2]
Μια ρουτίνα χειρισμού είναι ένα αρχείο εντολών που καλείται όταν συμβεί ένα συγκεκριμένο συμβάν (όταν π.χ. κινηθεί το ποντίκι, πατηθεί ένα πλήκτρο, φορτωθεί ένα έγγραφο κτλ.) Στην HTML 4.01, οι ρουτίνες χειρισμού συμβάντων προσαρτώνται στα στοιχεία μέσω των παραμέτρων των ρουτίνων χειρισμού συμβάντων (event handler attributes) (τις παραμέτρους που ξεκινούν με "on", π.χ. "onkeyup").
Όταν καλούνται, ορισμένες ρουτίνες χειρισμού συμβάντων παράγουν απλώς διακοσμητικά εφέ, π.χ. επισημαίνουν μια εικόνα ή αλλάζουν το χρώμα του κειμένου ενός στοιχείου. Άλλες ρουτίνες χειρισμού συμβάντων παράγουν πολύ πιο ουσιαστικά εφέ, π.χ. εκτελούν υπολογισμούς, παρέχουν σημαντικές πληροφορίες στο χρήστη ή υποβάλλουν μια φόρμα. Για ρουτίνες χειρισμού συμβάντων που δεν αλλάζουν απλώς την παρουσίαση ενός στοιχείου, οι υπεύθυνοι ανάπτυξης περιεχομένου πρέπει να κάνουν τα εξής:
- Χρήση trigger συμβάντων σε επίπεδο εφαρμογής αντί για trigger σε επίπεδο διάδρασης χρήστη. Στην HTML 4.01, οι παράμετροι συμβάντων σε επίπεδο εφαρμογής είναι οι "onfocus", "onblur" (η αντίθετη του "onfocus") και "onselect". Σημειώστε ότι οι παράμετροι αυτές έχουν σχεδιαστεί έτσι ώστε να είναι ανεξάρτητες από συσκευές, ωστόσο στους τρέχοντες περιηγητές υλοποιούνται ως συγκεκριμένα συμβάντα πληκτρολογίου.
- Διαφορετικά, αν πρέπει οπωσδήποτε να χρησιμοποιήσετε παραμέτρους εξαρτώμενες από συσκευές, παρέχετε άφθονους μηχανισμούς εισόδου (δηλ. καθορίστε δύο ρουτίνες χειρισμού για το ίδιο στοιχείο).
- Χρησιμοποιήστε "onmousedown" με το "onkeydown".
- Χρησιμοποιήστε "onmouseup" με το "onkeyup"
- Χρησιμοποιήστε "onclick" με το "onkeypress"
Σημειώστε ότι στο πληκτρολόγιο δεν υπάρχει ισοδύναμο του διπλού κλικ ("ondblclick") στην HTML 4.01.
- Μην συντάσσετε ρουτίνες χειρισμού συμβάντων που εξαρτώνται μόνο από τις συντεταγμένες του ποντικιού, καθώς κάτι τέτοιο εμποδίζει την ανεξάρτητη από συσκευές είσοδο.
Σημεία ελέγχου σε αυτή την ενότητα:
- 1.1 Παρέχετε ένα ισοδύναμο κειμένου για κάθε μη κειμενικό στοιχείο (π.χ. μέσω του "alt", του "longdesc" ή στο περιεχόμενο του στοιχείου). Αυτό περιλαμβάνει: εικόνες, γραφικές αναπαραστάσεις κειμένου (συμπεριλαμβανομένων συμβόλων), περιοχές χαρτών εικόνων, κινούμενες εικόνες (π.χ. κινούμενα GIF), εφαρμογές και προγραμματιστικά αντικείμενα, τέχνη ASCII, πλαίσια, αρχεία εντολών, εικόνες που χρησιμοποιούνται ως κουκκίδες λίστας, διαχωριστικά, κουμπιά γραφικών, ήχους (που αναπαράγονται με διάδραση ή χωρίς διάδραση χρήστη), αυτόνομα αρχεία ήχου, ηχητικά κομμάτια βίντεο και βίντεο. [Προτεραιότητα 1]
- 6.2 Βεβαιωθείτε ότι οι ισοδυναμίες για το δυναμικό περιεχόμενο ενημερώνονται με κάθε αλλαγή του δυναμικού περιεχομένου. [Προτεραιότητα 1]
Ένας τρόπος για να επιτευχθεί αυτό είναι με το στοιχείο NOSCRIPT. Το περιεχόμενο αυτού του στοιχείου αποδίδεται, όταν τα αρχεία εντολών δεν είναι ενεργοποιημένα.
Παράδειγμα.
<SCRIPT type="text/tcl">
...some Tcl script to show a billboard of sports scores...
</SCRIPT>
<NOSCRIPT>
<P>Results from yesterday's games:</P>
<DL>
<dt>Bulls 91, Sonics 80.
<DD><A href="bullsonic.html">Bulls vs. Sonics game highlights</A>
...more scores...
</DL>
</NOSCRIPT>
Τέλος του παραδείγματος.
Σημεία ελέγχου σε αυτή την ενότητα:
- 7.4 Έως ότου οι πράκτορες χρήστη να παρέχουν τη δυνατότητα να διακόπτεται η ανανέωση, μην δημιουργείτε σελίδες περιοδικής αυτόματης ανανέωσης. [Προτεραιότητα 2]
- 7.5 Έως ότου οι πράκτορες χρήστη να παρέχουν τη δυνατότητα να διακόπτεται η αυτόματη ανακατεύθυνση, μην χρησιμοποιείτε σήμανση για αυτόματη ανακατεύθυνση των σελίδων. Αντί για αυτό, διαμορφώστε το διακομιστή ώστε να πραγματοποιεί ανακατευθύνσεις. [Προτεραιότητα 2]
- 10.1 Έως ότου οι πράκτορες χρήστη να επιτρέπουν στους χρήστες την απενεργοποίηση δημιουργούμενων παραθύρων, μην προκαλείτε την εμφάνιση αναδυόμενων ή άλλων παραθύρων και μην αλλάζετε το τρέχον παράθυρο χωρίς να ενημερώνεται ο χρήστης. [Προτεραιότητα 2]
Σημεία ελέγχου σε αυτή την ενότητα:
- 11.2 Αποφύγετε χαρακτηριστικά των τεχνολογιών W3C, τα οποία έχουν αντικατασταθεί. [Προτεραιότητα 2]
Γραμμική έκδοση του ευρετηρίου στοιχείων HTML 4.01 (Linear version of HTML 4.01 element index).
Αυτό το ευρετήριο περιέχει όλα τα στοιχεία της HTML 4.01. Η πρώτη στήλη αυτού του πίνακα συνδέει με τον ορισμό του στοιχείου στις προδιαγραφές HTML 4.01 ([HTML4]). Τα στοιχεία που έχουν αντικατασταθεί στην HTML 4.01 ακολουθούνται από έναν αστερίσκο (*). Τα στοιχεία που έχουν αντικατασταθεί στην HTML 4.01 ή δεν υπάρχουν σε κάποια προδιαγραφή του W3C για την HTML (2.0, 3.2, 4.01) δεν εμφανίζονται σε αυτό τον πίνακα.
Στη δεύτερη στήλη δηλώνονται άλλες προδιαγραφές του W3C για την HTML που περιλαμβάνουν κάθε στοιχείο. Στην τρίτη στήλη δηλώνεται ο ρόλος του στοιχείου.
Η τελευταία στήλη περιλαμβάνει τις ενότητες του παρόντος εγγράφου, στις οποίες αναλύεται το στοιχείο. Οι εγγραφές "Δ/Ι" σημαίνουν ότι το στοιχείο δεν εξετάζεται σε αυτό το έγγραφο.
Ευρετήριο στοιχείων
| Όνομα στοιχείου |
Ορίζεται επίσης στο |
Ρόλος |
Τεχνικές |
| A |
2.0, 3.2 |
Δομή |
Δ/Ι |
| ABBR |
|
Δομή |
Δ/Ι |
| ACRONYM |
|
Δομή |
Δ/Ι |
| ADDRESS |
2.0, 3.2 |
Μεταδεδομένα |
Δ/Ι |
| APPLET* |
3.2 |
Αντικαταστάθηκε |
Δ/Ι |
| AREA |
3.2 |
Δομή |
Δ/Ι |
| B |
2.0, 3.2 |
Παρουσίαση |
Δ/Ι |
| BASE |
2.0, 3.2 |
Επεξεργασία |
Δ/Ι |
| BASEFONT* |
3.2 |
Παρουσίαση |
Δ/Ι |
| BDO |
|
Επεξεργασία |
Δ/Ι |
| BIG |
3.2 |
Παρουσίαση |
Δ/Ι |
| BLOCKQUOTE |
2.0, 3.2 |
Δομή |
Δ/Ι |
| BODY |
2.0, 3.2 |
Δομή |
Δ/Ι |
| BR |
2.0, 3.2 |
Παρουσίαση |
Δ/Ι |
| BUTTON |
|
Δομή |
Δ/Ι |
| CAPTION |
3.2 |
Δομή |
Δ/Ι |
| CENTER* |
3.2 |
Παρουσίαση |
Δ/Ι |
| CITE |
2.0, 3.2 |
Δομή |
Δ/Ι |
| CODE |
2.0, 3.2 |
Δομή |
Δ/Ι |
| COL |
|
Δομή |
Δ/Ι |
| COLGROUP |
|
Δομή |
Δ/Ι |
| DD |
2.0, 3.2 |
Δομή |
Δ/Ι |
| DEL |
|
Μεταδεδομένα |
Δ/Ι |
| DFN |
3.2 |
Δομή |
Δ/Ι |
| DIR* |
2.0, 3.2 |
Δομή |
Δ/Ι |
| DIV |
3.2 |
Δομή |
Δ/Ι |
| DL |
2.0, 3.2 |
Δομή |
Δ/Ι |
| DT |
2.0, 3.2 |
Δομή |
Δ/Ι |
| EM |
2.0, 3.2 |
Δομή |
Δ/Ι |
| FIELDSET |
|
Δομή |
Δ/Ι |
| FONT* |
3.2 |
Παρουσίαση |
Δ/Ι |
| FORM |
2.0, 3.2 |
Δομή |
Δ/Ι |
| FRAME |
|
Αντικαταστάθηκε |
Δ/Ι |
| FRAMESET |
|
Παρουσίαση |
Δ/Ι |
| H1 |
2.0, 3.2 |
Δομή |
Δ/Ι |
| HEAD |
2.0, 3.2 |
Δομή |
Δ/Ι |
| HR |
2.0, 3.2 |
Παρουσίαση |
Δ/Ι |
| HTML |
2.0, 3.2 |
Δομή |
Δ/Ι |
| I |
2.0, 3.2 |
Παρουσίαση |
Δ/Ι |
| IFRAME |
|
Αντικαταστάθηκε |
Δ/Ι |
| IMG |
2.0, 3.2 |
Αντικαταστάθηκε |
Δ/Ι |
| INPUT |
2.0, 3.2 |
Δομή |
Δ/Ι |
| INS |
|
Μεταδεδομένα |
Δ/Ι |
| ISINDEX* |
2.0, 3.2 |
Δομή |
Δ/Ι |
| KBD |
2.0, 3.2 |
Δομή |
Δ/Ι |
| LABEL |
|
Δομή |
Δ/Ι |
| LEGEND |
|
Δομή |
Δ/Ι |
| LI |
2.0, 3.2 |
Δομή |
Δ/Ι |
| LINK |
2.0, 3.2 |
Μεταδεδομένα |
Δ/Ι |
| MAP |
3.2 |
Δομή |
Δ/Ι |
|
2.0, 3.2 |
Δομή |
Δ/Ι |
| META |
2.0, 3.2 |
Μεταδεδομένα |
Δ/Ι |
| NOFRAMES |
|
Εναλλακτική λύση |
Δ/Ι |
| NOSCRIPT |
|
Εναλλακτική λύση |
Δ/Ι |
| OBJECT |
|
Αντικαταστάθηκε |
Δ/Ι |
| OL |
2.0, 3.2 |
Δομή |
Δ/Ι |
| OPTGROUP |
|
Δομή |
Δ/Ι |
| OPTION |
2.0, 3.2 |
Δομή |
Δ/Ι |
| P |
2.0, 3.2 |
Δομή |
Δ/Ι |
| PARAM |
3.2 |
Επεξεργασία |
Δ/Ι |
| PRE |
2.0, 3.2 |
Παρουσίαση |
Δ/Ι |
| Q |
|
Δομή |
Δ/Ι |
| S* |
|
Παρουσίαση |
Δ/Ι |
| SAMP |
2.0, 3.2 |
Δομή |
Δ/Ι |
| SCRIPT |
3.2 (DTD) |
Επεξεργασία |
Δ/Ι |
| SELECT |
2.0, 3.2 |
Δομή |
Δ/Ι |
| SMALL |
3.2 |
Παρουσίαση |
Δ/Ι |
| SPAN |
|
Δομή |
Δ/Ι |
| STRIKE* |
3.2 |
Παρουσίαση |
Δ/Ι |
| STRONG |
2.0, 3.2 |
Δομή |
Δ/Ι |
| STYLE |
3.2 (DTD) |
Επεξεργασία |
Δ/Ι |
| SUB |
3.2 |
Παρουσίαση |
Δ/Ι |
| SUP |
3.2 |
Παρουσίαση |
Δ/Ι |
| TABLE |
3.2 |
Δομή |
Δ/Ι |
| TBODY |
|
Δομή |
Δ/Ι |
| TD |
3.2 |
Δομή |
Δ/Ι |
| TEXTAREA |
2.0, 3.2 |
Δομή |
Δ/Ι |
|
|
Δομή |
Δ/Ι |
| TH |
3.2 |
Δομή |
Δ/Ι |
| THEAD |
|
Δομή |
Δ/Ι |
| TITLE |
2.0, 3.2 |
Μεταδεδομένα |
Δ/Ι |
| TR |
3.2 |
Δομή |
Δ/Ι |
| TT |
2.0, 3.2 |
Παρουσίαση |
Δ/Ι |
| U* |
3.2 |
Παρουσίαση |
Δ/Ι |
| UL |
2.0, 3.2 |
Δομή |
Δ/Ι |
| VAR |
2.0, 3.2 |
Δομή |
Δ/Ι |
Γραμμική έκδοση του ευρετηρίου παραμέτρων HTML 4.01 (Linear version of HTML 4.01 attribute index).
Αυτό το ευρετήριο περιέχει ορισμένες παραμέτρους της HTML 4.01, οι οποίες επηρεάζουν την προσβασιμότητα, καθώς και τα στοιχεία στα οποία εφαρμόζονται. Η πρώτη στήλη αυτού του πίνακα συνδέει με τον ορισμό της παραμέτρου στην προδιαγραφή HTML 4.01 ([HTML4]). Οι παράμετροι και τα στοιχεία που έχουν αντικατασταθεί στην HTML 4.01 ([HTML4]) ακολουθούνται από έναν αστερίσκο (*). Οι παράμετροι και τα στοιχεία που έχουν αντικατασταθεί στην HTML 4.01 ή δεν υπάρχουν σε κάποια προδιαγραφή του W3C για την HTML (2.0, 3.2, 4.01) δεν εμφανίζονται σε αυτό τον πίνακα. Οι παράμετροι που ισχύουν για τα περισσότερα στοιχεία της HTML 4.01 δηλώνονται ως τέτοιες. Για την ακριβή λίστα των στοιχείων με τη συγκεκριμένη παράμετρο, συμβουλευθείτε την προδιαγραφή HTML 4.01.
Στη δεύτερη στήλη δηλώνονται άλλες προδιαγραφές του W3C για την HTML που περιλαμβάνουν κάθε παράμετρο. Η τρίτη στήλη δηλώνει τα στοιχεία που λαμβάνουν κάθε παράμετρο. Στην τέταρτη στήλη δηλώνεται ο ρόλος της παραμέτρου.
Η τελευταία στήλη περιλαμβάνει τις ενότητες του παρόντος εγγράφου, στις οποίες αναλύεται η παράμετρος. Οι εγγραφές "Δ/Ι" σημαίνουν ότι η παράμετρος δεν εξετάζεται σε αυτό το έγγραφο.
Ευρετήριο παραμέτρων
| Όνομα παραμέτρου |
Ισχύει για τα στοιχεία |
Ρόλος |
Τεχνικές |
| abbr |
TD, TH |
Εναλλακτική λύση |
Δ/Ι |
| accesskey |
A, AREA, BUTTON, INPUT, LABEL, LEGEND, TEXTAREA |
Περιβάλλον εργασίας |
Δ/Ι |
| alt |
APPLET, AREA, IMG, INPUT |
Εναλλακτική λύση |
Δ/Ι |
| axis |
TD, TH |
Δομή |
Δ/Ι |
| class |
Στα περισσότερα στοιχεία |
Δομή |
Δ/Ι |
| dir |
Στα περισσότερα στοιχεία |
Επεξεργασία |
Δ/Ι |
| for |
LABEL |
Δομή |
Δ/Ι |
|
TD, TH |
Δομή |
Δ/Ι |
| hreflang |
A, LINK |
Μεταδεδομένα |
Δ/Ι |
| id |
Στα περισσότερα στοιχεία |
Δομή |
Δ/Ι |
| label |
OPTION |
Εναλλακτική λύση |
Δ/Ι |
| lang |
Στα περισσότερα στοιχεία |
Μεταδεδομένα |
Δ/Ι |
| longdesc |
IMG, FRAME, IFRAME |
Εναλλακτική λύση |
Δ/Ι |
| scope |
TD, TH |
Δομή |
Δ/Ι |
| style |
Στα περισσότερα στοιχεία |
Επεξεργασία |
Δ/Ι |
| summary |
TABLE |
Εναλλακτική λύση |
Δ/Ι |
| tabindex |
A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA |
Περιβάλλον εργασίας |
Δ/Ι |
| title |
Στα περισσότερα στοιχεία |
Μεταδεδομένα |
Δ/Ι |
| usemap |
IMG, INPUT, OBJECT |
Επεξεργασία |
Δ/Ι |
Ακολουθεί μια λίστα με τις παραμέτρους της HTML 4.01 που δεν σχετίζονται άμεσα με την προσβασιμότητα. Οι υπεύθυνοι ανάπτυξης περιεχομένου θα πρέπει να χρησιμοποιούν φύλλα στυλ αντί για παραμέτρους παρουσίασης. Για λεπτομέρειες σχετικά με τις παραμέτρους των ρουτίνων χειρισμού συμβάντων, ανατρέξτε στην ενότητα για τις ανεξάρτητες από συσκευές ρουτίνες χειρισμού συμβάντων (device-independent event handlers).
- Άλλες δομικές παράμετροι:
- start*, value*, rowspan, colspan, span
- Άλλες παράμετροι παρουσίασης:
- align*, valign*, clear*, nowrap*, char, charoff, hspace*, vspace*, cellpadding, cellspacing, compact*, face*, size*, background*, bgcolor*, color*, text*, link*, alink*, vlink*, border, noshade*, rules, size (deprecated according to element), marginheight, marginwidth, frame, frameborder, rows, cols
- Άλλες παράμετροι οδηγιών επεξεργασίας:
- ismap, coords, shape
- Άλλες παράμετροι περιβάλλοντος εργασίας:
- target, scrolling, noresize
- Άλλες παράμετροι μεταδεδομένων:
- type, cite, datetime
- Παράμετροι ρουτίνων χειρισμού συμβάντων:
- onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload
Για την τελευταία έκδοση οποιωνδήποτε
W3C προδιαγραφών, συμβουλευτείτε τη λίστα των τεχνικών αναφορών του W3C (W3C Technical Reports) στη διεύθυνση http://www.w3.org/TR.
- [CSS1]
- "CSS, level 1 Recommendation", B. Bos, H. Wium Lie, eds., 17 December 1996, αναθεώρηση 11 Ιανουρίου 1999. Αυτή η σύσταση CSS1 βρίσκεται στη διεύθυνση http://www.w3.org/TR/1999/REC-CSS1-19990111. Η τελευταία έκδοση της CSS1 (latest version of CSS1) είναι διαθέσιμη στη διεύθυνση http://www.w3.org/TR/REC-CSS1.
- [CSS2]
- "CSS, level 2 Recommendation", B. Bos, H. Wium Lie, C. Lilley, and I. Jacobs, eds., 12 Μαΐου 1998. Αυτή η σύσταση CSS2 βρίσκεται στη διεύθυνση http://www.w3.org/TR/1998/REC-CSS2-19980512/. Η τελευταία έκδοση της CSS2 (latest version of CSS2) βρίσκεται στη διεύθυνση http://www.w3.org/TR/REC-CSS2.
- [HTML4]
- "HTML 4.01 Recommendation", D. Raggett, A. Le Hors, and I. Jacobs, eds., 24 Δεκεμβρίου 1999. Αυτή η σύσταση HTML 4.01 βρίσκεται στην τοποθεσία http://www.w3.org/TR/1999/REC-html401-19991224/.
- [MATHML]
- "Mathematical Markup Language", P. Ion and R. Miner, eds., 7 April 1998, αναθεώρηση 7 Ιουλία 1999. Η σύσταση MathML 1.0 είναι διαθέσιμη στη διεύθυνση http://www.w3.org/TR/1998/REC-MathML-19990707/. Η τελευταία έκδοση της MathML 1.0 (latest version of MathML 1.0) είναι διαθέσιμη στη διεύθυνση http://www.w3.org/TR/REC-MathML.
- [WCAG10]
- "Web Content Accessibility Guidelines 1.0", (Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Παγκοσμίου Ιστού 1.0 ) W. Chisholm, G. Vanderheiden, and I. Jacobs, eds., 5 Μαΐου 1999. Αυτή η σύσταση WCAG 1.0 βρίσκεται στη διεύθυνση http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/.
- [WCAG10-CSS-TECHNIQUES]
- "Techniques for Web Content Accessibility Guidelines 1.0", (Τεχνικές CSS για τις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 1.0) W. Chisholm, G. Vanderheiden and I. Jacobs, eds. Η τελευταία έκδοση του παρόντος εγγράφου είναι διαθέσιμη στη διεύθυνση http://www.w3.org/TR/WCAG10-CSS-TECHS/.
- [WCAG10-TECHS]
- "Techniques for Web Content Accessibility Guidelines 1.0", (Τεχνικές για τις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 1.0), W. Chisholm, G. Vanderheiden, I. Jacobs, eds. Αυτό το έγγραφο εξηγεί τον τρόπο υλοποίησης των σημείων ελέγχου που ορίζονται στις Οδηγίες για την Προσβασιμότητα του Περιεχομένου του Ιστού 1.0. Το τελευταίο προσχέδιο των τεχνικών είναι διαθέσιμο στη διεύθυνση http://www.w3.org/TR/WCAG10-TECHS/.
Σημείωση: Το W3C δεν εγγυάται την ευστάθεια οποιασδήποτε από τις ακόλουθες αναφορές εκτός του δικού του ελέγχου. Οι αναφορές αυτές περιλαμβάνονται για λόγους ευκολίας. Αναφορές σε προϊόντα δεν σημαίνουν την έγκριση αυτών των προϊόντων.
- [IBMJAVA]
- Οι οδηγίες IBM Guidelines for Writing Accessible Applications Using 100% Pure Java είναι διαθέσιμες από την IBM Special Needs Systems.
- [JAVAACCESS]
- Πληροφορίες σχετικά με την προσβασιμότητα και ευχρηστία Java (Java Accessibility and Usability) είναι διαθέσιμες από το Trace R&D Center.
- [MACROMEDIA]
- Flash OBJECT and EMBED Tag Syntax από την Macromedia.
- [UWSAG]
- "The Unified Web Site Accessibility Guidelines", G. Vanderheiden, W. Chisholm, eds. Οι Ενοποιημένες Οδηγίες για την Προσβασιμότητα των Τοποθεσιών του Ιστού συλλέχθηκαν από το Trace R & D Center στο Πανεπιστήμιο του Ουισκόνσιν με τη χρηματοδότηση του Εθνικού Ινστιτούτου για την Έρευνα σχετικά με τις Αναπηρίες και την Αποκατάσταση (National Institute on Disability and Rehabilitation Research - NIDRR), του Υπουργείου Παιδείας των Η.Π.Α.
Μια λίστα των εναλλακτικών περιηγητών Ιστού (alternative Web browsers) (υποστηρικτικές τεχνολογίες και άλλοι πράκτορες χρήστη που έχουν σχεδιαστεί για την προσβασιμότητα) διατηρείται στην τοποθεσία της WAI στον Ιστό.
- [ASTER]
- Για πληροφορίες σχετικά με το ASTER (Audio System For Technical Readings), συμβουλευθείτε την αρχική σελίδα του T. V. Raman (T. V. Raman's home page).
- [HYPERMEDIA]
- Τechexplorer Hypermedia Browser της IBM (IBM's techexplorer Hypermedia Browser).
- [TRACE]
- Trace Research & Development Center. Σε αυτή την τοποθεσία μπορείτε να βρείτε διάφορες πληροφορίες σχετικά με την προσβασιμότητα, συμπεριλαμβανομένου ενός εφαρμογιδίου κύλησης Java, το οποίο μπορεί να ακινητοποιηθεί από το χρήστη (scrolling Java applet that may be frozen by the user).
- [WAI-ER]
- Η Ομάδα Εργασίας Αξιολόγησης και Επισκευής της WAI (WAI Evaluation and Repair Working Group).
- Συμπροεδρία της Ομάδας Εργασίας των Οδηγιών για το Περιεχόμενο του Ιστού:
- Jason White, Πανεπιστήμιο της Μελβούρνης
- Gregg Vanderheiden, Trace Research and Development
- Αρμόδια για την Ομάδα του W3C:
- Wendy Chisholm
- Θα θέλαμε να ευχαριστήσουμε τα ακόλουθα άτομα για τη συνεισφορά τους με το χρόνο και τα πολύτιμα σχόλιά τους στη διαμόρφωση αυτών των οδηγιών:
- Harvey Bingham, Kevin Carey, Chetz Colwell, Neal Ewers, Geoff Freed, Al Gilman, Larry Goldberg, Jon Gunderson, Eric Hansen, Phill Jenkins, Leonard Kasday, George Kerscher, Marja-Riitta Koivunen, Josh Krieger, Chuck Letourneau, Scott Luebking, William Loughborough, Murray Maloney, Charles McCathieNevile, MegaZone (Livingston Enterprises), Masafumi Nakane, Mark Novak, Charles Oppermann, Mike Paciello, David Pawson, Michael Pieper, Greg Rosmaita, Liam Quinn, Dave Raggett, T.V. Raman, Robert Savellis, Jutta Treviranus, Steve Tyler και Jaap van Lelieveld
