Δημιουργία Γραφημάτων που Λειτουργούν για Όλους

Το πρόβλημα με τα γραφήματα

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

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

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

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

Γιατί τα γραφήματα είναι ιδιαίτερα δύσκολα

Τα περισσότερα στοιχεία HTML έχουν εγγενή ρόλο, όνομα και κατάσταση που η υποστηρικτική τεχνολογία κατανοεί. Ένα <button> είναι κουμπί. Ένα <table> είναι πίνακας με γραμμές και στήλες. Ένα πεδίο φόρμας έχει ετικέτα.

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

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

Το πρόβλημα του χρώματος: μη βασίζεστε ποτέ μόνο στο χρώμα

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

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

Η λύση είναι η πλεονάζουσα κωδικοποίηση: χρησιμοποιήστε χρώμα συν τουλάχιστον μία ακόμη οπτική ιδιότητα.

• Γραμμικά γραφήματα: χρησιμοποιήστε διαφορετικά μοτίβα διακεκομμένων γραμμών μαζί με τα χρώματα (συνεχής, διακεκομμένη, με τελείες, παύλα-τελεία)
• Ραβδογράμματα: χρησιμοποιήστε υφές ή μοτίβα μαζί με τα χρώματα, ή προσθέστε ετικέτες δεδομένων απευθείας πάνω στις ράβδους
• Διαγράμματα διασποράς: χρησιμοποιήστε διαφορετικά σχήματα δεικτών (κύκλος, τετράγωνο, τρίγωνο, ρόμβος) μαζί με τα χρώματα
• Κυκλικά γραφήματα: προσθέστε ετικέτες κειμένου μέσα ή δίπλα σε κάθε τμήμα — ποτέ μη βασίζεστε μόνο σε ένα υπόμνημα

Αυτό εμπίπτει στο κριτήριο 1.4.1 Use of Color (Επίπεδο A) του WCAG 2.2: το χρώμα δεν πρέπει να είναι το μοναδικό μέσο μετάδοσης πληροφοριών.

Αντίθεση για γραφήματα

Τα μη κειμενικά οπτικά στοιχεία, όπως οι ράβδοι γραφημάτων, οι γραμμές και τα σημεία δεδομένων, πρέπει να πληρούν αντίθεση 3:1 έναντι του φόντου τους σύμφωνα με το κριτήριο 1.4.11 Non-text Contrast (Επίπεδο AA). Ελέγξτε την παλέτα των γραφημάτων σας με έναν ελεγκτή αντίθεσης — πολλές εταιρικές παλέτες που φαίνονται εντάξει σε μεγάλες επιφάνειες αποτυγχάνουν σε αυτή την απαίτηση σε μικρότερα μεγέθη.

Το κείμενο μέσα στα γραφήματα — ετικέτες αξόνων, ετικέτες δεδομένων, υπομνήματα — πρέπει να πληροί τις ίδιες απαιτήσεις αντίθεσης με το κυρίως κείμενο: 4.5:1 για κανονικό κείμενο, 3:1 για μεγάλο κείμενο σύμφωνα με το κριτήριο 1.4.3 Contrast Minimum.

Παροχή εναλλακτικών κειμένων

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

Απλά γραφήματα: περιγραφικό εναλλακτικό κείμενο

Για ένα ραβδόγραμμα με πέντε τιμές, ένα καλογραμμένο χαρακτηριστικό alt μπορεί να συνοψίσει το βασικό εύρημα:

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

Το εναλλακτικό κείμενο εδώ κάνει δύο πράγματα: αναφέρει τα σημεία δεδομένων και συνοψίζει το βασικό συμπέρασμα. Μην περιγράφετε απλώς το γράφημα οπτικά (“ένα ραβδόγραμμα που δείχνει έσοδα”). Περιγράψτε τι επικοινωνεί το γράφημα.

Σύνθετα γραφήματα: συμπληρωματικοί πίνακες δεδομένων

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

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

