Είναι άπειρες οι φορές όπου φίλοι, γνωστοί ή ακόμα και άγνωστοι ζητάνε την γνώμη μου για το πόσο προσβάσιμο (accessible) είναι site τους. Οι περισσότεροι έχουν την αίσθηση πως εμείς (οι web designers/developers) είμαστε μάγοι ή έχουμε πολύ εξειδικευμένο εξοπλισμό και software για να κάνουμε κάτι τέτοιο. Στην πραγματικότητα το μόνο που χρειάζεται κάποιος, είναι ένας σύγχρονος browser (κατά προτίμηση Firefox με το web developer toolbar) και κάποιες εναλλακτικές ρυθμίσεις, έτσι ώστε να εντοπίσει γρήγορα τα διάφορα accessibility προβλήματα που πιθανόν να υπάρχουν. Στο παρακάτω post λοιπόν περιγράφω πολύ συνοπτικά πως μπορεί κάποιος, να κάνει ένα αξιόλογο web accessibility τεστ μέσα σε 10 μόλις λεπτά (όχι δεν σας κοροϊδεύω!). Για να μπορεί το post να διαβαστεί από όλους (και όχι μόνο από ειδικούς του χώρου), θα παρακάμψω την πολύ θεωρία πίσω από κάθε test, και θα εστιάσω την προσοχή στα παραδείγματα. Έχουμε και λέμε λοιπόν:
Απενεργοποιήστε τα images και δείτε πως φαίνεται το site σας χωρίς αυτά
Προσπαθείστε το site σας να δείχνει αξιοπρεπέστατο ακόμα και εάν δεν έχουν φορτωθεί τα γραφικά του (είτε γιατί ο χρήστης τα έχει απενεργοποιήσει, είτε επειδή κάποιο πρόβλημα στον server δεν τα αφήνει να κατέβουν, είτε επειδή ο χρήστης δεν έχει καλό bandwidth, κτλ.). Όποιος και να είναι ο λόγος το site σας θα πρέπει να δείχνει σωστά και χωρίς γραφικά. Απλό και κατανοητό νομίζω, και για τον λόγο αυτό δεν θα μακρηγορήσω περισσότερο, αλλά θα περάσω κατευθείαν σε 2 παραδείγματα.
Στο παρακάτω παράδειγμα λοιπόν, το blog του Γιάννη δεν “αλλοιώνεται” ούτε “χαλάει” όταν του απενεργοποιήσουμε τα images. Επίσης χρησιμοποιεί σωστά το alternative text περιγράφοντας τα γραφικά που δεν εμφανίζονται…
Αντιθέτως, το site Avopolis, δείχνει αρκετά άσχημο όταν απενεργοποιούμε τα images. Το χειρότερο από όλα είναι πως το κεντρικό μενού του site εξαφανίζετε, μιας και είναι όλο φτιαγμένο σε ένα image map!
Απενεργοποιείστε την Javascript
Ο κανόνας που ισχύει είναι αρκετά απλός: Δεν πρέπει να θεωρούμε πως ο χρήστης του site μας έχει την Javascript ενεργοποιημένη!
Στο blog το οποίο βρίσκεστε εάν απενεργοποιείστε την Javascript (η οποία χρησιμοποιείτε στην sidabar για τα διάφορα AJAX-like εφεδάκια), δεν θα χάσετε τίποτα από το περιεχόμενο του blog! Η τεχνική αυτή ονομάζεται Progressive enhancement, και το σκεπτικό πίσω από την τεχνική, είναι πως το site πρέπει να γίνεται σταδιακά πιο δυναμικό (interactive). Έτσι πρέπει πρώτα να έχουμε ένα καθαρό, σωστά δομημένο και σημασιολογικό (semantic) document (ή αλλιώς markup), μετά να τo εμπλουτίζουμε και να το παρουσιάσουμε κατάλληλα με τους ανάλογους styling κανόνες (CSS) και τέλος ότι extra interactivity θα θέλαμε να υπάρχει να κατασκευαστεί με σωστή χρήση της Javascript.
Αντίθετα στο site του Pop+Rock εάν δεν έχετε την Javascript ενεργοποιήμένη δεν δουλεύει το κεντρικό μενού του site! Το συγκεκριμένο λάθος προκαλεί και πολλά SEO προβλήματα που έχω αναφέρει σε παλιότερο post (Ποτέ μην χρησιμοποιείτε μενού φτιαγμένα από Flash ή Javascript).
Απενεργοποιείστε την CSS
Με αυτόν τον τρόπο θα καταλάβενετε πως φαίνεται πραγματικά το document σας, τόσο στους text-only browsers και στους screen readers, όσο και στα bots των μηχανών αναζήτησης! H παρακάτω εικόνα παρουσιάζει το blog μου, χωρίς καθόλου styles. Όπως παρατηρείτε, το document δεν έχει χάσει απολύτως τίποτα ούτε σε περιεχόμενο ούτε σε δομή, ενώ συνεχίζει να είναι προσβάσιμο σε όλους! Το μόνο που έχει χάσει είναι τα styles του, τα οποία του δίνουν την τελική μορφή του…
Αυξήστε το text-size από τον browser σας
Απλό αλλά σημαντικό τεστ. Απλά αυξήστε το text-size στον browser σας τουλάχιστον δύο φορές (πατώντας Ctrl + +). Εάν το site δεν αλλοιώνεται πολύ και γενικότερα το αποτέλεσμα είναι ικανοποιητικό τότε δεν υπάρχει κανένα πρόβλημα. Εάν το site παραμορφώνεται αρκετά, χάνεται κείμενο πίσω από άλλα elements, κτλ., τότε θα πρέπει να ξανασκεφτούμε κάποιες αποφάσεις που πήραμε κατά την δημιουργία του design μας…
Κάντε validate τον κώδικα σας
Σαν τελικό τεστ, και γενικότερα όποτε τελειώνετε κάποιο site ή template, όσο μεγάλο ή μικρό και να είναι, κάντε μια επίσκεψη στους (X)HTML και CSS validators, και διορθώστε τα προβλήματα που μπορεί να εμφανιστούν κατά το validation… Όσο πιο γρήγορα αποφασίσετε να το κάνετε, τόσο πιο εύκολα και γρήγορα θα επιλύσετε αυτά τα προβλήματα! Και μην ξεχνάτε, valid κώδικας σημαίνει πιο σταθερά και ποιοτικά site, τα οποία θα αντέχουν στον χρόνο!
Η παραπάνω διαδικασία θα σας βοηθήσει να εντοπίσετε πάρα πολύ γρήγορα σχεδόν όλα accessibility προβλήματα που μπορεί να έχει το site σας! Καθόλου άσχημα δηλαδή για τα μόλις 10 λεπτά χρόνου που θα ξοδέψετε! Από εκεί και πέρα μένει να επιλύσετε τα προβλήματα που εντοπίσατε, όπου φυσικά είναι και το δύσκολο αλλά απαραίτητο βήμα έτσι ώστε να κάνετε προσβάσιμο (accessible) το site σας. Ελπίζω τα παραδείγματα οπού ανέφερα να ήταν σαφή και κατανοητά, μιας και ο ελληνικός κυβερνοχώρος χρειάζεται αρκετή δουλειά ακόμα στο θέμα accessibility… Μείνετε συντονισμένοι λοιπόν για να κάνουμε το internet μια πιο σταθερή και λειτουργική πλατφόρμα!