Βοήθεια
Σύνδεση

Προσβασιμότητα για θέματα

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

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

Σε αυτήν τη σελίδα

Προσβασιμότητα κειμένου

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

Αντίθεση χρώματος

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

Στο παρακάτω παράδειγμα, το κείμενο έχει αναλογία αντίθεσης 2,4:1 σε σχέση με το φόντο του και είναι δυσανάγνωστο για ορισμένους πελάτες.

Ένα τμήμα ανοιχτού γκρι κειμένου και ένα συμπαγές λευκό φόντο.

Στο επόμενο παράδειγμα, το κείμενο έχει αναλογία αντίθεσης 4,8:1 και είναι πιο ευανάγνωστο για πολλούς πελάτες.

Ένα τμήμα σκούρου γκρι κειμένου σε συμπαγές λευκό φόντο.

Ελέγξτε την αντίθεση όλου του κειμένου, συμπεριλαμβανομένου του κυρίως κειμένου, των επικεφαλίδων, των συνδέσμων και των πεδίων φόρμας. Ακολουθήστε τις παρακάτω οδηγίες:

  • Το χρώμα του κυρίως κειμένου και του κειμένου των κουμπιών έχει αναλογία αντίθεσης τουλάχιστον 4,5:1 σε σχέση με το φόντο του.
  • Το χρώμα των επικεφαλίδων και άλλου μεγάλου κειμένου (μέγεθος γραμματοσειράς 24 px και άνω) έχει αναλογία αντίθεσης τουλάχιστον 3:1 σε σχέση με το φόντο του.
  • Το χρώμα όλου του κειμένου πάνω από εικόνες, συμπεριλαμβανομένων των προβολών διαφανειών, των banner και των βίντεο, έχει επαρκείς αναλογίες αντίθεσης σε σχέση με το φόντο του. Για μεγάλο κείμενο (μέγεθος γραμματοσειράς 24 px και άνω), η αντίθεση είναι τουλάχιστον 3:1. Για μικρότερο κείμενο, η αντίθεση είναι τουλάχιστον 4,5:1.
  • Το χρώμα των στοιχείων που δεν είναι κείμενο, συμπεριλαμβανομένων των περιγραμμάτων εισαγωγής και των εικονιδίων, έχει αναλογία αντίθεσης τουλάχιστον 3:1 σε σχέση με το φόντο του.

Επικεφαλίδες κειμένου

Όταν προσθέτετε επικεφαλίδες στη σελίδα σας με το πρόγραμμα επεξεργασίας εμπλουτισμένου κειμένου, είναι σημαντικό να τις διατηρείτε σε διαδοχική σειρά (1 - 6). Οι επικεφαλίδες χρησιμοποιούνται από υποστηρικτικές τεχνολογίες για την επικοινωνία του τρόπου οργάνωσης του περιεχομένου της σελίδας. Η παράλειψη επιπέδων, όπως μια επικεφαλίδα επιπέδου 2 που ακολουθείται από μια επικεφαλίδα επιπέδου 4, μπορεί να προκαλέσει σύγχυση στους χρήστες. Ακολουθήστε την παρακάτω οδηγία:

  • Οι επικεφαλίδες χρησιμοποιούνται με διαδοχική σειρά και δεν παραλείπουν επίπεδα.

Μέγεθος και στοίχιση κειμένου

Όταν επεξεργάζεστε τις ρυθμίσεις τυπογραφίας του θέματός σας, βεβαιωθείτε ότι το κείμενό σας είναι αρκετά μεγάλο ώστε οι πελάτες να μπορούν να το διαβάσουν με άνεση.

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

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

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

Ένα μπλοκ κειμένου με αριστερή στοίχιση. Υπάρχει ομοιόμορφη απόσταση μεταξύ κάθε λέξης.

Κατά την προσαρμογή του μεγέθους και της στοίχισης του κειμένου, ακολουθήστε τις παρακάτω οδηγίες:

  • Το ελάχιστο μέγεθος γραμματοσειράς για το σώμα κειμένου είναι το ισοδύναμο των 16 px.
  • Η στοίχιση κειμένου δεν είναι πλήρης. Η πλήρης στοίχιση κειμένου δημιουργεί ανομοιόμορφη απόσταση μεταξύ των λέξεων.

