X

إمكانية الوصول Accessibility

٧. إنشاء وحدة تحكم صوتية مُيسَّرة الاستخدام Accessible Audio Controller

ورشة عمل

في هذه الورشة، ستتدرب على استخدام ARIA من خلال بناء "وحدة تحكم صوتية" Audio controller مُهيَّأة لتكون "متاحة للجميع" Accessible .

النموذج


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عناصر تحكم يسهل الوصول إليها</title>
 </head>
 <body>

 </body>
</html>

الخطوات

الخطوة ١:

  • للبدء، أضف عنصر h1 يحتوي على النص عناصر التحكم في الصوت .

الخطوة ٢:

  • بعد ذلك، أضف عنصر "زر" button مع ضبط السمة type على القيمة "button" .

  • يجب أن يكون "نص عنصر الزر" (The button element's text) هو تشغيل .

الخطوة ٣:

  • بعد ذلك، أضف عنصر div لاحتواء "جميع عناصر التحكم في مستوى الصوت" all the elements for the volume control .

  • يُعد عنصر span "حاويةً عامةً ومُضمَّنة" a generic inline container للمحتوى، إذ يُستخدم عادةً "لتطبيق تنسيق مختلف على جزء من النص" used to style a piece of text differently مقارنةً بالنص المحيط به، أو "لتغليف النص" to wrap text ومنحه مُعرِّفاً id يمكن للعناصر الأخرى ( مثل سمات ARIA ) الرجوع إليه.

  • داخل عنصر div ، قم بتضمين عنصر span مع تعيين السمة id بالقيمة "volume-label" ، كما يجب أن يكون نص عنصر span هو مستوى الصوت .

  • ستتم الإشارة لاحقاً إلى المعرّف id بواسطة سمات ARIA ، وذلك لتمكين "التقنيات المساعدة" assistive technologies من تحديد هذا النص باعتباره "التسمية الخاصة بعنصر التحكم في مستوى الصوت" the label for the volume control .

الخطوة ٤:

  • الآن حان الوقت لإضافة عنصر span آخر.

  • يجب أن يحتوي عنصر span هذا على سمة id مضبوطة على القيمة "volume-description" ، كما يجب أن يكون النص الخاص به هو ضبط مستوى الصوت .

  • على غرار عنصر span السابق، ستتم لاحقاً الإشارة إلى مُعرِّف id هذا العنصر بواسطة سمات ARIA ، وذلك لتمكين "التقنيات المساعدة" assistive technologies من تحديد هذا النص "بوصفٍ لعنصر التحكم في مستوى الصوت" the description for the volume control .

الخطوة ٥:

  • بعد ذلك، تحتاج إلى إضافة عنصر "إدخال" input وتعيين السمة type إلى "range" لإنشاء "شريط تمرير مستوى الصوت" The volume slider . قم بتعيين السمة min إلى "0" ، والسمة max إلى "100" ، والسمة value إلى "50" لتحديد "مستوى الصوت الافتراضي" the default volume level .

الخطوة ٦:

  • كما تتذكر من الدروس السابقة، تُستخدم السمة aria-labelledby عندما يكون هناك نص موجود بالفعل في الصفحة يمكن استخدامه "كتسمية" as a label ، وفي هذه الحالة، قمتَ بإضافة السمة id إلى عناصر span الخاصة بك، وهي السمة التي سيتم استخدامها هنا.

  • أضف السمة aria-labelledby إلى عنصر "الإدخال" input واضبط قيمتها لتكون "volume-label volume-description" .

الخطوة ٧:

  • أصبحت "وحدة التحكم في الصوت المتاحة للجميع" accessible audio controller شبه جاهزة، ولكن يتبقى شيء أخير يجب إضافته.

  • أضف عنصر "زر" button أسفل عنصر div ، بحيث تكون السمة type مضبوطة على القيمة "button" ، ويكون النص الظاهر عليه هو صامت .

  • وبهذا التغيير، تكون قد أتممت هذه الورشة!

الحل


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عناصر تحكم يسهل الوصول إليها</title>
 </head>
 <body>

  <h1>عناصر التحكم في الصوت</h1>
  <button type="button">تشغيل</button>

  <div>
   <span id="volume-label">مستوى الصوت</span>
   <span id="volume-description">ضبط مستوى الصوت</span>
   <input type="range" min="0" max="100" value="50" aria-labelledby="volume-label volume-description" />
  </div>

  <button type="button">صامت</button>

 </body>
</html>

التطبيق