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

أ. ما هي أفضل الممارسات المتعلقة بالجداول Tables وإمكانية الوصول Accessibility ؟

عندما نرى "جدولاً" a table ، نبدأ على الفور في تكوين "روابط بصرية" visual associations بين "البيانات والعناوين" the data and the headers .

على سبيل المثال، لنفترض أن لدينا "جدولاً" a table يضم بيانات حيواناتنا الأليفة، حيث يحتوي على "كلبين وقطتين" two dogs and two cats ، ويعرض "أسماءها وأعمارها" their names and ages . وفي حين قد يتمكن "الشخص المبصر" a sighted person من فهم "العلاقات" the relationships الواردة في هذا "الجدول" table ، فإن الربط بين "القيم وعناوين" the values and the headers الأعمدة يُعد أمراً أكثر صعوبة بكثير بالنسبة للأشخاص الذين يستخدمون "برامج قراءة الشاشة" screen readers لتصفح "الجدول" the table .

بصفتك "مطور ويب" web developer ، تقع على عاتقك مسؤولية إنشاء هذه "الروابط" associations و"هيكلة ترميز اتش.تي.ام.ال" structuring your HTML markup بطريقة يسهل على مستخدمي "قارئات الشاشة" screen reader فهمها.

لنستعرض الآن كيفية إنشاء "جداول يسهل الوصول إليها" accessible tables وفهمها من قِبَل الجميع. تتمثل أولى "الممارسات المثلى" best practice التي سنتناولها في استخدام "تسمية توضيحية للجدول" a table caption ، إذ يتيح لك عنصر "التسمية التوضيحية" caption كتابة "وصف أو عنوان" caption or title للجدول، مما يساعد المستخدمين ء ولا سيما مستخدمي "التقنيات المساعدة" assistive technologies ، على استيعاب الغرض من الجدول ومحتواه بسرعة. وينبغي وضع عنصر "التسمية التوضيحية" caption مباشرةً بعد "وسم البداية" the opening tag لعنصر "الجدول" table ، فبهذه الطريقة، تتمكن "برامج قراءة الشاشة" screen readers وغيرها من "التقنيات المساعدة" assistive technologies من توفير "سياق أوضح" more context من خلال الإعلان عن التسمية التوضيحية قبل قراءة "محتوى الجدول" table content .

<table>
 <caption>حيواناتنا الأليفة</caption>
 <!-- Table Rows and Columns صفوف وأعمدة الجدول -->
</table>
            

لننتقل الآن للحديث عن "رؤوس الصفوف والأعمدة" row and column headers . الرؤوس هي "خلايا خاصة" special cells ، توجد عادةً في بداية "الصف" row أو "العمود" column ، تصف "نوع البيانات المخزنة" the type of data stored في ذلك الصف أو العمود. ويمكنك تحديد "رأس الصف أو العمود" a row or column header باستخدام عنصر "رأس الجدول" th .

على سبيل المثال، يُنشئ "الكود أدناه" the code below "جدولاً" a table لحيوانين أليفين. يحتوي كل "صف" row على "عنوان للصف" (اسم الحيوان الأليف)، ويحتوي كل "عمود" column على "عنوان للعمود" يصف ما تمثله "البيانات" the data الموجودة في ذلك العمود (العمر والنوع).

<table>
 <caption>حيواناتنا الأليفة</caption>
 <thead>
  <tr>
   <!-- Column Headers عناوين الأعمدة -->
   <th>الإسم</th>
   <th>العمر</th>
   <th>النوع</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>جينو</th> <!-- Row Header رأس الصف  -->
   <td>5</td>
   <td>كلب</td>
  </tr>
  <tr>
  <th>نورا</th> <!-- Row Header رأس الصف  -->
   <td>2</td>
   <td>قطة</td>
  </tr>
 </tbody>
</table>
            

