#Παράδειγμα: Κατασκευή προσαρμόσιμου πίνακα
Γενικές πληροφορίες σχετικά του προσαρμόσιμου πίνακα
Οι πίνακες είναι πολύ δύσκολο να προβληθούν σε μικρές συσκευές και δύσκολο για τους κατασκευαστές ιστοτόπων να εφαρμοστούν με τρόπους που δεν παραβιάζουν τη διάταξη της σελίδας. Αυτός ο προσαρμόσιμος σχεδιασμός του πίνακα εμφανίζεται σωστά σε οθόνες αρκετά πλατύ. Δηλαδή, χωρίς να περιορίζει την προβολή του σε έναν μόνο προσανατολισμό οθόνης, όπως κατακόρυφο ή οριζόντιο.
Τώρα, όταν η οθόνη είναι πολύ μικρή για να εμφανίζεται οριζόντια ο πίνακας μπορεί να συμπτύσσεται σε μορφή λίστας. Σε αυτό το παράδειγμα όταν η οθόνη είναι πολύ μικρή επικρατεί ο πίνακας τα χαρακτηριστικά του. Ο πίνακας είναι πλήρως προσαρμοσμένος να λειτουργεί σωστά τόσο στον κατακόρυφο όσο και στον οριζόντιο προσανατολισμό. Επίσης, ικανοποιείται το κριτήριο επιτυχίας 1.3.4 Προσανατολισμός (Επίπεδο AA).
Επομένως, ο χρήστης έχει τη δυνατότητα να ρυθμίζει δυναμικά τον προεπιλεγμένο προσανατολισμό της οθόνης με βάση τις πληροφορίες του αισθητήρα. Έτσι, και ο πίνακας αυτής της σελίδας δεν περιορίζει τον προσανατολισμό του περιεχομένου. Διασφαλίζοντας έτσι ότι ταιριάζει πάντα με τον προσανατολισμό εμφάνισης της συσκευής του.
Παρουσίαση του προσαρμόσιμου πίνακα
Ο ακόλουθος πίνακας είναι έτσι κατασκευασμένος, ώστε να διασφαλίζει ότι ταιριάζει πάντα με τον προσανατολισμό εμφάνισης της συσκευής. Επίσης, θα βρείτε στον ακόλουθο πίνακα πληροφορίες σχετικά των στοιχείων που χρησιμοποιούνται για την ορθή κατασκευή ενός πίνακα.
| Στοιχείο | Περιγραφή | Προκαθορισμένη ARIA σήμανση |
|---|---|---|
| table | Το στοιχείο <table> σηματοδοτεί την έναρξη και λήξη του περιεχομένου του πίνακα. |
role="table" |
| caption | Η επεξήγηση για έναν πίνακα. Λειτουργεί ως ένας τίτλος ή επικεφαλίδα για τον πίνακα. | role="caption" |
| tr | Κάθε γραμμή ξεκινά με στοιχείο <tr> που σημαίνει tablerow |
role="row" |
| th | Το στοιχείο <th> χρησιμοποιείται για τον προσδιορισμό των επικεφαλίδων και σημαίνει tableheader |
role=columnheader ή rowheader |
| td | Κάθε κελί δεδομένων οριοθετείται με το στοιχείο <td> που σημαίνει tabledata |
role="cell" |
| tbody | Επισήμανση του σώματος ενός πίνακα. <tbody> σημαίνει tableboby |
role="rowgroup" |
| thead | Αυτό το στοιχείο ενσωματώνει ένα σύνολο γραμμών πίνακα (<tr> και <th>), υποδεικνύοντας ότι αποτελούν την κεφαλή ενός πίνακα με πληροφορίες σχετικά με τις στήλες του πίνακα. <thead> σημαίνει tablehead |
role="rowgroup" |
| tfoot | Επισήμανση του κάτω τμήματος ενός πίνακα. <tfoot> σημαίνει tablefoot |
role="rowgroup" |
Κατέβασμα των πόρων
To εκπαιδευτικό υλικό που είναι αναρτημένο και διαθέσιμο δωρεάν στην ιστοσελίδα αυτή, έχει σκοπό την διαμόρφωση ενός κατασκευαστή/ρία προσβάσιμων ιστοτόπων, ο οποίος/α να κατέχει σημαντικές γνώσεις και δεξιότητες σχετικά της προσβασιμότητας και να τις αξιοποιεί στην πράξη. Αποτελεί σημαντικές τεχνικές για τη διαφοροποίηση της κατασκευής και την εξυπηρέτηση χρηστών με ειδικές ανάγκες [ΑμεΑ]. Ακολουθεί σύνδεσμος για τη λήψη των πόρων για τη κατασκευή προσαρμόσιμου πίνακα. Κατέβασμα των πόρων για τον προσβάσιμο πίνακα. Σε μορφή ZIP