wat tutorial
Οδηγός WAT ή Web Accessibility Toolbar για δοκιμές προσβασιμότητας:
Εργαλεία δοκιμής προσβασιμότητας εξηγήθηκαν λεπτομερώς στο προηγούμενο σεμινάριό μας στο Σειρά δοκιμών προσβασιμότητας .
WAT (Γραμμή εργαλείων προσβασιμότητας στο Web) - είναι μια γραμμή εργαλείων για Πρόγραμμα περιήγησης Internet Explorer και άλλα προγράμματα περιήγησης - Μπορεί να βοηθήσει στην αξιολόγηση μιας ιστοσελίδας ως προς τη συμμόρφωση με τις Οδηγίες προσβασιμότητας περιεχομένου Ιστού, έκδοση 2 (WCAG 2.0).
Πώς να χρησιμοποιήσετε το εργαλείο WAT;
Σας παρακαλούμε κατεβάστε και εγκαταστήστε το από εδώ .
Μετά την επιτυχή εγκατάσταση, θα δείτε επιπλέον εργαλείο προσβασιμότητας στον ιστό ακριβώς κάτω από τη γραμμή διευθύνσεων.
Θα το μάθουμε αυτό με τη βοήθεια του ιστότοπου της EAsports - http://www.easports.com.
# 1) Τίτλος σελίδας - Μπορούμε να επαληθεύσουμε τη γραμμή τίτλου της σελίδας στη γραμμή τίτλου του παραθύρου ή τη γραμμή τίτλου της καρτέλας των προγραμμάτων περιήγησης. Στο ποντίκι που αιωρείται στην καρτέλα θα σας δοθούν πληροφορίες για τον τίτλο της σελίδας.
Εισαγάγετε τη διεύθυνση URL http://www.easports.com και επαληθεύστε τον τίτλο της σελίδας στη γραμμή τίτλου της καρτέλας τοποθετώντας το ποντίκι.
# 2) Χρώμα - Το χρώμα του ιστότοπου πρέπει να περάσει στον Color Contrast Analyzer.
Υπάρχουν 3 διαφορετικά επίπεδα συμμόρφωσης για τον προσδιορισμό της αναλογίας χρώματος, δηλαδή Επίπεδο Α, ΑΑ και ΑΑΑ.
Πρέπει να πάρει ένα πέρασμα για AA ή AAA .
Το 'A' αντιπροσωπεύει το χαμηλό επίπεδο προσβασιμότητας, το 'AA' αντιπροσωπεύει το μέσο επίπεδο προσβασιμότητας και το 'AAA' αντιπροσωπεύει το υψηλότερο επίπεδο προσβασιμότητας.
Εισαγάγετε τη διεύθυνση URL http://www.easports.com i Στη γραμμή εργαλείων, κάντε κλικ στην καρτέλα Color και επιλέξτε Contrast Analyzer και επιβεβαιώστε.
# 3) Επικεφαλίδες - Οι επικεφαλίδες παρέχουν μια αποτελεσματική επισκόπηση του περιεχομένου της σελίδας. Όλες οι σελίδες πρέπει να ξεκινούν με επικεφαλίδες H1 ή H2. Το κείμενο της επικεφαλίδας πρέπει να είναι μεγαλύτερο, έντονο και να επισημαίνεται στις ιστοσελίδες. Και η Σελίδα πρέπει να ξεκινά με 'h1' και σε κάθε σελίδα πρέπει να υπάρχει τουλάχιστον μία επικεφαλίδα.
Για να επαληθεύσετε τη δομή της επικεφαλίδας κάντε κλικ στο http://www.easports.com και επιλέξτε καρτέλα Δομή και, στη συνέχεια, κάντε κλικ στη δομή κεφαλίδας και επαληθεύστε. Θα σας δώσει όλες τις λεπτομέρειες του τίτλου τίτλου. Θα εξετάσει επίσης εάν οι επικεφαλίδες τοποθετούνται σωστά ή όχι.
# 4) Alt κείμενο για εικόνες - Το χαρακτηριστικό alt υποστηρίζεται σε όλα τα μεγάλα προγράμματα περιήγησης. Όλες οι εικόνες πρέπει να έχουν συσχετισμένο κείμενο Alt. Εμφανίζει την τιμή του χαρακτηριστικού alt ως συμβουλή εργαλείου όταν τοποθετούμε το δείκτη του ποντικιού πάνω από την εικόνα. Αυτό παρέχει εναλλακτικές πληροφορίες μιας εικόνας εάν δεν είναι δυνατή η εμφάνιση της εικόνας.
Εισαγάγετε τη διεύθυνση url http://www.easports.com, Κάντε κλικ στην εμφάνιση εικόνων και επαληθεύστε εάν το κείμενο alt είναι διαθέσιμο για εικόνες.
Θα εμφανιστεί κάτω από το αναδυόμενο παράθυρο:
Θα λάβετε τις λεπτομέρειες όπως αναφέρθηκε παραπάνω.
# 5) Παραγγελία καρτέλας - Η σειρά ακολουθίας καρτελών πρέπει να εμφανίζεται λογικά και σωστά. Μπορείτε να πλοηγηθείτε στους διαφορετικούς συνδέσμους κάνοντας κλικ στο πλήκτρο καρτέλας. Αφού επιλέξετε την ένδειξη σειράς καρτελών, μπορείτε να δείτε τον αριθμό των αριθμών κοντά στους συνδέσμους που δείχνει πόσες φορές χρειάζεται να κάνετε κλικ στο πλήκτρο καρτέλας για να φτάσετε στον συγκεκριμένο σύνδεσμο.
Για να επαληθεύσετε την παραγγελία καρτέλας κάντε κλικ στη διεύθυνση url http://www.easports.com και κάντε κλικ στο Δομή και επιλέξτε δείκτη σειράς καρτελών.
# 6) Λίστες - Η λίστα πρέπει να εμφανίζεται σε σωστή δομή. Οι λίστες πρέπει πάντα να ελέγχονται για να βεβαιωθείτε ότι τα στοιχεία της λίστας περιλαμβάνονται πραγματικά σε μια λίστα. Η λίστα μπορεί να έχει δύο μορφές: διέταξε λίστα και χωρίς παραγγελία λίστα . Οι μη ταξινομημένες λίστες χρησιμοποιούν το το στοιχείο και οι ταξινομημένες λίστες χρησιμοποιούν το
στοιχείο.
Εισαγάγετε τη διεύθυνση url http://www.easports.com i Στη γραμμή εργαλείων, κάντε κλικ στη δομή και επιλέξτε Στοιχεία λίστας και επαληθεύστε τη σειρά της λίστας.
Παράδειγμα μη ταξινομημένης λίστας:
Παράδειγμα παραγγελίας λίστας:
# 7) Αντίθεση αναλογία - Θα πρέπει να έχει μια ελάχιστη αντίθεση από προεπιλογή. Τα προγράμματα περιήγησης στο Web πρέπει να επιτρέπουν στους χρήστες να αλλάζουν το χρώμα του κειμένου και του φόντου, εάν απαιτείται.
Εισαγάγετε τη διεύθυνση url google https://www.google.co.in/ και κάντε κλικ σε εικόνες και επιλέξτε Juicy Studio Luminosity Analyzer.
Θα ανοίξει ένα νέο παράθυρο με τίτλο Color Contrast Analyzer με τον πίνακα αποτελεσμάτων. Η τελευταία στήλη είναι Λόγος αντίθεσης φωτεινότητας.
java βασικές ερωτήσεις και απαντήσεις συνέντευξης
# 8) Ετικέτες - Οι ετικέτες πρέπει να εμφανίζονται σωστά.
Εισαγάγετε τη διεύθυνση url https://www.google.co.in/ και στη γραμμή εργαλείων κάντε κλικ στη Δομή και επιλέξτε ως σύνολο πεδίων / ετικέτες. Θα δείτε τις λεπτομέρειες πεδίου και ετικέτας.
# 9) Βασικό Δομή Ελεγχος - Σε αυτόν τον έλεγχο επαληθεύουμε ιστοσελίδες χωρίς εικόνες, στυλ και διάταξη.
Στη γραμμή εργαλείων, κάντε κλικ στην επιλογή Εικόνες και στη συνέχεια Κατάργηση εικόνων.
Τώρα επιλέξτε CSS και, στη συνέχεια, κάντε κλικ στο Απενεργοποίηση CSS.
Τέλος, κάντε κλικ στο Πίνακες και, στη συνέχεια, επιλέξτε Γραμμικοποίηση.
Ώρα για εξάσκηση:
Ας δώσουμε τώρα στους εαυτούς μας ένα δείγμα δοκιμασίας προσβασιμότητας, φυσικά παρέχεται η λύση. Ωστόσο, σας συνιστούμε να το δοκιμάσετε μόνοι σας πριν προχωρήσετε στην απάντηση.
Επαληθεύστε τις επικεφαλίδες, τις εικόνες με κείμενο alt, την ένδειξη σειράς Tab και την αντίθεση χρώματος στο http://www.cbssports.com
Λύση: Κάντε κλικ στη διεύθυνση url http://www.cbssports.com στον Internet Explorer.
Για να επαληθεύσετε τις επικεφαλίδες κάντε κλικ στη Δομή και επιλέξτε Δομή επικεφαλίδας για επαλήθευση της επικεφαλίδας.
Οι επικεφαλίδες δεν βρίσκονται στο Η1. Όλοι οι τίτλοι είναι στο H2.
Για να επαληθεύσετε το εναλλακτικό κείμενο κάντε κλικ στο Εικόνες και επιλέξτε Εμφάνιση εικόνων για να επαληθεύσετε εάν υπάρχει εναλλακτικό κείμενο στις εικόνες ή όχι.
Θα βρείτε λίγες από τις εικόνες με κείμενο alt και μερικές από αυτές χωρίς χαρακτηριστικό alt. Οι λεπτομέρειες της εικόνας χωρίς κείμενο alt εμφανίζονται αναδυόμενα και οι λεπτομέρειες των εικόνων με κείμενο alt εμφανίζονται κοντά στις εικόνες.
Για παράδειγμαalt = 'Αναζήτηση CBS Sports.com' κείμενο που εμφανίζεται κοντά στο εικονίδιο αναζήτησης και alt = 'CBSSports.com' κείμενο που εμφανίζεται κοντά στο λογότυπο Fantasy.
Για να επαληθεύσετε την ένδειξη παραγγελίας καρτέλας, κάντε κλικ στο Structure και επιλέξτε Tab Order Indicator .
Η μέτρηση θα εμφανιστεί κοντά στους συνδέσμους που δείχνει σε ποια απόπειρα θα μπορείτε να κάνετε κλικ σε αυτόν τον συγκεκριμένο σύνδεσμο. Για παράδειγμα, για να κάνετε κλικ στον πάνω σύνδεσμο NFL, θα πρέπει να πατήσετε το κουμπί καρτέλας από το πληκτρολόγιο 13 φορές.
Τώρα ο τελευταίος για την επαλήθευση της αντίθεσης χρώματος, κάντε κλικ στο χρώμα και επιλέξτε Contrast Analyzer.
Το Κείμενο περνά με διπλό Α, δηλαδή AA.
Εκεί, αυτός είναι ο τρόπος αξιολόγησης της προσβασιμότητας του ιστότοπου.
Εκπαιδευτικό πρόγραμμα PREV | ΕΠΟΜΕΝΟ Φροντιστήριο
Συνιστώμενη ανάγνωση
- Οδηγός εργαλείων δοκιμής προσβασιμότητας WAVE
- Εκμάθηση έκλειψης σε βάθος για αρχάριους
- Εκπαιδευτικός οδηγός προσβασιμότητας (Ένας πλήρης οδηγός βήμα προς βήμα)
- Top 20 Εργαλεία δοκιμής προσβασιμότητας για εφαρμογές Web
- Τα καλύτερα εργαλεία δοκιμής λογισμικού 2021 (QA Test Automation Tools)
- Οδηγός καταστροφικών δοκιμών και μη καταστροφικών δοκιμών
- Λειτουργική δοκιμή Vs Μη λειτουργική δοκιμή
- Εκμάθηση δοκιμών SOA: Μεθοδολογία δοκιμών για ένα μοντέλο αρχιτεκτονικής SOA