لاحظ أن "الكود أعلاه" the above code يتضمن عنصراً "للعنوان" caption يقع مباشرةً بعد عنصر فتح "الجدول" table . ثم، داخل عنصر "رأس الجدول" thead ، توجد عناوين الأعمدة ( الإسم و العمر و النوع ). وفي الصفين الثاني والثالث، داخل عنصر "جسم الجدول" tbody ، نجد "البيانات" the data الخاصة بكل حيوان أليف لدينا، وتُعد أسماء الحيوانات الأليفة بمثابة "عناوين للصفوف" the row headers لأنها موضوعة داخل عناصر "رأس الخلية" th .

يُعد ربط "خلايا البيانات" the data cells بالعناوين المقابلة لها أمراً بالغ الأهمية أيضاً بالنسبة لـ"قارئات الشاشة" screen readers ، إذ تحدد السمة scope ما إذا كان العنوان خاصاً بصفٍ أم بعمود. ورغم أن "قارئات الشاشة" screen readers قد تستنتج ذلك بشكل صحيح بناءً على "بنية الجدول" the table's structure ، إلا أنه يُنصح عادةً بتحديد النطاق scoop صراحةً لضمان "الوضوح" clarity .

توجد أربع "قيم" values محتملة للسمة scope ، والقيمتان اللتان ستستخدمهما بكثرة هما col ( للعمود column ) و row ( للصف row ). في الكود أدناه، نلاحظ إضافة السمة scope إلى ترويسات الأعمدة والصفوف، حيث تم تعيين القيمة col لترويسات الأعمدة الثلاثة ( الاسم و العمر و النوع ).

يتمتع عنوانا الصفين ( جينو و نورا ) بـ"النطاق" scope و"القيمة" col .

<table>
 <caption>حيواناتنا الأليفة</caption>
 <thead>
  <tr>
   <!-- Now they have scope الآن أصبح لديهم نطاق -->
   <th scope="col">الإسم</th>
   <th scope="col">العمر</th>
   <th scope="col">النوع</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">جينو</th>
   <td>5</td>
   <td>كلب</td>
  </tr>
  <tr>
  <th scope="row">نورا</th>
   <td>2</td>
   <td>قطة</td>
  </tr>
 </tbody>
</table>
            

إذا كان "رأس العمود أو الصف" a column or row header "يمتد" spans ليشمل "خلايا متعددة" multiple cells ، فسيتم تطبيق "النطاق" scope على كل "خلية" cell منها على حدة. وإليك مثال على ذلك:

<table>
 <tbody>
  <tr>
   <td></td>
   <th scope="col">الإسم</th>
   <th scope="col">العمر</th>
  </tr>
  <tr>
   <th rowspan="2" scope="row">الكلاب</th>
   <th scope="row">جينو</th>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">إليزابيث</th>
   <td>10</td>
  </tr>
  <tr>
   <th rowspan="2" scope="row">القطط</th>
   <th scope="row">نورا</th>
   <td>2</td>
  </tr>
  <tr>
   <th scope="row">لولو</th>
   <td>6</td>
  </tr>
 <tbody>
</table>
            

في هذا "الجدول" table ، سيكون لـ"الخلية" the cell التي تحتوي على عمر جينو وهو 5 عنوان عمود واحد العمر وعنوانا صف ( الكلاب و جينو ) . وبالمثل، سيكون لعمر إليزابيث وهو 10 عنوان عمود واحد العمر وعنوانا صف ( الكلاب و إليزابيث ) .

ومع ذلك، قد لا تتمكن بعض "برامج قراءة الشاشة" Screen readers من تفسير الجداول ذات "الهياكل المعقدة" Complex structures ، لذا ينبغي عليك أيضاً محاولة تبسيط "بنية الجدول" Table structure قدر الإمكان لتجنب استخدام "رؤوس الصفوف والأعمدة" row and column headers التي تمتد عبر "خلايا متعددة" multiple cells .

