Στο Support Pistolo, θεωρούμε ότι μια ποιοτική εμπειρία παιχνιδιού πρέπει να ανοίγει σε όλους. Αυτός ο σχεδιασμός μας ενθαρρύνει να αναλογιστούμε πέρα από την ελκυστική εμφάνιση και τη πλούσια συλλογή παιχνιδιών. Μπαίνουμε στην τεχνική υλοποίηση και στη συμπεριφορά της ίδιας της ιστοσελίδας. Υπάρχει μια περιοχή που είναι πολύ κρίσιμη αλλά συχνά την αγνοούν: η βοήθεια για άτομα που πλοηγούνται μόνο με πληκτρολόγιο και βοηθητικές τεχνολογίες. Η σωστή εφαρμογή των “focus states” – εκείνων των οπτικών σημάνσεων που δείχνουν ποιο κουμπί ή σύνδεσμο έχει την προσοχή του συστήματος – δεν είναι ένα απλό τεχνικό πρόβλημα. Είναι θεμελιώδης προϋπόθεση για προσβασιμότητα, ένα σημάδι σεβασμού προς τον χρήστη, και μια ευφυής στρατηγική. Όταν τελειοποιείς την εμπειρία για όλους, αυξάνεις τη συνολική ικανοποίηση και την αφοσίωση. Σε αυτό το άρθρο, ανακαλύπτουμε πώς αυτή η επιμελής δουλειά μας αποφέρει πραγματικά κέρδη.
Τι Είναι τα Focus States και Που οφείλεται το ότι είναι εξαιρετικά βασικά
Σκεφτείτε να μπαίνετε σε μια ιστοσελίδα άνευ ποντίκι. Αξιοποιείτε μόνο το πλήκτρο Tab για να μεταπηδάτε από σύνδεσμο σε σύνδεσμο, από κουμπί σε πεδίο φόρμας. Πώς θα αντιλαμβανόσουν πού βρίσκεσαι κάθε στιγμή; Εδώ μπαίνουν τα focus states. Είναι τους οπτικούς δείκτες – ίσως ένα περίγραμμα, μια διαφορετική απόχρωση στο φόντο, μια απαλή σκίαση – που τονίζουν το στοιχείο που είναι ενεργό τώρα. Απουσία αυτών, η πλοήγηση με πληκτρολόγιο θυμίζει σε εγχείρημα ανάγνωσης ενός βιβλίου χωρίς να αντιλαμβάνεσαι ποια γραμμή αναγιγνώσκεις. Για ανθρώπους με σωματικές δυσκολίες, για όσους που προκρίνουν την ταχύτητα του πληκτρολογίου, ή για εκείνους που στηρίζονται σε λογισμικό ανάγνωσης οθόνης, αυτές οι σημάνσεις είναι θεμελιώδους σημασίας. Στο Pistolo Casino, δεν τα βλέπουμε ως κάτι περιττό. Συνιστούν μέρος της βάσης μας, σχεδιασμένο να είναι ευδιάκριτα ορατό, να ταιριάζει οπτικά και να δουλεύει αξιόπιστα σε κάθε πάτημα.
Η Τεχνική Υλοποίηση Που κρύβεται πίσω από τη Σαφήνεια
Για να υλοποιήσεις καλά focus states, δεν αρκεί η CSS. Απαιτεί κατανόηση του πώς τα ποικίλα προγράμματα περιήγησης και οι υποστηρικτικές τεχνολογίες χειρίζονται την εστίαση. Εμείς εδώ χρησιμοποιούμε τον CSS selector `:focus-visible`. Ο selector βοηθά να ξεχωρίσουμε αν η εστίαση ήρθε από πληκτρολόγιο ή από ποντίκι. Έτσι, τα οπτικά μας σημάδια εμφανίζονται μόνο όταν έχει νόημα. Το περίγραμμά μας έχει αρκετή αντιπαραβολή χρώματος με το φόντο, έχει το σωστό πάχος και απαλές γωνίες. Στοχεύουμε να είναι ευδιάκριτο, όχι ενοχλητικό. Φροντίζουμε επίσης η σειρά εστίασης (η σειρά με το Tab) να παράγει νόημα. Αντιστοιχεί στη ροή της σελίδας και δεν έχει παγίδες που να παγιδεύουν τον χρήστη. Κάθε κουμπί “Παίξε Τώρα”, κάθε σύνδεσμος στο μενού, κάθε πεδίο στο chat, όλα έχουν δοκιμαστεί και ρυθμιστεί για αυτόν τον τρόπο πλοήγησης.
Ο Αντίκτυπος πάνω στην Εμπειρία Χρήστη (UX) για κάθε χρήστη
Ίσως πιστεύετε πως τα βελτιωτικά μέτρα σε σχέση με το πληκτρολόγιο επωφελούν μόνο μικρό αριθμό χρηστών. Στην ουσία, αν βελτιώνετε την εμπειρία του χρήστη για μια ομάδα, συχνά τη βελτιώνεις για τους πάντες. Μια ιστοσελίδα με λογική ακολουθία Tab και ξεκάθαρες ενδείξεις είναι γενικά πιο καλά οργανωμένη και πιο απλή στην πλοήγηση, ακόμα και με το ποντίκι. Σκεφτείτε έναν επισκέπτη ο οποίος συμπληρώνει την αίτηση εγγραφής. Με ξεκάθαρα focus states, αντιλαμβάνεται άμεσα σε ποιο πεδίο πληκτρολογεί. Αυτό ελαχιστοποιεί τις αστοχίες και το στρες. Ή έναν παίκτη που ψάχνει παιχνίδια. Η οπτική υπόδειξη του αντικειμένου που διάλεξε δίνει άμεση ανατροφοδότηση (feedback). Δυναμώνει το αίσθημα του ότι κυριαρχεί την κατάσταση. Στο Pistolo Casino, η έμφαση σε κάθε λεπτομέρεια φτιάχνει μια πιο ομαλή, επαγγελματικού επιπέδου και έμπιστη ατμόσφαιρα. Είναι μια διευκόλυνση που πιθανώς δεν την σχολιάζουν συχνά, όμως προλαβαίνει τον εκνευρισμό και διατηρεί τον επισκέπτη απασχολημένο.
Δείγματα εκ της της Πλατφόρμας μας
Ας δούμε αληθινά παραδείγματα από pistolo.com. Στον κύριο μενού, όταν πατήσετε Tab, το focus μεταφέρεται με μια σαφή χρωματιστή γραμμή υπογράμμισης ακριβώς κάτω από το επιλεγμένο πεδίο. Κρατάει το ύφος του σχεδιασμού. Πάνω στα κουμπιά των παιχνιδιών, το focus δημιουργεί ένα λεπτεπίλεπτο περίγραμμα που έχει υψηλή αντίθεση και μια ήπια σκίαση. Προσφέρει την αίσθηση ότι το κουμπί φαίνεται ‘ζωντανό’ και διαθέσιμο. Σε φόρμες, όπως αυτή για την υποστήριξη, το πεδίο το οποίο βρίσκεται σε εστίαση ξεχωρίζει με ένα διακριτικό απόχρωση περιγράμματος. Ακόμα και αυτά τα error messages διαθέτουν focus states, για να τραβήξουν την προσοχή από το πληκτρολόγιο αμέσως. Τίποτα δεν είναι περιστασιακό. Πρόκειται για απόρροια ελέγχων και διαρκούς βελτίωσης. Σκοπός μας είναι η σωστή αναλογία μεταξύ όμορφης εμφάνισης και πλήρους λειτουργικότητας.
Τήρηση με Κανονισμούς και Καλύτερες Πρακτικές
Η εργασία μας για πρόσβαση στηρίζεται σε αναγνωρισμένα διεθνή πρότυπα. Κυρίως στις Οδηγίες Προσπελασιμότητας Υλικού Web (WCAG). Τα focus states αναφέρονται ξεκάθαρα στην κατεύθυνση 2.4 “Προσβάσιμη Περιήγηση”, στον κανόνα 2.4.7: Ορατή Επισήμανση. Εν λόγω ο νόμος δηλώνει ότι οποιοδήποτε αντικείμενο που παίρνει επισήμανση πληκτρολογίου πρέπει να έχει μια εικονική σημάδι που γίνεται αντιληπτή. Εμείς οι ίδιοι δεν σταματάμε στην βασική εφαρμογή. Στοχεύουμε τουλάχιστον στο βαθμίδα AA, και αρκετές φορές φτάνουμε το AAA εκεί που είναι εφικτό, άνευ να επηρεάζουμε το σχεδιασμό. Κάτι τέτοιο σημαίνει ότι ελέγχουμε τις λόγους αντίθεσης των χρωμάτων επισήμανσης ως προς του φόντου. Διασφαλίζουμε ότι τα states δεν βασίζονται μοναδικά στο χρώμα, για χρήστες με δυσχρωματοψία. Ακόμα μεριμνούμε να μην εξαφανίζονται εντός στο υπόβαθρο της σελίδας. Η συνεχής μας απασχόληση με αυτά τα πρότυπα καταδεικνύει πώς αντιμετωπίζουμε κάθε επισκέπτη που μας προσεγγίζει.
Συνεχής Δοκιμή και Αναθεώρηση
Η πρόσβαση δεν αποτελεί ένα έργο που τελειώνει. Συνιστά μια διαδικασία που διαρκεί. Χρησιμοποιούμε ένα μίγμα από αυτοματοποιημένα εργαλεία ελέγχων, όπως εργαλεία για τον έλεγχο του DOM και προγράμματα προσομοίωσης αναγνωστών οθόνης (π.χ., NVDA, VoiceOver). Κάνουμε και πραγματικές ελέγχους με ανθρώπους που διαθέτουν διαφορετικές δυνατότητες. Κάθε νέα λειτουργία ή ιστοσελίδα υποβάλλεται από αυτήν την αξιολόγηση πριν δημοσιευτεί στον αέρα. Επιπλέον, λαμβάνουμε υπόψη τα απόψεις της κοινότητάς μας και τις πληροφορίες από την ομάδα εξυπηρέτησης για όποιο ζήτημα πλοήγησης. Η συγκεκριμένη η επαναληπτική μέθοδος μας δίνει τη δυνατότητα να βρίσκουμε και να βελτιώνουμε θέματα που ενδεχομένως αποφύγουν από τα αυτόματα εργαλεία. Για παράδειγμα, μια ακολουθία εστίασης που είναι τεχνικά σωστή αλλά στην πράξη δεν συνιστά η πιο βολική. Η προσπελασιμότητα, στο τέλος, αφορά άτομα. Και έτσι την αντιμετωπίζουμε.
Με ποιον τρόπο τα Focus States Βελτιώνουν την Προσβασιμότητα (A11y)
Η προσβασιμότητα (που συντομευμένα λέγεται A11y) δεν είναι ζήτημα για λίγους. Είναι η διαδικασία του να φτιάχνεις ιστοσελίδες που λειτουργούν για όλους, χωρίς να εξαρτάται από τις δυνατότητές τους ή τη συσκευή που αξιοποιούν. Τα επιμελημένα σχεδιασμένα focus states αποτελούν ένα από τα βασικά της διαδικασίας αυτής. Εξυπηρετούν άμεσα χρήστες με δυσκολίες όρασης που χρησιμοποιούν πληκτρολόγιο και λογισμικό μεγέθυνσης. Υποστηρίζουν και όσους δυσκολεύονται να χρησιμοποιήσουν ένα ακριβές ποντίκι. Τα πλεονεκτήματα όμως εξαπλώνονται και αλλού. Ένας χρήστης με προσωρινό τραύμα στο χέρι, κάποιος σε κινητό με κακή οθόνη αφής, ή ακόμη και ένας προγραμματιστής που προτιμά την ταχύτητα του πληκτρολογίου, όλοι ωφελούνται. Στο Pistolo Casino, η εφαρμογή αυτών των αρχών συνεπάγεται ότι η πλατφόρμα μας δεν αποτελεί απλά προσβάσιμη. Είναι ομαλή και αποδοτική για πάρα πολύ περισσότερους άτομα. Αυτό συνδυάζεται πακέτο με το πνεύμα του δίκαιου και ανοιχτού παιχνιδιού που υποστηρίζουμε.
Πέρα από τα Βασικά: ARIA και Σημασιολογική HTML
Τα focus states είναι το οπτικό μέρος μιας βαθύτερης δομής. Για να έχει νόημα η πλοήγηση με πληκτρολόγιο, βασιζόμαστε σε σημασιολογική HTML και σε χαρακτηριστικά ARIA (Accessible Rich Internet Applications). Αυτό συνεπάγεται ότι τα κουμπιά μας θεωρούνται σήμανση με `
Το Επιχειρησιακό Κέρδος από τη Αναβαθμισμένη Προσβασιμότητα
Ο κύριος αφορμή που το ενεργούμε είναι δεοντολογικός. Ωστόσο, έχουμε και ένα σαφές επιχειρηματικό πλεονέκτημα. Βελτιώνοντας την προσπελασιμότητα και την χρηστικότητα με πληκτρολόγηση, φθάνουμε σε περισσότερους πιθανούς χρήστες. Εισερχόμαστε σε μια πιο διαφοροποιημένη περιοχή που άλλοι ίσως αγνοούν. Μια σύστημα που χρησιμοποιείται εύκολα μικραίνει το αναλογία των επισκεπτών που την εγκαταλείπουν τη σελίδα. Αυξάνει τη εμπλοκή και ισχυροποιεί τη εικόνα της επωνυμίας μας ως καινοτόμου και συμπεριληπτικής. Στον αντιπαλότητα των online καζίνο, αρκετές συστήματα έχουν παρόμοια παιχνίδια. Η διαφορά έγκειται συχνά στις λεπτομερή σημεία και στην επίπεδο της εμπειρίας. Η προσοχή μας σε τεχνικά στοιχεία όπως τα focus states είναι ένα μήνυμα για τους χρήστες. Δείχνει ότι σέβεται τον χρόνο τους, την ευκολία τους και το αξίωση τους στην είσοδο. Αυτό δημιουργεί πίστη. Και η εμπιστοσύνη είναι η βάση για μακροπρόθεσμη πιστότητα πελατών.
Μια Στρατηγική για Μακροπρόθεσμη Σταθερότητα
Η επένδυση μας στην προσπελασιμότητα είναι και πλάνο για το επόμενη περίοδο. Οι κανονισμοί για την ψηφιακή προσβασιμότητα θεσπίζονται συνεχόμενα αυστηρότερα παγκοσμίως. Με το να είμαστε μπροστά τώρα, ασφαλίζουμε τον εαυτό μας από επερχόμενα ποινές ή νομικές προκλήσεις. Παράλληλα, χτίζουμε μια ιστότοπο που μπορεί να εξυπηρετήσει ένα μεγαλύτερο, πιο ποικίλο χρήστες. Αυτό δεν είναι επωφελές μόνο για την δεοντολογία. Είναι επωφελές για τη σταθερότητα της οργανισμού. Εγγυάται ότι το Pistolo Casino μ