Μενού

Οδηγός εργαλείων δοκιμής προσβασιμότητας WAVE

wave accessibility testing tool tutorial

Δοκιμάστε Το Όργανο Μας Για Την Εξάλειψη Των Προβλημάτων

Εκπαιδευτικό εργαλείο WAVE Web Accessibility Tool: Πώς να χρησιμοποιήσετε το WAVE Chrome και Firefox Extension

Γραμμή εργαλείων προσβασιμότητας στο Web εξηγήθηκε λεπτομερώς στο προηγούμενο σεμινάριό μας. Αυτό το σεμινάριο είναι συνέχεια του πρώτου σε αυτήν τη σειρά, ελέγξτε το εδώ - Δοκιμή προσβασιμότητας στο Web - μέρος 1 .

Σε αυτό το σεμινάριο, εξετάσαμε μερικές βασικές έννοιες για το τι είναι η προσβασιμότητα και πώς μπορεί να αξιολογηθεί χρησιμοποιώντας εργαλεία δοκιμής προσβασιμότητας.

Σε αυτό το σεμινάριο, θα δούμε μερικά ακόμη εργαλεία προσβασιμότητας όπως το WAVE Toolbar, το εργαλείο προσβασιμότητας JAWS, τις τεχνικές και τις λεπτομέρειες.

Προσβασιμότητα WAVE

(εικόνα πηγή)

Τι θα μάθετε:

ΚΥΜΑ(Εργαλείο αξιολόγησης προσβασιμότητας στον Ιστό)

Γραμμή εργαλείων WAVE

Το εργαλείο WAVE είναι ένα εργαλείο αξιολόγησης προσβασιμότητας στον ιστό - μια γραμμή εργαλείων για Πρόγραμμα περιήγησης Firefox.

Είναι σημαντικό να σημειωθεί ότι, το WAVE δεν μπορεί να σας πει εάν το περιεχόμενο του ιστού σας είναι προσβάσιμο. μόνο ένας άνθρωπος μπορεί να καθορίσει την πραγματική προσβασιμότητα. Ωστόσο, το WAVE μπορεί να σας βοηθήσει να αξιολογήσετε την προσβασιμότητα του περιεχομένου σας στο Web.

Όλες οι αξιολογήσεις πραγματοποιούνται απευθείας στο πρόγραμμα περιήγησης και δεν αποστέλλονται πληροφορίες στους διακομιστές WAVE. Αυτό εξασφαλίζει 100% ιδιωτικές και ασφαλείς αναφορές προσβασιμότητας.

Για λήψη της γραμμής εργαλείων προσβασιμότητας Ιστού WAVE μεταβείτε στη διεύθυνση http://wave.webaim.org/toolbar/ και κατεβάστε το στο F πρόγραμμα περιήγησης irefox . Βεβαιωθείτε ότι θα ανοίξετε τη διεύθυνση URL λήψης στο πρόγραμμα περιήγησης Firefox επειδή η γραμμή εργαλείων WAVE υποστηρίζει μόνο τον Firefox.

Τρόπος χρήσης της γραμμής εργαλείων προσβασιμότητας Web WAVE

Ακολουθούν οι δυνατότητες που μπορούμε να χρησιμοποιήσουμε ενώ εργαζόμαστε στο πρόγραμμα περιήγησης Firefox:

# 1) Επιλέξτε τον ιστότοπο http://www.easports.com/ και, στη συνέχεια, κάντε κλικ στο 'Σφάλματα, δυνατότητες και ειδοποιήσεις', θα βρείτε τη σελίδα με ειδοποιήσεις προσβασιμότητας και σφάλματα σε κίτρινο χρώμα. Τοποθετήστε το δείκτη του ποντικιού πάνω στις εικόνες για να δείτε τις λεπτομέρειες των ειδοποιήσεων.

( Σημείωση : κάντε κλικ σε οποιαδήποτε εικόνα για μεγέθυνση)

Εργαλεία δοκιμής προσβασιμότητας στο Web 1

ποιος είναι ο καλύτερος μετατροπέας youtube σε mp3;

#δύο) Τώρα κάντε κλικ στο 'Δομή / Προβολή παραγγελίας', θα λάβετε τη σελίδα με λεπτομέρειες Inline Frame.