Μοτίβα ειδικά για SVG

Τα γραφήματα SVG που αποδίδονται inline (και όχι ως αρχεία εικόνας) μπορούν να γίνουν άμεσα προσβάσιμα με χρήση ARIA. Βασικά μοτίβα:

• Προσθέστε role="img" στο στοιχείο <svg>
• Παρέχετε ένα <title> ως πρώτο θυγατρικό στοιχείο του <svg> και συνδέστε το με aria-labelledby
• Προσθέστε ένα <desc> για εκτενέστερες περιγραφές και συνδέστε το με aria-describedby
• Επισημάνετε τα διακοσμητικά στοιχεία (γραμμές πλέγματος, υποδιαιρέσεις αξόνων) με aria-hidden="true" για να μειώσετε τον θόρυβο

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

Πλοήγηση με πληκτρολόγιο σε διαδραστικά γραφήματα

Εάν τα γραφήματά σας είναι διαδραστικά — tooltips κατά την αιώρηση, τμήματα με δυνατότητα κλικ, επιλογή περιοχής και ζουμ — πρέπει να είναι πλήρως λειτουργικά με πληκτρολόγιο σύμφωνα με το κριτήριο 2.1.1 Keyboard (Επίπεδο A).

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

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

Τα tooltips που εμφανίζονται μόνο κατά την αιώρηση του ποντικιού πρέπει να εμφανίζονται και κατά την εστίαση με πληκτρολόγιο. Ένα tooltip ορατό μόνο στους χρήστες ποντικιού αποτελεί αποτυχία προσβασιμότητας.

Επιλογή του σωστού τύπου γραφήματος

Ορισμένοι τύποι γραφημάτων είναι εγγενώς πιο προσβάσιμοι από άλλους. Όταν έχετε την επιλογή:

Τύπος γραφήματος	Προσβασιμότητα	Σημειώσεις
Ραβδόγραμμα	Υψηλή	Οι ποσότητες κωδικοποιούνται εύκολα με ετικέτες· εφικτή καλή υποστήριξη πληκτρολογίου
Γραμμικό γράφημα	Υψηλή	Χρησιμοποιήστε διαφορετικά μοτίβα διακεκομμένων γραμμών· σχολιάστε τα βασικά σημεία
Πίνακας	Υψηλότερη	Ο ευκολότερος να γίνει προσβάσιμος· συχνά η σωστή επιλογή για δεδομένα
Διάγραμμα διασποράς	Μέτρια	Απαιτεί προσεκτική διαφοροποίηση δεικτών· η πλοήγηση με πληκτρολόγιο είναι πολύπλοκη
Χάρτης θερμότητας	Χαμηλή	Εξαρτάται από το χρώμα εκ φύσεως· παρέχετε πάντα εναλλακτικό πίνακα
Κυκλικό/δακτύλιος	Χαμηλή	Δύσκολη η σύγκριση τιμών· αποφύγετέ το για περισσότερα από 3-4 τμήματα

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

Δοκιμή των γραφημάτων σας

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

1. Έναν αναγνώστη οθόνης (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): πλοηγηθείτε στο γράφημα και επαληθεύστε τι εκφωνείται
2. Μόνο πληκτρολόγιο: μεταβείτε με tab στο γράφημα και επιβεβαιώστε ότι όλα τα διαδραστικά στοιχεία είναι προσβάσιμα και λειτουργικά με το πληκτρολόγιο
3. Προσομοίωση αχρωματοψίας: χρησιμοποιήστε τα Chrome DevTools (Rendering > Emulate vision deficiency) για να δείτε πώς εμφανίζεται το γράφημα υπό διαφορετικούς τύπους δυσχρωματοψίας
4. Ζουμ στο 200%: επαληθεύστε ότι οι ετικέτες και τα υπομνήματα δεν επικαλύπτονται ούτε αποκόπτονται

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