Εισαγωγικές σημειώσεις
Το στοιχείο <button> της HTML είναι ένα διαδραστικό στοιχείο που ενεργοποιείται από τον χρήστη με ποντίκι, πληκτρολόγιο, αφή, φωνητική εντολή ή άλλη βοηθητική τεχνολογία. Μόλις ενεργοποιηθεί, εκτελείται μια ενέργεια, όπως η υποβολή μιας φόρμας ή το άνοιγμα ενός παραθύρου διαλόγου.
Η καθορισμένη μορφοποίηση του κουμπιού της HTML, παρουσιάζεται με στυλ που καθορίζει το λειτουργικό σύστημα στο οποίο εκτελείται. Όμως, μπορείτε να αλλάξετε την εμφάνιση των κουμπιών με το CSS.
Σημαντικές πληροφορίες για το στοιχείο button
- Σύνταξη: Ετικέτα έναρξης και ετικέτα λήξης απαιτείται.
- ARIA-Ρόλος (προκαθορισμένος):
button - Γονικά στοιχεία: Επιτρέπεται ο φωλιασμός σε στοιχεία της κατηγορίας Flow content.
- Αποδεκτά περιεχόμενα: Κείμενο αλλά και στοιχεία της κατηγορίας Phrasing content.
- Μη αποδεκτά περιεχόμενα: Διαδραστικά στοιχεία.
Παράδειγμα για κουμπί (button)
Η χρήση των στοιχείων της HTML όπως <input type="submit"> ή <button> είναι στις περισσότερες περιπτώσεις η καλύτερη επιλογή αντί της δημιουργίας ενός προσαρμοσμένου κουμπιού μέσω της τεχνολογίας ARIA. Όμως, υπάρχουν περιπτώσεις όπου ένα προσαρμοσμένο κουμπί ARIA μπορεί να είναι κατάλληλο.
Για παράδειγμα, όταν η μορφοποίηση του στοιχείου <button> γίνεται πολύ δύσκολη για ορισμένα προγράμματα περιήγησης. Σε περίπτωση που ο στόχος ορισμένων περιστάσεων ή κατά την τοποθέτηση σήμανσης παλαιού τύπου θα μπορούσε να είναι προβληματική για τη μετατροπή σε τυπικά <button> στοιχεία.
Παράδειγμα για κουμπί μέσω της HTML και της ARIA
Ο πηγαίος κώδικας του παραδείγματος
Ακολουθεί ο πηγαίος κώδικας των κουμπιών δηλαδή των στοιχείων <button> και <span> της HTML.
Κατέβασμα των πόρων
Προσδοκώμενα αποτελέσματα και στόχοι
Στο πλαίσιο των παραδειγμάτων που παρουσιάζουμε θέλαμε εξαρχής να μιλήσουμε για ζητήματα που απασχολούν τους κατασκευαστές προσβάσιμων ιστοσελίδων σήμερα σε σχέση με τις δυνατότητες της HTML, της ARIA και της Javascript. Όμως ποια είναι αυτά τα ζητήματα;
- Σκέψεις για την προσβασιμότητα ιστοσελίδων, τον σχεδιασμό και την υλοποίηση που επιδιώκουν την κατανόηση και τη βελτίωση αυτών.
- Ανάπτυξη τεχνικών για την κατασκευή ιστοσελίδων οι οποίες είναι προσβάσιμες σε διάφορες πλατφόρμες.
Πληροφορίες σχετικά των πόρων
Η τρέχουσα ιστοσελίδα κάνει υλικό διαθέσιμο δωρεάν.
Στη συνέχεια, σας παρουσιάζουμε αναλυτικά το παράδειγμα Δημιουργία προσαρμοσμένου κουμπιού με ARIA σήμανση για τη κατασκευή ιστοσελίδων με έμφαση την προσβασιμότητα. Το παράδειγμα έχει ως σκοπό αφενός να κάνουμε τη σημασία και τη
λειτουργία του στοιχείου button της HTML γνωστή, αφετέρου να απασχολήσουμε το ζήτημα της ανάπτυξης του κουμπιού μέσω της τεχνολογίας ARIA [εξωτερικός σύνδεσμος, στα Αγγλικά] .
Επισημάνομε ότι η χρήση του στοιχείου button συνιστάται για καλύτερη συμβατότητα με προγενέστερους πράκτορες χρήστη. Αλλά και η ενίσχυση των δημιουργών ιστοσελίδων με έμφαση την προσβασιμότητα μας είναι σημαντική.
Αυτές οι τεχνικές που παρουσιάζουμε εδώ είναι ιδιαίτερες για την εξυπηρέτηση των επισκεπτών με αναπηρίες. Επίσης, δίνουμε μεγάλο βάρος της διαφοροποίησης της κατασκευής. Παρακάτω θα βρείτε τον σύνδεσμο για τη λήψη των πόρων για κουμπί (button). Κατέβασμα των πόρων για κουμπί (button). Σε μορφή ZIP