Εργαλείο αξιολόγησης προσβασιμότητας Web WAVE

# 3) Τώρα κάντε κλικ στο 'Προβολή μόνο κειμένου', ο ιστότοπος θα εμφανίζεται χωρίς εικόνες, στυλ και διατάξεις.

Εργαλείο αξιολόγησης προσβασιμότητας στο Web

# 4) Τα εικονίδια 'Προβολή διάρθρωσης' στη γραμμή εργαλείων θα σας ενημερώσουν εάν οι επικεφαλίδες είναι σε σειρά ή όχι.

Εργαλείο αξιολόγησης προσβασιμότητας WAVE Web 4

δοκιμή φορτίου έναντι δοκιμής απόδοσης έναντι δοκιμής πίεσης

# 5) Το εικονίδιο 'Επαναφορά σελίδας' θα ανανεώσει τη σελίδα.

Προσβασιμότητα στον Ιστό 5

# 6) Κάνοντας κλικ στο 'Απενεργοποίηση στυλ' θα αφαιρεθούν τα στυλ CSS από τη σελίδα.

Εργαλεία προσβασιμότητας στον Ιστό 6

# 7) Το κουμπί 'Κλειδί εικονιδίων' θα εμφανίσει μια λίστα με όλα τα εικονίδια WAVE με πρόσθετες λεπτομέρειες, πληροφορίες και προτάσεις.

Εργαλείο αξιολόγησης προσβασιμότητας στον Ιστό 7

Μπορείτε επίσης να αξιολογήσετε την προσβασιμότητα του ιστότοπου χωρίς να κάνετε λήψη του εργαλείου wave και να το χρησιμοποιήσετε απευθείας στο διαδίκτυο.

Βήματα για την επαλήθευση της προσβασιμότητας του ιστότοπου

Βήμα 1) Κάντε κλικ στο URL: http://wave.webaim.org/

Βήμα 2) Εισάγετε το Διεύθυνση ιστοσελίδας στο κείμενο κουτί και πατήστε enter. Θα χρησιμοποιήσουμε με ως παράδειγμα. Εισάγετε λοιπόν τον ιστότοπο www.facebook.com στο πλαίσιο κειμένου και κάντε κλικ στο κουμπί enter.

Βήμα # 3) Θα βρείτε συνοπτικές λεπτομέρειες στην αριστερή πλευρά της πλοήγησης.

  1. Τα σφάλματα θα εμφανίζονται με κόκκινο χρώμα με μέτρηση. Στην περίπτωσή μου, εμφανίζεται ως 13.
  2. Οι ειδοποιήσεις θα εμφανίζονται με κίτρινο χρώμα με ένα πλήθος 13.
  3. Τα χαρακτηριστικά θα είναι πράσινα με πλήθος 10.
  4. Τα δομικά στοιχεία θα είναι 6 σε μπλε χρώμα.
  5. Τα HTML5 και ARIA θα έχουν 15 μοβ χρώμα.
  6. Τα σφάλματα αντίθεσης θα έχουν 14 σε μαύρο χρώμα.

Έλεγχος προσβασιμότητας στον Ιστό 8

Κάνοντας κλικ σε κάθε εικονίδιο θα σας δώσουν περισσότερες πληροφορίες σχετικά με τα στοιχεία όπως φαίνεται παραπάνω για ειδοποίηση (στο κέντρο της σελίδας).

Τώρα, ας δούμε μια διαφορετική κατηγορία εργαλείων:

Δωρεάν επικυρωτές προσβασιμότητας ιστοσελίδας:

Λίγα περισσότερα καλύτερα εργαλεία ελέγχου προσβασιμότητας στο Web:

Εργαλεία αναπηρίας όρασης

Η αναπηρία όρασης αναφέρεται σε απώλεια όρασης. Υπάρχουν διαφορετικά είδη αναπηρίας όρασης:

  • Τύφλωση
  • Χαμηλή ή περιορισμένη όραση
  • Αχρωματοψία