Σύνδεσμοι κειμένου

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

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

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

  • Οι σύνδεσμοι κειμένου είναι είτε υπογραμμισμένοι είτε έχουν κάποιο άλλο οπτικό στοιχείο διαφοροποίησης που δεν είναι απλώς το χρώμα, ώστε οι πελάτες να μπορούν να διαφοροποιούν τους συνδέσμους από το κανονικό κείμενο.
  • Οι σύνδεσμοι κειμένου ανοίγουν στην ίδια καρτέλα όταν γίνεται κλικ σε αυτούς.

Εναλλακτικό κείμενο για εικόνες

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

Μπορείτε να προσθέσετε εναλλακτικό κείμενο στις εικόνες των προϊόντων σας από τον Διαχειριστή Shopify. Μπορείτε να προσθέσετε εναλλακτικό κείμενο στις άλλες εικόνες του θέματός σας από το πρόγραμμα επεξεργασίας θεμάτων.

Όταν προσθέτετε εναλλακτικό κείμενο σε μια εικόνα, μια καλή πρακτική είναι να προσποιείστε ότι περιγράφετε την εικόνα σε κάποιον που έχει κλειστά τα μάτια του. Βοηθήστε τον να δημιουργήσει μια εικόνα στο μυαλό του. Ο τρόπος με τον οποίο περιγράφετε μια εικόνα εξαρτάται επίσης από το πλαίσιο της ιστοσελίδας σας. Για παράδειγμα, μπορεί να περιγράψετε μια εικόνα διαφορετικά αν η επιχείρησή σας είναι ένα ταξιδιωτικό γραφείο από ό,τι αν η επιχείρησή σας είναι ένα κατάστημα εξοπλισμού για υπαίθριες δραστηριότητες. Εξετάστε την παρακάτω εικόνα:

Δύο φίλοι που φορούν σακίδια πλάτης, αγκαλιασμένοι, και κοιτάζουν τον ωκεανό

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

Αν η επιχείρησή σας είναι ένα ταξιδιωτικό γραφείο, τότε ένα παράδειγμα κακού εναλλακτικού κειμένου θα μπορούσε να είναι: «Δύο άτομα μπροστά στον ωκεανό». Για το ίδιο γραφείο, ένα παράδειγμα καλού εναλλακτικού κειμένου θα μπορούσε να είναι: «Δύο φίλοι που ταξιδεύουν στο Λάγος της Πορτογαλίας και κοιτάζουν τον αμμώδη όρμο της Praia do Camilo μια ηλιόλουστη μέρα».

Προσβασιμότητα προβολής διαφανειών και βίντεο

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

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

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

Προβολές διαφανειών

Όταν προσθέτετε μια προβολή διαφανειών στο διαδικτυακό σας κατάστημα, ακολουθήστε τις παρακάτω οδηγίες:

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

Βίντεο

Όταν προσθέτετε ένα βίντεο στο διαδικτυακό σας κατάστημα, ακολουθήστε τις παρακάτω οδηγίες:

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

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

Υποστήριξη πληκτρολογίου

Οι πελάτες με προβλήματα όρασης ή κινητικά προβλήματα μπορεί να χρησιμοποιούν πληκτρολόγιο για την πλοήγηση και την ολοκλήρωση εργασιών στο διαδίκτυο. Αυτοί οι πελάτες βασίζονται σε μια οπτική ένδειξη για να τους δείχνει πού βρίσκεται η εστίαση του πληκτρολογίου τους σε μια ιστοσελίδα. Στο παρακάτω παράδειγμα, το πεδίο Email έχει μια οπτική ένδειξη εστίασης:

Μια οθόνη σύνδεσης πελάτη σε ένα διαδικτυακό κατάστημα που εμφανίζει πεδία φόρμας για Email και Κωδικό πρόσβασης. Το πεδίο Email περιγράφεται με μπλε περίγραμμα.

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

  • Όλα τα διαδραστικά στοιχεία της σελίδας έχουν μια σαφή οπτική ένδειξη όταν έχουν την εστίαση του πληκτρολογίου. Αυτά τα στοιχεία περιλαμβάνουν συνδέσμους, κουμπιά και πεδία φόρμας.

Πόροι

Για να μάθετε περισσότερα σχετικά με την προσβασιμότητα στον ιστό για τα θέματα που εξετάζονται σε αυτό το άρθρο, ανατρέξτε στους παρακάτω πόρους.

Πόροι αντίθεσης χρωμάτων

Πόροι κειμένου

Πόροι για το εναλλακτικό κείμενο

Πόροι για την προβολή διαφανειών και το βίντεο

Πόροι για την υποστήριξη πληκτρολογίου

Σε αυτή την ενότητα