مرحبًا بجميع المطورين الرائعين هناك! في هذا المنشور، سأأخذك عبر إنشاء نموذج اتصال بسيط باستخدام 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="/ar/">Home</a></li>
      <li><a href="/ar/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 باستخدام: التركيز داخل.

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• PlatoData.Network Vertical Generative Ai. تمكين نفسك. الوصول هنا.
• أفلاطونايستريم. ذكاء Web3. تضخيم المعرفة. الوصول هنا.
• أفلاطون كربون، كلينتك ، الطاقة، بيئة، شمسي، إدارة المخلفات. الوصول هنا.
• أفلاطون هيلث. التكنولوجيا الحيوية وذكاء التجارب السريرية. الوصول هنا.
• المصدر https://css-tricks.com/accessible-forms-with-pseudo-classes/