Γεια σας όλοι οι υπέροχοι προγραμματιστές εκεί έξω! Σε αυτήν την ανάρτηση, θα σας οδηγήσω στη δημιουργία μιας απλής φόρμας επικοινωνίας χρησιμοποιώντας σημασιολογικό HTML και μια καταπληκτική ψευδοκλάση CSS γνωστή ως :focus-within. ο :focus-within Η τάξη επιτρέπει μεγάλο έλεγχο της εστίασης και ενημερώνει τους χρήστες σας ότι είναι ακριβώς το σημείο που βρίσκεται στην εμπειρία. Πριν προχωρήσουμε, ας φτάσουμε στον πυρήνα του τι είναι η προσβασιμότητα στον ιστό.

Προσβασιμότητα φόρμας;

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

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

Αυτή η ψευδοκλάση είναι πραγματικά εξαιρετική όταν θέλετε να τονίσετε ότι ο χρήστης στην πραγματικότητα αλληλεπιδρά με το στοιχείο. Μπορείτε, για παράδειγμα, να αλλάξετε το χρώμα φόντου ολόκληρης της φόρμας. Ή, εάν η εστίαση μετακινηθεί σε μια είσοδο, μπορείτε να κάνετε την ετικέτα έντονη και μεγαλύτερη από ένα στοιχείο εισόδου όταν η εστίαση μετακινείται σε αυτήν την είσοδο. Αυτό που συμβαίνει παρακάτω στα αποσπάσματα κώδικα και στα παραδείγματα είναι αυτό που κάνει τη φόρμα προσβάσιμη. :focus-within είναι μόνο ένας τρόπος με τον οποίο μπορούμε να χρησιμοποιήσουμε το CSS προς όφελός μας.

Πώς να εστιάσετε

Η εστίαση, όσον αφορά την προσβασιμότητα και την εμπειρία ιστού, είναι η οπτική ένδειξη ότι αλληλεπιδρά με κάτι στη σελίδα, στη διεπαφή χρήστη ή μέσα σε ένα στοιχείο. Το CSS μπορεί να πει πότε εστιάζει ένα διαδραστικό στοιχείο.

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

Το Focus είναι γραμμένο έτσι και μπορεί να διαμορφωθεί ώστε να ταιριάζει με την επωνυμία σας, αν επιλέξετε να το στυλίσετε.

:focus {
  * / INSERT STYLES HERE /*
}

Ό,τι κι αν κάνετε, μην ορίζετε ποτέ το περίγραμμά σας 0 or none. Με αυτόν τον τρόπο θα αφαιρεθεί μια ορατή ένδειξη εστίασης για όλους σε όλη την εμπειρία. Εάν πρέπει να αφαιρέσετε την εστίαση, μπορείτε, αλλά φροντίστε να την προσθέσετε ξανά αργότερα. Όταν αφαιρείτε την εστίαση από το CSS ή ορίζετε το περίγραμμα σε 0 or none, αφαιρεί τον δακτύλιο εστίασης για όλους τους χρήστες σας. Αυτό φαίνεται πολύ όταν χρησιμοποιείτε επαναφορά CSS. Μια επαναφορά CSS θα επαναφέρει τα στυλ σε έναν κενό καμβά. Με αυτόν τον τρόπο είστε υπεύθυνοι για τον άδειο καμβά για να διαμορφώσετε όπως θέλετε. Εάν θέλετε να χρησιμοποιήσετε επαναφορά CSS, ελέγξτε Επαναφορά του Josh Comeau.

*ΜΗΝ ΚΑΝΕΤΕ αυτό που είναι παρακάτω!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Κοιτάξτε μέσα!

Ένας από τους πιο ωραίους τρόπους για να εστιάσετε με στυλ χρησιμοποιώντας CSS είναι το θέμα αυτού του άρθρου. Εάν δεν έχετε τσεκάρει το :focus-within ψευδοκατηγορία, σίγουρα ρίξε μια ματιά! Υπάρχουν πολλά κρυμμένα πετράδια όταν πρόκειται για τη χρήση σημασιολογικής σήμανσης και CSS, και αυτό είναι ένα από αυτά. Πολλά πράγματα που παραβλέπονται είναι προσβάσιμα από προεπιλογή, για παράδειγμα, η σημασιολογική σήμανση είναι από προεπιλογή προσβάσιμη και θα πρέπει να χρησιμοποιείται μέσω div ανά πάσα στιγμή.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/el/">Home</a></li>
      <li><a href="/el/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

Η header, nav, main, section, aside, να footer είναι όλα σημασιολογικά στοιχεία. ο h1 και ul είναι επίσης σημασιολογικά και προσβάσιμα.

Εκτός αν υπάρχει ένα προσαρμοσμένο στοιχείο που πρέπει να δημιουργηθεί, τότε α div είναι καλό στη χρήση, σε συνδυασμό με ARIA (Accessible Rich Internet Applications). Μπορούμε να κάνουμε μια βαθιά κατάδυση στο ARIA σε επόμενη ανάρτηση. Προς το παρόν ας επικεντρωθούμε…δείτε τι έκανα εκεί…σε αυτήν την ψευδοκλάση CSS.

Η :focus-within Η ψευδοκλάση σάς επιτρέπει να επιλέξετε ένα στοιχείο όταν οποιοδήποτε στοιχείο καταγωγής που περιέχει έχει εστίαση.

:focus-within εν ΔΡΑΣΕΙ!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

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

Το τελικό προϊόν μοιάζει με το παρακάτω. Φυσικά, οι δυνατότητες είναι αμέτρητες για να αλλάξετε το στυλ, αλλά αυτό θα σας οδηγήσει σε καλό δρόμο για να κάνετε το διαδίκτυο πιο προσιτό για όλους!

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

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within έχει επίσης εξαιρετική υποστήριξη προγράμματος περιήγησης σε όλα τα επίπεδα σύμφωνα με Μπορώ να χρησιμοποιήσω.

Συμπέρασμα

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

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

Δείτε έναν άλλο εξαιρετικό πόρο εδώ στο CSS-Tricks on χρησιμοποιώντας :focus-within.

• SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
• PlatoData.Network Vertical Generative Ai. Ενδυναμώστε τον εαυτό σας. Πρόσβαση εδώ.
• PlatoAiStream. Web3 Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
• PlatoESG. Ανθρακας, Cleantech, Ενέργεια, Περιβάλλον, Ηλιακός, Διαχείριση των αποβλήτων. Πρόσβαση εδώ.
• PlatoHealth. Ευφυΐα βιοτεχνολογίας και κλινικών δοκιμών. Πρόσβαση εδώ.
• πηγή: https://css-tricks.com/accessible-forms-with-pseudo-classes/