Οι χρήστες με προβλήματα όρασης χρησιμοποιούν λογισμικό υποβοηθητικής τεχνολογίας που διαβάζει δυνατά περιεχόμενο.Για παράδειγμαJAWS για λειτουργικά συστήματα Window, NVDA για λειτουργικά συστήματα Window, Voice Over για Mac. Ο χρήστης UA με αδύναμη όραση μπορεί επίσης να κάνει το κείμενο μεγαλύτερο με μια ρύθμιση προγράμματος περιήγησης ή υπέροχη ρύθμιση του λειτουργικού συστήματος. Θα μάθουμε αυτές τις δυνατότητες με τη βοήθεια εργαλείων Magnifiers και JAWS.

Προσβασιμότητα στον Ιστό 9

Α) Μεγεθυντικοί φακοί

1) Μεγεθυντικός φακός ζουμ μεγεθύνει τα πάντα στην οθόνη του υπολογιστή σας και διευκολύνει την προβολή και τη χρήση της εφαρμογής. Μπορείτε να το κατεβάσετε από αυτός ο σύνδεσμος .
Για να πάρετε μια καλή ιδέα για το πώς λειτουργεί αυτό, σας συνιστούμε να κάνετε λήψη μιας δωρεάν δοκιμαστικής έκδοσης και πειράματος.

δύο) Μεγεθυντικός φακός παραθύρου μεγεθύνει επίσης διάφορα μέρη της οθόνης. Μπορούμε να το ανοίξουμε κάνοντας κλικ στο κουμπί Έναρξη από την επιφάνεια εργασίας σας και στη συνέχεια πληκτρολογήστε Μεγεθυντικός φακός. Κάντε κλικ στο πρόγραμμα Μεγεθυντικός φακός. Όταν τοποθετείτε το δείκτη του ποντικιού στην ιστοσελίδα, αυτό το εργαλείο μεγεθύνει το μέγεθος της οθόνης και εμφανίζει.

πώς να ζητήσετε προώθηση στην αξιολόγηση απόδοσης

Εργαλεία αναπηρίας όρασης 1

3) Οι τυφλοί χρήστες υπολογιστών, που δεν μπορούν να χρησιμοποιήσουν μια κανονική οθόνη υπολογιστή, χρησιμοποιούν ανανεώσιμη οθόνη Braille ή τερματικό Braille για να διαβάσουν την έξοδο κειμένου.

Σύμφωνα με Βικιπαίδεια , μια ανανεώσιμη οθόνη Braille ή ένα τερματικό Braille είναι μια ηλεκτρομηχανική συσκευή για την εμφάνιση χαρακτήρων Braille, συνήθως μέσω ακίδων με στρογγυλεμένες άκρες ανυψωμένες μέσω οπών σε επίπεδη επιφάνεια.

Εργαλεία αναπηρίας όρασης προσβασιμότητας στο διαδίκτυο 11

Β) JAWS - Πρόσβαση στην εργασία με ομιλία

Το JAWS είναι ένα πρόγραμμα ανάγνωσης οθόνης που χρησιμοποιείται για τη δοκιμή Ιστοσελίδων σε λειτουργικό σύστημα παραθύρων που επιτρέπει στους χρήστες με προβλήματα όρασης να διαβάσουν την οθόνη. Το JAWS υποστηρίζει όλες τις εκδόσεις λειτουργικών συστημάτων, καθώς και ανανεώσιμη οθόνη Braille.

Προσβασιμότητα στον Ιστό 12

Ακολουθούν οι εντολές πληκτρολογίου για χρήση του JAWS:

Οι βασικές λειτουργίες που δοκιμάζονται με τη βοήθεια του JAWS είναι:

  • Το JAWS παρέχει τον αριθμό των πλήκτρων για πλοήγηση σε ιστοσελίδες. Για παράδειγμα πλήκτρα βέλους, πλήκτρα σελίδας πάνω και κάτω, αρχική σελίδα, τέλος και πολλά άλλα πλήκτρα πλοήγησης JAWS.
  • Σύνδεσμοι, εικόνες και χάρτες εικόνων: Το JAWS παρέχει πλήκτρα για πλοήγηση από τον ένα σύνδεσμο στον άλλο στην ιστοσελίδα.
  • Πεδία και στοιχεία ελέγχου φόρμας HTML : Το JAWS παρέχει πλήκτρα για πλοήγηση μεταξύ των στοιχείων φόρμας
  • Πλαίσια HTML : Περιηγηθείτε στα καρέ με το πληκτρολόγιο.
  • Πίνακες : Περιήγηση στα κελιά του πίνακα

