Πώς να δημιουργήσετε προσιτές μορφές ιστού

Sep 12, 2025

πως να

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

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

Ψάχνετε για περισσότερες συμβουλές; Σας έχουμε καλύψει με θέσεις σε θέματα από web hosting προς την αποθήκευση σύννεφων .

13 καλύτερα κομμάτια λογισμικού ελέγχου χρηστών

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

Ποιες δυσκολίες μπορεί κάποιος με οπτικές βλάβες να χρησιμοποιεί τη φόρμα μου;
Ο χρήστης έχει σαφή ένδειξη για τα δεδομένα που αναμένονται για την είσοδο;
Είναι η μορφή εύκολο στη χρήση - οι χρήστες θα μπορέσουν να το καταλάβουν γρήγορα;
Μπορώ να χρησιμοποιήσω το πληκτρολόγιο για να ολοκληρώσω τη φόρμα;

Πώς να κάνετε μια βασική φόρμα συνδρομής

Σας έδωσα κάποιο κώδικα εκκίνησης για να σας βοηθήσω να προχωρήσετε. Καλά Ξεκινήστε με αυτό και τελικά Πάρτε σε αυτό .

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

Ας ξεκινήσουμε συνδέοντας το & lt; είσοδος & gt; στοιχεία για τις αντίστοιχες τους & lt; label & gt; μικρό. Το κάνουμε αυτό, δίνοντας το & lt; είσοδος & gt; ένα αναγνωριστικό και χρησιμοποιώντας αυτό ως το χαρακτηριστικό για το & lt; label & gt; . Μπορούμε να χρησιμοποιήσουμε "όνομα" και "email" για αυτά και έχουμε ήδη κάνει δύο πράγματα:

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

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

Θέλουμε επίσης οι χρήστες μας να έχουν μια καλή ιδέα για το είδος των δεδομένων (και τη μορφοποίηση του) που περιμένουμε από αυτούς. Εδώ είναι αρκετά προφανές, αλλά αυτό δεν συμβαίνει πάντα. Είναι γενικά καλή πρακτική για την παροχή μιας ετικέτας που είναι πάντα ορατό και ένα σύμβολο κράτησης θέσης που επικοινωνεί την αναμενόμενη είσοδο. Αυτό σημαίνει ότι δεν χρησιμοποιείτε το κάτοχος θέσης Χαρακτηριστικό ως οπτική ετικέτα για εισόδους όπου η ετικέτα δεν έχει προβληθεί μόλις αρχίσει ένας χρήστης πληκτρολογώντας. Αυτή ήταν μια δημοφιλής πρακτική για πολλούς προγραμματιστές και πρέπει πραγματικά να βρεθεί σε κρεβάτι μία φορά και για όλους. Μπορούμε να δώσουμε ένα σύμβολο κράτησης "ex. Jane doe" για το όνομα και το "ex. [email protected]" για το μήνυμα ηλεκτρονικού ταχυδρομείου.

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

14 Εύκολοι τρόποι για να κάνετε τον ιστότοπό σας πιο προσιτό

Προσθέστε στυλ εστίασης στον επιλογέα εισόδου

Τέλος, πρέπει να προσθέσουμε κάποια στυλ εστίασης γύρω από το στοιχείο του κουμπιού. Αυτό συχνά παραβλέπεται, αλλά μπορεί πραγματικά να βοηθήσει τους χρήστες μόνο τους χρήστες να γνωρίζουν πού βρίσκονται. Πρέπει να προσθέσουμε αυτό & amp; :: moz-focus-innner bit για να απαλλαγείτε από κάποιο προεπιλεγμένο στυλ στο Firefox (ίσως θέλετε να αποθηκεύσετε το απόσπασμα για μελλοντική χρήση).

Ακριβώς έτσι, έχουμε μια βασική φόρμα συνδρομής που μπορείτε να είστε υπερήφανοι και να βελτιώσετε. Επειδή έχουμε χρησιμοποιήσει καλή σημασιολογία, η φόρμα είναι προσβάσιμη μέσω του πληκτρολογίου μόνο (δοκιμάστε να χρησιμοποιήσετε την καρτέλα και τα πλήκτρα SpaceBar / Enter). Τα χρώματα που χρησιμοποιούνται για το κουμπί είναι ένας λόγος χρώματος 11.51, που πληρούν τα πρότυπα AAA για WCAG (κατευθυντήριες γραμμές προσβασιμότητας στο Web). Έχουμε παράσχει ετικέτες τόσο για τους χρήστες του Visual Users όσο και για χρήστες αναγνώστη οθόνης, καθώς και σε στυλ εστίασης για τους φίλους μας με το πληκτρολόγιο. Τέλος, παρατηρήστε ότι η γραμματοσειρά έχει ρυθμιστεί 18px στο σώμα. Αυτό κάνει τη μορφή μας πολύ πιο αναγνώσιμη (θα πρέπει να προσπαθήσετε να παραμείνετε πάνω από το 14px).

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

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Δημιουργία, το βραβευμένο συνέδριο για τους σχεδιαστές ιστοσελίδων, επιστρέφει στη Νέα Υόρκη στις 24-25 Απριλίου! Κάντε κλικ στην εικόνα για να κλείσετε ένα εισιτήριο

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 316 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 316 εδώ ή Εγγραφείτε εδώ .

Σχετικά Άρθρα:

Η επιδιόρθωση της προσβασιμότητας αποτυγχάνει με αυτό το δωρεάν εργαλείο
50 εκπληκτικά νέα εργαλεία για τους προγραμματιστές το 2019
Πόσο προσβάσιμο είναι τα σχέδιά σας;

Πώς να δημιουργήσετε προσιτές μορφές ιστού

Πώς να κάνετε μια βασική φόρμα συνδρομής

Προσθέστε στυλ εστίασης στον επιλογέα εισόδου

πως να - Τα πιο δημοφιλή άρθρα

Πώς να σχεδιάσετε φτερά

Πώς να ζωγραφίσει σαν κύριος του 19ου αιώνα

10 συμβουλές για τη μοντελοποίηση της σκληρής επιφάνειας

Δημιουργία ατελείωτων χρωμάτων παλέτες με KHROMA

Πώς να συλλάβει το φως με έλαια

Πλεονεκτήματα Branding Μοιραστείτε πώς να καρφώσετε τη φωνή της μάρκας

Κάντε ένα σύνθετο στο Photoshop

Κάντε ένα κινούμενο gif στο Photoshop

Κατηγορίες