היי כל המפתחים הנפלאים שלכם בחוץ! בפוסט זה, אני הולך לקחת אותך דרך יצירת טופס יצירת קשר פשוט באמצעות HTML סמנטי ומחלקת פסאודו CSS מדהימה המכונה :focus-within. ה :focus-within מחלקה מאפשרת שליטה רבה במיקוד וליידע את המשתמש שלך שזה בדיוק המקום שבו הוא נמצא בחוויה. לפני שנקפוץ פנימה, בואו נגיע לליבה של מהי נגישות אינטרנט.

נגישות לטופס?

סביר להניח ששמעת את המונח "נגישות" בכל מקום או את המילה המספרית, a11y. מה זה אומר? זו שאלה מצוינת עם כל כך הרבה תשובות. כשאנחנו מסתכלים על העולם הפיזי, נגישות פירושה דברים כמו להחזיק מיכלי חדים בחדרי האמבטיה שלך בעסק שלך, לוודא שיש רמפות לאנשים עם סיוע בגלגלים, וציוד היקפי כמו מקלדות בהדפסה גדולה בהישג יד לכל מי שצריך.

מכלול הנגישות לא נעצר כאן, יש לנו נגישות דיגיטלית שאנחנו צריכים להיות מודעים אליה גם, לא רק למשתמשים חיצוניים, אלא גם לקולגות פנימיים. ניגודיות צבע היא פרי תלוי נמוך שאנחנו צריכים להיות מסוגלים לנקוט בניצן. במקומות העבודה שלנו, מוודאים שאם כל עובד זקוק לטכנולוגיה מסייעת כמו קורא מסך, יש לנו את זה מותקן וזמין. יש הרבה דברים שצריך לקחת בחשבון. מאמר זה יתמקד בנגישות לאינטרנט על ידי שמירה על ה WCAG (הנחיות נגישות לתוכן אינטרנט) בראש.

מחלקה פסאודו זה ממש נהדר כאשר אתה רוצה להדגיש שהמשתמש בעצם מקיים אינטראקציה עם האלמנט. אתה יכול לשנות את צבע הרקע של הטופס כולו, למשל. לחלופין, אם הפוקוס מועבר לקלט, אתה יכול להפוך את התווית למודגשת וגדולה יותר של רכיב קלט כאשר הפוקוס מועבר לקלט זה. מה שקורה למטה בקטעי הקוד ובדוגמאות הוא מה שהופך את הטופס לנגיש. :focus-within היא רק דרך אחת שבה נוכל להשתמש ב-CSS לטובתנו.

איך להתמקד

מיקוד, בכל הקשור לנגישות ולחוויית האינטרנט, הוא האינדיקטור החזותי לכך שמשהו מקיים אינטראקציה בדף, בממשק המשתמש או בתוך רכיב. CSS יכול לדעת מתי אלמנט אינטראקטיבי ממוקד.

ודא תמיד שמחוון המיקוד או הטבעת סביב אלמנטים הניתנים למיקוד שומרים על ניגודיות הצבע המתאימה במהלך החוויה.

פוקוס כתוב כך וניתן לעצב אותו כך שיתאים למיתוג שלך אם תבחר לסגנן אותו.

:focus {
  * / INSERT STYLES HERE /*
}

לא משנה מה תעשה, לעולם אל תגדיר את המתאר שלך 0 or none. פעולה זו תסיר מחוון מיקוד גלוי לכולם בכל החוויה. אם אתה צריך להסיר את המיקוד, אתה יכול, אבל הקפד להוסיף את זה מאוחר יותר. כאשר אתה מסיר את המיקוד מה-CSS שלך או מגדיר את המתאר ל 0 or none, הוא מסיר את טבעת המיקוד עבור כל המשתמשים שלך. זה נראה הרבה בעת שימוש באיפוס CSS. איפוס CSS יאפס את הסגנונות לקנבס ריק. בדרך זו אתה אחראי על הקנבס הריק לסגנון כרצונך. אם ברצונך להשתמש באיפוס CSS, בדוק האיפוס של ג'וש קומאו.

*אל תעשה מה שמופיע למטה!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

הסתכל פנימה!

אחת הדרכים המגניבות ביותר לסגנון מיקוד באמצעות CSS היא מה שמאמר זה עוסק. אם לא בדקתם את :focus-within שיעור פסאודו, בהחלט תראה את זה! יש הרבה פנינים נסתרות כשמדובר בשימוש בסימון סמנטי וב-CSS, וזו אחת מהן. הרבה דברים שמתעלמים מהם נגישים כברירת מחדל, למשל, סימון סמנטי נגיש כברירת מחדל ויש להשתמש בו מעל div's בכל עת.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/iw/">Home</a></li>
      <li><a href="/iw/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 (יישומי אינטרנט עשירים נגישים). אנחנו יכולים לעשות צלילה עמוקה לתוך 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. קבל הגברה היום.
• PlatoData.Network Vertical Generative Ai. העצים את עצמך. גישה כאן.
• PlatoAiStream. Web3 Intelligence. הידע מוגבר. גישה כאן.
• PlatoESG. פחמן, קלינטק, אנרגיה, סביבה, שמש, ניהול פסולת. גישה כאן.
• PlatoHealth. מודיעין ביוטכנולוגיה וניסויים קליניים. גישה כאן.
• מקור: https://css-tricks.com/accessible-forms-with-pseudo-classes/