Αυτό είναι μια σύντομη επισκόπηση των διαφορετικών τεχνικών και εργαλείων που χρησιμοποιούνται για την ολοκλήρωση της αξιολόγησης της προσβασιμότητας.

Συμβουλές δοκιμής προσβασιμότητας για προγραμματιστές και δοκιμαστές

  • Έχουν όλες οι ενεργές εικόνες alt-text που δείχνει τι κάνει ο σύνδεσμος ή το κουμπί;
  • Όλες οι διακοσμητικές εικόνες και οι περιττές εικόνες έχουν μηδενικό (alt = ””) κείμενο alt;
  • Διαθέτουν όλες οι εικόνες πληροφοριών alt-text που παρέχουν τις ίδιες πληροφορίες με τις εικόνες που παρέχονται;
  • Είναι η σελίδα οργανωμένη με επικεφαλίδες; Επισημαίνονται ως επικεφαλίδες;
  • Μπορείτε να έχετε πρόσβαση σε όλα χρησιμοποιώντας το πληκτρολόγιο;
  • Θα διαβάζεται η σελίδα σας με λογική σειρά σε πρόγραμμα ανάγνωσης οθόνης;
  • Είναι σαφές ποιο στοιχείο είναι στο επίκεντρο ενώ χρησιμοποιείτε την πρόσβαση στο πληκτρολόγιο;
  • Διατίθενται όλες οι σημαντικές πληροφορίες σε ένα βίντεο μέσω τυπικού ήχου ή μέσω πρόσθετης ηχητικής περιγραφής;

Η ομάδα ανάπτυξης μπορούν να βεβαιωθούν ότι το προϊόν τους είναι συμβατό με την προσβασιμότητα μέσω επιθεώρησης κώδικα και δοκιμής μονάδας.

Τυπικές δοκιμαστικές περιπτώσεις:

  • Βεβαιωθείτε ότι όλες οι λειτουργίες είναι διαθέσιμες μόνο μέσω πληκτρολογίου (μην χρησιμοποιείτε το ποντίκι)
  • Βεβαιωθείτε ότι οι πληροφορίες είναι ορατές όταν η ρύθμιση της οθόνης αλλάξει σε λειτουργίες Υψηλής αντίθεσης.
  • Βεβαιωθείτε ότι τα εργαλεία ανάγνωσης οθόνης μπορούν να διαβάσουν όλο το διαθέσιμο κείμενο και κάθε εικόνα / Εικόνα να έχει αντίστοιχο εναλλακτικό κείμενο που να σχετίζεται με αυτό.
  • Βεβαιωθείτε ότι οι ενέργειες πληκτρολογίου που καθορίζονται από το προϊόν δεν επηρεάζουν τις συντομεύσεις πληκτρολογίου προσβασιμότητας.

συμπέρασμα

Η προσβασιμότητα στον Ιστό προσφέρει πολλές ευκαιρίες για άτομα με ειδικές ανάγκες. Ωστόσο, πρέπει να αναγνωρίσουμε το γεγονός ότι είναι δύσκολο να παρέχουμε πλήρη πρόσβαση για κάθε είδους αναπηρίες ή δυσκολίες που θα μπορούσαν να εμποδίσουν έναν χρήστη να φτάσει στο περιεχόμενο μιας ιστοσελίδας.

Μπορούν να γίνουν βήματα, αλλά μπορεί να μην είναι 100%. Εάν ακολουθήσουμε τα πρότυπα που περιγράφονται σε αυτό το άρθρο από το αρχικό στάδιο της ανάπτυξης, μπορούμε εύκολα να δημιουργήσουμε έναν προσβάσιμο ιστότοπο για τους περισσότερους χρήστες.

Μη διστάσετε να προτείνετε περισσότερα εργαλεία δοκιμής προσβασιμότητας και συμβουλές στα παρακάτω σχόλια.

Εκπαιδευτικό πρόγραμμα PREV | Πρώτο σεμινάριο

Συνιστώμενη ανάγνωση

^