يجب أن يكون هدفك دائمًا هو ضمان تمكّن المستخدمين من الوصول إلى هذه "المعلومات" Information ، حتى وإن كانت "برامج قراءة الشاشة" Screen readers لديهم قادرة على التعامل مع "هياكل الجداول المعقدة" Complex table structures .

فيما يتعلق بـ"عرض الخلية" Cell width ، يُنصح بتجنب استخدام "قيم ثابتة" Fixed values ، إذ يُفضل استخدام "قيم نسبية" Relative values ، مثل "النسب المئوية" Percentages بدلاً منها. كذلك، حاول تجنب تحديد "ارتفاع الخلية" Cell height ، فهذا يتيح للمستخدمين تعديل "حجم النص" The text size بما يتناسب مع احتياجاتهم.

وأخيراً، ينبغي عليك ترك "المتصفح" The browser يحدد "عرض الجدول" Table width كلما أمكن ذلك، لتقليل الحاجة إلى "التمرير الأفقي" Horizontal scrolling .

تُعد "جداول اتش.تي.ام.ال" HTML tables ضرورية لعرض "البيانات المنظمة" Structured data بـ"تنسيق يسهل الوصول إليه وفهمه" in an Accessible and understandable format . ومن خلال اتباع "إرشادات إمكانية الوصول " Accessibility guidelines هذه، يمكنك إنشاء جداول يسهل على الجميع فهمها.

ب. لماذا من المهم أن تكون لعناصر الإدخال Inputs تسمية مرتبطة بها Associated Label ؟

قد تبدو "التسميات" Labels المصاحبة لـ"حقول الإدخال" input fields تفاصيلَ بسيطة، إلا أنها تؤدي "دوراً جوهرياً" a crucial role في جعل "النماذج" forms أسهل استخداماً للجميع.

تساعد "التسميات" Labels الأشخاص ذوي "الإعاقة" disabilities ، وتجعل "النماذج" forms أكثر سهولة في الاستخدام للجميع، وتُحسّن في النهاية "معدلات التحويل الخاصة بتلك النماذج" form conversion rates .

لنستعرض الأسباب التي تجعل إضافة "تسميات" Labels إلى "عناصر الإدخال" Input elements أمراً مهماً لضمان "سهولة الوصول وسهولة الاستخدام" Accessibility and Usability .

غالباً ما تعتمد "قارئات الشاشة" Screen readers على "التسميات" Labels لوصف الغرض من "حقول الإدخال" Input fields . ولكي تعمل هذه الآلية بشكل صحيح، يجب ربط "التسمية" The label بحقل "الإدخال" input برمجياً ، ورغم وجود طرق متعددة لتحقيق ذلك، فإن الطريقة الأكثر شيوعاً هي استخدام عنصر label في لغة "اتش.تي.ام.ال" HTML .

إليك كيفية ربط "تسمية" label بعنصر "إدخال"input :

<form>
 <label for="name">اسمك</label>
 <input type="text" id="name" />
</form>
            

في هذا المثال، ترتبط السمة for الخاصة بعنصر التسمية label بمعرّف id عنصر الإدخال input . وتتيح هذه الرابطة لـ"برمجيات قراءة الشاشة" Screen readers الإعلان عن "التسمية" label عندما يكون عنصر "الإدخال" input في "حالة التركيز" Focused state ، مما يمكّن مستخدمي هذه البرمجيات من فهم الغرض من عنصر "الإدخال" input .

يُسهم "ربط التسميات" Associating labels بجميع "حقول الإدخال" Input fields في تعزيز تحسين محركات البحث SEO أيضاً، فـ"التسميات المناسبة" Proper labels تتيح لـ"محركات البحث" Search engines فهم محتوى الصفحة بشكل أفضل، مما ينعكس إيجاباً على ترتيب الصفحة في نتائج البحث.

ولكن من المهم أن تدرك أنك تُنشئ محتوىً لـ"البشر Humans ، وليس لمحركات البحث، لذا ينبغي عليك التأكد من أن "التسميات واضحة ومعبّرة" The labels are as clear and descriptive قدر الإمكان.