Δικτυακά Πολυμέσα ΙΙ Διάλεξη #9 η : Οδηγίες για τη σχεδίαση προσβάσιμων διαδικτυακών τόπων Γαβαλάς Δαμιανός dgavalas@aegean.gr Προσβασιμότητα Στην προηγούμενη διάλεξη έγινε μια εισαγωγή σε θέματα προσβασιμότητας Ορισμός Γιατί είναι σημαντική Εμπόδια στην προσβασιμότητα που συναντούν άτομα με διαφορετικές αναπηρίες Υποστηρικτικές τεχνολογίες (assistive technologies) Μεθόδους / εργαλεία για την εκτίμηση της προσβασιμότητας υπηρεσιών / ιστοσελίδων Σήμερα ασχολούμαστε με τεχνικές και οδηγίες που πρέπει να ακολουθούμε για να εξασφαλίσουμε την προσβασιμότητα των ιστοσελίδων μας από άτομα με αναπηρίες (ΑμεΑ) 1
Τι είναι η προσβασιμότητα; Προσβασιμότητα σημαίνει δυνατότητα χρήσης μιας υπηρεσίας από τον καθένα, ανεξαρτήτως ιδιαιτερότητας (αναπηρία, ηλικία) ή πλαισίου χρήσης (context of use) Εντάσσεται σε ευρύτερο επιστημονικό πεδίο, της Αλληλεπίδρασης Ανθρώπου Υπολογιστή (HCI) και ειδικότερα της Καθολικής Σχεδίασης (Universal Design) ή διαφορετικά Σχεδίασης για όλους (Design for all). η προσβασιμότητα είναι εξ' ορισμού μια κατηγορία της ευχρηστίας. Οτιδήποτε δεν είναι προσβάσιμο σε ένα χρήστη δεν είναι και εύχρηστο. [Nielsen, 1993] "Καθένας έχει δικαίωμα συμμετοχής στην Κοινωνία της Πληροφορίας. Η διευκόλυνση της πρόσβασης στις πληροφορίες που διακινούνται ηλεκτρονικά, καθώς και της παραγωγής, ανταλλαγής και διάδοσής τους αποτελεί υποχρέωση του Κράτους, τηρουμένων πάντοτε των εγγυήσεων των άρθρων 9, 9Α και 19." ΣΥΝΤΑΓΜΑ ΤΗΣ ΕΛΛΑΔΑΣ Αρθρο 5α.παρ.2 2
Πρωτοβουλίες αντιμετώπισης της προσβασιμότητας Πρωτοβουλίες αντιμετώπισης της προσβασιμότητας Η κοινοπραξία του Παγκόσμιου ιστού (The World Wide Web Consortium, W3C), η κοινοπραξία που καθορίζει τα πρότυπα αλλά και τους στόχους και στρατηγικές εξέλιξης του web έχει θέσει ως βασικό της στόχο την καθολική πρόσβαση (universal access) "να κάνει διαθέσιμα αυτά τα προνόμια σε όλους τους ανθρώπους, ανεξάρτητα από τον εξοπλισμό και το λογισμικό που διαθέτουν, την δικτυακή τους υποδομή, την εθνική τους γλώσσα, την κουλτούρα, τη γεωγραφική θέση και τις σωματικές ή νοητικές τους ικανότητες. Μια πρωτοβουλία που ξεκίνησε από το w3c είναι η WAI (web accessibility initiative, Πρωτοβουλία Προσβασιμότητας στο Ιστό) H WAI δημοσίευσε τα WCAG (Web Content Accessibility Guidelines) WCAG: μια σειρά από οδηγίες για τη συγγραφή προσβάσιμων ιστοσελίδων 3
Web Accessibility Initiative WAI H WAI (δημιουργήθηκε από το W3C το 1997) προδιέγραψε μια σειρά από οδηγίες που απευθύνονται σε web developers και designers Προδιαγράφουν πως θα κάνουν το web περιεχόμενο προσβάσιμο σε ανθρώπους με αναπηρίες Ο στόχος αυτών των οδηγιών είναι η προσβασιμότητα, αλλά και να καταστήσουν το web περιεχόμενο διαθέσιμο σε περισσότερους browsers (voice browsers, κινητά τηλέφωνα, κλπ) ) και σε περισσότερους χρήστες που δουλεύουν σε περιβάλλοντα με δύσκολες συνθήκες (hands free, δυνατός φωτισμός, σκοτάδι, αδύναμη όραση, υψηλός θόρυβος) Είναι η WAI σημαντική για το δικό σας Web Site; Φυσικά και είναι! Εκατομμύρια άνθρωποι με αναπηρίες σερφάρουν καθημερινά στο web και πολλά ακόμα εκατομμύρια χρησιμοποιούν φτωχό εξοπλισμό browser ή εργάζονται κάτω από δύσκολες συνθήκες χρήσης Αν το website σας δε διαθέτει χαρακτηριστικά όπως αυξομειούμενα fonts, εικόνες που συνοδεύονται από κατάλληλη περιγραφή και εύκολη πλοήγηση, αυτοί οι άνθρωποι δεν θα έχουν πρόσβαση στην πληροφορία σας Για να είμαστε πιο ακριβείς, το site σας θα παραβιάζει τα δικαιώματα αυτών των ανθρώπων!!! 4
Άλλοι λόγοι για να κάνετε το site σας προσβάσιμο Θα βελτιώσει τη φήμη, το κύρος και την εικόνα του Θα βελτιώσει την ικανοποίηση των επισκεπτών (πελατών) Θα αυξήσει τον αριθμό των επισκεπτών Θα επιτρέψει στους επισκέπτες να παραμείνουν περισσότερο στο site σας Θα αυξήσει τον αριθμό των επισκεπτών που επιστρέφουν (returning visitors) Θα κάνει το site πιο εύχρηστο ακόμα και για ανθρώπους χωρίς αναπηρίες Θα κάνει το site πιο εύχρηστο για χρήστες που έχουν απενεργοποιήσει την εμφάνιση εικόνων Θα σας επιτρέψει να προσελκύσετε μέρος της γρηγορότερα αναπτυσσόμενης πληθυσμιακής ομάδας: τους ηλικιωμένους! Συστατικά προσβασιμότητας και σενάριο εμπλοκής Τεχνικές προδιαγραφές προδιαγράφουν τις τεχνολογίες (π.χ. ετικέτα alt της XHTML 1.0) WAI οδηγίες WCAG, ATAG, και UAAG Πώς να υλοποιήσεις για παράδειγμα το εναλλακτικό κείμενο για μια εικόνα. Οι σχεδιαστές ιστού να εξασφαλίσουν το κατάλληλο περιεχόμενο του alt Τα εργαλεία συγγραφής: να ενδυναμώσουν και να προάγουν την χρήση του alt Εργαλεία αξιολόγησης: έλεγχος αν υπάρχει το alt (αρκεί μόνο να υπάρχει??!!) 5
Συστατικά προσβασιμότητας και σενάριο εμπλοκής Οι browsers προσφέρουν διεπαφή στο alt Οι υποστηρικτικές τεχνολογίες προσφέρουν στον χρήστη πρόσβαση στο alt με συγκεκριμένο τρόπο (modality), π.χ. με screen reader Οι χρήστες γνωρίζουν (ευχρηστία φυλλομετρητή) πως να χρησιμοποιήσουν τον browser και την υποστηρικτική τεχνολογία για να πάρουν το alt, π.χ. τι ρυθμίσεις πρέπει να κάνουν στον browser ή πώς να ενεργοποιήσουν το screen reader Προσβασιμότητα στον Ιστό 6
Εισαγωγή στις WCAG 1.0 Ένα έγγραφο που εκδόθηκε το 1999 Οι 14 οδηγίες του προορίζονται για όλους του σχεδιαστές περιεχομένου web (page authors and site designers) και για τους σχεδιαστές των εργαλείων συγγραφής: 1. Εξασφάλισε ισοδύναμες εναλλακτικές εκδόσεις σε ήχο και εικόνα 2. Μην εμπιστεύεστε μόνο το χρώμα 3. Χρησιμοποιείστε style sheets (διαχωρισμός περιεχομένου παρουσίασης) 4. Διευκρίνισε τη γλώσσα που χρησιμοποιείται (π.χ. ελληνικά, αγγλικά) 5. Δημιουργείστε πίνακες που να μετασχηματίζονται κατάλληλα 6. Εξασφάλισε ότι οι σελίδες που χαρακτηρίζονται από νέες τεχνολογίες (π.χ. flash animation) μετασχηματίζονται κατάλληλα Εισαγωγή στις WCAG 1.0 7. Εξασφάλισε τον έλεγχο από τον χρήστη τις ευαίσθητες σε χρόνο αλλαγές του περιεχομένου 8. Εξασφάλισε άμεση προσβασιμότητα στις εμπεδωμένες διεπαφές 9. Σχεδίαση για ανεξαρτησία συσκευής 10. Χρησιμοποίησε προσωρινές λύσεις 11. Χρησιμοποίησε W3C τεχνολογίες και οδηγίες 12. Εξασφάλισε πληροφορία πλαισίου και προσανατολισμού 13. Εξασφάλισε καθαρούς μηχανισμούς πλοήγησης 14. Εξασφάλισε ότι τα έγγραφα είναι καθαρά και απλά 7
Εισαγωγή στις WCAG 2.0 Ο στόχος των WCAG 2.0 παραμένει η προώθηση της προσβασιμότητας του περιεχομένου στο Web Οι WCAG 2.0 είναι οργανωμένες γύρω από τέσσερις σχεδιαστικές αρχές: 1. Το περιεχόμενο πρέπει να είναι αισθητό 2. Τα στοιχεία της διεπαφής πρέπει να είναι λειτουργικά 3. Το περιεχόμενο και τα στοιχεία ελέγχου πρέπει να είναι κατανοητά 4. Το περιεχόμενο πρέπει να είναι αρκετά εύρωστο ώστε να δουλεύει με τρέχουσες και μελλοντικές τεχνολογίες ιστού Κάθε σχεδιαστική αρχή περιέχει έναν αριθμό οδηγιών (guidelines) Κάθε οδηγία περιέχει έναν αριθμό "κριτηρίων επιτυχίας" Κάθε κριτήριο ανήκει σε ένα επίπεδο (level) προτεραιότητας (1,2,3) και προτείνει τεχνικές (techniques) Δουλεύοντας με τις WCAG 2.0: παράδειγμα Αρχή 1: Το περιεχόμενο πρέπει να είναι αισθητό. Οδηγία 1.3: Εξασφάλισε ότι η πληροφορία, η λειτουργικότητα και η δομή μπορούν να διαχωριστούν από την παρουσίαση. Κριτήριο επιτυχίας 1: Οι δομές μέσα στο περιεχόμενο θα πρέπει να μπορούν να καθοριστούν προγραμματιστικά (από μηχανή). Επίπεδο προτεραιότητας: ρ 1 (μέγιστη γ ηπροτεραιότητα) ρ ) Τεχνικές Μορφοποίηση παρουσίασης με CSS και όχι με εντολές σήμανσης (HTML) 8
Υποβοήθηση προσβασιμότητας από εργαλεία συγγραφής web περιεχομένου (authoring tools) Κανένα εργαλείο συγγραφής δεν αυτοματοποιεί και υποστηρίζει πλήρως τη δημιουργία προσβάσιμου περιεχομένου Τα περισσότερα απαιτούν τουλάχιστον κάποιο χειρισμό HTML κώδικα «με το χέρι» Ο Adobe Dreamweaver προσφέρει ικανοποιητική υποβοήθηση προσβασιμότητας Ο καλύτερος τρόπος για να εξασφαλίσετε την προσβασιμότητα των σελίδων σας είναι ο προσεκτικός σχεδιασμός, ανάπτυξη, έλεγχος (testing) και αξιολόγηση (evaluation) Προσβάσιμες και μη προσβάσιμες σελίδες με χρήση screen readers Η προσβασιμότητα μέσα από τα μάτια ενός screen reader «Καλό» και «κακό» screen reading Η σημασία των HTML headings στην προσβασιμότητα 9
DOCTYPE / Language Specification Χρήση της ετικέτας <!DOCTYPE> για να προσδιορίσετε ποιο ακριβώς πρότυπο χρησιμοποιείται Έτσι, θα γίνει πιο εύκολος ο έλεγχος εγκυρότητας του κώδικα από κάποιο εργαλείο αργότερα (π.χ. http://validator.w3.org ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd w3 dtd"> Αναφέρετε τη γλώσσα κειμένου Αν χρησιμοποιείτε κείμενο γραμμένο σε ξένες γλώσσες, πληροφορήστε τις υποστηρικτικές τεχνολογίες (assistive technologies) για την εναλλαγή μεταξύ γλωσσών: <p>όταν ο καθηγητής των Γαλλικών μπήκε στην αίθουσα, μας χαιρέτησε: <span lang="fr">"bonjour! Comment allez-vous aujourd'hui?"</span>.</p> 10
Γραμματοσειρές Το <FONT> tag δε θα υποστηρίζεται μελλοντικά (deprecated) μη το χρησιμοποιείτε! Οι γραμματοσειρές και η μορφοποίησή τους να γίνεται μέσω CSS Μην προσδιορίζετε ακριβή μεγέθη γραμματοσειράς αφού μπορεί να μην υποστηρίζονται από τους browser. Συνίσταται η χρήση σχετικών μεγεθών, ποσοστών, +n/ n, ή CSS περιγραφέων (big, bigger, x large, κλπ) Η γραμματοσειρά πρέπει να είναι καθαρή και αναγνώσιμη Να προσδιορίζετε μια ποικιλία από επιλογές γραμματοσειράς. Συνίσταται η χρήση των sans serif fonts Χρώμα Επιβάλεται η μεγάλη αντίθεση (contrast) Πολύ απαλό χρώμα σε πολύ σκούρο υπόβαθρο ή αντίστροφα Αραιή ή καμία χρήση background εικόνων καθώς μειώνουν το contrast του κειμένου Αν οι χρήστες απενεργοποιούν την background εικόνα, το κείμενο θα πρέπει να εξακολουθεί να είναι αναγνώσιμο Το χρώμα δεν πρέπει να είναι το μόνο μέσο για να επικοινωνήσετε πληροφορία. Συνίσταταται η παράλληλη χρήση συμβόλων ή άλλων διακριτικών 11
Κίνηση Αποφύγετε οπτικά εφέ κίνησης ή τρεμοπαίγματος ή λάμψης καθώς: Χρήστες με φωτο ευαίσθητη επιληψία μπορεί να έχουν κρίση με συχνότητα τρεμοπαίγματος μεταξύ 2 55Hz Images and Image Maps Εικόνες που είναι σημαντικές για την απόδοση πληροφορίας πρέπει να περιλαμβάνουν την ιδιότητα alt για την περιγραφή της (φανταστείτε ί να περιγράφετε το site μέσω τηλεφώνου) <img src="1.gif" alt= Λογότυπο Πανεπιστημίου" /> Εικόνες οι οποίες χρησιμοποιούνται αποκλειστικά για λόγους αισθητικής/μορφοποίησης πρέπει να περιλαμβάνουν ένα κενό alt: <img src="spacer.gif" alt="" /> 12
Χάρτες εικόνας (Image Maps) Προσδιορισμός alt tags για όλα τα διακριτά μέρη του image map <map name="usemap"> <area coords="550,1,585,18" href="index.html" alt="home" /> </map> Η μεγάλη αντιπαράθεση σχετικά με τη χρήση εικόνων Οι εικόνες χρησιμοποιούνται συχνά για να εμφανίσουμε stylish text, μπάρες πλοήγησης, κλπ. Γενικά, συνίσταται προσεκτική και ορθολογική χρήση τους Πολλοί πιστεύουν ότι η χρήση τους συνιστά παραβίαση των οδηγιών προσβασιμότητας Άλλωστε προχωρημένες CSS τεχνικές επιτρέπουν την εμφάνιση κειμένου πολύ πιο εντυπωσιακού οπτικά σε σχέση με παλαιότερα Οι εικόνες αργούν πολύ περισσότερο να «κατέβουν» σε σχέση με το κείμενο Οι μηχανές αναζήτησης δεν μπορούν να καταλογοποιήσουν εικόνες, ακόμα και αν αναγράφουν κείμενο Αποφύγετε τη χρήση εργαλείων συγγραφής που δημιουργούν σελίδες ως ένα παζλ από εικόνες ψηφίδες (Adobe GoLive, Photoshop, Imageready, Fireworks) 13
Πίνακες (HTML Tables) H χρήση πινάκων για ορισμό της διάταξης σελίδων είναι ακόμα κοινή αλλά αμφίβολο αν θα υποστηρίζεται στο μέλλον προετοιμαστείτε! Αν ο πίνακας χρησιμοποιείται για να περιέχει δεδομένα τότε συνίσταται: η χρήση των ιδιοτήτων title και summary Η χρήση των ετικετών <th> για τις επικεφαλίδες του πίνακα Όταν χρησιμοποιείτε πίνακα για layout τότε να του προσθέστε κενή την ιδιότητα summary: <table summary=""> </table> Ένας προσβάσιμος πίνακας <table title="class table" summary="this table includes two columns with the names and sirnames of a class students"> <caption>λεζάντα πίνακα</caption> <tr> <th>όνομα</th> <th>επώνυμο</th> </tr> <tr> <td>μάκης</td> <td>καμάκης</td> </tr> <tr> <td>μαρία</td> <td>φωτίου</td> </tr> </table> 14
Framesets και Inline Frames Τα χρήση πλαισίων είναι πολύ κακή ιδέα από πλευράς προσβασιμότητας Εναλλακτικές: Inline frames CSS2 layouts Σε ένα τυπικό browser, αυτή η σελίδα με πλαίσια εμφανίζεται ως ΜΙΑ σελίδα Ένας screen reader την ερμηνεύει ως τρεις σελίδες Forms Χρησιμοποιήστε το <LABEL> tag για να περιγράψετε τη χρήση του πεδίου της φόρμας (π.χ. textfield, checkbox, list, button, κλπ) ) που ακολουθεί Ορίστε τη σειρά με την οποία θα ενεργοποιούνται τα πεδία με διαδοχικά πατήματα του πλήκτρου Tab (tab order) με χρήση της ιδιότητας tabindex=n της ετικέτας του συγκεκριμένου πεδίου Συσχετίστε τα πεδία σας με shortcut keys, δηλαδή τους χαρακτήρες που όταν πατηθούν στο πληκτρολόγιο θα ενεργοποιηθούν τα αντίστοιχα πεδία (ιδιότητα accesskey=a) 15
Παράδειγμα προσβάσιμης φόρμας <label>name:<input type="text" name="name" tabindex="1" /></label> <label>sirname: <input type="text" text name="sirname" tabindex="2" /></label> <label>email: <input type="text" name="sirname" tabindex="3" /></label> <input type="submit" name="button" id="button" value="submit" tabindex="4" /> Καλωσορίζοντας τα CSS2 H τεχνολογία των CSS2 υπόσχεται να απαλείψει την ανάγκη χρήσης πινάκων (tables) και πλαισίων (frames) για τον προσδιορισμό της διάταξης του περιεχομένου στις ιστοσελίδες λδ που δημιουργήθηκαν και χρησιμοποιήθηκαν εξ ανάγκης τις πρώτες ημέρες του HTML design Δυστυχώς δεν είμαστε ακόμα εκεί. Ο ορισμός layout με χρήση CSS2 υπολείπεται ακόμα σε δημοφιλία τη χρήση tables Υπάρχει πρόβλημα με την υποστήριξη του προτύπου CSS2 από browsers Ωστόσο, τα περισσότερα bugs διορθώνονται στις πλέον πρόσφατες εκδόσεις browsers, δηλαδή όλοι οι browsers πλησιάζουν όλο και περισσότερο στη συμβατότητά τους με τα πρότυπα του W3C 16
CSS2 παραδείγματα Client Side Scripting Το Client side scripting (π.χ. JavaScript), μπορεί να είναι εξαιρετικά ισχυρή τεχνολογία για τη δημιουργία εντυπωσιακών εφέ, πλοήγηση, δυναμικό περιεχόμενο, έλεγχο εγκυρότητας φορμών, κλπ. Αλλά: κάποιοι χρήστες απενεργοποιούν την εκτέλεση JavaScript στον browser τους και κάποιοι παλαιοί browsers δεν την υποστηρίζουν καθόλου Οι Screen readers πρακτικά δεν μπορούν να ερμηνεύσουν Javascript κώδικα, π.χ. όλα τα mouseover εφέ χάνονται Άρα η σελίδα μας πρέπει να είναι λειτουργική και χωρίς την εκτέλεση του JavaScript κώδικα Χρήση της <noscript> ετικέτας για την παροχή εναλλακτικών στον Javascript κώδικα 17
Flash και Multimedia Το περιεχόμενο ενός flash movie δεν είναι αναγνώσιμο από screen readers Αλλά η προσβασιμότητα πρέπει να υποστηριχθεί από το ίδιο το flash movie και όχι από την XHTML Πρέπει να υπάρχουν captions (συνοπτικές περιγραφές υπό μορφή κειμένου) για όλα τα ενσωματωμένα πολυμεσικά αρχεία Τα πολυμεσικά αρχεία θα πρέπει ιδανικά να συνοδεύονται από ακουστική περιγραφή (audio description) Τα πολυμεσικά αρχεία πρέπει να είναι σε format προσβάσιμο από προσβάσιμους αναπαραγωγείς (players), π.χ.windows Media Player και RealOne Player Flash και Multimedia: κάποιες απλές οδηγίες Πολλαπλοί τρόποι παρουσίασης: Το Flash μπορεί να παρέχει περιεχόμενο με πολλαπλούς τρόπους Προσβασιμότητα από το πληκτρολόγιο: Το Flash επιτρέπει υψηλότερου επιπέδου διαδραστικότητα μέσω του πληκτρολογίου από ότι επιτρέπει η HTML. Πολλά Flash movies μπορούν να είναι λειτουργικά, ισχυρά και εύκολα στη χρήση επιτρέποντας πρόσβαση από το πληκτρολόγιο 18
Έλεγχος συμμόρφωσης ιστοσελίδων στις οδηγίες προσβασιμότητας (WAI/WCAG validation tools) http://wave.webaim.org/ 19