سلام به همه شما توسعه دهندگان فوق العاده! در این پست، من قصد دارم شما را با ایجاد یک فرم تماس ساده با استفاده از 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 استفاده شود.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/fa/">Home</a></li>
      <li><a href="/fa/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>

La header, nav, main, section, asideو footer همه عناصر معنایی هستند. را h1 و ul همچنین معنایی و در دسترس هستند.

مگر اینکه یک جزء سفارشی وجود داشته باشد که باید ایجاد شود، پس الف div برای استفاده خوب است، جفت شده است ARIA (برنامه های کاربردی غنی اینترنت قابل دسترسی). می‌توانیم در پست‌های بعدی به ARIA شیرجه بزنیم. فعلاً بیایید تمرکز کنیم... ببینید من آنجا چه کار کردم... روی این کلاس شبه CSS.

La :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 در بررسی کنید با استفاده از:focus-within.

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• PlatoData.Network Vertical Generative Ai. به خودت قدرت بده دسترسی به اینجا.
• PlatoAiStream. هوش وب 3 دانش تقویت شده دسترسی به اینجا.
• PlatoESG. کربن ، CleanTech، انرژی، محیط، خورشیدی، مدیریت پسماند دسترسی به اینجا.
• PlatoHealth. هوش بیوتکنولوژی و آزمایشات بالینی. دسترسی به اینجا.
• منبع: https://css-tricks.com/accessible-forms-with-pseudo-classes/