مع تقدمنا في تعلم لغة HTML من خلال قراءة مصادر متنوعة وتطبيق مختلف الأمثلة وبناء مشاريعنا الخاصة، سنرى باستمرار سمة مشتركة، وهي استخدام المعنى الدلالي Semantic أو الدلالة التي تحملها عناصر HTML، والتي تُدعى أحيانًا POSH وهي اختصار لعبارة الدلالة الصرفة القديمة للغة HTML أو بالإنجليزية Plain Old Semantic HTML. ويعني ذلك استخدام عناصر HTML للغايات التي صممت لأجلها قدر الإمكان.

قد تكون أهمية هذا الموضوع غريبة نظرًا لإدراكنا أننا باستخدام CSS وجافا سكريبت نستطيع تغيير سلوك عناصر HTML بالطريقة التي نشاء. بحيث يمكننا مثلًا استخدام الشيفرة التالية لتشغيل فيديو ضمن موقعنا وتتولى CSS وJavaScript باقي التعديلات:

<div>Play video</div>

لكن سنرى لاحقًا وبتفاصيل أوفى أنه من المنطقي استخدام العنصر المناسب بمكانه المناسب لتنفيذ الأمر، وهو الزر الحقيقي <button>، على النحو الآتي:

<button>Play video</button>

وللتوضيح، لا تقتصر فائدة العناصر <button> على تنسيقها الملائم الذي يُطبق افتراضيًا، لكنها تدعم سهولة الوصول عبر لوحة المفاتيح؛ إذ يمكن للمستخدم التنقل بين الأزرار باستخدام المفتاح Tab وتفعيل الزر المختار من خلال المفتاح Space أو Return أو Enter.

الجيد في الأمر أن كتابة شيفرة HTML دلالية لا يستغرق وقتًا وجهدًا أكبر من كتابة الشيفرة غير الدلالية التي تُعَد ممارسةً سيئةً لسهولة الوصول؛ كما أن الشيفرة الدلالية تقدم ميزات تتعدى سهولة الوصول:

1. أسهل تطويرًا: فكما ذكرنا، تقدم العناصر الدلالية وظائف مضمنة قد تكون أكثر وضوحًا وفهمًا
2. أفضل للأجهزة المحمولة: فقد تكون أقل حجمًا وأسرع من العناصر غير الدلالية، كما تسهّل التصميم المتجاوب لصفحات الويب
3. أفضل لتحسين محركات البحث SEO: تعطي محركات البحث أهمية أكبر للكلمات المفتاحية الموجودة ضمن العناوين الرئيسية والروابط مقارنةً بالكلمات المفتاحية الموجودة في عناصر غير دلالية مثل العناصر <div> مثلًا؛ ولهذا سيكون البحث عن موقعنا أسهل.

سنتابع في بقية الفقرات استكشاف ميزات سهولة الوصول التي تقدمها HTML.

ملاحظة: من الأفضل تثبيت قارئ شاشة على الحاسوب لاختبار الأمثلة التي نعرضها.

دلالات عناصر HTML

تحدثنا سابقًا عن أهمية دلالات العناصر ولماذا علينا استخدام عناصر HTML الصحيحة في مشاريعنا. وعلينا أن لا نتجاهل ذلك أبدًا لأنها النقاط الأساسية التي تُخرق فيها معايير سهول الوصول إن لم تُعالج بالطريقة الصحيحة.

سنجد في عالم الويب الحقيقي أشخاصًا يكتبون شيفرات غريبة باستخدام HTML؛ فبعضهم يسيء استخدام اللغة بتطبيق ممارسات قديمة لم تُنسى بعد، ويفعلها آخرون لجهلهم؛ لكن أيًا يكن السبب، لا بد من استبدال تلك الشيفرات السيئة.

قد لا نستطيع التخلص في بعض الأحيان من تلك الشيفرات بسهولة، فربما كانت ضمن صفحات يولّدها الخادم تلقائيًا وليس لدينا تحكم كامل بها، أو نظرًا لاستخدام محتوى يقدمه طرف خارجي مثل اللوحات الإعلانية.

المحتوى النصي

من أكثر الأشياء التي تعزز الوصول السهل لمستخدمي قارئات الشاشة هو المحتوى المهيكل بطريقة ممتازة ضمن عناوين رئيسية وفقرات وقوائم وهكذا. ويوضح المثال التالي مثالًا ممتازًا لاستخدام العناصر الدلالية:

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<ol>
 <li>Here is</li>
 <li>a list for</li>
 <li>you to read</li>
</ol>

<h2>My subheading</h2>

<p>
 This is the first subsection of my document. I'd love people to be able to
 find this content!
</p>

<h2>My 2nd subheading</h2>

<p>
 This is the second subsection of my content, which I think is more interesting
 than the last one.
</p>

هناك أيضًا نسخة مطولة من هذا المثال متاحة تجربها مع قارئ للشاشة. وإذا حاولنا التنقل ضمنها، سنلاحظ سهولة الأمر.

1. ينطق قارئ الشاشة كل عنوان رئيسي عندما نتقدم في المحتوى وينبهنا إلى العناوين والفقرات وغيرها
2. يقف قارئ الشاشة بعد كل عنصر، مما يسمح لنا بالتنقل بخطوات تناسبنا ضمن المحتوى
3. بإمكاننا التنقل بين العنوان السابق والتالي في العديد من قارئات الشاشة
4. بإمكاننا الحصول على قائمة بكل العناوين الأساسية في العديد من قارئات الشاشة لنستخدمها كجدول مساعد لإيجاد محتوى محدد

يكتب المطورون أحيانًا العناوين الرئيسة والفقرات باستخدام عناصر السطر الجديد <br> وإضافة عناصر HTML للتنسيق فقط كالتالي:

<span style="font-size: 3em">My heading</span> <br /><br />
This is the first section of my document.
<br /><br />
I'll add another paragraph here too.
<br /><br />
1. Here is
<br /><br />
2. a list for
<br /><br />
3. you to read
<br /><br />
<span style="font-size: 2.5em">My subheading</span>
<br /><br />
This is the first subsection of my document. I'd love people to be able to find
this content!
<br /><br />
<span style="font-size: 2.5em">My 2nd subheading</span>
<br /><br />
This is the second subsection of my content. I think is more interesting than
the last one.

ولو جرّبنا النسخة المطولة من هذا المثال باستخدام قارئ شاشة فلن نجدها تجربةً جيدة، إذ لن يجد قارئ الشاشة أية إشارات أو دلالات ليستخدمها، كما لن نتمكن من استخلاص جدول بالمحتويات, وسيرى القارئ صفحتنا على شكل كتل كبيرة، بالتالي سيقرؤها دفعةً واحدة.

هنالك أيضًا مشاكل أخرى أبعد من سهولة الوصول، إذ من الصعب تنسيق المحتوى لاحقًا باستخدام CSS أو التعامل معه باستخدام جافاسكريبت لعدم وجود عناصر لاستخدامها كمحددات Selectors.

يمكن أن تؤثر اللغة التي نستخدمها على سهولة الوصول، ولهذا علينا كتابتها بطريقة واضحة بعيدة عن التعقيد، ودون استخدام مصطلحات أو لهجات محلية، لذا لا بد من تفادي استخدام لغة ومحارف لا يمكن لقارئات الشاشة نطقها بسهولة فمثلًا:

• لا نستخدم الشرطات إن أمكن تحاشيها. فبدلًا من كتابة 5-7 تكتب من 5 إلى 7
• نكتب الاختصارات بعبارتها الكاملة، فبدلًا من كتابة Jan نكتب January
• نكتب اختصار عبارة بالكامل مرة أو مرتين على الأقل، ثم نستخدم العنصر <abb> لوصفه

تخطيط الصفحة

استخدم المطورون قديمًا جداول HTML لتخطيط صفحات الويب، واستخدموا خلايا الجدول لتضم الترويسة والتذييل والأشرطة الجانبية وأعمدة المحتوى الرئيسي. وبطبيعة الحال، لا يُعَد ذلك الآن أمرًا مقبولًا لأن قارئ الشاشة سيقرأ المحتوى غالبًا بطريقة مربكة، خاصةً إن كان التخطيط معقدًا ويضم عدة جداول متداخلة.

لنجرّب المثال table-layout.html الذي يبدو مشابهًا للشيفرة التالية:

<table width="1200">
 <!-- main heading row -->
 <tr id="heading">
  <td colspan="6">
   <h1 align="center">Header</h1>
  </td>
 </tr>
 <!-- nav menu row -->
 <tr id="nav" bgcolor="#ffffff">
  <td width="200">
   <a href="#" align="center">Home</a>
  </td>
  <td width="200">
   <a href="#" align="center">Our team</a>
  </td>
  <td width="200">
   <a href="#" align="center">Projects</a>
  </td>
  <td width="200">
   <a href="#" align="center">Contact</a>
  </td>
  <td width="300">
   <form width="300">
    <label
     >Search
     <input
      type="search"
      name="q"
      placeholder="Search query"
      width="300" />
    </label>
   </form>
  </td>
  <td width="100">
   <button width="100">Go!</button>
  </td>
 </tr>
 <!-- spacer row -->
 <tr id="spacer" height="10">
  <td></td>
 </tr>
 <!-- main content and aside row -->
 <tr id="main">
  <td id="content" colspan="4">
   <!-- main content goes here -->
  </td>
  <td id="aside" colspan="2" valign="top">
   <h2>Related</h2>

   <!-- aside content goes here -->
  </td>
 </tr>
 <!-- spacer row -->
 <tr id="spacer" height="10">
  <td></td>
 </tr>
 <!-- footer row -->
 <tr id="footer">
  <td colspan="6">
   <p>©Copyright 1996 by nobody. All rights reversed.</p>
  </td>
 </tr>
</table>

لو حاولنا التنقل بين عناصر المثال عبر قارئ شاشة، فقد يخبرنا بوجود جدول علينا إلقاء نظرة عليه، وعندها من المحتمل وفقًا للقارئ الذي نستخدمه أن ننزل للأسفل لتفقد الجدول والنظر إلى ما يقدمه بشكل منفصل وغير مترابط ومن ثم الخروج من الجدول لمتابعة التنقل ضمن المحتوى.

يعود التخطيط القديم للجدول إلى الأيام التي لم تدعم فيها المتصفحات لغة CSS كفاية؛ أما الآن، فهو مصدر لإرباك التقنيات المساعدة مثل قارئات الشاشة. إضافةً إلى ذلك، تحتاج شيفرته المصدرية إلى الكثير من الأسطر، مما يجعله أقل مرونةً وأصعب صيانةً. ولنقف على صحة ما نقوله، لا بد من مقارنة تجربتنا للمثال السابق مع مثال يستخدم هيكلية حديثة لصفحة الويب، والذي قد يبدو بالشكل التالي:

<header>
 <h1>Header</h1>
</header>

<nav>
 <!-- main navigation in here -->
</nav>

<!-- Here is our page's main content -->
<main>
 <!-- It contains an article -->
 <article>
  <h2>Article heading</h2>

  <!-- article content in here -->
 </article>

 <aside>
  <h2>Related</h2>

  <!-- aside content in here -->
 </aside>
</main>

<!-- And here is our main footer that is used across all the pages of our website -->

<footer>
 <!-- footer content in here -->
</footer>

إن جربنا النسخة ذات الهيكلية الحديثة على صفحة الويب باستخدام قارئ شاشة، فلن نلاحظ حينها تداخلًا أو اختلاطًا عند قراءة المحتوى؛ كما أن شيفرته أقل حجمًا، مما يعني وجود سهولة في صيانة الشيفرة، واستهلاكًا أقل لحزم البيانات، وبالتالي فائدة مضاعفة، خاصةً لمن يعاني من انترنت بطيء.

من الأشياء التي يجب أخذها أيضًا بالحسبان عند إنشاء تخطيط الصفحة، استخدام عناصر HTML دلالية كما عرضنا في مثال سابق؛ إذ بإمكاننا استخدام تخطيط باستخدام عناصر <div> متداخلة، لكن من الأفضل استخدام عناصر تقسيم الصفحة للتغليف مثل <nav> و <footer> وعناصر تكرار المحتوى مثل <article>، مما يعطي قيمةً دلالية أكبر لقارئ الشاشة وغيره من التقنيات، ويقدم إشارات أوضح عن المحتوى الذي ينتقل إليه المستخدم.

ملاحظة: إضافةً إلى القيمة الدلالية الجيدة، والتخطيط الجذاب، لا بد من ترتيب عناصر المحتوى منطقيًا في الشيفرة المصدرية. بإمكاننا طبعًا وضعها في المكان الذي نريد لاحقًا باستخدام CSS، لكن لا بد من البدء بالترتيب المنطقي للعناصر حتى يكون ما تقرؤه قارئات الشاشة أوضح وأكثر منطقيةً لمستخدميها.

عناصر تحكم واجهة المستخدم

نقصد بعناصر تحكم واجهة المستخدم UI بالأجزاء الرئيسية التي يتفاعل معها المستخدم في صفحة الويب وأكثرها شيوعًا الأزرار والروابط واستمارات الويب. سنناقش في هذا القسم بعض النقاط الأساسية التي يجب الانتباه لها عند إنشاء عناصر التحكم لدعم سهولة الوصول؛ كما سنناقش في مقال تالٍ اعتبارات أخرى تتعلق بهذه العناصر.

من ميزات سهولة الوصول الافتراضية الخاصة بعناصر التحكم هي إمكانية التعامل معها عن طريق لوحة المفاتيح في معظم المتصفحات. بإمكاننا تجريب الأمر من خلال المثال native-keyboard-accessibility.html، والذي يمكن إلقاء نظرة على شيفرته المصدرية).

نفتح المثال في نافذة جديدة للمتصفح ونجرّب الضغط على المفتاح Tab، وسنجد بعد عدة ضغطات أن تركيز الدخل سينتقل من عنصر إلى آخر. ولكل عنصر يكتسب تركيز الدخل تظليل مميز يختلف من متصفح لآخر من أجل تمييز أن هذا العنصر قد اكتسب تركيز الدخل.

ملاحظة: بإمكاننا تفعيل طبقة تعرض ترتيب التنقل بين العناصر باستخدام Tab من خلال أدوات مطوري ويب في متصفحنا.

عندما يكتسب العنصر تركيز الدخل، سنتمكن من النقر على الزر أو على الرابط بالضغط على المفتاح Enter/Return أو الكتابة ضمن العنصر. ولعناصر استمارات الويب المختلفة عناصر تحكم مختلفة، إذ يضم العنصر <select> مثلًا عناصر <option> يمكن التنقل بينها من خلال مفاتيح الأسهم (أعلى وأدنى).

ملاحظة: تختلف خيارات التحكم بالعناصر عبر لوحة المفاتيح من متصفح لآخر.

وهذا السلوك الافتراضي الذي يدعم سهولة الوصول سيكون جاهزًا للاستخدام دون أي عناء، فقط باستخدام العنصر الصحيح، أي باستخدام عناصر مثل الأزرار والروابط والاستمارات بما في ذلك العناصر <label>.

<h1>Links</h1>

<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>

<p>
 Another link, to the
 <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.
</p>

<h2>Buttons</h2>

<p>
 <button data-message="This is from the first button">Click me!</button>
 <button data-message="This is from the second button">Click me too!</button>
 <button data-message="This is from the third button">And me!</button>
</p>

<h2>Form</h2>

<form>
 <div>
  <label for="name">Fill in your name:</label>
  <input type="text" id="name" name="name" />
 </div>
 <div>
  <label for="age">Enter your age:</label>
  <input type="text" id="age" name="age" />
 </div>
 <div>
  <label for="mood">Choose your mood:</label>
  <select id="mood" name="mood">
   <option>Happy</option>
   <option>Sad</option>
   <option>Angry</option>
   <option>Worried</option>
  </select>
 </div>
</form>

مع ذلك، يستخدم المطورون أحيانًا HTML بطريقة غريبة، فقد نجد أحيانًا أزرارًا مكتوبةً باستخدام عناصر <div> كما في المثال التالي:

<div data-message="This is from the first button">Click me!</div>
<div data-message="This is from the second button">Click me too!</div>
<div data-message="This is from the third button">And me!</div>

طبعًا، لا يُنصح باستخدام HTML بهذا الشكل، إذ سنخسر الوصول السهل عبر لوحة المفاتيح مباشرةً، والتي يمكن أن نضمنها لو استخدمنا العنصر <button>، كما لن نحصل أيضًا على تنسيق CSS افتراضي.

في الحالات النادرة -ومستحيلة الوجود- التي نُضطر فيها إلى ذلك، علينا استخدام الخاصية role=button مع عناصر أخرى لكي نجعلها على هيئة أزرار، وعلينا إنجاز جميع وظائف الأزرار بنفسنا، بما في ذلك التفاعل مع الفأرة ولوحة المفاتيح.

بناء دعم لسهولة الوصول عبر لوحة المفاتيح

يحتاج مثل هذا الدعم إلى القليل من العمل، ويمكن لأجل ذلك الاطلاع على المثال fake-div-buttons.html، وإلقاء نظرة على شيفرته المصدرية)، فكما يبدو مُنحت الأزار المزيفة <div> إمكانية التقاط تركيز الدخل بما في ذلك حالة استخدام المفتاح Tab، وذلك عن طريق ضبط قيمة الخاصية tabindex لكل زر على القيمة "0"، كما أضيفت الخاصية "role="button لتتعرف قارئات الشاشة عليها عند اكتسابها تركيز الدخل أو عند التفاعل معها:

<div data-message="This is from the first button" tabindex="0" role="button">
 Click me!
</div>
<div data-message="This is from the second button" tabindex="0" role="button">
 Click me too!
</div>
<div data-message="This is from the third button" tabindex="0" role="button">
 And me!
</div>

إن الوظيفة الأساسية للخاصية tabindex هي السماح بتغيير ترتيب الانتقال بين العناصر الأصلية التي تدعم التنقل باستخدام المفتاح Tab على شكل قيم عددية موجبة، بدلًا من طريقة التنقل الافتراضية وفقًا لموقعها في الشيفرة المصدرية. ويُعد هذا الأسلوب خاطئًا في معظم الحالات، لأنه قد يسبب اختلاطًا حقيقيًا؛ لذا من المهم استخدامه حصرًا عند الحاجة له، مثل الحالة التي يعرض فيها تخطيط صفحة الويب العناصر بطريقة بصرية مختلفة تمامًا عن ترتيب ظهورها في الشيفرة المصدرية، وأردنا أن يكون التنقل منطقيًا أكثر. وهناك خياران للخاصية tabindex:

• "tabindex="0: تتيح للعناصر التي لا تدعم التنقل باستخدام المفتاح Tab أن تدعم، وهي القيمة الأكثر أهمية
• "tabindex="-1: تتيح للعناصر التي لا تدعم التنقل باستخدام المفتاح Tab إمكانية استقبال تركيز الدخل برمجيًا باستخدام جافاسكريبت مثلًا، أو كهدف لرابط تشعّبي

ومع أن النسخة السابقة من المثال ستدعم التنقل بين الأزرار، إلا أنها لن تسمح لنا بتفعيل هذه الأزرار بالضغط على المفتاح Enter/Return. ولحل هذه المسألة، لا بد من استخدام جافاسكريبت كما يلي:

document.onkeydown = (e) => {
 // The Enter/Return key
 if (e.key === "Enter") {
  document.activeElement.click();
 }
};

وشرح ما فعلناه، فقد أضفنا هنا مترصد أحداث للكائن document لالتقاط الضغط على أي مفتاح من لوحة المفاتيح، ثم نتحقق من المفتاح الذي ضغطه المستخدم الخاصية key لكائن الحدث. فإن كان المفتاح المضغوط Enter/Return، معناها ننفذ الدالة المخزّنة في المعالج onclick من خلال العبارة ()document.activeElement.click؛ إذ يعطينا الكائن activeElement العنصر الحالي الذي تلقى تركيز الدخل في الصفحة.

هناك الكثير من الأشياء التي يجب علينا الاهتمام بها عند بناء مثل هذه الوظائف، إذ ترتبط بها مشاكل عدة، ولهذا من الأفضل استخدام العناصر المناسبة للعمل المناسب في المقام الأول.

نصوص واضحة ومعبرة للعناوين

للعناوين التي ترتبط بعناصر تحكم واجهة المستخدم فوائد كثيرة لجميع المستخدمين، لكن استخدامها بالطريقة الصحيحة له أهمية خاصة بالنسبة لذوي الإعاقة.

علينا في البداية أن نتأكد من أن النص المرافق للزر أو الرابط مفهوم ومميز، بحيث لا نستخدم مثلًا عبارات مثل انقر هنا Click here كعناوين، فقد تكون هناك قائمة من الأزرار يصعب على مستخدمي قارئات الشاشة تتبعها بهذا الشكل. تعرض لقطة الشاشة التالية قائمة بعناصر التحكم في مثالنا وضعها قارئ الشاشة VoiceOver على ماك أو اس:

نتأكد هنا من أن العناوين التي نضعها منطقية حتى لو خارج سياق ورودها، بحيث يمكن أن تُفهم عند قراءتها ضمن سياقها المخصص أو خارجه. تعرض الشيفرة التالية مثلًا عن نص جيد لرابط تشعبي:

<p>
 Whales are really awesome creatures.
 <a href="whales.html">Find out more about whales</a>.
</p>

لكن التالي يْعَد مثالًا سيئًا:

<p>
 Whales are really awesome creatures. To find out more about whales,
 <a href="whales.html">click here</a>.
</p>

ملاحظة: بإمكاننا الإطلاع على ممارسات جيدة وسيئة من خلال المثالين good-links.html و bad-links.html.

تُعد عناوين عناصر التحكم في استمارات الويب مهمة، فهي تقدم تلميحات عما يجب إدخاله ضمن كل عنصر إدخال. وفي ما يلي مثال منطقي عن الأمر:

Fill in your name: <input type="text" id="name" name="name" />

لكن هذا الأمر ليس ذا أهمية لذوي الإعاقة، فلا شيء يربط العنوان بوضوح بعنصر الإدخال النصي ويوضح كيفية ملئه إن لم تكن رؤيته ممكنة. ولو جربنا المثال باستخدام قارئات الشاشة، فقد نحصل فقط على وصف لعناصر الإدخال يقول عدل النص edit text.

أما المثال التالي، فيقدم حلًا أفضل:

<div>
 <label for="name">Fill in your name:</label>
 <input type="text" id="name" name="name" />
</div>

يرتبط العنوان في هذه الشيفرة بعنصر الإدخال بوضوح، وسيكون وصف قارئ الشاشة على الشكل " أدخل اسمك: عدل النص Fill in your name: edit text".

وكفائدة إضافية، سيمنحنا ربط عنوان بعنصر إدخال، إمكانية النقر على العنوان لتفعيل عنصر الإدخال، مما يمنحنا مساحةً واسعةً لتنقر فيها ويسهل اختيار العنصر.

ملاحظة: يمكن الإطلاع على ممارسات جيدة وسيئة عند بناء الاستمارات من خلال المثالين good-form.html و bad-form.html.

سهولة الوصول إلى جداول البيانات

يمكن كتابة جدول بيانات بسيط من خلال شيفرة HTML بسيطة كالتالي:

<table>
 <tr>
  <td>Name</td>
  <td>Age</td>
  <td>Pronouns</td>
 </tr>
 <tr>
  <td>Gabriel</td>
  <td>13</td>
  <td>he/him</td>
 </tr>
 <tr>
  <td>Elva</td>
  <td>8</td>
  <td>she/her</td>
 </tr>
 <tr>
  <td>Freida</td>
  <td>5</td>
  <td>she/her</td>
 </tr>
</table>

لكن المشكلة في هذه الشيفرة هي عدم قدرة قارئات الشاشة على ربط الصفوف بالأعمدة لتجميع البيانات. ولفعل ذلك، لا بد من تحديد سطور الترويسة Header Rows إن كانت في أعلى الأسطر أو الأعمدة، وهكذا. بطبيعة الحال، لا يمكن تنفيذ ذلك على الجدول السابق إلا مرئيًا. ولأجل ذلك، يمكن إلقاء نظرة على المثال bad-table.html وتجربه، ثم الاطلاع على المثال punk bands table example والذي سنرى فيه بعض النقاط التي تدعم سهول الوصول.

عُرِّفت ترويسات الجدول من خلال عناصر <th> ويمكن تحديد ما إذا كانت ترويسات لأسطر أو أعمدة من خلال الخاصية scope. وهذا ما يعطي مجموعةً مترابطةً من البيانات التي يمكن لقارئات الشاشة تقديمها ككتلة واحدة.

للعنصر <table> والخاصية summary نفس العمل، وهو تقديم نص بديل عن الجدول، مما يمنح مستخدمي قارئ الشاشة وصفًا سريعًا لمحتويات الجدول. ويُفضَّل عادةً العنصر <caption>، لأنه يتيح للمستخدمين الطبيعيين القدرة على الوصول إلى محتواه أيضًا، فقد يجدونه مفيدًا، ولن نحتاج في الواقع إلى كلا العنصرين.

النصوص البديلة

يُعَد الوصول السهل إلى المحتوى النصي محققًا دائمًا، لكن الوضع ليس كذلك بالنسبة للوسائط المتعددة؛ إذ لا يمكن رؤية الصورة والفيديو من قبل ذوي الإعاقات البصرية، ولن يستطيع ذوو الإعاقات السمعية فهم المحتوى الصوتي. لن نغطي هذا الموضوع بهذا المقال، لكننا سنلقي نظرةً على سهولة الوصول إلى عنصر الصور <img> فقط. لأجل ذلك، يمكن الاطلاع على هذا المثال accessible-image.html الذي يقدم أربعة نسخ عن نفس الصورة:

<img src="dinosaur.png" />

<img
 src="dinosaur.png"
 alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />

<img
 src="dinosaur.png"
 alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."
 title="The Mozilla red dinosaur" />

<img src="dinosaur.png" aria-labelledby="dino-label" />

<p id="dino-label">
 The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like
 a human, with small arms, and a large head with lots of sharp teeth.
</p>

وكما هو واضح، عندما تُعرض الصورة الأولى من خلال قارئ شاشة، فلن تقدم تلك الفائدة الحقيقية لمستخدمه، إذ سيقرأ مثلًا برنامج VoiceOver الصورة على النحو: "dinosaur.png, image"، أي يقرأ فقط عنوان ملف الصورة. وكل ما يمكن للقارئ فهمه هو أن الصورة عن ديناصور ما، لكن وبما أن الملفات قد تُحمَّل بأسماء توّلد آليًا من قبل كاميرا رقمية مثلًا، فلن تقدم هذه الأسماء أية فائدة لتوضيح محتوى الصورة.

ملاحظة: لهذا لا ينبغي أبدًا إضافة محتوى نصي ضمن صورة، إذ لن تصل إليه قارئات الشاشة؛ وللأمر أيضًا مساوئ عدة، فلن نتمكن مثلًا من نسخه ولصقه في مكان آخر.

عندما يصل قارئ الشاشة إلى الصورة الثانية، سيقرأ مايلي:

A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth

تشير هذه الحالة إلى أهمية استخدام نص بديل حتى لو كان اسم ملف الصورة معبرًا، لهذا من المهم التأكد من استخدام الخاصية alt قدر الإمكان، مع الانتباه إلى أن محتوى هذه الخاصية سيقدم وصفًا للصورة وما تعرضه؛ كما يجب أن يكون الوصف مختصرًا ومعبرًا ويوصل كل المعلومات التي تعرضها الصورة، والتي لا تتكرر في المحتوى النصي المحيط بها.

يختلف محتوى الخاصية alt لنفس الصورة وفق السياق؛ فإن كانت صورة هي لجرو صغير Fluffy مثلًا بجانب مراجعة عن طعام كلاب، فسيكون المحتوى "alt="fluffy كافيًا في هذا السياق، لكن إن كانت ضمن صفحة لتبني الكلاب، فسيختلف حينها محتوى الخاصية alt لتلائم السياق، وذلك بتقديم وصف لهذه الصورة مثل alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth." بعد التأكد من عدم تكرار نفس الوصف في المحتوى النصي الذي يحيط بالصورة.

وطالما أن المحتوى النصي الذي يحيط بالصورة قد يعرض فصيلة الكلب وحجمه، فلا حاجة لوضعها ضمن محتوى alt، لكن قد لا يعرض المحتوى النصي معلومات عن طول شعر الكلب ولونه وألعابه المفضلة مثلًا، فقد وضعت ضمن محتوى alt.

لا بد من نقل المعلومات التي توصلها الصورة إلى المستخدم المبصر وتتعلق بسياق الموضوع المطروح في الصفحة، وذلك عبر محتوى alt فقط. لذا من المهم إبقاؤه قصيرًا ودقيقًا ومفيدًا.

لا ينبغي إضافة أية معلومات شخصية أو توصيفات زائدة، لأنها لن تفيد أشخاصًا لم يروها أو يختبروها مسبقًا؛ فإن كانت الكرة هي لعبة الجرو المفضلة مثلًا أو لم يتمكن صحيحو البصر من تمييز ذلك من الصورة، فلا حاجة لذكر ذلك.

ومن الأشياء التي يجب أخذها بالحسبان هو أن يكون للصور معنى محدد في السياق الذي نورده أو أنها فقط للزينة؛ فإن كانت لمجرد الزينة، فمن الأفضل عندها وضع نص فارغ، كقيمة للخاصية alt أو أن نضع هذه الصور في الصفحة على شكل خلفية باستخدام CSS.

ملاحظة: يمكن الاطلاع على المقالين: "الصور المتجاوبة" و "الصور في HTML" لمزيد من المعلومات عن إدراج الصور في صفحات الويب وأفضل الممارسات المتبعة في تنفيذ الأمر.

وإن لم نشأ إضافة معلومات نصية كثيرة عن الصورة، فيمكن وضع هذه المعلومات في المحتوى النصي الذي يحيط بها أو ضمن الخاصية title كما في الشيفرة السابقة؛ إذ ستقرأ معظم قارئات الشاشة محتوى الخاصية alt ومحتوى الخاصية title واسم ملف الصورة، كما ستعرض المتصفحات محتوى title عندما تمرر مؤشر الفأرة فوق الصورة.

لنلق نظرةً سريعةً على الطريقة الرابعة:

<img src="dinosaur.png" aria-labelledby="dino-label" />

<p id="dino-label">The Mozilla red Tyrannosaurus…</p>

لم نستخدم في هذه الحالة الخاصية alt بل قدمنا وصفًا للصورة ضمن فقرة نصية نمطية وأعطيناها معرفًا فريدًا id واستخدمنا بعدها الخاصية aria-labelledby للإشارة إلى المعرّف السابق، مما سيدفع قارئ الشاشة لاستخدام محتوى الفقرة النصية على أنه محتوى alt الخاص بالصورة. ولهذه الطريقة فائدتها إن أردت استخدام النص نفسه كعنوان لعدة صور وهذا غير ممكن أحيانًا باستخدام alt.

ملاحظة: الخاصية aria-labelledby هي جزء من مواصفة WAI-ARIA التي تتيح للمطورين إضافة دلالات لعناصر صفحة الويب لتحسين سهولة الوصول عندما يتطلب الأمر ذلك.

الأشكال وعناوين الأشكال

تتضمن لغة HTML عنصرين لربط شكل من أي نوع، وهما <figure> و <figcaption>:

<figure>
 <img
  src="dinosaur.png"
  alt="The Mozilla Tyrannosaurus"
  aria-describedby="dinodescr" />
 <figcaption id="dinodescr">
  A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a
  human, with small arms, and a large head with lots of sharp teeth.
 </figcaption>
</figure>

على الرغم من وجود عدة طرق لدعم قارئات الشاشة في ربط الأشكال بعناوينها، إلا أن تضمين الخاصيتين aria-labelledby أو aria-describedby سينشئ هذا الرابط إن لم يكن موجودًا. ولهذا الأسلوب فائدته في تطبيق تنسيق CSS، كما يقدم طريقةً نضع فيها وصف الصورة إلى جوارها في الشيفرة المصدرية.

الخاصية alt الفارغة

نكتب الكود الآتي:

<h3>
 <img src="article-icon.png" alt="" />
 Tyrannosaurus Rex: the king of the dinosaurs
</h3>

يتضمن تصميم الصفحات أحيانًا صورًا غرضها التزيين أو الديكور فقط. وسنلاحظ في الشيفرة السابقة أن الخاصية alt للصورة فارغة، وهذا ما يتيح لقارئ الشاشة تمييز الصورة دون محاولة وصفها، إذ ينطق فقط كلمة "صورة image" أو كلمةً مشابهة.

يعود سبب استخدام الخاصية الفارغة بدلًا من تجاهلها إلى حقيقة أن قارئ الشاشة يذيع عنوان URL لملف الصورة بأكمله إن لم نضع الخاصية alt؛ فلو عدنا إلى المثال السابق التي نستخدم فيه الصورة لمجرد التزيين للعنوان الرئيسي المتعلقة به، وليس لها أي غرض آخر، فلا بد من استخدام الخاصية ""=alt ضمن العنصر <img>. ومن البدائل المستخدمة الخاصية "role="presentation وفق مواصفة ARIA، فهي توقف أيضًا من قراءة النص البديل.

ملاحظة: يمكن استخدام CSS إن أمكن لعرض الصور التزيينية.

معلومات أكثر عن الروابط التشعبية

يمكن للروابط التشعبية مثل عناصر <a> وخاصيتها href، أن تحسّن أو تسيء إلى سهولة الوصول وفقًا لطريقة استخدامها. وللروابط مظهر يوحي بسهولة الوصول، ويمكنها تعزيزه لمساعدة المستخدم في التنقل بسرعة بين أقسام المستند المختلفة. كما قد تكون مسيئةً إلى سهولة الوصول إن أزيل التنسيق الخاص بسهولة الوصول أو سببت لها جافاسكريبت سلوكًا غير متوقع.

تنسيق الروابط التشعبية

تختلف الروابط التشعبية من حيث مظهرها عن المحتوى النصي المحيط من ناحيتي ديكور الخط واللون، فهي زرقاء وتحتها خط افتراضيًا، وبنفسجية وتحتها خط عندما يكون المستخدم قد زارها سابقًا، ولها إطار عندما تتلقى تركيز الدخل.

لا ينبغي استخدام اللون بمفرده لتمييز الرابط التشعبي عن المحتوى النصي، بل يجب أن يختلف كليًا عن لون الخلفية. إضافةً إلى ذلك، ينبغي أن يختلف الرابط بصريًا عن محيطه وفق تباين مقداره 3:1 كحد أدنى بين نص الرابط والنص المحيط، وبين حالات الرابط المختلفة سواءًا كانت من نوع افتراضي، أو مُزار سابقًا، أو تلقى تركيز الدخل، وذلك بنسبة 4.5:1 بين نص الرابط في جميع الحالات السابقة وخلفية الرابط.

الحدث onclick

عادةً ما يُساء استخدام وسم المربط anchor tag مع الحدث onclick لإنشاء زر ائف بضبط قيمة الخاصية href على # أو باستخدام الأمر "(javascript:void(0" لمنع الصفحة من إعادة تحديث نفسها.

تسبب هذه القيم سلوكًا غير متوقع عند نسخ أو جر الروابط أو فتحها في نافذة جديدة أو تخزينها كعلامة Bookmark أو أثناء تحميل جافاسكريبت أو وقوع خطأ أو عند تعطيل الرابط. ينقل هذا الأمر دلالةً غير صحيحة للتكنولوجيا المساعدة مثل قارئ الشاشة، وفي هذه الحالة يُفضّل استخدام العنصر <button>؛ إذ علينا استخدام الروابط التشعبية للتنقل فقط مستخدمين عناوين URL.

الروابط الخارجية والروابط إلى موارد غير HTML

لا بد من تضمين مؤشر يصف سلوك الرابط عندما ينقر عليه المستخدم في الحالة التي سيُفتح فيها ضمن صفحة جديدة، مثل التصريح "target="_blank، أو كانت قيمة href تشير إلى ملف.

قد يرتبك ضعيفو الرؤية الذي يستخدمون قارئات الشاشة أو من لديهم صعوبات فكرية عندما تظهر نافذة جديدة فجأةً، ودون متوقع، وقد لا تشير النسخ الأقدم من قارئات الشاشة إلى هذا الأمر أصلًا.

فيما يلي شيفرة توضح كيفية كتابة كود الروابط التي تفتح نافذة جديدة:

<a target="_blank" href="https://www.wikipedia.org/"
 >Wikipedia (opens in a new window)</a
>

أما هنا فشيفرة كتابة كود رابط إلى ملف ليس HTML:

<a target="_blank" href="2017-annual-report.ppt"
 >2017 Annual Report (PowerPoint)</a
>

من المهم عند استخدام أيقونة بدلًا من نص الرابط أن نتأكد من توضيح هذا السلوك للروابط بتضمين وصف بديل مناسب.

روابط التجاوز

رابط التجاوز Skip Link أو skipnav هو عنصر <a> يُوضع -قدر الإمكان- بالقرب من بداية العنصر <body> الذي يشير إلى بداية المحتوى الرئيسي للصفحة. يسمح رابط التجاوز للمستخدمين بتجاوز المحتوى المكرر عبر الصفحات المتعددة لموقع الويب مثل ترويسة مواقع الويب وشريط التنقل الرئيسي.

لروابط التجاوز فائدتها الخاصة لمستخدمي التكنولوجيا المساعدة، مثل مفتاح التحكم، أو الأوامر الصوتية، أو جهاز الفم Mouth Stick، أو عصبة الرأس Head Wands، فقد يكون التنقل عبر الروابط المكررة لهؤلاء أمرًا مضنيًا.

التقريب

يوضع كم كبير من المحتوى التفاعلي قريبًا من بعضه, بما فيه الروابط، ولا بد من توفير مساحة كافية للفصل بينها. ولهذه المساحة الفارغة أهميتها لمن يعاني من مشاكل في التحكم الدقيق, فقد يفعّل المحتوى التفاعلي الخاطئ أثناء التنقل. يمكن خلق هذه الفراغات باستخدام خاصيات CSS مثل margin.

خاتمة

بهذا نكون قد وضحنا كيفية كتابة شيفرة HTML سهلة الوصول في مختلف المناسبات، وحددنا لأساسيات التي تهم أي مطور يتعامل مع HTML. جرب تطبيق النصائح المذكورة بالمقال واحظى باحترافية أعلى في تطوير المواقع.

ترجمة -وبتصرف- لمقال HTML: A good basis for accessibility

اقرأ أيضًا

• سهولة وصول جميع الزوار لمواقع وتطبيقات الويب
• معالجة مشاكل سهولة الوصول Accessibility الشائعة للتوافق مع المتصفحات
• أفضل 15 ممارسة لسهولة الوصول إلى موقع الويب
• معالجة المشاكل الشائعة للتوافق مع المتصفحات في HTML و CSS

سنشرح في هذا المقال كيفية توظيف معلوماتك عن تقنيات الويب الأساسية وهي HTML وCSS و JavaScript لإنشاء موقع ويب يكون معرضًا لأعمالك تستخدمه للتعريف بك وبمشاريعك، وسنعمل في مقال لاحق على تحسين هذا الموقع من خلال إطار عمل Vue.js.

إنشاء ملف HTML

أولاً، ننشئ مجلدًا ونسميه portfolio، حيث سنخزن فيه كل ما يتعلق بمشروع معرض الأعمال. ثم ننشئ داخله ملف HTML، ونطلق عليه اسم Portfolio.html ونفتحه باستخدام أي محرر نصي نفضله، يمكن استخدام أي محرر كالمفكرة، لكن ننصح باستخدام محرر أكواد برمجية مناسب مثل Visual Studio Code.

إذا فتحنا الملف في المتصفح واستكشفناه في أدوات المطور سنلاحظ أن له البنية التالية:

<!doctype html>
<html>
  <head>
    . . .
  </head>

  <body>
    . . .
  </body>
</html>

لنبدأ بالحديث عن قسم الترويسة <head> والذي يتضمن التالي:

<head>
  <meta charset="utf-8" />
  <meta name="description" content="My Portfolio" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="Hsoub Academy" />
  <title>My Portfolio</title>
</head>

الجزء السابق بسيط وواضح، فقد حددنا أولاً مجموعة المحارف التي سيستخدمها الملف، إذ يستخدم المتصفح هذه المعلومات للتأكد من عرض الأحرف والرموز بصورة صحيحة. وبعدها حددنا الوصف والكلمات الرئيسية ومنشئ صفحة الويب، وأخيرًا، صرّحنا عن عنوان صفحة الويب وهو في حالتنا My Portfolio.

ملاحظة: لا تُعرض معلومات <head> في موقع الويب، لكنها مهمة لتحسين محركات البحث SEO. .

الترويسة Header وشريط التنقل Navigation bar

بعدها سنبدأ بإنشاء ترويسة موقعنا، وننشئ شريط التنقل الأساسي من خلال كتابة الكود التالي:

<!--Header and Navigation Bar-->
<header>
  <h1>Simple Portfolio</h1>
</header>
<nav class="col-8 col-s-8">
  <ul class="nav-list">
    <li class="nav-item"><a href="./portfolio.html">Home</a></li>
    <li class="nav-item"><a href="https://academy.hsoub.com/programming">Lessons</a></li>
    <li class="nav-item"><a href="#project">Projects</a></li>
  </ul>
</nav>

نلاحظ أننا استخدمنا أنواع روابط مختلفة، فالرابط الأول في قسم التنقل هو عنوان نسبي relative URL سينقلنا إلى جذر الخادم root directory ثم سيبحث عن ملف portfolio.html، والرابط الثاني هو عنوان مطلق absolute URL، أما الرابط الأخير فهو رابط مرساة anchor link وسنتحدث عنه لاحقًا.

إضافة القسم التعريفي لمعرض الأعمال

نحتاج في معرض الأعمال الاحترافي للتعريف عن نفسنا ونسرد خبراتنا بإيجاز، ولتحقيق ذلك سنضيف الشيفرة التالية، مع تعديل النص الموجود ضمن وسم الفقرة <p>. . .</p> لعرض رسالة قصيرة نعرّف فيها زوار معرض الأعمال عنا:

<!--Self Introduction Section-->
<section>
 <h2>Welcome to My Portfolio</h2>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book
  </p>
</section>

قسم الرسائل الإخبارية Newsletter

سنضيف بعدها الشيفرة التالية لإتاحة خيار الاشتراك في الرسائل الإخبارية لمتابعي الموقع:

<!--Newsletter Sign Up Section-->
<section>
  <h2>Would you like to see more tips and tutorials on web development?</h2>
  <form>
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" />
    <br /><br />
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" />
    <br /><br />
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" />
  </form>
</section>

قسم الخبرات Skills

ثم نضيف الشيفرة التالية لعرض المهارات والخبرات المختلفة:

<!--Skills Section-->
<section>
  <h2>My Skills</h2>
  <ul>
    <li>HTML (100%)</li>
    <li>CSS (90%)</li>
    <li>JavaScript (90%)</li>
    <li>Python (90%)</li>
    <li>PHP (100&#37;)</li>
    <li>Java (90&#37;)</li>
    <li>Vue.js (80&percnt;)</li>
    <li>Django (90&percnt;)</li>
    <li>Laravel (90&percnt;)</li>
  </ul>
</section>

نلاحظ استخدام ثلاث طرق لتمثيل إشارة النسبة المئوية % في الكود أعلاه وجميعها تعطي النتيجة نفسها.

قسم المشاريع Projects

نضيف الشيفرة التالية لعرض المشاريع البرمجية المنجزة:

<!--Projects Section-->
<section id="project">
  <h2>My Projects</h2>
  <div>
    <h3>First Project</h3>
    <img src="./images/first project.jpg" width="500" height="300" />
    <p>. . .</p>
  </div>

  <div>
    <h3>Second Project</h3>
    <img src="./images/second project.jpg" width="500" height="300" />
    <p>. . .</p>
  </div>

  <div>
    <h3>Third Project</h3>
    <img src="./images/third project.jpg" width="500" height="300" />
    <p>. . .</p>
  </div>
</section>

أضفنا في السطر الثاني معرّفًا id للوسم <section> باسم projects، كي يعمل مع رابط المرساة anchor link الذي ذكرناه سابقًا.

<a href="#project">Projects</a>

<!--Footer-->
<footer>
  <p>Created by Hsoub  Academy</p>
  <p><a href="mailto:example@email.com">example@email.com</a></p>
</footer>

<head>
  <meta charset="utf-8" />
  <meta name="description" content="My Portfolio" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="Hsoub Academy" />
  <title>My Portfolio</title>

  <!-- ربط ملف CSS -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">. . .</div>
</body>

/* الشاشات صغيرة الحجم */
.container {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
}

/* الشاشات كبيرة الحجم */
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1140px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
  }
}

<body>
  <div class="container">
    <div class="col-6 col-s-8">Div1</div>
    <div class="col-6 col-s-4">Div2</div>

    <div class="col-2 col-s-10">Div3</div>
    <div class="col-4 col-s-2">Div4</div>
  </div>
</body>

/* للهواتف المحمولة */
[class*="col-"] {
  width: 100%;
}

/* للأجهزة اللوحية */
@media only screen and (min-width: 600px) {
  .col-s-1 {
    width: 8.33%;
  }
  .col-s-2 {
    width: 16.66%;
  }
  .col-s-3 {
    width: 25%;
  }
  .col-s-4 {
    width: 33.33%;
  }
  .col-s-5 {
    width: 41.66%;
  }
  .col-s-6 {
    width: 50%;
  }
  .col-s-7 {
    width: 58.33%;
  }
  .col-s-8 {
    width: 66.66%;
  }
  .col-s-9 {
    width: 75%;
  }
  .col-s-10 {
    width: 83.33%;
  }
  .col-s-11 {
    width: 91.66%;
  }
  .col-s-12 {
    width: 100%;
  }
}

/* للحواسيب المكتبية */
@media only screen and (min-width: 768px) {
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

h1 {
  font-family: "Comfortaa", cursive;
}

h2,
h3,
h4 {
  font-family: "Crimson Text", serif;
}

p,
a {
  font-family: "Poppins", sans-serif;
}

<div class="col-12 col-s-12 header-and-nav">
  <header>. . .</header>
  <nav>. . .</nav>
</div>

.header-and-nav {
  display: flex;
  flex-wrap: wrap;
}

<div class="col-12 col-s-12 header-and-nav">
  <header class="col-4 col-s-4">. . .</header>

  <nav class="col-8 col-s-8">. . .</nav>
</div>

<!--Header and Navigation Bar-->
<div class="col-12 col-s-12 header-and-nav">
  <header class="col-4 col-s-4 header">
    <h1>Simple Portfolio</h1>
  </header>
  <nav class="col-8 col-s-8">
    <ul class="nav-list">
      <li class="nav-item">
        <a href="./portfolio.html">Home</a>
      </li>
      . . .
    </ul>
  </nav>
</div>

.header {
  text-align: center;
}

.nav-list {
  text-align: center;
}

.nav-item {
  display: inline-block;
}

.nav-item a {
  display: inline-block;
}

.header {
  color: white;
  text-align: center;
}

.nav-list {
  list-style-type: none;
  margin: 0px;
  padding: 0px;

  text-align: center;
}

.nav-item {
  display: inline-block;
}

.nav-item a {
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: 27px 20px;
}

.nav-item a:hover {
  background-color: #457b9d;
  text-decoration: underline;
}

@media only screen and (min-width: 768px) {
  .nav-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;

    text-align: right;
  }
}

<!--Self Introduction Section-->
<section class="col-12 col-s-12 self-intro">
  <img src="./images/profile-image.jpg" class="col-4 col-s-4 profile-image" />
  <div class="col-8 col-s-8 self-intro-text">
    <h2>Welcome to My Portfolio</h2>
    <p>. . .</p>
  </div>
</section>

/* Self Introduction Section */
.self-intro {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background-color: #f8f8f2;
}

.profile-image {
  flex: 0 0 40%;
  height: auto;
  object-fit: cover;
}

.self-intro-text {
  flex: 1;
  text-align: left;
}

.self-intro-text h2 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
  text-decoration: underline;
}

<!--Newsletter Sign Up Section-->
      <section class="col-12 col-s-12 newsletter-signup">
        <h2 class="col-6 col-s-6">Would you like to see more tips and tutorials on web development?</h2>
        <form class="col-6 col-s-6 newsletter-signup-form">
          <label for="firstname">First Name:</label><br />
          <input type="text" id="firstname" />
          <br />
          <label for="lastname">Last Name:</label><br />
          <input type="text" id="lastname" />
          <br />
          <label for="email">Enter your email:</label><br />
          <input type="email" id="email" name="email" />
          <button type="submit">Submit</button>
        </form>
      </section>

/*  قسم التسجيل في الرسائل الإخبارية */
.newsletter-signup {
  background-color: #a8dadc;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.newsletter-signup h2 {
  text-align: center;
}

.newsletter-signup-form {
  margin: 0 auto;
}

.newsletter-signup-form label {
  font-family: "Poppins", sans-serif;
}

.newsletter-signup-form input {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

.newsletter-signup-form button {
  background-color: #a8dadc;
  border: solid 3px #e63946;
  color: #e63946;
  width: 100%;
  padding: 10px 0;
  margin: 10px 0;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 1em;
  font-weight: 600;
}

.newsletter-signup-form button:hover {
  background-color: #e63946;
  border: solid 3px #e63946;
  color: white;
}

@media only screen and (min-width: 768px) {
  .newsletter-signup {
    background-color: #a8dadc;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .newsletter-signup h2 {
    text-align: center;
    padding: 10px;
  }
}

<!--Skills Section-->
<section class="col-12 col-s-12 skills-section">
  <h2 class="col-12 col-s-12">My Skills</h2>
  <ul class="col-8 col-s-8 skills-list">
    <li>HTML (100%)</li>
    . . .
  </ul>
</section>

/* قسم المهارات */
.skills-section {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.skills-section h2 {
  text-decoration: underline;
}

.skills-list {
  column-count: 2;
}

@media only screen and (min-width: 768px) {
  .skills-list {
    column-count: 2;
    margin: 0 auto;
  }
}

<!--Projects Section-->

<section class="col-12 col-s-12 porject-section" id="project">
  <h2 class="col-12 col-s-12">My Projects</h2>
  <div class="col-4 col-s-4">
    <div class="project-card">
      <h3>First Project</h3>
      <img src="/frontend/images/p1.jpg" />
      <p>. . .</p>
    </div>
  </div>
  . . .
</section>

/* قسم المشاريع */
.porject-section {
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  background-color: #a8dadc;
}

.porject-section h2 {
  text-decoration: underline;
}

.project-card {
  border: solid 2px gray;
  border-radius: 5px;
  padding: 5px;
  margin: 5px;
}

.project-card img {
  max-width: 100%;
  object-fit: cover;
}

<!--Footer-->

<footer class="col-12 col-s-12 footer">
  <p>Created by Hsoub Academy</p>
  <p><a href="mailto:example@email.com">example@email.com</a></p>
</footer>

/*تذييل الصفحة */
.footer {
  background-color: #1d3557;
  color: white;
  text-align: center;
}

.footer a {
  color: white;
}

نلقي نظرة في هذا المقال وبشيء من التفصيل على عناصر استمارات ويب web forms متنوعة ليست عناصر <input>، إذ يمكنك أن تضيف للاستمارات عناصر أخرى مثل القوائم المنسدلة drop-down menus، وحقول نصية متعددة اﻷسطر، وعناصر خرج <output> (كالتي شرحناها في المقال السابق)، وأشرطة التقدم progress bars.

ننصحك قبل المتابعة في قراءة هذا المقال أن تطلع على سلسلة المقالات "مدخل إلى HTML" للتعرف على هيكلية صفحات ويب باستخدام لغة HTML وتتعرف على عناصرها.

الحقول النصية متعددة الأسطر

نستخدم في هذه الحالة العنصر <textarea> بدلًا من عنصر اﻹدخال <input>

<textarea cols="30" rows="8"></textarea>

ويصيّر العنصر كالتالي:

وللعنصر <textarea> وسم إغلاق أيضًا تضع قبله النص الذي تريده أن يظهر ضمن العنصر، بينما يُعد العنصر <input> فارغًا ليس له وسم إغلاق، وتوضع أية قيمة افتراضية لهذا العنصر ضمن الخاصية value.

وعلى الرغم من إمكانية وضع أية محتوى ضمن العنصر <textarea> سواء عناصر HTML اخرى أو تنسيقات CSS أو جافا سكريبت نظرًا لطبيعة هذا العنصر إلا أنها تُصيَّر renders جميعها في النهاية على شكل نص. وتزودنا الخاصية contenteditable عند استخدامها مع العناصر التي لا تنتمي إلى استمارة بواجهة برمجية لتمييز شيفرة HTML أو المحتوى النصي المنسّق rich text الموجود ضمن نص صرف.

يلتف النص المدخل ضمن هذا العنصر افتراضيًا (أي ينتقل من سطر إلى آخر تلقائيًا)، وباﻹمكان أيضًا تغيير حجم العنصر. إذ توفر المتصفحات الحديثة مقبضًا يُستخدم لتغيير حجم الصندوق <textarea> تكبيرًا أو تصغيرًا.

تعرض لقطة الشاشة التالية العنصر <textarea> في الحالة الافتراضية وحالتي اكتساب تركيز الدخل والتعطيل في المتصفحين فايرفوكس 71 و سفاري 13 على ماك أو إس وكذلك إيدج 17 وياندكس 14 وفايرفوكس 71 و كروم 79 على ويندوز 10:

ملاحظة: بإمكانك إلقاء نظرة على مثال أكثر أهمية يتعلق باستخدام <textarea> على جت-هاب والاطلاع على شيفرته المصدرية أيضًا.

التحكم بتصيير النص في حالة اﻷسطر المتعددة

يمكنك استخدام ثلاث خاصيات للتحكم بتصيير النص في العنصر <textarea> وهي:

• cols: وتحدد الاتساع المرئي للعنصر (عدد أعمدته) مقاسًا بالاتساع الوسطي للمحرف الواحد. وتمثل هذه القيمة عمليًا الاتساع الابتدائي، لأن العنصر قابل لزيادة الحجم أو تغيير تلك القيمة باستخدام CSS. القيمة الافتراضية لاتساع العنصر في حال لم تحدد يدويًا هي 20.
• rows: وتحدد عدد أسطر النص وكذلك الارتفاع الإبتدائي للعنصر، لأنه قابل لزيادة الحجم أو تغيير تلك القيمة باستخدام CSS. القيمة الافتراضية لهذه الخاصية هي 20.
• wrap: تحدد طريقة التفاف النص ضمن العنصر. القيمة الافتراضية لهذه الخاصية هي soft وفيها لا يُرسل محرف الانتقال إلى سطر جديد إلى الخادم لكنه يستخدم في عرض النص في المتصفح، كما يمكن أن تأخذ الخاصية القيمة hard، وفيها يرسل محرف الانتقال إلى سطر جديد إلى الخادم مع النص المُرسل (لا بد حينها من ضبط قيمة الخاصية cols)، وأخيرًا القيمة off وفيها لا يلتف النص أبدًا (لا ينتقل إلى سطر جديد عند بلوغ نهاية السطر).

التحكم بطريقة تغيير أبعاد العنصر <textarea>

تتحكم الخاصية resize في لغة CSS بإمكانية تغيير أبعاد العنصر، وتأخذ إحدى القيم التالية:

• both: تسمح بتغييرات أبعاد العنصر أفقيًا وشاقوليًا، وهي القيمة الافتراضية.
• horizontal: تسمح فقط بتغيير البعد اﻷفقي.
• vertical: تسمح فقط بتغيير البعد الشاقولي.
• none: تمنع تغيير أبعاد العنصر.
• block و inline: قيم تجريبية تسمح بتغيير اﻷبعاد وفق أحد اتجاهي الانسياب: الكتلي block أو السطري inline. راجع مقال "التحكم باتجاه انسياب النصوص باستخدام CSS" لمعلومات أكثر عن اتجاه انسياب العناصر في صفحة HTML.

عنصر القائمة المنسدلة Dropdown List

توفر القائمة المنسدلة طريقة بسيطة تتيح للمستخدم اختيار عنصر من بين عدة عناصر دون أن تشغل حيزًا كبيرًا من واجهة المستخدم. وتقدم لغة HTML طريقتين ﻹنشاء القوائم المنسدلة الاولى صندوق اختيار select box والثانية صندوق اﻹكمال التلقائي autocomplete box.

ملاحظة: يمكنك إيجاد بعض اﻷمثلة التي تخص القوائم المنسدلة على جيت-هب وكذلك الاطلاع على شيفرتها المصدرية.

صندوق الاختيار

ننشئ صندوق الاختيار باستخدام العنصر <select>، ونضع ضمنه عنصر <option> أو أكثر كأبناء له ويمثل كل عنصر منها أحد القيم التي يمكن أن نختارها. إليك مثالًا بسيطًا:

يمكن أن نستخدم الخاصية selected لاختيار عنصر افتراضيًا، وعندها سيُختار هذا العنصر تلقائيًا عند تحميل الصفحة.

استخدام عنصر مجموعة الخيارات <optgroup>

باﻹمكان وضع عناصر <option> داخل عنصر مجموعة الخيارات <optgroup> ﻹنشاء مجموعات مترابطة من القيم:

<select id="groups" name="groups">
 <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
 </optgroup>
 <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
 </optgroup>
</select>

تظهر قيمة الخاصية label لعنصر مجموعة الخيارات <optgroup> قبل قيمة الخيارات الموجودة ضمنها، وعادة ما يفصل المتصفح قيمة تلك الخاصية عن بقية الخيارات (بجعل الخط أسمك ووفق مستوى إزاحة مختلف) وبذلك لن يختلط الأمر بين عنوان المجموعة وعناصرها.

استخدام الخاصية value

إن كان للخاصية value العائدة للعنصر <option> قيمة صريحة، ستُرسل هذه القيمة عند تسليم النموذج مع العنصر الذي اخترته. لكن إن أهملت استخدام هذه الخاصية كما في المثال السابق فإن قيمة هذه الخاصية ستكون محتوى العنصر <option>. وبالتالي لا حاجة لاستخدام الخاصية value ما لم ترد -لسبب وجيه- إرسال قيمة صغيرة لهذه الخاصية إلى الخادم تختلف عن المحتوى الذي يعرضه العنصر <option>:

<select id="simple" name="simple">
 <option value="banana">Big, beautiful yellow banana</option>
 <option value="cherry">Succulent, juicy cherry</option>
 <option value="lemon">Sharp, powerful lemon</option>
</select>

يكفي ارتفاع صندوق الاختيار لعرض قيمة مفردة، لهذا بإمكانك استخدام الخاصية size لتحديد عدد الخيارات التي تريد عرضها ضمن الصندوق في الحالة التي لا يمتلك فيها صندوق الاختيار تركيز الدخل.

صندوق متعدد الخيارات

يسمح صندوق الاختيار للمستخدم اختيار عنصر واحد افتراضيًا، لكن عند استخدام الخاصية multiple مع العنصر <select>، سيتمكن المستخدم من اختيار أكثر من عنصر. يختار المستخدم عدة قيم وفقًا للطريقة الافتراضية التي يتيحها نظام التشغيل، وكمثال على ذلك الضغط المستمر على الزر Cmd/Ctrl ثم النقر على الخيارات التي يريدها في معظم الحواسب المكتبية.

<select id="multi" name="multi" multiple size="2">
 <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
 </optgroup>
 <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
 </optgroup>
</select>

ملاحظة: في الحالة التي يدعم فيها صندوق الاختيار عدة خيارات، لن يُعرض الصندوق على شكل قائمة منسدلة، بل ستعرض جميع الخيارات معًا ضمن قائمة نمطية تحدد ارتفاعها الخاصية size.

ملاحظة: تدعم جميع المتصفحات الخاصية multiple إذا دعمت العنصر <select>.

صندوق اﻹكمال التلقائي

بإمكانك تزويد عنصر التحكم بقائمة من القيم المقترحة والتي تُكمَّل تلقائيًا من خلال العنصر <datalist> الذي يضم عناصر <option> أبناء تحدد القيم التي ستُعرض. ولا بد في هذه الحالة من ضبط قيمة الخاصية id للعنصر <datalist>.

نربط بعدها العنصر <datalist> بعنصر التحكم <input> (من النوع النصي أو البريد اﻹلكتروني وغيره) باستخدام الخاصية list العائدة إلى عنصر التحكم، إذ نضبط قيمتها على قيمة id للعنصر <datalist> المطلوب.

وبمجرد أن ننفذ ذلك، تُستخدم عناصر <datalist> ﻹكمال النص الذي يدخله المستخدم تلقائيًا، وتعرض القيم المقترحة نمطيًا على شكل قائمة منسدلة تضم الخيارات المطابقة للنص الذي يكتبه ضمن عنصر اﻹدخال. إليك مثالًا بسيطًا:

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
 <option>Apple</option>
 <option>Banana</option>
 <option>Blackberry</option>
 <option>Blueberry</option>
 <option>Lemon</option>
 <option>Lychee</option>
 <option>Peach</option>
 <option>Pear</option>
</datalist>

دعم العنصر <datalist> في المتصفحات وأسلوب التراجع

تدعم معظم المتصفحات العنصر <datalist>، لكن إن أردت أن تدعم متصفحات أقدم مثل إنترنت إكسبلورر 10 والنسخ اﻷقدم، إليك هذه الحيلة:

<label for="myFruit">What is your favorite fruit? (With fallback)</label>
<input type="text" id="myFruit" name="fruit" list="fruitList" />

<datalist id="fruitList">
 <label for="suggestion">or pick a fruit</label>
 <select id="suggestion" name="altFruit">
    <option>Apple</option>
    <option>Banana</option>
    <option>Blackberry</option>
    <option>Blueberry</option>
    <option>Lemon</option>
    <option>Lychee</option>
    <option>Peach</option>
    <option>Pear</option>
 </select>
</datalist>

تتجاهل المتصفحات التي تدعم <datalist> جميع العناصر الموجودة ضمن هذا العنصر ما عدا العناصر <option> وبالتالي ستعمل قائمة اﻹكمال التلقائي كما يجب. أما المتصفحات التي لا تدعم اﻹكمال التلقائي، فستعرض العنوان وصندوق الاختيار <select>. توضح لقطة الشاشة التراجع عن استخدام قائمة اﻹكمال التلقائي في المتصفح سفاري 6 الذي لا يدعمها:

وفي حال استخدمت أسلوب التراجع السابق، تأكد أن جمع بيانات العنصرين <input> و <select> ستجري في طرف الخادم.

استخدامات غير شائعة لقائمة اﻹكمال التلقائي

تشير مواصفات HTML إلى إمكانية استخدام الخاصية list والعنصر <datalist>مع أي نوع من عناصر اﻹدخال، وهذا ما يجعل بعض الاستخدامات لقائمة اﻹكمال التلقائي غير شائعة.

إذ يمكنك على سبيل المثال استخدام هذه القائمة مع عنصر اﻹدخال من النوع range لعرض علامة صغيرة فوق المزلاج توافق خيارًا من خيارات قائمة اﻹكمال التلقائي

ومن المفترض أن تعرض المتصفحات التي تدعم العنصرين <datalist> و <input> من النوع color لوحة ألوان مخصصة (تتعلق بعناصر <datalist>) مع إمكانية عرض منتقي الألوان بشكل كامل. وبالتالي سيختلف سلوك المتصفحات في هذه الحالة، لهذا يُعد هذا الاستخدام متقدمًا، وعليك التأكد من إيجاد طريقة تراجع صحيحة.

ميزات أخرى لاستمارات الويب

ستجد ميزات أخرى للاستمارات ليست واضحة كتلك التي ناقشناها حتى اﻵن، ولها بالطبع فوائدها في بعض الحالات، لهذا سنذكرها في هذا القسم بإيجاز.

ملاحظة: بإمكانك إيجاد أمثلة هذا القسم على جت-هاب وتجربتها مباشرة.

العدّادات وأشرطة التقدم

وهي أدوات تقدّم تمثيلًا بصريًا لقيم عددية، تدعمها معظم المتصفحات الحديثة. ننشئ العدّاد باستخدام العنصر <meter> وشريط التقدم باستخدام العنصر <progress>.

العداد Meter

يمثل العداد  قيمة ثابتة ضمن مجال محدد بين قيمتي الخاصيتين min و max، وتُصيَّر هذه القيمة بصريًا على شكل شريط. ولكي تعرف كيف سيبدو هذا الشريط، عليك أن تقارن هذه القيمة مع مجموعة أخرى من القيم وهي:

• القيمتان الدنيا low والعليا high: وهما قيمتان تقسمان المجال إلى ثلاثة أقسام:

  • القسم الأول بين القيمتين min و low ضمنًا.

  • القسم الثاني بين القيمتين low و high دون هاتين القيمتين.

  • القسم الثالث بين القيمتين high و max ضمنًا.

• القيمة optimum: تحدد القيمة المثلى للعداد وتحدد مع إلى القيمتين low و high القسم المفضل من المجال:

  • إن كانت القيمة optimum في القسم السفلي من المجال، يُعد حينها الجزء السفلي هو القسم المفضل، ويعد القسم اﻷوسط هو القسم الوسطي، والقسم اﻷعلى هو القسم اﻷسوأ.

  • إن كانت القيمة optimum في القسم الوسط من المجال، يُعد حينها الجزء السفلي هو القسم الوسطي، ويعد القسم اﻷوسط هو المفضل، والقسم اﻷعلى وسطي أيضًا.

  • إن كانت القيمة optimum في القسم الأعلى من المجال، يُعد حينها الجزء السفلي هو القسم الأسوأ، ويعد القسم اﻷوسط هو القسم الوسطي، والقسم اﻷعلى هو القسم المفضل.

• تستخدم معظم المتصفحات التي تدعم العنصر <meter> تلك القيم لتغيير لون شريط العداد:
  • إن كانت القيم الحالية ضمن القسم المفضل من المجال سيكون الشريط أخضر اللون.
  • إن كانت القيم الحالية ضمن القسم الوسطي من المجال سيكون الشرط أصفر اللون.
  • إن كانت القيمة ضمن القسم اﻷسوأ من المجال سيكون الشريط أحمر اللون.

يمكنك الاستفادة من الشيفرة التالية ﻹنجاز أي نوع من العدادات مثل الشريط الذي يعرض المساحة المتبقية أو المستخدمة من قرص تخزين:

<meter min="0" max="100" value="75" low="33" high="66" optimum="0">75</meter>

أما إذا رأيت عناصر داخل العنصر <meter> فهي للتراجع في حال لم يدعم المتصفح هذا العنصر، أو لدعم التقنيات المساعدة مثل قارئات الشاشة.

شريط التقدم Progress bar

يمثل شريط التقدم قيمة تتغير مع الوقت حتى تبلغ قيمة عظمى تحددها الخاصية max. ننشئ شريط التقدم باستخدام العنصر <progress>:

<progress max="100" value="75">75/100</progress>

يستخدم هذا العنصر لتنفيذ أي حالة تتطلب تقريرًا بتقدم العملية مثل النسبة المئوية المنزلة من ملف أو عدد اﻷسئلة التي جاوبت عليها في استبيان وهكذا.

أما إذا رأيت عناصر داخل العنصر <progress> فهي للتراجع في حال لم يدعم المتصفح هذا العنصر، أو لدعم التقنيات المساعدة مثل قارئات الشاشة.

الخلاصة

درسنا في سلسلة المقالات اﻷخيرة الكثير من أنواع عناصر التحكم التي يُمكن استخدامها عند بناء الاستمارات. ولا حاجة بالطبع لتذكر كل التفاصيل التي شرحناها، بل يمكنك العودة إلى هذه المقالات عند الحاجة للتحقق مما نسيته.

ترجمة -وبتصرف- للمقال Other form controls.

اقرأ أيضًا

• المقال السابق: أنواع عناصر اﻹدخال في HTML5

• الأزرار، النماذج والدعوات إلى الإجراء في مجال تجربة المستخدم

• النماذج (Forms) في HTML5

• HTTP والاستمارات في جافاسكربت

تعرفنا في مقال سابق على عنصر اﻹدخال <input>، وغطينا الأنواع اﻷصلية لهذا العنصر والتي تتغير بتغير قيمة الخاصية type. لقد ظهرت الأنواع اﻷصلية مع بداية ظهور HTML، وأضيف إليها لاحقًا -في اﻹصدار HTML5- عناصر تحكم متعددة لها وظائف جديدة كي تسمح بجمع أنواع مخصصة من البيانات، وهذا ما نفصّله في مقالنا.

ملاحظة1: تدعم معظم المتصفحات أغلب الميزات التي نناقشها في هذا المقال، وسنذكر أية استثناءات في حال وجودها.

ملاحظة2: يلجأ المطورون إلى بناء استمارات ويب مخصصة، نظرًا لاختلاف طريقة عرض عناصر التحكم عن رؤية المصمم، وسنغطي هذا اﻷمر في مقال لاحق.

ننصحك قبل المتابعة في قراءة هذا المقال أن تطلع على مقال مدخل إلى HTML للتعرف على هيكيلية صفحات ويب باستخدام لغة HTML وتتعرف على عناصرها الأساسية.

حقل إدخال البريد اﻹلكتروني

يمكن إنشاء حقل مخصص لإدخال البريد اﻹلكتروني باستخدام العنصر <input> وضبط الخاصية type على القيمة email كما يلي:

<input type="email" id="email" name="email" />

عند استخدام هذا النوع من عناصر اﻹدخال، سيُطلب من المستخدم إدخال عنوان بريد إلكتروني صحيح، ويعرض المتصفح رسالة خطأ عند تسليم الاستمارة في حال إدخال أي محتوى مخالف. لاحظ كيف يعمل هذا الحقل في لقطة الشاشة التالية:

ومن الممكن استخدام الخاصية multiple مع عنصر إدخال البريد اﻹلكتروني ﻹدخال أكثر من بريد إلكتروني في نفس الحقل (تفصل بينها فاصلة ,).

<input type="email" id="email" name="email" multiple />

عندما يكتسب حقل البريد اﻹلكتروني تركيز الدخل في بعض الأجهزة وخاصة في أجهزة اللمس التي تعرض لوحات مفاتيح ديناميكية، تظهر لوحات مفاتيح مخصصة أكثر ملائمة ﻹدخال عناوين بريد إلكتروني، كأن تعرض الرمز @. لاحظ لقطة الشاشة التالية لنظام أندرويد:

وهذا سبب آخر لاستخدام اﻷنواع الجديدة من عناصر اﻹدخال فهو يساهم في تحسين تجربة المستخدم على تلك اﻷجهزة.

ملاحظة: بإمكانك إيجاد أمثلة عن استخدام أنواع عناصر اﻹدخال النصية البسيطة على جت-هاب وبإمكانك أيضًا الاطلاع على شيفرتها المصدرية.

التحقق من صحة المدخلات في طرف العميل

رأينا في الفقرة السابقة أن حقل البريد اﻹلكتروني (إضافة لأنواع أخرى) يزودنا بطريقة للتحقق من صحة مدخلات المستخدم قبل إرسالها إلى الخادم. هذا يساعد المستخدم على ملء الاستمارة بالقيم الصحيحة وتوفر وقته، حيث سيعرف مباشرة أن مدخلاته غير صحيحة ولن يكون عليه الانتظار حتى تأتيه رسالة خطأ من الخادم.

ومن اﻷفضل طبعًا ألا نعد هذه الطريقة آمنة، بل ينبغي أن يتحقق التطبيق من صحة وسلامة البيانات في طرف الخادم أيضًا لحمايته من الهجمات الأمنية، لأنه من السهل جدًا إلغاء التحقق في طرف العميل، وسيتمكن المستخدمون المشبوهون من إرسال بيانات غير آمنة إلى الخادم. لن نتحدث عن مفاهيم التحقق من صحة وسلامة البيانات في طرف الخادم في سلسلة مقالاتنا الحالية وسنركز على شرح استمارات الويب، لكن عليك تذكر ذلك دائمًا.

لاحظ أن البريد اﻹلكتروني من الشكل a@b هو عنوان صالح من وجهة نظر آلية التحقق الافتراضية، لأن عنصر إدخال البريد اﻹلكتروني يسمح بعناوين البريد اﻹلكتروني على الشبكات المحلية إنترانيت intranet افتراضيًا. وﻹنجاز آلية تحقق مخصصة، يمكنك استخدام الخاصية pattern وتخصيص رسالة الخطأ وسنشرح ذلك لاحقًا.

ملاحظة: عندما تدخل نصًا خاطئًا في حقل البريد اﻹلكتروني، سيُفعّل صنف التنسيق الزائف invalid: وتعيد الخاصية validityState.typeMismatch القيمة true.

حقل البحث

خُصصت حقول البحث search ﻹنشاء صناديق البحث عن البيانات ضمن صفحة الويب أو التطبيق، ونستخدم ﻹنشاء هذا الحقل العنصر <input> ونضبط قيمة الخاصية type على search.

<input type="search" id="search" name="search" />

إن الفرق الرئيسي بين الحقل textوالحقل search هو طريقة تنسيق المتصفح لكل منهما. تُصيّر (render) صناديق البحث غالبًا بزوايا دائرية مع أيقونة "Ⓧ" في طرف الصندوق أحيانًا كي تحذف محتوى الصندوق عند نقرها. إضافة إلى ذلك سيُعرض زر عنوانه "بحث search" أو عليه أيقونة المكبرة في اﻷجهزة التي تعرض لوحات مفاتيح ديناميكية.

تعرض لقطات الشاشة التالية صندوق بحث ومحتواه كما يظهر في فايرفوكس 71 وسفاري 13 و كروم 79 على نظام ماك او إس ثم ايدج 18 وكروم 79 على ويندوز 10. ويمكن ملاحظة أن أيقونة المسح ستظهر إن ضم صندوق البحث نصًا وامتلك تركيز الدخل (ما عدا حالة سفاري).

ومن الميزات اﻷخرى التي يجب التنويه إليها، هي إمكانية حفظ قيم حقل البحث واستخدامها في اﻹكمال التلقائي للبيانات عبر صفحات مختلفة لنفس الموقع، وتحدث العملية تلقائيًا في معظم المتصفحات الحديثة.

حقل رقم الهاتف

وهو حقل مخصص لإضافة أرقام الهواتف وننشئه باستخدام العنصر <input> وضبط قيمة الخاصية type على tel:

<input type="tel" id="tel" name="tel" />

تعرض أجهزة اللمس عند النقر على حقل الهاتف بلوحة مفاتيح تضم أرقامًا فقط، ويعني ذلك أن هذا الحقل مفيد في جميع اﻷماكن التي نحتاجها فيها إدخال أعداد وليس فقط لإدخال أرقام الهواتف.

تعرض لقطة الشاشة التالية لوحة مفاتيح رقمية في نظام أندرويد:

ونظرًا للتنوع الكبير في تنسيق أرقام الهواتف عالميًا، لا يفرض هذا الحقل أية قيود على القيمة المدخلة من قبل المستخدم (يعني ذلك إمكانية إدخال أحرف أيضًا). وكما أسلفنا، يمكن استخدام الخاصية pattern لوضع القيود على المدخلات وسنناقش ذلك بمزيد من التفصيل لاحقًا.

حقل إدخال عناوين URL

وهو نوع خاص من الحقول، يُستخدم في إدخال عناوين URL عن طريق ضبط قيمة الخاصية type على url:

<input type="url" id="url" name="url" />

يضيف استخدام هذا الحقل بعض القيود على القيم التي يدخلها المستخدم. إذ يعطي المتصفح خطأ على سبيل المثال إن لم يحدد المستخدم البروتوكول (:http مثلًا) أو لم تكن صيغة العنوان صحيحة.

تعرض لوحات المفاتيح الديناميكية في أجهزة اللمس عادة لوحة مفاتيح تضم كل أو معظم محارف الفواصل والنقاط والشرطات المائلة اﻷمامية والخلفية. إليك لقطة شاشة للوحة المفاتيح في نظام أندرويد:

ملاحظة: ليس بالضرورة أن يشير عنوان URL الصحيح إلى موقع حقيقي موجود!

حقل ﻹدخال اﻷعداد

وهو عنصر تحكم ﻹدخال اﻷعداد number وينتج عن طريق ضبط قيمة الخاصية type للعنصر <input> على القيمة number. يبدو شكل هذا النصر شبيهًا بحق اﻹدخال النصي، لكنه يقبل فقط أعدادًا بصيغة الفاصلة العائمة floating-point، ويعرض عادة زر تدوير لزيادة أو إنقاص العدد. كما تُعرض في أجهزة اللمس عادة لوحة مفاتيح رقمية كما في لقطة الشاشة التالية:

يمكنك تقييد الحد اﻷدنى والأعلى للرقم الذي تريد إدخاله عند استخدام هذا الحقل وذلك بضبط قيمتي الخاصيتين min و max. كما يمكنك استخدام الخاصية step لتحديد مقدار الزيادة أو النقصان عند النقر على زر التدوير.

تُقيَّم مدخلات هذا الحقل افتراضيًا إن كانت أعدادًا صحيحةً، لكن باﻹمكان السماح بزيادة أو إنقاص اﻷعداد العشرية بضبط قيمة الخاصية stepعلى "any"، وستكون القيمة الافتراضية لهذه الخاصية 1 عندما لا تُستخدم (تُحذف) وعندها سيقبل الحقل اﻷرقام الصحيحة فقط. لنلق نظرة على بعض الأمثلة:

• ننشئ في المثال الأول عنصر تحكم يعرض أعدادًا بين 1 و 10 ويزيد زر التدوير العدد المدخل أو يُنقصه بمقدار 2:

<input type="number" name="age" id="age" min="1" max="10" step="2" />

• ننشئ في المثال الثاني حقل أعداد محدودًا بين 1 و 10 ضمنًا، ويزيد زر التدوير العدد المدخل أو يُنقصه بمقدار 0.01:

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />

يستخدم حقل اﻷعداد إن كان مجال اﻷعداد المستخدمة محدودًا مثل عمر أو طول الشخص، ويمكن الاستفادة في هذه الحالة من زر التدوير. بينما إن كان المجال واسعًا مثل الرمز البريدي الذي قد يتألف من خمس أو ست منازل، فمن اﻷفضل حينها استخدام النوع tel لأن زر التدوير لن يفيدنا كثيرًا في هذه الحالة وتكفينا لوحة المفاتيح الرقمية التي سيعرضها الجهاز.

عنصر شريط التمرير

من الطرق اﻷخرى التي يمكن أن نستخدمها لانتقاء عدد ما هو المزلاج أو شريط التمرير Slider، ولربما صادفته في مواقع كتلك التي تبيع عقارات أو منتجات وتسمح لك بتحديد الحد اﻷعلى للسعر الذي يناسبك. إليك مثالًا:

يُستخدم المزلاج في اختيار أرقام لا تهمنا كثيرًا قيمها الدقيقة، فهو أقل دقة من الحقول النصية. وننشئ المزلاج باستخدام عنصر اﻹدخال <input> وضبط قيمة الخاصية type على القيمة range. يمكن تحريك مؤشر المزلاج بالفأرة أو باللمس أو عبر أسهم لوحة المفاتيح.

ومن المهم أن تضبط المزلاج جيدًا، لهذا لا بد من استخدام الخاصيات max و min و step التي تضبط الحد الأدنى واﻷعلى للقيمة ومقدار الزيادة أو النقصان. لنلق نظرة اﻵن على الشيفرة التي استخدمناها في إنجاز المثال السابق:

• شيفرة HTML:

<label for="price">Choose a maximum house price: </label>
<input
 type="range"
 name="price"
 id="price"
 min="50000"
 max="500000"
 step="100"
 value="250000" />
<output class="price-output" for="price"></output>

ينشئ المثال السابق مزلاجًا تتراوح قيمه في المجال 50000 و 500000 وتزيد وتنقص القيمة بمقدار 100. وضبطنا قيمته الافتراضية لتكون 250000باستخدام الخاصية value.

وتكمن مشكلة المزلاج بأنه لا يعرض افتراضيًا القيمة الحالية له بشكل مرئي، لهذا أضفنا العنصر <output> كي يضم القيمة الحالية للمزلاج. وباﻹمكان طبعًا عرض قيمة عنصر اﻹدخال أو نتيجة حسابات ما ضمن أي عنصر، لكن للعنصر <output> ميزة خاصة تشبه تلك التي يتمتع بها العنصر <label> من ناحية استخدام الخاصية for التي تسمح لك بربطه بالعنصر أو العناصر التي تعطيه قيمته. ولعرض القيمة الحالية للمزلاج وتحديثها كلما تغيّرت، لا بد من استخدام جافا سكريبت:

• شيفرة جافا سكريبت:

const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
 output.textContent = price.value;
});

نخزّن في هذه الشيفرة مرجعًا إلى عنصر المزلاج range وإلى عنصر اﻹخراج <output> ضمن متغيرين. ومن ثم نضبط مباشرة قيم الخاصية textcontent للعنصر output لتكون قيمة عنصر شريط التمرير الحالية. نضبط أخيرًا مترصد أحداث للتأكد من تغيير قيمة الخاصية textcontent للخرج عندما يتحرك المزلاح إلى قيمة جديدة.

عنصر انتقاء الوقت والتاريخ

كان من الصعب على المطورين بداية تزويد الاستمارات بطريقة لتحديد الوقت والتاريخ، ولتحسين تجربة المستخدم، كان لا بد من وجود واجهة مستخدم مناسبة تعمل كتقويم، كي تمكن المستخدمين من اختيار التاريخ دون الحاجة إلى الانتقال إلى تطبيق التقويم اﻷصلي أو حتى إدخال هذه البيانات يدويًا بتنسيقات مختلفة يصعب تفسيرها. فقد أمكن التعبير عن الدقيقة اﻷخيرة في اﻷلفية الماضية مثلًا بطرق مختلفة مثل:

1999/12/31, 23:59 
// أو
 12/31/99T11:59PM.

تقدّم HTML عنصر تحكم للتعامل مع هذا النوع من البيانات، وذلك من خلال عنصر التقويم الذي ننشئه باستخدام العنصر <input> وضبط قيمة الخاصية type على قيمة مناسبة تعتمد على نوع البيانات التي تريد جمعها كالتاريخ أو الوقت أو كليهما. إليك مثالًا يتراجع فيه المتصفح إلى العنصر <select> إن لم يدعم عنصر التقويم:

لنلق نظرة سريعة اﻵن على اﻷنواع المتوفرة لعنصر التقويم (قيم الخاصية type). وانتبه إلى أن استخدام هذه اﻷنواع معقد، وخاصة فيما يتعلق بدعم المتصفح لهذا النوع.

النوع datetime-local

تنشئ القيمة datetime-local عنصر تقويم يعرض التاريخ ويسمح لك بانتقاء الوقت والتاريخ دون تحديد منطقة زمنية:

<input type="datetime-local" name="datetime" id="datetime" />

النوع month

تنشئ القيمة month      عنصر تقويم لعرض واختيار شهر مع السنة:

<input type="month" name="month" id="month" />

النوع time

تنشئ القيمة time      عنصر تقويم لعرض واختيار الوقت، ويُعيد الوقت وفق تنسيق 24 ساعة:

<input type="time" name="time" id="time" />

النوع week

تنشئ القيمة  week      عنصر تقويم لعرض واختيار رقم اﻷسبوع مع السنة. يبدأ اﻷسبوع يوم الاثنين ويستمر حتى اﻷحد. وإضافة إلى ذلك، يضم الأسبوع اﻷول من السنة أول يوم خميس في هذا العام، وبالتالي قد لا يضم اليوم الأول من السنة، أو قد يضم آخر أيام من العام السابق.

<input type="week" name="week" id="week" />

تحديد قيم الوقت والتاريخ

يمكن تحديد قيم جميع اﻷنواع السابقة لعنصر التقويم من خلال الخاصيتين min و max وكذلك الخاصية step التي قد تتغير قيمتها وفقًا لنوع عنصر التقويم المستخدم.

<label for="myDate">When are you available this summer?</label>
<input
 type="date"
 name="myDate"
 min="2013-06-01"
 max="2013-08-31"
 step="7"
 id="myDate" />

عنصر انتقاء اﻷلوان

من الصعب دائمًا التعامل مع اﻷلوان لوجود طرق كثيرة في التعبير عنها مثل منظومة RGB أو HSL أو بذكر اسم اللون راحة وهكذا. لهذا قدمت HTML5 عنصر انتقاء اللون الذي ننشئه باستخدام العنصر <input> والقيمة color للخاصية type:

<input type="color" name="color" id="color" />

ويؤدي النقر على عنصر انتقاء اللون عادة إلى عرض منتقي اللون الافتراضي في نظام التشغيل. إليك مثالًا:

وتكون القيمة التي يعيدها منتقي اللون هي قيمة ست عشرية hexadecimal مكونة من 6 خانات تمثل اللون الذي اخترته.

الخلاصة

تعرفنا في هذا المقال على بعض عناصر اﻹدخال الجديدة التي قدمتها HTML5، كما يقدم هذا اﻹصدار من اللغة مجموعة أخرى من عناصر الدخل التي يسهل تجميعها ضمن مجموعات نظرًا لسلوكها الخاص، وهذا ما نناقشه في مقال قادم.

ترجمة -وبتصرف- للمقال: The HTML5 input types

اقرأ أيضًا

• المقال السابق: أدوات التحكم اﻷصلية في استمارات الويب

• النماذج (Forms) في HTML5

• عناصر الإدخال: إنشاء استمارة دفع في بوتستراب

• التركيز على عناصر صفحة الويب

• تنسيق الصور والوسائط المتعددة والنماذج في CSS

شرحنا في مقال سابق مثالًا عمليًا على استمارات الويب، وتعرفنا على بعض عناصر التحكم في الاستمارة والهيكليات الشائعة في بنائها، وركزنا اهتمامنا على أفضل الممارسات التي تُعنى بسهولة الوصول accessibility وتضمن إتاحة المحتوى لجميع الأشخاص.

سنتابع في هذا المقال التعرف على وظائف عناصر التحكم المختلفة بتفصيل أكبر، ودراسة جميع الخيارات المتاحة لجمع اﻷنواع المختلفة من البيانات، كما سنلقي نظرة على مجموع عناصر التحكم اﻷصلية باستمارات الويب المتوفرة في جميع متصفحات الويب.

تعرفنا مسبقًا على بعض أنواع عناصر التحكم مثل <form> و <legend> و <label> و <fieldset> و <textarea> و <input>. ونستكشف في هذا المقال الأمور التالية:

• اﻷنواع المختلفة لعناصر الدخل <input> وهي button و checkbox و file و hidden و image و password و radio و reset و submitو text.
• بعض السمات المشتركة بين جميع عناصر التحكم باستمارة الويب.

ملاحظة: سنغطي أيضًا بعض عناصر التحكم الأكثر فعالية في مقالات لاحق وننصحك قبل المتابعة في قراءة هذا المقال أن تطلع على سلسلة مقالات مدخل إلى HTML للتعرف على هيكلية صفحات ويب باستخدام لغة HTML وتتعرف على عناصرها.

حقول اﻹدخال النصية

تُعد حقول اﻹدخال النصية <input> من أبسط أشكال عناصر التحكم بالاستمارات تزود المستخدم بطريقة ملائمة ﻹدخال أي نوع من البيانات كما رأينا في أمثلة سابقة.

ملاحظة: إن الحقول النصية التي تقدمها HTML هي حقول نصية بسيطة لا يمكن استخدامها في إنشاء عناصر إدخال غنية كالتي تعرض خطوطًا سميكة أو مائلة أو ملونة، وجميع العناصر التي تصادفها من هذا النوع هي في الواقع عناصر تحكم معدّلة باستخدام CSS و جافا سكريبت.

تشترك جميع عناصر اﻹدخال النصي في استمارات الويب بالسلوك التالي:

• يمكن أن تكون جميع هذه العناصر بحالة للقراءة فقط readonly أي لا يمكن للمستخدم تعديل محتواها لكن بياناتها تُسلَّم مع الاستمارة، كما يمكن أن تكون معطّلة disabled أي لا يمكن للمستخدم تغيير محتواها ولن تُسلَّم مع بقية بيانات الاستمارة.
• تملك جميع هذه العناصر السمة placeholder التي تعرض نصًا توضيحيًا داخل العنصر يصف باختصار الغاية من عنصر التحكم هذا أو نوع البيانات المتوقع إدخالها فيه.
• يمكن أن نحدد قياسها size (أي القياس الفيزيائي للصندوق)، وعدد المحارف اﻷعظمي التي يمكن أن تستوعبها maxlength.
• يمكن التحقق فيها من الصحة اﻹملائية للمحتوى باستخدام السمة spellcheck إن كان المتصفح يدعم ذلك.

ملاحظة: تُعد عناصر التحكم <inputs> فريدة في HTML لأنها قد تأخذ أشكالًا مختلفة وفقًا لقيمة السمة type، وتُستخدم في بناء معظم عناصر التحكم بما في ذلك حقول اﻹدخال النصي وحيدة ومتعددة اﻷسطر وعناصر عرض الوقت والتاريخ وعناصر أخرى مثل صناديق التحقق وأزرار الخيار المتعدد radio buttons وعناصر انتقاء اﻷلوان واﻷزرار النمطية.

الحقول النصية ذات السطر المفرد

ننشئ هذا الحقل باستخدام العنصر <input> بعد ضبط قيمة السمة type على text أو دون استخدام السمة type نهائيًا، لأن القيمة الافتراضية ستكون text في هذه الحالة. وتُعد القيمة text قيم تراجع (قيم احتياطية) fallback إن كانت القيمة التي أسندتها إلى الخاصية type غير معروفة من قبل المتصفح (كأن تختار القيمة color في حين لا يدعم متصفح عنصر أصلي لانتقاء اللون).

ملاحظة: بإمكانك إيجاد أمثلة عن مختلف أنواع حقل اﻹدخال النصي المفرد على جت-هب وتجربتها مباشرة أيضًا.

إليك مثالًا بسيطًا عن حقل إدخال نصي مفرد السطر:

<input type="text" id="comment" name="comment" value="I'm a text field" />

هنالك قيد وحيد لحقل اﻹدخال النصي المفرد وهو أنه سيحذف جميع محارف الانتقال إلى سطر جديد إن وجدت قبل إرسال البيانات إلى الخادم، وهكذا تبقى البيانات على نفس السطر.

تعرض لقطة الشاشة التالية مربع إدخال نصي في الحالة الطبيعية، وعندما يأخذ تركيز الدخل focus وفي حالته المعطلّة disabled. وتشير معظم المتصفحات إلى حالة اكتساب تركيز الدخل بعرض إطار ملون حول العنصر، بينما تعرض الحالة المعطلة بجعل الخلفية رمادية والنص رماديًا أو أن يبدو العنصر شبه شفاف.

التقطت الصورة السابقة من متصفح كروم على نظام ماك أو إس (macOS)، وقد تكون هناك اختلافات طفيفة بين الحقول أو اﻷزرار من متصفح إلى آخر، لكن تقنية تظليل العناصر لتمييز حالتها تبقى متشابهة.

حقل كلمة المرور

يُعد عنصر إدخال كلمة المرور من النمط password من عناصر الإدخال اﻷصلية في HTML:

<input type="password" id="pwd" name="pwd" />

تعرض لقطة الشاشة التالية عنصر إدخال كلمة سر يظهر ضمنه كل محرف على شكل نقطة.

لا تضيف القيمة password أية قيود إضافية على النص المُدخل، لكنها تحجب القيمة المدخلة في الحقل (على شكل نقاط أو نجوم) كي لا يطلع عليها أحد. لكن تذكر أن هذا الحقل مجرد واجهة مستخدم، فإن أرسلت محتوى حقل كلمة السر دون حيطة أمنية فسترسل كلمة السر على شكل نص واضح وهذا أمر سيء، فقد يعترض طرف ما البيانات المرسلة ويسرق كلمة المرور أو تفاصيل بطاقة اﻹئتمان أو أية بيانات قد ترسلها. وأفضل الطرق لتحمي المستخدم هي استضافة الصفحات التي تحتوي على استمارة ويب ضمن قناة اتصال آمنة (أي أن يبدأ عنوان الصفحة بالبروتوكول //:https)، وهكذا تُشفَّر البيانات قبل إرسالها.

ملاحظة: تميز المتصفحات المخاطر والتبعات اﻷمنية ﻹرسال البيانات من خلال اتصال غير آمن (أي بدون استخدام بروتوكول HTTPS المشفر)، وتحذر المستخدم من استخدام استمارات ويب غير آمنة.

المحتوى المخفي

من اﻷنواع الأخرى لعناصر اﻹدخال هي العناصر المخفية hidden، وتُستخدم ﻹنشاء عنصر تحكم غير مرئي للمستخدم لكنه قادر على إرسال البيانات إلى الخادم مع بقية عناصر الاستمارة. فقد ترغب مثلا بإرسال فترة زمنية تشير إلى تاريخ تنفيذ الطلب. وهكذا لن يتمكن المستخدم من رؤية هذا العنصر أو تعديل قيمته عمدًا، فلن يتلقى هذا العنصر تركيز الدخل أبدًا، ولن تلاحظه أيضًا قارئات الشاشة.

<input type="hidden" id="timestamp" name="timestamp" value="1286705410" />

عندما تنشئ مثل هذه العناصر، لا بد من ضبط قيمتي السمتين name و value. ويمكن ضبط قمتي السمتين ديناميكيًا باستخدام جافا سكريبت. ولا يجب أن يُربط أيضًا أي عنوان بعنصر اﻹدخال المخفي، وسنغطي بقية أنواع عناصر اﻹدخال في مقال قادم.

صناديق التحقق Checkboxes وأزرار الاختيار المتعدد Radio buttons

عناصر الاختيار هي عناصر تحكم تتغير حالتها عند النقر عليها أو على العناوين المرتبطة بها. وهناك نوعان منها: صناديق التحقق وأزرار الاختيار المتعدد، ويستخدم كلا النوعين السمة checked للإشارة أن العنصر مفعّل أو معطل افتراضيًا.

وتجدر اﻹشارة أن هذه العناصر لا تسلك نفس سلوك بقية عناصر تحكم استمارات الويب. فبمجرد النقر على زر التسليم، يُرسل محتوى كل عناصر التحكم التي تمتلك السمة name حتى لو كانت فارغة، بينما لا تُرسل قيمة عناصر الاختيار ما لم تكن مفعّلة checked. ولا ترسل قيم هذه العناصر إطلاقًا ما لم تكن مفعّلة ولا حتى أسماءها، بينما تُرسل اﻷسماء إن كانت مفعلة لكن دون قيمة.

ملاحظة: بإمكانك الاطلاع على مثال هذا القسم على جت-هب وتجربته مباشرة أيضًا.

ولتقديم أفضل طريقة استخدام تدعم شمولية الوصول، أحط كل قائمة من هذه العناصر لها نفس الغاية بالعنصر <fieldset> واستخدم العنصر <legend> ﻹعطاء توصيف كامل للقائمة. كما ينبغي أن يكون كل زوج <label> / <input> ضمن عنصر قائمة خاص به. ويوضع العنوان المرافق لكل عنصر قبله أو بعده مباشرة، بينما يوضع وصف عمل مجموع أزرار الاختيار المتعدد أو صناديق التحقق ضمن العنصر <legend>. الق نظرة على المثال السابق لترى هيكلة هذه العناصر في الاستمارة.

صندوق التحقق Checkbox

ننشئ صندوق التحقق checkbox باستخدام العنصر <input> والسمة type = checkbox كما يلي:

<input type="checkbox" id="questionOne" name="subscribe" value="yes" checked />

ويجب أن تحمل صناديق التحقق التي ترتبط ببعضها نفس قيمة الخاصية name، وعندما تضيف السمة checked سيكون صندوق التحقق مفعّلًا افتراضيًا عند تحميل الصفحة، وعند النقر على صندوق التحقق أو العنوان المرتبط به تتغير حالة الصندوق من التفعيل إلى الحالة غير المفعّلة وبالعكس:

<fieldset>
 <legend>Choose all the vegetables you like to eat</legend>
 <ul>
    <li>
     <label for="carrots">Carrots</label>
     <input
      type="checkbox"
      id="carrots"
      name="vegetable"
      value="carrots"
      checked />
    </li>
    <li>
     <label for="peas">Peas</label>
     <input type="checkbox" id="peas" name="vegetable" value="peas" />
    </li>
    <li>
     <label for="cabbage">Cabbage</label>
     <input type="checkbox" id="cabbage" name="vegetable" value="cabbage" />
    </li>
 </ul>
</fieldset>

تعرض لقطة الشاشة التالية صندوق التحقق في الحالة التي يكون فيها مفعلًا أو يمتلك تركيز الدخل أو معطلًا. وتكون صناديق التحقق مفعلّة افتراضيًا وفي الحالة المعطلّة وغير مفعلة عندما تكتسب تركيز الدخل ويحيط بها إطار ملوّن.

ملاحظة: يتطابق تنسيق صناديق التحقق وأزرار الاختيار المتعدد التي تأتي مع السمة checked مع محدد الصنف الزائف default: حتى لو ألغي تفعيلها لاحقًا، بينما يتطابق تنسيق العناصر التي فُعلت حاليًا مع محدد الصنف الزائف checked:.

ونظرًا لطبيعة هذه العناصر التي تتأرجح بين التفعيل أو عدمه، فهي تُعدّ أزرار تبديل toggle buttons. حيث يعمد الكثير من المطورين إلى توسيع التنسيق الافتراضي لهذه العناصر ﻹنشاء أزرار تبدو وكأنها مفاتيح تبديل (الق نظرة على المثال الذي يوضح اﻷمر واطلع على شيفرته المصدرية إن أردت).

أزرار الاختيار المتعدد Radio buttons

ننشئ أزرار الاختيار المتعدد باستخدام العنصر <input> والسمة type = radio كما يلي:

<input type="radio" id="soup" name="meal" value="soup" checked />

يمكن ربط عدة أزرار اختيار متعدد معًا إذا كان لهذه اﻷزرار نفس السمة name، وتُعد الأزرار في هذه الحالة مجموعة واحدة يمكنك فقط اختيار (تفعيل) زر واحد منها، ويعني ذلك أن النقر على زر آخر يفعله ويلغي تفعيل كل الأزرار الباقية في المجموعة. وتُرسل فقط قيمة الزر المفعّل عند إرسال أو تسليم الاستمارة. وإن لم يكن أي من الأزرار مفعلة، تُعد حالة المجموعة غير معلومة ولا تُرسل أي قيمة مع الاستمارة. وبمجرد أن تفعل أحد أزرار المجموعة المترابطة، لن تتمكن بعدها من إلغاء تفعيل اﻷزرار جميعها إلا بإعادة ضبط الاستمارة reset:

<fieldset>
 <legend>What is your favorite meal?</legend>
 <ul>
    <li>
     <label for="soup">Soup</label>
     <input type="radio" id="soup" name="meal" value="soup" checked />
    </li>
    <li>
     <label for="curry">Curry</label>
     <input type="radio" id="curry" name="meal" value="curry" />
    </li>
    <li>
     <label for="pizza">Pizza</label>
     <input type="radio" id="pizza" name="meal" value="pizza" />
    </li>
 </ul>
</fieldset>

تعرض لقطة الشاشة التالية زر اختيار متعدد في الحالة الافتراضية والمعطلة، مع زر غير مفعل اكتسب تركيز الدخل:

اﻷزرار الفعلية في استمارات الويب

لا تُعد أزرار الاختيار المتعدد أزرارًا فعلية على الرغم من اسمها، لهذا سنلقي نظرة في هذه الفقرة على أنواع اﻷزرار الحقيقية. هنالك ثلاث أنواع لعنصر الدخل تعطي أزرار فعلية وهي:

• submit: التي ترسل بيانات الاستمارة إلى الخادم. كما ينتج هذا النوع عن العنصر <button> عندما نهمل السمة type أو نسند إليها قيمة غير معروفة.
• reset: يعيد عناصر تحكم الاستمارة إلى وضعها الافتراضي.
• button: ليس لها تأثير تلقائي، لكن باﻹمكان تخصيصها باستخدام جافا سكريبت.

ولدينا أيضًا العنصر <button> الذي يمتلك السمة type وتاخذ إحدى القيم submit و reset و button ليحاكي سلوك اﻷنواع الثلاث لعنصر اﻹدخال. أما الاختلاف الحقيقي، فيكمن في سهولة تنسيق الزر الفعلي:

<input type="submit" value="Submit this form" />
<input type="reset" value="Reset this form" />
<input type="button" value="Do Nothing without JavaScript" />

<button type="submit">Submit this form</button>
<button type="reset">Reset this form</button>
<button type="button">Do Nothing without JavaScript</button>

كما تلاحظ سيعرض عنصر اﻹدخال image على شكل زر، وسنغطي شرح هذا لاحقًا.

ملاحظة: بإمكانك الاطلاع على مثال هذا القسم على جت-هب وتجربته مباشرة أيضًا.

إليك أمثلة عن استخدام عناصر اﻹدخال ﻹنشاء زر واستخدام الزر الفعلي <button> المكافئ:

الزر submit

<button type="submit">This is a <strong>submit button</strong></button>

<input type="submit" value="This is a submit button" />

الزر reset

<button type="reset">This is a <strong>reset button</strong></button>

<input type="reset" value="This is a reset button" />

الزر غير المحدد

<button type="button">This is an <strong>anonymous button</strong></button>

<input type="button" value="This is an anonymous button" />

تسلك الأزرار الحقيقية السلوك نفسه سواءً استخدمت العنصر <button> أو عنصر إدخال <input>. ويسمح لكن عنصر الزر <button> باستخدام عناصر HTML ضمن محتواها، بوضع العنصر بين وسمي البداية والنهاية، أما عناصر اﻹدخال فهي عناصر فارغة (عقيمة أو بدون أبناء) ولا يمكن وضع محتوى فيها إلا على شكل قيمة للسمة value، وبالتالي لن تقبل سوى المحتوى النصي.

تعرض لقطة الشاشة التالية زرًا في الحالة التي يكون فيها مفعلًا أو يمتلك تركيز الدخل أو معطلًا. وعندما يكتسب الزر تركيز الدخل يحيط به إطار ملوّن، ويظهر على شكل رمادي في الحالة المعطّلة.

زر الصورة

يُصيّر عنصر التحكم "زر الصورة image button" كما يُصير عنصر الصورة <img> تمامًا ما عدا أنه يسلك سلوك زر اﻹرسال submit عند النقر عليه.

ننشئ زر الصورة باستخدام العنصر <input> والسمة type = image ويمتلك جميع الخاصيات التي يمتلكها زر الاستمارة:

<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />

إن استخدمنا زر الصورة في تسليم بيانات الاستمارة، لن يسلم هذا العنصر قيمته، بل اﻹحداثيين X و Y لنقطة النقر على الصورة (منسوبةً إلى الزاوية العليا اليسارية للصورة التي تمثل النقطة (0,0)). وتُرسل اﻹحداثيات على شكل زوجين مفتاح/قيمة:

• قيمة الخاصية name مع قيمة x (على شكل قيمة نصية).
• قيمة الخاصية name مع قيمة y (على شكل قيمة نصية).

فلو نقرت مثلًا على النقطة (123,456) من زر الصورة وسلمت محتوى الاستمارة من خلال طلب من النوع get سترى أن القيمة الملحقة بعنوان URL الخاص بالطلب كالتالي:

http://foo.com?pos.x=123&pos.y=456

وهذه طريقة مناسبة ﻹنشاء خارطة تتبع hot map وفهم كيفية تفاعل المستخدمين مع عناصر صفحات الويب. وسنتكلم في مقال لاحق بالتفصيل عن طريق إرسال واستخلاص هذه البيانات.

عنصر انتقاء الملفات File Picker

يعد منتقي الملفات أحد أنواع عناصر اﻹدخال التي ظهرت مبكرًا في HTML. إذ تمتلك الاستمارات القدرة على إرسال ملفات كاملة إلى الخادم، لهذا يستخدم منقي الملفات في اختيار ملف أو أكثر ﻹرساله.

نستخدم عنصر اﻹدخال <input> ﻹنشاء منتقي ملفات بإسناد القيمة file للسمة type. ويمكن تحديد نوع الملف الذي تريد إرساله باستخدام السمة accept، وإن أردت السماح للمستخدم اختيار عدة ملفات، يمكنك استخدام السمة multiple:

مثال

ننشئ في هذا المثال منتقي ملفات لرفع صور إلى الخادم، ويُسمح للمستخدم باختيار عدة ملفات كي يرسلها:

<input type="file" name="file" id="file" accept="image/*" multiple />

يمكن لمنتقي الملفات في بعض الهواتف المحمولة الوصول إلى الصور ومقاطع الفيديو والصوت التي تلتقط مباشرة من كاميرا وميكروفون الجهاز بإضافة القيمة capture إلى السمة accept:

<input type="file" accept="image/*;capture=camera" />
<input type="file" accept="video/*;capture=camcorder" />
<input type="file" accept="audio/*;capture=microphone" />

تعرض لقطة الشاشة التالية منتقي ملفات في الحالة الافتراضية والمعطلة وعند اكتسب تركيز الدخل، في الحالة التي لم نختار فيها ملفًا بعد:

السمات المشتركة

تمتلك بعض العناصر التي نستخدمها في استمارات الويب سمات خاصة بها، وهنالك أيضًا سمات مشتركة بين جميع تلك العناصر. إليك قائمة بهذه السمات:

الخلاصة

غطينا في هذا المقال أنواع عناصر اﻹدخال، وهي الأنواع التي أدخلت في بدايات لغة HTML لهذا فهي مدعومة جيدًا في جميع المتصفحات، وسنتعرف لاحقًا على أنواع أحدث لعناصر اﻹدخال.

ترجمة -وبتصرف- للمقال: Basic native form controls

اقرأ أيضًا

• المقال السابق: هيكلة استمارة الويب Web Forms
• أساسيات العمل مع استمارات الويب Web forms
• أدوات سهولة الوصول Accessibility اللازمة في عملية تطوير الويب
• تعرف على أنواع الحقول الجديدة في نماذج HTML5

تعرفنا في مقال سابق على أساسيات العمل مع استمارات الويب وسنلقي نظرة أقرب في هذا المقال على العناصر التي تُستخدم لهيكلة استمارة الويب وإعطاء كل عنصر دلالته الخاصة. فمرونة استمارات ويب تجعلها إحدى الهيكليات اﻷكثر تعقيدًا في HTML، حيث تستطيع بناء أي نوع من استمارات الويب اﻷساسية باستخدام وسم الاستمارات المخصص <form> وسماته. وبالتالي سيكون اختيار الهيكلية الصحيحة لاستمارة الويب أساسيًا لضمان قابلية استخدام هذه الاستمارة وسهولة الوصول إليها accessible form.

كما ننصحك قبل المتابعة في قراءة هذا المقال أن تطلع على سلسلة المقالات "مدخل إلى HTML" للتعرف على هيكلية صفحات ويب باستخدام لغة HTML وتتعرف على أهم عناصرها.

العنصر <form>

يُعرّف العنصر <form> أنه استمارة أو نموذج مع سمات تحدد سلوكه. وكلما أردت بناء استمارة ويب عليك أن تبدأ باستخدام العنصر <form> وتضع ضمنه المحتوى المطلوب. وتستطيع العديد من تقنيات ويب الحديثة وإضافات المتصفحات browser plugins اكتشاف عناصر الاستمارات وتنفيذ خطافات مخصصة لها كي يسهل استخدامها.

تحذير: يمنع صراحة وضع عنصر <form> داخل عنصر <form> آخر، لأن تداخل هذه العناصر قد يؤدي إلى سلوك غير متوقع.

ومن الممكن دائمًا استخدام عناصر تحكم بالاستمارة تقع خارج العنصر <form>. وفي هذه الحالة، لن يكون هناك أي ترابط بين عناصر التحكم والاستمارة ما لم تربط بنفسك هذه العناصر بالاستمارة باستخدام السمة for لعناصر التحكم. وقد أدخلت هذه السمة كي تربط العناصر الموجودة خارج الاستمارة ضمنيًا باستمارة ويب محددة. وسنتعرف تاليًا على العناصر الهيكلية التي تجدها داخل استمارة الويب.

العنصران <fieldset> و <legend>

يُعد العنصر <fieldsset> مناسبًا ﻹنشاء مجموعات من عناصر التحكم لها نفس الغاية سواء للتنسيق أو إعطاء دلالة خاصة. وبإمكانك وضع عنوان للعنصر <fieldset> بتضمين العنصر <legend> تحت وسم البداية الخاص به، وهكذا يصف محتوى العنصر <legend> الغاية من استخدام العنصر <fieldset>.

تستخدم الكثير من التقنيات المساعدة العنصر <legend> على أنه جزء من عنوان كل عنصر تحكم يقع داخل <fieldset> وتقرأ بعض قارئات الشاشات مثل Jaws و NVDA محتوى العنصر <legend> قبل قراءة عنوان عنصر التحكم.

إليك مثالًا:

<form>
 <fieldset>
    <legend>Fruit juice size</legend>
    <p>
     <input type="radio" name="size" id="size_1" value="small" />
     <label for="size_1">Small</label>
    </p>
    <p>
     <input type="radio" name="size" id="size_2" value="medium" />
     <label for="size_2">Medium</label>
    </p>
    <p>
     <input type="radio" name="size" id="size_3" value="large" />
     <label for="size_3">Large</label>
    </p>
 </fieldset>
</form>

ملاحظة: ستجد هذا المثال على جت-هب وبإمكانك تجربته مباشرة.

عند قراءة الشيفرة السابقة، ستنطق قارئات الشاشة العبارة "Fruit juice size small" المتعلقة بعنصر التحكم اﻷول، والعبارة "Fruit juice size medium" للعنصر الثاني، والعبارة "Fruit juice size large" للثالث.

إن حالة الاستخدام التي يعرضها هذا المثال مهمة جدًا؛ فإن كان لديك مجموعة من أزرار الاختيار radio buttons، عليك في هذه الحالة وضعها ضمن عنصر <fieldset> واحد. ستجد العديد من حالات الاستخدام لهذه العناصر، لكنها تُستخدم عمومًا في تجزئة الاستمارة. إذ توزّع استمارات الويب الطويلة على عدة صفحات، لكن إن كان لا بد من وضعها في صفحة واحدة، من الأفضل حينها تجزئة الاستمارة من خلال وضع العناصر التي تؤدي غاية محددة ضمن عناصر <fieldset> مخصصة لتحسين قابلية استخدام الاستمارة.

ونظرًا لتأثير العنصر <fieldset> على التقنيات المساعدة، فهو عنصر أساسي في بناء استمارات تدعم شمولية الوصول أو سهولة الوصول accessibility، وتبقى عليك مسؤولية استخدامها بالشكل الصحيح. حاول إن أمكن أن تسمع ما تنطقه قارئات الشاشة عندما تبني استمارتك، فإن بدا الأمر غريبًا، جرّب أن تحسن هيكلية الاستمارة الخاصة بك.

العنصر <label>

رأينا في مقال سابق أن العنصر <label> يعرّف لنا عنوانًا لوصف عنصر التحكم الموجود في استمارة الويب. وهذا العنصر شديد اﻷهمية لاسيما إن أردت بناء استمارة يدعم سهولة الوصول، فعندما تستخدمها بالشكل الصحيح، ستنطقها قارئات الشاشة مع أية توجيهات أخرى، كما أنها مفيدة للمستخدمين الأصحاء كذلك لتوضح لهم دلالة مكونات الاستمارة. إليك المثال الذي خبرناه في المقال السابق:

<label for="name">Name:</label> <input type="text" id="name" name="user_name" />

عندما يُربط العنوان بالعنصر <input> من خلال السمة for التي تحمل قيمة معرّف عنصر اﻹدخال، ستنطق قارئات الشاشة العبارة "Name, edit text". وهناك طريقة أخرى لربط عنصر تحكم الاستمارة بالعناوين عن طريق وضع عنصر التحكم داخل العنوان <label> صراحة كما يلي:

<label for="name">
 Name: <input type="text" id="name" name="user_name" />
</label>

وحتى في هذه الحالات، يُعد استخدام السمة for ممارسة مفضلة كي نضمن فهم التقنيات المساعدة للعلاقة الموجودة بين العنوان وعنصر التحكم، فإن لم يكن هناك عنوان أو لم يرتبط عنصر التحكم في استمارة ويب صراحة أو ضمنيًا بعنوان، ستنطق قارئات الشاشة عبارة مثل "Edit text blank" وهذا لن يساعد أبدًا.

العناوين قابلة للنقر أيضًا

من الإيجابيات اﻷخرى لإعداد عناوين لعناصر تحكم استمارة الويب هو إمكانية النقر على العنوان لتفعيل عنصر التحكم المرتبط به. ولهذا اﻷمر فائدته عند استخدام عناصر اﻹدخال النصية، إذ سيتلقى العنصر تركيز الدخل بالنقر عليه أو على العنوان المرافق له. وتظهر أهميته الفعلية عند استخدام أزرار الاختيار radio buttons وصناديق التحقق check boxes، فقد تكون المنطقة التي يشغلها الزر ضيقة يصعب نقرها في بعض اﻷجهزة لذلك من السهل حينها النقر على العنوان الموافق لتفعيل الخيار.

فالنقر على العنوان "I like cherry" في مثالنا التالي سيغير حالة عنصر اﻹدخال taste_cherry:

<form>
 <p>
    <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry" />
    <label for="taste_1">I like cherry</label>
 </p>
 <p>
    <input type="checkbox" id="taste_2" name="taste_banana" value="banana" />
    <label for="taste_2">I like banana</label>
 </p>
</form>

ملاحظة: ستجد هذا المثال على جت-هب وبإمكانك أيضًا تجربته مباشرة.

عناوين متعددة

لا يوجد في الواقع ما يمنعك من وضع عدة عناوين لعنصر التحكم نفسه، لكن الفكرة سيئة من منظور اﻷدوات المساعدة، فقد تُخطئ تلك اﻷدوات في التعامل معها. وإن أردت استخدام عناوين متعددة، عليك وضع عنصر التحكم مع عناوينه المرتبطة به ضمن عنصر <label> وحيد:

<p>Required fields are followed by <span aria-label="required">*</span>.</p>

<!-- ينجح اﻷمر كالتالي -->
<!--div>
 <label for="username">Name:</label>
 <input id="username" type="text" name="username" required>
 <label for="username"><span aria-label="required">*</label>
</div-->

<!-- لكن من اﻷفضل أن ينجز كالتالي -->
<!--div>
 <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username" required>
    <span aria-label="required">*</span>
 </label>
</div-->

<!-- وهذا هو التنفيذ اﻷفضل -->
<div>
 <label for="username">Name: <span aria-label="required">*</span></label>
 <input id="username" type="text" name="username" required />
</div>

توضح الفقرة النصية في بداية الشيفرة أن الحقول المعلمة * ضرورية. ولا بد من تضمين هذه الفقرة في البداية وقبل أن يطبق محتواها، لكي يتمكن المستخدمون ضعاف البصر أو حتى اﻷصحاء -الذين يعتمدون على قارئات الشاشة- من فهم معناها قبل أن يصلوا إلى الحقول الضرورية في الاستمارة. وعلى الرغم من أنها علامة * مفيدة للأصحاء وواضحة، لكن لا يمكن الاعتماد عليها كليًا. إذ ستلفظ قارئات الشاشة هذا المحرف على الشكل "star"، ولن تكون مفيدة هنا، ولا بد أن تظهر الكلمة "مطلوب required" عندما يمرر المستخدم السليم مؤشر الفأرة فوق العنوان، ويُنجز هذا اﻷمر باستخدام السمة title، أما نطق قارئات الشاشة لقيمة هذه السمة، فيعتمد على إعداداتها. لهذا من اﻷسلم أن نضيف أيضًا السمة aria-label التي تنطقها قارئات الشاشة دائمًا.

تتفاوت فعالية الطرق في المثال السابق في تنفيذ اﻷمر:

• لا يُقرأ العنوان في الطريقة اﻷولى إطلاقًا مع عنصر الدخل، فما تحصل عليه هو لفظ العبارة "edit text blank" إضافة إلى العناوين الفعلية التي تُقرأ بشكل منفصل، وستربك العناوين المتعددة قارئ الشاشة.
• تبدو اﻷشياء أوضح بقليل في الطريقة الثانية، إذ يُقرأ العنوان مع عنصر الدخل "name star name edit text required"، لكن العناوين ستُقرأ أيضًا بشكل منفصل، وهذا مربك قليلًا. تحسن الوضع هنا لوجود عنوان مرتبط بالعنصر <input>.
• الطريقة الثالثة هي اﻷفضل، إذ يُقرأ العنوان الفعلي في نفس الوقت ويُقرأ عنصر العنوان بالشكل "name required edit text".

ملاحظة: قد تختلف النتائج قليلًا وفقًا لقارئ الشاشة الذي تستخدمه.

ملاحظة: ستجد هذا المثال على جت-هب وبإمكانك تجربته مباشرة.

لا تحاول اختيار المثال بشكله الحالي، ابق على طريقة واحدة وحوّل الطريقتين الباقيتين إلى تعليقات، كي لا تُربك قارئات الشاشة بوجود عناوين متعددة وعناصر إدخال متعدد لها نفس الاسم.

هيكليات شائعة لتنظيم استمارات الويب

تذكر دائمًا أن هيكلة استمارة الويب تكون باستخدام HTML، وتستطيع استخدام كامل إمكانيات لغة التوصيف هذه في هيكلة الاستمارة. وقد تلاحظ من اﻷمثلة السابقة أن تغليف العنوان وعنصر التحكم ضمن العنصر <li> ممارسة شائعة وتوضع هذه العناصر بدورها ضمن عنصر قائمة <ul> أو <ol>، كما يُستخدم أيضًا العنصر <div>. وينصح باستخدام القوائم في حال كانت عناصر اﻹدخال على شكل صناديق تحقق أو أزرار خيارات متعددة.

وإضافة إلى العنصر <fieldset>، يشيع استخدام عناصر العناوين الرئيسية في HTML مثل <h1> و <h2> والعنصر <section> لبناء هيكليات أكثر تعقيدًا لاستمارات الويب.

ويعود اﻷمر إليك في انتقاء اﻷسلوب المناسب لكتابة الشيفرة على أن تكون النتيجة استمارة قابلةً للاستخدام وتراعي شمولية الوصول. وينبغي أن يوضع كل قسم يضم وظيفة محددة داخل عنصر <section> منفصل واستخدام العنصر <fieldset> لاحتواء أزرار الاختيارات المتعددة.

تطبيق عملي: بناء هيكل لاستمارة ويب

لنضع اﻵن ما تعلمناه من أفكار موضع التنفيذ ونبني استمارة أكثر عمقًا للاستمارات بإضافة وسيلة دفع. يتضمن الاستمارة الجديدة عددًا من أنواع عناصر التحكم التي قد لا تفهمها، لكن لا بأس حاليًا، إذ سنعرض تفاصيل أكثر عنها في مقال لاحق. وكل ما عليك اﻵن قراءة الوصف بتمعن أثناء متابعتك للتعليمات وفهمك للطريقة التي نغلف فيها العناصر في الاستمارة كي نبني هيكليتها، ولماذا فعلنا ذلك.

1. أنشئ نسخة محلية من ملف التطبيق في مجلد جديد على حاسوبك.
2. أنشئ تاليًا استمارةك باستخدام العنصر <form>.

<form>

أضف ترويسة وعنوان رئيسي ضمن العنصر <form>، لتعرض للمستخدم كيفية تمييز الحقول المطلوبة:

<h1>Payment form</h1>
<p>
 Required fields are followed by
 <strong><span aria-label="required">*</span></strong>.
</p>

نضيف تاليًا قسمًا أكبر من الشيفرة تحت الشيفرة السابقة، وسترى كيف نغلّف حقول معلومات الاتصال ضمن عنصر <section> مستقل. لدينا أيضًا مجموعة من ثلاث أزرار اختيار من متعدد، نضع كل منها ضمن عنصر قائمة <li> مستقل. ولدينا عنصرا إدخال نصيان <input> مع العنوان المرافق لكل منهما يوضع كل منهما ضمن فقرة نصية <p>، ولدينا أيضًا عنصر إدخال نصي لإدخال كلمة المرور:

<section>
 <h2>Contact information</h2>
 <fieldset>
    <legend>Title</legend>
    <ul>
     <li>
      <label for="title_1">
       <input type="radio" id="title_1" name="title" value="A" />
       Ace
      </label>
     </li>
     <li>
      <label for="title_2">
       <input type="radio" id="title_2" name="title" value="K" />
       King
      </label>
     </li>
     <li>
      <label for="title_3">
       <input type="radio" id="title_3" name="title" value="Q" />
       Queen
      </label>
     </li>
    </ul>
 </fieldset>
 <p>
    <label for="name">
     <span>Name: </span>
     <strong><span aria-label="required">*</span></strong>
    </label>
    <input type="text" id="name" name="username" required />
 </p>
 <p>
    <label for="mail">
     <span>Email: </span>
     <strong><span aria-label="required">*</span></strong>
    </label>
    <input type="email" id="mail" name="usermail" required />
 </p>
 <p>
    <label for="pwd">
     <span>Password: </span>
     <strong><span aria-label="required">*</span></strong>
    </label>
    <input type="password" id="pwd" name="password" required />
 </p>
</section>

يضم القسم الثاني <section> من الاستمارة معلومات الدفع حيث نضيف ثلاثة عناصر تحكم مع عناوينها ويغلف كل منها ضمن فقرة نصية <p>. العنصر اﻷول هو قائمة منسدلة <select> لاختيار نوع بطاقة االائتمان، والثاني عنصر إدخال نصي <input> من النوع tel ﻹدخال رقم بطاقة اﻹئتمان (يمكن اختيار النوع number لكننا لم نجد شكله مناسبًا لواجهة المستخدم)، والثالث عنصر إدخال من النوع text ﻹدخال تاريخ إنتهاء صلاحية البطاقة، ويتضمن العنصر اﻵخير السمة placeholder التي تشير إلى التنسيق الصحيح، والسمة pattern التي تختبر صحة التنسيق الذي يدخله المستخدم. وقد أدخلت هذه العناصر اﻷخيرة في HTML5:

<section>
 <h2>Payment information</h2>
 <p>
    <label for="card">
     <span>Card type:</span>
    </label>
    <select id="card" name="usercard">
     <option value="visa">Visa</option>
     <option value="mc">Mastercard</option>
     <option value="amex">American Express</option>
    </select>
 </p>
 <p>
    <label for="number">
     <span>Card number:</span>
     <strong><span aria-label="required">*</span></strong>
    </label>
    <input type="tel" id="number" name="cardnumber" required />
 </p>
 <p>
    <label for="expiration">
     <span>Expiration date:</span>
     <strong><span aria-label="required">*</span></strong>
    </label>
    <input
     type="text"
     id="expiration"
     name="expiration"
     required
     placeholder="MM/YY"
     pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$" />
 </p>
</section>

نضيف القسم اﻷخير البسيط الذي يضم زرًا <button> من النوع submit ﻹرسال البيانات، لهذا ضع الشيفرة التالية أسفل شيفرة الاستمارة:

<section>
 <p>
    <button type="submit">Validate the payment</button>
 </p>
</section>

أكمل الاستمارة بإضافة وسم اﻹغلاق للعنصر <form>:

</form>

طبقنا كذلك تنسيقات CSS إضافية على الاستمارة، فإن أردت إجراء تغييرات على مظهره، انسخ التنسيقات التي تحتاجها وعدّل عليه.

الخلاصة

بهذا نكون قد استعرضنا أهم العناصر المستخدمة لهيكلة استمارة الويب وإعطاء كل عنصر دلالته الخاصة، وشرحنا الطريقة المثلى لاستخدام هذه العناصر في هيكلة استمارة الويب لتكون قابلةً للاستخدام وتدعم شمولية الوصول بالطريقة الصحيحة، وسنتوسع في شرح الميزات التي عرضناها هنا في مقالات قادمة.

ترجمة -وبتصرف- للمقال: How to structure a web form

اقرأ أيضًا

• المقال السابق: إضافة تنسيق بسيط لاستمارة الويب وإرسال بياناتها للخادم
• متحكمات واجهة المستخدم وكيفية عرضها: متحكمات الدخل
• أدوات سهولة الوصول Accessibility اللازمة في عملية تطوير الويب
• معالجة مشاكل سهولة الوصول Accessibility الشائعة للتوافق مع المتصفحات

سنبدأ في هذا المقال والمقالات التالية شرح أساسيات التعامل مع استمارات الويب Web forms. فاستمارات الويب هي أداة قوية للتفاعل مع المستخدمين وخاصة في جمع بيانات عنهم أو السماح لهم في التحكم بواجهة المستخدم، سنحرص على تغطية كامل ميزات هذه الأداة القوية ونشرح كل ما يتعلق بها بما في ذلك كتابة شيفرة HTML وتنسيق عناصر التحكم وتسليم البيانات إلى الخادم.

متطلبات العمل على هذه السلسلة

• الاطلاع على سلسلة المقالات مدخل إلى HTML، وعندها لن تجد صعوبة في فهم القسم التمهيدي من مقالات السلسلة، وستكون قادرًا على الاستفادة من معلومات مقال أدوات التحكم اﻷصلية لاستمارات الويب.
• تعلم أساسيات التنسيق باستخدام CSS وأساسيات البرمجة بلغة جافا سكريبت. إذ عليك تعلم بعض التقنيات الخاصة في تنسيق عناصر التحكم التي تضيفها للاستمارة، وكتابة سكريبتات التعامل مع تقييم بيانات الاستمارة وإنشاء استمارات ويب مخصصة.

ولهذا كان لا بد من عرض استمارات الويب في سلسلة مقالات خاصة بها ولم نخلطها مع سلاسل المقالات التي تحدثنا فيها عن HTML و CSS وجافا سكريبت. فعناصر الاستمارات أكثر تعقيدًا من عناصر HTML الأخرى، وتتطلب استخدامًا محددًا لتقنيات CSS وجافا سكريبت إن أردت الحصول على كامل إمكانيات الاستمارات.

ملاحظة: إن كنت تستخدم حاسوبًا أو جهازًا لوحيًا أو غيره من الأجهزة التي لاتمكّنك من إنشاء ملفاتك الخاصة وتنفيذ الشيفرات البرمجية محليًا، فجرِّب الشيفرة التي ستجدها في الأمثلة من خلال برامج كتابة شيفرة على الإنترنت مثل Glitch أو JSBin فهذه البيئات تساعدك على كتابة شيفرتك وتنفيذها دون الحاجة إلى تثبيت برمجيات خاصة على جهازك.

سنبدأ في هذا المقال التمهيدي بالتعرف بشكل مفصل على استمارات الويب وأهميتها وننشئ أول استمارة ويب خاصة بنا من خلال تصميم استمارة تواصل بسيطة contact form وتنفيذها برمجيًا باستخدام عناصر HTML، ونستكمل في المقال التالي تنسيقها.

ما هي استمارات الويب Web Forms

تُعد استمارات ويب إحدى النقاط اﻷساسية التي تعزز التواصل بين المستخدم و موقع الويب أو التطبيق. إذ تتيح للمستخدم إدخال البيانات التي تُرسل عادة إلى الخادم كي يعالجها ويخزنها في قواعد البيانات، أو تستخدم لتحديث  تصميم واجهة المستخدم مباشرة بطريقة ما (مثل إضافة عنصر جديد إلى قائمة أو إظهار وإخفاء بعض معالم الواجهة).

تتكون استمارات الويب المبنية على أساس HTML من عنصر تحكم بالاستمارة أو أكثر، إضافة إلى عناصر أخرى تساعد في هيكلة الاستمارة عمومًا، لهذا يُشار إليها أحيانًا باسم استمارات HTML. وقد تكون عناصر التحكم حقولًا نصية مفردة أو متعددة اﻷسطر أو قوائم منسدلة drop-down box أو أزرار أو صناديق تحقق
check boxes أو أزرار اختيار من متعدد radio buttons، وتنشأ هذه العناصر عادة باستخدام العنصر <input> مع وجود بعض العناصر اﻷخرى التي سنطلع عليها تباعًا.

يمكن برمجة عناصر التحكم أيضًا كي نجبر المستخدم إدخال صيغ أو قيم مخصصة (من أجل تقييم الاستمارة) وأن نقرن هذه العناصر بنصوص توضيحية تصف الغاية من هذه العناصر لضعيفي البصر والمستخدم السليم لتعزيز الشمولية وسهولة الوصول Accessibility.

تصميم استمارة الويب اﻷولى

من الجيد التراجع إلى الخلف قليلًا قبل الشروع في كتابة الشيفرة والتفكير مليًا بالاستمارة الذي نريد تصميمه. إذ يساعدك تصور مخطط أولي لاستمارةك في تحديد مجموعة البيانات التي تريد أن تطلبها من المستخدم. وتذكّر أن الاستمارات الكبيرة تزيد عدد المستخدمين الذي يرفضون إكمالها وذلك من منظور تجربة المستخدم UX. لهذا أبق الاستمارة بسيطًا وركّز على البيانات التي تحتاجها بالفعل.

إن خطوة تصميم الاستمارة مهمة جدًا في بناء الموقع أو التطبيق. لن نغطي في هذا المقال تصميم استمارات الويب من منظور تجربة المستخدم لكن ستجد الكثير من اﻷفكار في كتاب مدخل إلى تجربة المستخدم من إنتاج أكاديمية حسوب.

سنبني استمارة ويب تتيح للمستخدمين التواصل معنا، ولتبدأ بالرسم التوضيحي لهذا الاستمارة كما في الشكل التالي:

تتضمن الاستمارة ثلاث حقول نصية وزر واحد، وتطلب من المستخدم إدخال اسمه وبريده اﻹلكتروني والرسالة التي يريد إرسالها كي تُخزّن على الخادم عند النقر على زر الإرسال أسفل الاستمارة.

تطبيق عملي: إنجاز شيفرة HTML الخاصة بالاستمارة

نستخدم في استمارةنا عناصر HTML التالية:

• عنصر استمارة ويب <form>.
• عناصر <input>.
• زر <button>.

وقبل أن تتابع معنا، أنشئ نسخة خاصة بك من قالب HTML الخاص بالتطبيق الذي ستضع استمارتك ضمنه.

العنصر <form>

تبدأ الاستمارات جميعها بالعنصر <form> كالتالي:

<form action="/my-handling-form-page" method="post">…</form>

يحدد العنصر السابق رسميًا استمارة HTML، ويمثل حاوية تشابه العنصر <select> أو <footer> لكنه مخصص للاستمارات، ويتضمن عدة سمات تحدد سلوك الاستمارة. وتُعد جميع سمات العنصر اختيارية، لكن، ومن الناحية التطبيقية، تُستخدم سميتين على اﻷقل هما action و method:

• تحدد السمة action موقع عنوان URL الذي تُرسل إليه بيانات الاستمارة عند تسليمها.
• تحدد السمة method طلب HTTP المستخدم في إرسال البيانات ( get أو post عادة).

ملاحظة: سنرى طريقة استخدام السمتين السابقتين في مقالات قادمة.

العنصران <textarea> و <input>

إن الاستمارة التي نبنيها هي استمارة اتصال contact form بسيطة تتضمن قسم إدخال البيانات فيه ثلاثة حقول نصية مع عناوين <label> تستخدم للدلالة على ما يجب إدخاله في كل حقل:

• يتكون عنصر إدخال اسم المستخدم من عنصر إدخال نصي وحيد السطر.
• يتكون عنصر إدخال البريد اﻹلكتروني عنصر إدخال من النوع email وهو حقل إدخال نصي يقبل عناوين بريد إلكتروني صحيحة فقط.
• يتكون عنصر إدخال الرسالة على عنصر نصي متعدد اﻷسطر هو <textarea>.

إذًا سنحتاج إلى شيفرة HTML التالية لتنفيذ الاستمارة:

<form action="/my-handling-form-page" method="post">
 <ul>
    <li>
     <label for="name">Name:</label>
     <input type="text" id="name" name="user_name" />
    </li>
    <li>
     <label for="mail">Email:</label>
     <input type="email" id="mail" name="user_email" />
    </li>
    <li>
     <label for="msg">Message:</label>
     <textarea id="msg" name="user_message"></textarea>
    </li>
 </ul>
</form>

حدّث شيفرتك لتكون مماثلة للشيفرة السابقة.

نستخدم عناصر القائمة <li> لهيكلة الشيفرة وتسهيل تنسيق الاستمارة (ما سنراه لاحقًا في هذا المقال). كما وضعنا عنوانًا صريحًا لكل عصر تحكم في الاستمارة لسهولة الاستخدام وسهولة الوصول Accessibility. لاحظ أيضًا استخدام السمة for في جميع العناوين، وتأخذ هذه السمة قيمة المعرّف id لعنصر التحكم المرتبطة به، وهي الطريقة التي تربط فيها عنوانًا بعنصر تحكم.

إن الفائدة من استخدام هذا اﻷسلوب كبيرة، إذ يسمح ذلك للمستخدم بالنقر على العنوان لتفعيل عنصر التحكم المرتبط به، كما تعطي اسمًا مقروءًا بالنسبة لقارئات الشاشة عند مرور مؤشر الفأرة فوقه، وستجد تفاصيل أكثر في مقالات قادمة.

وبالنسبة لعناصر اﻹدخال <input>، ستجد أن السمة type هي الأهم، لأنها تُعرّف الشكل الذي يظهر فيه عنصر اﻹدخال وسلوكه.

• استخدمنا في مقالنا السمة type بالشكل type = text لعنصر اﻹدخال اﻷول وهي القيمة الافتراضية لهذه السمة، وتمثل مربعًا نصيًا بسيطًا من سطر واحد يقبل أية مدخلات نصية.
• واستخدمنا السمة بالشكل type = email لعنصر اﻹدخال الثاني ليكون عنصر إدخال نصي وحيد السطر يقبل عناوين بريد إلكتروني صحيحة كمدخل له. إذ تحوّل هذه القيمة عنصر اﻹدخال النصي إلى نوع من العناصر الذكية القادرة على إجراء تقييم للبيانات المدخلة إليه من قبل المستخدم، كما يسبب عرض لوحة مفاتيح مناسبة أكثر ﻹدخال بريد إلكتروني (في أجهزة الهاتف الذكية) كأن يعرض الرمز @افتراضيًا. وسنتحدث في مقال لاحق عن مفهوم التحقق من صحة البيانات المدخلة.

وأخيرًا وليس أخرًا، لاحظ الاختلاف في الصياغة القواعدية لعنصر اﻹدخال <input> (دون وسم إغلاق) مقارنة بالعنصر <textarea></textarea> (وجود وسم إغلاق)، وهو أحد اﻷمور الغريبة في HTML. وسبب ذلك أن العنصر <input> عنصر فارغ void لا يحتاج إلى وسم إغلاق، بينما العنصر <textarea> ليس فارغًا لهذا يجب إغلاقه. ولهذا اﻷمر تأثيره على نواحي خاصة في هيكلة الاستمارة، إذ علينا في حالة عنصر اﻹدخال استخدام السمة value لتقديم نص افتراضي داخل العنصر:

<input type="text" value="by default this element is filled with this text" />

بينما إن أردت وضع نص افتراضي داخل العنصر <textarea> سيكون ذلك بين وسمي البداية والنهاية:

<textarea>
by default this element is filled with this text
</textarea>

العنصر <button>

نحتاج إلى الزر <button> في الاستمارة ﻹرسال بيانات المستخدم (أو تسليمها submit) عندما يملأ جميع الحقول المطلوبة. لهذا سنضيف الشيفرة التالية إلى ملف HTML فوق وسم اﻹغلاق <ul/> مباشرة:

<li class="button">
 <button type="submit">Send your message</button>
</li>

يقبل العنصر <button> السمة type أيضًا ولها ثلاثة قيم هي submit, reset, button:

• يؤدي النقر على زر من النوع submit، وهي القيمة الافتراضية للسمة، إلى إرسال بيانات الاستمارة إلى صفحة الويب التي تحددها السمة action للعنصر <form>.
• ويؤدي النقر على زر من النوع reset إلى ضبط قيم عناصر التحكم في الاستمارة إلى القيم الافتراضية مباشرة. ويُعد هذا الأمر ممارسة سيئة من منظور تجربة المستخدم، لهذا عليك تفادي استخدام هذا النوع من الأزرار ما لم يكن لديك سبب وجيه جدًا في استخدامه.
• لا يؤدي النقر على زر من النوع button إلى أي شيء، وقد يبدو هذا اﻷمر بلا معنى لكنه عظيم الفائدة في بناء عناصر تحكم مخصصة، إذ تستطيع تحديد وظيفة هذه الأزرار باستخدام جافا سكريبت.

ملاحظة: بإمكانك استخدام عنصر اﻹدخال <input> مع السمة type ﻹنشاء زر مثل <'input type = 'submit>، لكن لا يمكن إضافة سوى محتوى نصي إلى عنوان الزر، بينما يتيح لك العنصر <button> إضافة محتوى معقد إلى الزر كالصور مثلًا.

الخلاصة

قدمنا في مقال اليوم لأحد أهم عناصر صفحات الويب وهي الاستمارات forms، وألقينا نظرة عامة على مختلف عناصر التحكم في استمارات الويب مثل الحقول النصية والقوائم المنسدلة والأزرار، وسنتابع في المقال التالي تنسيق هذه الاستمارة ونوضح طريقة تسليم بياناتها للخادم، كما سنشرح في مقالات تالية المزيد من الأمور المتعلقة باستمارات الويب مثل التحقق من صحة مدخلاتها والاعتبارات اﻷمنية المرتبطة بإرسال هذه البيانات للخادم.

ترجمة -وبتصرف- لمقال: Web form building blocks ومقال: Your first form

اقرأ أيضًا

• النماذج (Forms) في HTML5
• استخدام نماذج الويب والتحقق منها في فلاسك باستخدام الإضافة Flask-WTF
• العمل مع الاستمارات Forms في تطبيقات جانغو
• الأزرار والأيقونات والنماذج في إطار العمل Bootstrap

لقد غطينا في المقال السابق معالجة مشاكل سهولة الوصول Accessibility الشائعة للتوافق مع المتصفحات أهم أفكار سهولة الوصول الخاصة بتقنيات الويب المختلفة بما في ذلك بعض تقنيات الاختبار مثل التنقل باستخدام لوحة المفاتيح وأدوات فحص تباين الألوان، وسنلقي نظرةً الآن على الأدوات الأخرى التي يمكنك الاستفادة منها عند إجراء اختبار سهولة الوصول.

أدوات التدقيق Auditing Tools

هناك عدد من أدوات التدقيق المتاحة التي يمكنك استخدامها في صفحات الويب، حيث ستلقي هذه الأدوات نظرةً على الصفحات وتعيد قائمةً بمشاكل سهولة الوصول الموجودة فيها، ومن هذه الأدوات ما يلي:

• Wave: تُعَدّ أداةً جيدةً لاختبار سهولة الوصول عبر الإنترنت، حيث تأخذ عنوان ويب وتعيد عرضًا توضيحيًا مفيدًا لتلك الصفحة مع إبراز مشاكل سهولة الوصول.
• Tenon: تُعَدّ أداةً جيدةً أخرى عبر الإنترنت تراجِع الشيفرة البرمجية من عنوان URL المُقدَّم وتعرض نتائجًا عن أخطاء سهولة الوصول بما في ذلك المقاييس والأخطاء المحددة باستخدام معايير WCAG التي تؤثر عليها والإصلاحات المقترحة، ولكنها تتطلب تسجيلًا تجريبيًا مجانيًا لعرض النتائج.
• tota11y: تُعَدّ أداةً سهولة وصول من Khan Academy تتخذ شكل مكتبة جافاسكربت التي ترفقها مع صفحتك لتوفير عدد من أدوات سهولة الوصول.

لنلقِ نظرةً على مثال باستخدام أداة Wave:

1. انتقل إلى صفحة Wave الرئيسية.
2. أدخِل عنوان URL الخاص بالمثال bad-semantics.html في مربع إدخال النص بالقرب من أعلى الصفحة، ثم اضغط على مفتاح Enter أو انقر/اضغط على السهم في أقصى يمين مربع الإدخال.
3. يجب أن يستجيب الموقع مع إعطاء وصف بمشاكل سهولة الوصول، وانقر على الرموز المعروضة لمعرفة المزيد من المعلومات حول كلٍّ من المشاكل التي حددها تقييم أداة Wave.

ملاحظة: لا تُعَدّ هذه الأدوات جيدةً بما يكفي لحل جميع مشاكل سهولة الوصول، لذا ستحتاج إلى مزيج من المعرفة والخبرة واختبار المستخدِمين وغير ذلك للحصول على صورة كاملة.

أدوات الاختبارات الآلية

تذهب أداة Deque's aXe إلى أبعد قليلًا من أدوات التدقيق التي ذكرناها سابقًا، إذ تفحص الصفحات وتعيد أخطاء سهولة الوصول، كما يُحتمَل أن يكون شكلها الأكثر فائدةً هو إضافات المتصفح التالية:

• aXe للمتصفح Chrome.
• aXe للمتصفح Firefox.

تضيف هذه الإضافات تبويب سهولة الوصول "Accessibility" إلى أدوات المطور في المتصفح، وقد ثبّتنا إصدار Firefox مثلًا، ثم استخدمناه لتدقيق المثال bad-table.html، وحصلنا على النتائج التالية:

كما يمكن تثبيت الأداة aXe باستخدام npm ويمكن دمجها مع مشغّلات المهام مثل Grunt و Gulp وأطر العمل الآلية مثل Selenium و Cucumber وأطر اختبار الوحدات مثل Jasmine.

قارئات الشاشة

يجب بالتأكيد إجراء الاختبار باستخدام قارئات الشاشة لتعتاد على كيفية استخدام الأشخاص الكفيفين للويب، ويتوفر عدد من قارئات الشاشة مثل:

• بعض المنتجات التجارية المدفوعة مثل JAWS و Window Eyes (لنظام Windows).
• بعض المنتجات المجانية مثل NVDA (لنظام Windows) و ChromeVox (للمتصفح Chrome ونظامَي Windows و Mac OS X) و Orca (لنظام لينكس Linux).
• بعض المنتجات المدمَجة مع نظام التشغيل مثل VoiceOver (على نظام Mac OS X و iOS) و ChromeVox (على أجهزة Chromebook) و TalkBack (على نظام Android).

تُعَدّ قارئات الشاشة عمومًا تطبيقات منفصلةً تعمل على نظام التشغيل المضيف ولا يمكنها قراءة صفحات الويب فحسب، وإنما يمكنها قراءة النصوص في التطبيقات الأخرى، ويمكن أن يكون بعضها إضافةً لمتصفح مثل ChromeVox، وتتصرف قارئات الشاشة بطرق مختلفة قليلًا ولديها عناصر تحكم مختلفة، لذا يجب الرجوع إلى الوثائق الخاصة بقارئ الشاشة الذي اخترته للحصول على جميع التفاصيل، ولكن يمكن القول بأن التفاصيل الأساسية لطريقة عملها واحدة.

لنطبّق بعض الاختبارات باستخدام بعض قارئات الشاشة المختلفة لإعطائك فكرةً عامةً عن كيفية عملها وكيفية الاختبار باستخدامها.

إضافة: توفر منظمة WebAIM معلومات دورية مفيدة حول التصميم الأمثل لقارئات الشاشة وتحقيق التوافقية معها بالإضافة إلى معلومات موسعة حول عن استخداماتها وما الحلول التي تتلاءم معها وبعض الإحصائيات المفيدة عنها.

قارئ الشاشة VoiceOver

يأتي قارئ الشاشة VoiceOver -أو VO اختصارًا- مجانًا مع جهاز Mac أو iPhone أو iPad، لذا فهو مفيد للاختبار على الحاسوب أو الهاتف المحمول إذا أردت استخدام منتجات Apple، إذ سنختبره على نظام Mac OS X على جهاز MacBook Pro.

يمكنك تشغيل هذا البرنامج من خلال الضغط على الاختصار Cmd + F5، فإذا لم تستخدِم VO سابقًا، فستظهر شاشة ترحيب حيث يمكنك اختيار بدء تشغيل VO أو عدم تشغيله، وتشغيل برنامج تعليمي مفيد إلى حد ما لمعرفة كيفية استخدامه، ويمكنك إيقاف تشغيله من خلال الضغط على الاختصار Cmd + F5 مرةً أخرى.

ستبدو الشاشة نفسها عند تشغيل VO، ولكنك سترى مربعًا أسودًا في الجزء السفلي الأيسر من الشاشة يحتوي على معلومات حول ما هو مُحدَّد حاليًا، كما سيُميَّز التحديد الحالي بحدود سوداء، ويُعرَف هذا التمييز بمؤشر VO.

ستستفيد كثيرًا من معدِّل VO لاستخدام قارئ الشاشة VO، إذ يُعَدّ المعدِّل Modifier مفتاحًا أو مجموعة مفاتيح يجب الضغط عليها بالإضافة إلى اختصارات VO من لوحة المفاتيح الفعلية لجعلها تعمل، كما يُعَدّ استخدام المعدل بهذه الطريقة أمرًا شائعًا مع قارئات الشاشة من أجل ألّا تتعارض أوامرها مع الأوامر الأخرى، ويمكن أن يكون المعدِّل في حالة VO المفتاح CapsLock أو Ctrl + Option.

يحتوي قارئ الشاشة VO على العديد من أوامر لوحة المفاتيح، ولكننا لن ندرجها جميعًا هنا، حيث ستجد أوامر أو اختصارات لوحة المفاتيح الأساسية الخاصة بقارئ الشاشة VO والتي ستحتاجها لاختبار صفحة الويب في الجدول التالي، إذ يعني الاختصار "VO" معدِّل VoiceOver في اختصارات لوحة المفاتيح:

يمكن أن تكون هذه الأوامر كثيرةً، لكنها ليست سيئةً عندما تعتاد عليها، إذ يعطيك قارئ الشاشة VO بانتظام تذكيرات بالأوامر التي يجب استخدامها في أماكن معينة.

قارئ الشاشة NVDA

يعمل قارئ الشاشة NVDA في نظام ويندوز فقط ويجب تثبيته كما يلي:

1. نزّله من موقع nvaccess، حيث يمكنك اختيار التبرع أو تنزيله مجانًا، ويجب أن تضع عنوان بريدك الإلكتروني قبل أن تتمكّن من تنزيله.
2. ثبّته بعد تنزيله من خلال النقر نقرًا مزدوجًا على برنامج التثبيت واقبل الترخيص واتبع التعليمات.
3. يمكنك بدء تشغيل NVDA من خلال النقر نقرًا مزدوجًا على ملف أو اختصار البرنامج أو استخدام اختصار لوحة المفاتيح Ctrl + Alt + N. سترى مربع حوار ترحيب NVDA عند بدء تشغيله، ويمكنك هنا الاختيار من بين عدة خيارات، ثم الضغط على زر "موافق OK" للبدء بالعمل.

سيصبح NVDA نشطًا الآن على حاسوبك.

ستستفيد كثيرًا من معدِّل NVDA لاستخدام NVDA، وهو مفتاح يجب الضغط عليه بالإضافة إلى اختصارات NVDA من لوحة المفاتيح الفعلية لتشغيله، كما يُعَدّ استخدام مثل هذا المعدِّل أمرًا شائعًا مع قارئات الشاشة بحيث لا تتعارض أوامرها مع الأوامر الأخرى، كما يمكن أن يكون المُعدِّل في حالة NVDA إما المفتاح Insert (الحالة الافتراضية) أو المفتاح CapsLock (يمكن اختياره من خلال تحديد مربع الاختيار الأول في مربع حوار ترحيب NVDA قبل الضغط على زر موافق).

ملاحظة: يُعَدّ NVDA أدق من VoiceOver من حيث كيفية تمييز مكان التحديد وما يفعله، فإذا تنقّلت عبر العناوين والقوائم وما إلى ذلك، فستُميَّز العناصر التي حدّدتها بإطار دقيق، ولكن ليس ذلك هو الحال دائمًا، فإذا ضعت تمامًا، فيمكنك الضغط على الاختصار Ctrl + F5 لتحديث الصفحة الحالية والبدء من الأعلى مرةً أخرى.

يحتوي قارئ الشاشة NVDA على العديد من أوامر لوحة المفاتيح التي لن نذكرها جميعًا هنا، وإنما سنذكر فقط الأوامر الأساسية التي ستحتاجها لاختبار صفحة الويب في الجدول التالي، حيث يعني الاختصار "NVDA" معدِّل NVDA في اختصارات لوحة المفاتيح:

اختبار قارئ الشاشة

اعتدت الآن على استخدام قارئات الشاشة، لذا يمكنك استخدامه لإجراء بعض اختبارات سهولة الوصول السريعة للحصول على فكرة عن كيفية تعامل قارئات الشاشة مع ميزات صفحات الويب الجيدة والسيئة:

• اطّلع على المثال good-semantics.html ولاحظ كيف يعثر قارئ الشاشة على العناوين وكيف تكون متاحةً للاستخدام للتنقل، و اطّلع على المثال bad-semantics.html، ولاحظ كيف لا يحصل قارئ الشاشة على أيّ من هذه المعلومات، وتخيل كم سيكون هذا مزعجًا عند محاولة التنقل في صفحة نصية طويلة.
• اطّلع على المثال good-links.html، ولاحظ كيف تبدو منطقيةً عند عرضها، وليس ذلك هو الحال مع المثال bad-links.html فجميع عباراته مجرد عبارات "انقر هنا".
• اطّلع على المثال good-form.html ولاحظ كيف أنّ حقول إدخال النموذج موصوفة باستخدام تسمياتها لأننا استخدمنا عناصر <label> بصورة صحيحة، في حين ستحصل في المثال bad-form.html على تسمية غير مفيدة.
• اطّلع على المثال punk-bands-complete.html وشاهد كيف يمكن لقارئ الشاشة ربط أعمدة وصفوف المحتوى وقراءتها معًا لأننا حددنا العناوين بصورة صحيحة، في حين لا يمكن ربط الخلايا على الإطلاق في المثال bad-table.html، ولاحظ أنّ قارئ الشاشة NVDA يبدو أنه يتصرف بغرابة بعض الشيء عندما يكون لديك جدول واحد فقط في الصفحة، لذا يمكنك تجربة صفحة اختبار جدول WebAIM بدلًا من ذلك.
• ألقِ نظرةً على مثال WAI-ARIA Live Regions الذي رأيناه سابقًا، ولاحظ كيف سيستمر قارئ الشاشة في قراءة القسم المُحدَّث باستمرار عند تحديثه.

اختبار المستخدم

لا يمكنك الاعتماد على الأدوات الآلية وحدها لتحديد مشاكل سهولة الوصول على موقعك، إذ يُفضَّل تضمين بعض مجموعات مستخدمي سهولة الوصول إذا كان ذلك ممكنًا عند وضع خطة الاختبار، لذا حاول إشراك بعض مستخدِمِي قارئ الشاشة وبعض مستخدِمِي لوحة المفاتيح فقط وبعض المستخدِمين الصُم ومجموعات أخرى بما يناسب متطلباتك.

قائمة مراجعة اختبار سهولة الوصول

توفر القائمة التالية قائمة مراجعة يمكنك اتباعها للتأكد من أنك أجريت اختبار سهولة الوصول الموصَى به لمشروعك:

• تأكد من أنّ شيفرة HTML صحيحة دلاليًا قدر الإمكان، إذ يُعَدّ التحقق من صحتها بدايةً جيدةً، كما هو الحال مع استخدام أداة تدقيق.
• تأكد من أنّ المحتوى يبدو منطقيًا عند إيقاف تشغيل شيفرة CSS.
• تأكد من أنّ وظائفك تشمل مستخدِمِي لوحة المفاتيح واختبرها باستخدام مفاتيح Tab أو Return أو Enter.
• تأكد من أنّ المحتوى غير النصي يحتوي على نصوص بديلة، إذ تُعَدّ أداة التدقيق مفيدةً في اكتشاف مثل هذه المشاكل.
• تأكد من أنّ تباين ألوان موقعك مقبول باستخدام أداة فحص مناسبة.
• تأكد من أنّ المحتوى المخفي مرئي لقارئات الشاشة.
• تأكد من أنّ الوظائف قابلة للاستخدام بدون شيفرة جافاسكربت حيثما أمكن ذلك.
• استخدم مواصفات ARIA لتحسين سهولة الوصول في المكان المناسب.
• شغّل موقعك من خلال أداة تدقيق.
• اختبره باستخدام قارئ الشاشة.
• ضمّن سياسة أو بيان سهولة وصول في مكان ما يمكن العثور عليه على موقعك لتقول ما فعلته.

العثور عن المساعدة

هناك العديد من المشاكل الأخرى التي ستواجهها مع سهولة الوصول، ولكن أهم شيء يجب معرفته هو كيفية العثور على إجابات عبر الإنترنت، ويمكنك الاعتماد على قسم الأسئلة والأجوبة في أكاديمية حسوب للحصول على بعض المساعدة والنصائح الجيدة من مبرمجين أكفاء.

الخلاصة

اطلعنا على كيفية اختبار مشاكل سهولة الوصول الرئيسية التي يمكن أن تواجهها وتعرفنا في هذا المقال كيفية التغلب عليها عبر عرض أهم الأدوات اللازمة لتحقيق سهولة الوصول، وسنلقي نظرةً في المقال التالي على اكتشاف دعم المتصفح للميزات بمزيد من التفصيل.

ترجمة -وبتصرُّف- لقسم من المقال Handling common accessibility problems.

اقرأ أيضًا

• المقال السابق: معالجة مشاكل سهولة الوصول Accessibility الشائعة للتوافق مع المتصفحات
• الدلالات المضمنة لعناصر صفحة الويب ودورها في تعزيز سهولة الوصول
• التحقق من سهولة الوصول لصفحات الويب

سنوجّه اهتمامنا في هذا المقال إلى سهولة الوصول أو سهولة الوصول Accessibility -أي شمولية كل المستخدمين وتسهيل وصولهم واستخدامهم الموقع بمن فيهم ذوي الاحتياجات الخاصة- وتوفير معلومات حول المشاكل الشائعة وكيفية إجراء اختبار بسيط والاستفادة من أدوات التدقيق أو الاختبارات الآلي للعثور على مشاكل سهولة الوصول للتوافق مع المتصفحات Cross Browser.

• المتطلبات الأساسية: يجب أن تتعلم أساسيات لغات HTML وCSS وجافاسكربت JavaScript، وأن يكون لديك فكرة عن المبادئ عالية المستوى لاختبار التوافق مع المتصفحات.
• الهدف: القدرة على تشخيص مشاكل سهولة الوصول الشائعة واستخدام الأدوات والتقنيات المناسبة لإصلاحها.

ما هي سهولة الوصول Accessibility؟

يفكر معظم الناس مباشرةً عندما نقول سهولة الوصول في سياق تقنيات الويب في التأكد من أن مواقع أو تطبيقات الويب يمكن أن يستخدمها الأشخاص ذوي الاحتياجات الخاصة بسهولة مثل:

• الأشخاص المعاقون بصريًا الذين يستخدِمون قارئات الشاشة أو التكبير أو التقريب للوصول إلى النص.
• الأشخاص الذين يعانون من إعاقات في الوظائف الحركية ويستخدِمون لوحة المفاتيح (أو ميزات أخرى بدون استخدام الفأرة) لتنشيط وظائف موقع الويب.
• الأشخاص الذين يعانون من إعاقات سمعية والذين يعتمدون على التسميات أو العناوين التوضيحية أو البدائل النصية الأخرى للمحتوى الصوتي أو الفيديو.

لكن من الخطأ القول أنّ سهولة الوصول تتعلق بالإعاقات فقط، فالهدف منها هو جعل مواقع أو تطبيقات الويب يمكن أن يستخدِمها أكبر عدد ممكن من الأشخاص ضمن أكبر عدد ممكن من السياقات، وليس فقط هؤلاء المستخدِمين الذين يستخدِمون حواسيب عالية المواصفات مثل:

• مستخدِمو الأجهزة المحمولة.
• مستخدِمو أجهزة تصفح بديلة مثل أجهزة التلفاز والساعات وما إلى ذلك.
• مستخدِمو الأجهزة القديمة التي يمكن ألّا تحتوي على أحدث المتصفحات.
• مستخدِمو الأجهزة ذات المواصفات الأقل والتي يمكن أن تحتوي على معالجات بطيئة.

يتأكد اختبار التوافق مع المتصفحات Cross Browser Testing من أنّ أكبر عدد ممكن من الأشخاص يستخدِمون موقعك، ويدور هذا المقال بأكمله حول سهولة الوصول، إذ سنغطي التوافق مع المتصفحات المختلفة ومشاكل الاختبار التي تواجه الأشخاص ذوي الاحتياجات الخاصة وكيفية استخدامهم للويب، وتحدثنا سابقًا عن مجالات أخرى مثل التصميم المتجاوب مع الشاشات والأداء.

ملاحظة: لا تُعَدّ سهولة الوصول ناجحةً بنسبة 100% مثل العديد من الأشياء الأخرى في عملية تطوير الويب، فمن المستحيل إلى حد كبير تحقيق سهولة الوصول بنسبة 100% لجميع المحتويات خاصةً وأنّ المواقع تصبح أكثر تعقيدًا، وإنما يتعلق الأمر ببذل جهد أكبر لجعل أكبر قدر ممكن من محتواك في متناول أكبر عدد ممكن من الأشخاص من خلال استخدام التكويد الدفاعي Defensive Coding والالتزام بأفضل الممارسات.

مشاكل سهولة الوصول الشائعة

سنشرح في هذا القسم بالتفصيل بعض مشاكل سهولة الوصول الرئيسية في صفحات الويب والمتصلة بتقنيات محددة إلى جانب أفضل الممارسات التي يجب اتباعها وبعض الاختبارات السريعة التي يمكنك إجراؤها لمعرفة سير موقعك في الاتجاه الصحيح.

ملاحظة: تُعَدّ سهولة الوصول أمرًا أخلاقيًا يجب تطبيقه، كما تُعَدّ جيدة للأعمال، إذ يمثِّل عددُ المستخدِمين ذوي الاحتياجات الخاصة والمستخدِمين على الأجهزة المحمولة وغيرهم شرائحًا سوقيةً مهمةً، لكنها تُعَدّ مطلبًا قانونيًا في أجزاء كثيرة من العالم لإنشاء محتوى ويب يمكن أن يصل إليه الأشخاص ذوي الاحتياجات الخاصة.

سهولة الوصول في شيفرة HTML

يمكن الوصول إلى شيفرة HTML الدلالية حيث تُستخدَم العناصر لغرضها الصحيح مباشرةً، إذ يمكن أن يقرأ المشاهدون المبصرون هذا المحتوى بشرط ألا تفعل شيئًا غير منطقي مثل جعل حجم النص صغيرًا جدًا أو إخفائه باستخدام لغة CSS، ويمكن أن تقرأها التقنيات المساعدة مثل قارئات الشاشة -أي التطبيقات التي تقرأ حرفيًا صفحة الويب لمستخدميها- مع مزايا أخرى.

البنية الدلالية

أهم مكسب في لغة HTML الدلالية هو استخدام عناوين وفقرات لمحتواك، لأن مستخدِمي قارئات الشاشة يميلون إلى استخدام عناوين المستند بوصفها علامات إرشاديةً للعثور على المحتوى الذي يحتاجون إليه بسرعة أكبر، فإذا لم يتضمن محتواك على عناوين، فكل ما سيحصلون عليه هو جدار نصي ضخم بدون علامات إرشادية للعثور على أيّ شيء، وإليك أمثلة على بينة شيفرة HTML السيئة أولًا:

<font size="7">My heading</font>
<br><br>
This is the first section of my document.
<br><br>
I'll add another paragraph here too.
<br><br>
<font size="5">My subheading</font>
<br><br>
This is the first subsection of my document. I'd love people to be able to find this content!
<br><br>
<font size="5">My 2nd subheading</font>
<br><br>
This is the second subsection of my content. I think it is more interesting than the last one.

ثم إليك الجيدة:

<h1>My heading</h1>

<p>This is the first section of my document.</p>

<p>I'll add another paragraph here too.</p>

<h2>My subheading</h2>

<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>

<h2>My 2nd subheading</h2>

<p>This is the second subsection of my content. I think it is more interesting than the last one.</p>

كما يجب أن يكون المحتوى منطقيًا بترتيب المصدر، بحيث يمكنك دائمًا وضعه في المكان الذي تريد استخدام شيفرة CSS فيه لاحقًا، ولكن يجب أن يكون ترتيب المصدر صحيحًا في البداية.

يمكنك إيقاف تشغيل شيفرة CSS الخاصة بالموقع للاختبار ومعرفة مدى سهولة فهمه بدون هذه الشيفرة، إذ يمكنك تطبيق هذا الاختبار يدويًا من خلال إزالة شيفرة CSS من شيفرتك البرمجية، ولكن أسهل طريقة هي استخدام ميزات المتصفح، فمثلًا:

• في فايرفوكس Firefox: حدِّد الخيار عرض View ثم تنسيق الصفحة Page Style ثم بلا تنسيق No Style من القائمة الرئيسية.
• في سفاري Safari: حدِّد الخيار تطوير Develop ثم إلغاء تفعيل التنسيق Disable Styles من القائمة الرئيسية، حيث يمكن تفعيل قائمة التطوير Develop من خلال تحديد الخيار Safari ثم تفضيلات Preferences ثم خيارات متقدمة Advanced ثم إظهار Show Develop من شريط القوائم.
• في كروم Chrome: ثبّت الإضافة Web Developer Toolbar، ثم أعد تشغيل المتصفح، وانقر على الرمز الذي يشبه الترس الظاهر، ثم حدِّد الخيار CSS ثم إلغاء تفعيل جميع التنسيقات Disable All Styles.
• في إيدج Edge: حدِّد الخيار عرض View ثم التنسيق Style ثم بلا تنسيق No Style من القائمة الرئيسية.

لمزيد من التفاصيل حول الدلالية في HTML، ارجع إلى مقال مدخل إلى مواصفات ARIA: إعطاء عناصر HTML دلالات خاصة لتسهيل الوصول.

سهولة الوصول في استخدام لوحة المفاتيح الأصيلة

يمكن تحديد بعض ميزات HTML باستخدام لوحة المفاتيح فقط، حيث يُعَدّ ذلك السلوك الافتراضي المتاح منذ الأيام الأولى للويب، كما أنّ العناصر التي لديها هذه الإمكانية هي العناصر الشائعة التي تسمح للمستخدِم بالتفاعل مع صفحات الويب والروابط والأزرار <button> وعناصر النموذج مثل <input>.

يمكنك تجربة ذلك باستخدام المثال native-keyboard-accessibility.html (اطّلع على شيفرته البرمجية)، لذا افتح هذا المثال في تبويب جديد، وحاول الضغط على مفتاح Tab، ويجب أن ترى بعد بضع ضغطات أنّ تركيز التبويب ينتقل بين العناصر المختلفة القابلة للتركيز، وتُعطَى العناصر المركَّزة تنسيقًا افتراضيًا مميزًا في كل متصفح (يختلف قليلًا من متصفح إلى آخر) بحيث يمكنك تحديد العنصر الذي يُركَّز عليه.

ملاحظة: في متصفح Firefox يمكنك تفعيل خيار يسمى show tapping order أو ما شابه من ضمن حزمة خيارات سهولة الوصول accessibility لإظهار ترتيب العناصر عند الضغط على مفتاح Tab.

يمكنك بعد ذلك الضغط على زر Enter أو Return لاتباع رابط مُركَّز أو الضغط على زر (ضمّنا شيفرة جافاسكربت لجعل الأزرار تعطي رسالة تنبيه) أو البدء في الكتابة لإدخال نص في حقل الإدخال، كما أنّ عناصر النموذج الأخرى لها عناصر تحكم مختلفة، إذ يمكن عرض خيارات العنصر <select> مثلًا والتبديل بينها باستخدام مفتاحَي الأسهم للأعلى وللأسفل.

لاحظ أن المتصفحات يمكن أن تحتوي على خيارات تحكم مختلفة في لوحة المفاتيح، إذ تتبع معظم المتصفحات الحديثة نمط الضغط على مفتاح Tab الموضح سابقًا، كما يمكنك الضغط على الاختصار Shift + Tab للانتقال إلى الخلف بين العناصر القابلة للتركيز، ولكن لبعض المتصفحات خصائصها الخاصة مثل:

• لا يستخدِم متصفح Firefox لنظام التشغيل Mac مفتاح Tab افتراضيًا، لذلك يمكن تشغيله من خلال الانتقال إلى قائمة التفضيلات Preferences ثم خيارات متقدمة Advanced ثم عام General، ثم إلغاء تحديد الخيار "استخدم دائمًا مفاتيح المؤشر للتنقل بين الصفحات Always use the cursor keys to navigate within pages"، كما يجب بعد ذلك فتح تطبيق تفضيلاتك في نظام Mac ثم الانتقال إلى لوحة المفاتيح Keyboard ثم الاختصارات Shortcuts، ثم تحديد زر الاختيار "جميع عناصر التحكم All Controls".
• لا يسمح لك المتصفح Safari باستخدام مفتاح Tab للتنقل بين الروابط افتراضيًا، ولكن يمكن تفعيل ذلك من خلال فتح تفضيلات Safari، ثم الانتقال إلى الخيارات المتقدمة وتحديد مربع الاختيار "الضغط على مفتاح Tab لتمييز كل عنصر على صفحة الويب Press Tab to highlight each item on a webpage".

تحذير: يجب إجراء هذا النوع من الاختبارات أو المراجعات على أيّ صفحة جديدة تكتبها، إذ يجب التأكد من أنّ لوحة المفاتيح تصل إلى وظيفة معينة، وأنّ ترتيب استخدام مفتاح Tab يوفر مسار تنقل جيد عبر المستند.

يسلّط هذا المثال الضوء على أهمية استخدام العنصر الدلالي الصحيح مع الوظيفة الصحيحة، ويمكن تصميم أيّ عنصر ليبدو مثل رابط أو زر باستخدام لغة CSS، وأن يتصرف مثل رابط أو زر باستخدام لغة جافاسكربت، لكنها لن تكون روابطًا أو أزرارًا في الواقع، وستفقد كثيرًا من سهولة الوصول التي تمنحك إياها هذه العناصر مجانًا، لذا يمكنك عدم تطبيق ذلك إذا كان بإمكانك تجنبه.

يمكنك التحكم في كيفية ظهور العناصر القابلة للتركيز عند التركيز عليها باستخدام الصنف الوهمي ‎:focus، إذ تُعَدّ مضاعفة تنسيقات التركيز Focus والتمرير Hover فكرةً جيدةً، وبالتالي يحصل المستخدِمون على الدليل المرئي بأن عنصر التحكم سيفعل شيئًا ما عند تنشيطه سواءً كانوا يستخدِمون الفأرة أو لوحة المفاتيح.

a:hover,
input:hover,
button:hover,
select:hover,
a:focus,
input:focus,
button:focus,
select:focus {
  font-weight: bold;
}

ملاحظة: إذا قررت إزالة تنسيق التركيز الافتراضي باستخدام شيفرة CSS، فتأكد من استبداله بشيء آخر يناسب تصميمك بصورة أفضل، لإنها أداة سهولة وصول قيّمة للغاية ولا يجب إزالتها.

بناء لوحة مفاتيح سهلة الوصول

لا يمكن في بعض الأحيان تجنب فقدان سهولة الوصول إلى لوحة المفاتيح، فلنفترض أنك حصلت على موقع لا تكون فيه الدلالات جيدةً جدًا مثل استخدام نظام CMS سيء ينشئ أزرارًا باستخدام عناصر <div>، أو أنك تستخدِم عنصر تحكم معقّد لا يحتوي على سهولة وصول مبنية مسبقًا للوصول إلى لوحة المفاتيح مثل العنصر <video>، ولكن يُعَدّ متصفح أوبرا Opera هو المتصفح الوحيد الذي يسمح لك بالانتقال بين عناصر تحكم المتصفح الافتراضية الخاصة بالعنصر <video> باستخدام مفتاح Tab، ولديك عدد قليل من الخيارات لعناصر التحكم تلك مثل:

1. أنشئ عناصر تحكم مخصَّصة باستخدام عناصر الأزرار <button> -التي يمكننا الانتقال إليها افتراضيًا باستخدام مفتاح Tab- وباستخدام شيفرة جافاسكربت لتوصيل وظائفها.
2. أنشئ اختصارات لوحة المفاتيح باستخدام جافاسكربت، بحيث يمكن تنشيط الوظيفة عند الضغط على مفاتيح معينة على لوحة المفاتيح.
3. استخدِم بعض الأساليب لتزييف سلوك الأزرار، واطّلع على المثال fake-div-buttons.html وعلى شيفرته البرمجية، إذ أعطينا في هذا المثال أزرارَ العنصر <div> المزيفة القدرةَ على التركيز -باستخدام مفتاح Tab مثلًا- من خلال إعطاء كل زر السمة tabindex="0"‎، مما يسمح لنا بالانتقال إلى الأزرار باستخدام مفتاح Tab، ولكن ليس لتنشيطها عبر مفتاح Enter أو Return، إذ يجب في هذه الحالة إضافة الجزء التالي من شيفرة جافاسكربت:

document.onkeydown = function(e) {
  if(e.keyCode === 13) { // ‫مفتاح Enter أو Return
    document.activeElement.onclick(e);
  }
};

أضفنا هنا مستمعًا إلى الكائن document لاكتشاف وقت الضغط على زر من لوحة المفاتيح، ويمكن التحقق من الزر المضغوط باستخدام الخاصية keyCode الخاصة بكائن الحدث، فإذا كانت الخاصية keyCode هي الخاصية التي تتطابق مع مفتاح Return أو Enter، فسنشغّل الدالة المخزنة في معالج الحدث onclick الخاص بالزر باستخدام document.activeElement.onclick()‎، وتعطينا الخاصية activeElement العنصرَ المُركَّز عليه في الصفحة حاليًا.

ملاحظة: لن تعمل هذه التقنية إلا إذا ضبطتَ معالجات الأحداث الأصلية باستخدام خاصيات معالج الأحداث مثل onclick، إذ لن تعمل الخاصية addEventListener، وستظهر كثير من المشاكل الإضافية عند إعادة بناء الوظائف، ولا بدّ أن تكون هناك مشاكل أخرى معها، لذا يُفضَّل استخدام العنصر المناسب مع الوظيفة المناسبة من البداية.

النصوص البديلة

تُعَدّ النصوص البديلة مهمةً جدًا لسهولة الوصول فإذا عانى المستخدِم من إعاقة بصرية أو سمعية تمنعه من رؤية أو سماع بعض المحتوى، فهذه مشكلة، وأبسط نص بديل متاح هو السمة alt والتي يجب أن نضعها في جميع الصور التي تحتوي على محتوى ذي صلة بالنص البديل، إذ يجب أن تحتوي السمة alt على وصف الصورة الذي ينقل المعنى والمحتوى بنجاح على الصفحة لتلتقطها قارئات الشاشة وتقرأها للمستخدِم، كما يمكن اختبار النص البديل المفقود بعدة طرق مثل استخدام أدوات تدقيق سهولة الوصول Accessibility Auditing.

يُعَدّ النص البديل أكثر تعقيدًا إلى حد ما للمحتوى الصوتي والفيديو، فهناك طريقة لتحديد مسارات النص -مثل النصوص التوضيحية Subtitles- وعرضها عند تشغيل الفيديو بصيغة العنصر <track> وبتنسيق WebVTT، كما يُعَدّ توافق المتصفح مع هذه الميزات جيدًا إلى حد ما، ولكن إذا أردت توفير بدائل نصية للصوت أو دعم المتصفحات القديمة، فيمكن أن يكون عرض نسخة صوتية بسيطة في مكان ما على الصفحة أو على صفحة منفصلة فكرةً جيدةً.

علاقات وسياق العنصر

توجد ميزات معينة وممارسات أفضل في لغة HTML مصمَّمة لتوفير السياق والعلاقات بين العناصر حيث لا توجد طريقة أخرى لذلك، والأمثلة الثلاثة الأكثر شيوعًا لذلك هي الروابط وتسميات أو عناوين Labels النماذج وجداول البيانات.

الفاصل في أن يكون نص الرابط سهل الوصول هو أن يستخدِم مستخدِمو قارئات الشاشة ميزةً شائعةً حيث يسحبون قائمةً بجميع الروابط على الصفحة، لذا يجب أن يكون نص الرابط منطقيًا في هذه الحالة، إذ تُعَدّ قائمة الروابط المسماة "انقر هنا" مثلًا سيئةً في تحقيق سهولة الوصول، إذ يُفضَّل أن يكون نص الرابط منطقيًا ضمن السياق وخارجه.

يُعَدّ عنصر النموذج <label> أحد الميزات المركزية التي تجعل النماذج شاملة، وتكمن مشكلة النماذج في أنك بحاجة إلى تسميات <label> توضّح البيانات التي يجب إدخالها في كل حقل إدخال في النموذج، كما يجب تضمين كل تسمية ضمن العنصر <label> لربطها بوضوح بحقل الإدخال المقابل لها في النموذج، إذ يجب أن تتطابق السمة for الخاصة بالعنصر <label> مع قيمة معرّف id عنصر النموذج، وسيكون ذلك منطقيًا حتى لو لم يكن ترتيب المصدر منطقيًا تمامًا.

يمكن كتابة جدول البيانات الأساسي باستخدام توصيف بسيط جدًا (اطلع على المثال bad-table.html مباشرةً وشيفرته البرمجية)، ولكن توجد مشاكل في هذا المثال، إذ لا توجد طريقة لمستخدِم قارئ الشاشة لربط الصفوف أو الأعمدة معًا بوصفها مجموعات من البيانات، لذا يجب معرفة ما هي صفوف العناوين، وما إذا كانت عناوينًا للصفوف أو للأعمدة وما إلى ذلك، إذ لا يمكن تطبيق ذلك إلّا بطريقة مرئية لمثل هذا الجدول.

إذا اطّلعت على المثال punk-bands-complete.html مباشرةً أو اطّلعت على شيفرته البرمجية، فيمكنك رؤية بعض أدوات سهولة الوصول المساعدة مثل عناوين الجدول (العنصر <th> والسمات scope) والعنصر <caption>.

سهولة الوصول في شيفرة CSS

توفّر لغة CSS ميزات سهولة الوصول الأساسية بمقدار أقل بكثير من لغة HTML، ولكن لا تزال بإمكانها إحداث القدر نفسه من الضرر لسهولة الوصول إذا استخدِمت بطريقة غير صحيحة، وإليك بعض النصائح المتعلقة بسهولة الوصول المتضمنة في شيفرة CSS:

• استخدِم العناصر الدلالية الصحيحة لكتابة محتوًى مختلف في شيفرة HTML، فإذا أردت إنشاء تأثير مرئي مختلف، فاستخدم شيفرة CSS دون العبث بعنصر HTML للحصول على الشكل الذي تريده، فإذا أردت نصًا أكبر، فاستخدم الخاصية font-size وليس العنصر <h1>.
• تأكد من أنّ ترتيب المصدر منطقي بدون شيفرة CSS، إذ يمكنك دائمًا استخدام CSS لتنسيق الصفحة بالطريقة التي تريدها بعد ذلك.
• يجب عليك التأكد من أنّ العناصر التفاعلية مثل الأزرار والروابط لها حالات تركيز أو تمرير أو تنشيط مناسبة لإعطاء المستخدِم أدلة مرئية عن وظيفتها، فإذا أزلتَ الإعدادات الافتراضية لأسباب تتعلق بالتنسيق، فتأكد من تضمين بعض التنسيقات البديلة.

الألوان وتباينها

يجب أن تتأكد من أنّ لون النص (المقدمة) متباين جيدًا مع لون الخلفية عند اختيار نظام ألوان موقع الويب، فيمكن أن يكون تصميمك رائعًا، ولكنه ليس جيدًا إذا لم يستطع الأشخاص الذين يعانون من إعاقات بصرية مثل عمى الألوان قراءة محتوى موقعك، لذا استخدِم أداةً مثل الأداة Color Contrast Checker من WebAIM للتحقق مما إذا كان نظام ألوانك متباينًا بدرجة كافية.

لا تعتمد على الألوان وحدها لإظهار الإشارات الدلالية أو المعلومات، لأنها لن تكون مفيدةً لمن لا يستطيعون رؤيتها، لذا ميّز مثلًا حقول النموذج الإلزامية بعلامة النجمة واللون الأحمر بدلًا من تميزها باللون الأحمر فقط.

ملاحظة: تسمح نسبة التباين العالية لأيّ شخص يستخدِم هاتفًا ذكيًا أو جهازًا لوحيًا بقراءة الصفحات بصورة أفضل عندما يكون في بيئة مضاءة مثل ضوء الشمس.

إخفاء المحتوى

هناك العديد من الحالات التي يتطلب فيها التصميم المرئي عدم عرض كل المحتوى دفعةً واحدةً، فلدينا مثلًا ثلاث لوحات من المعلومات في مثال مربع المعلومات المبوب (اطّلع على شيفرته البرمجية)، لكننا نضعها فوق بعضها البعض ونوفّر تبويبات يمكن النقر عليها لإظهار محتواها، ويمكن الوصول إليها من خلال لوحة المفاتيح أو يمكنك استخدام مفتاح Tab و Enter/Return لتحديدها.

لا يهتم مستخدِمو قارئات الشاشة بهذا الشيء، فهم سعداء بالمحتوى طالما أنّ ترتيب المصدر منطقي ويمكنهم الوصول إليه، كما يُنظَر إلى الموضع المطلق Absolute Positioning -كما هو مستخدَم في مثالنا- على أنه أحد أفضل آليات إخفاء محتوى التأثيرات المرئية، لأنه لا يمنع قارئات الشاشة من الوصول إلى هذا المحتوى، ولا يجب من ناحية أخرى استخدام الخاصيتين visibility:hidden و display:none لأنهما تخفيان المحتوى عن قارئات الشاشة ما لم يكن هناك سبب وجيه لإخفاء هذا المحتوى عنها.

مشاكل سهولة الوصول المتعلقة بشيفرة جافاسكربت

تمتلك شيفرة جافاسكربت النوع نفسه من المشاكل التي تواجهها في شيفرة CSS فيما يتعلق بسهولة الوصول، إذ يمكن أن تكون شيفرة جافاسكربت كارثيةً بالنسبة لسهولة الوصول إذا استخدِمت بطريقة سيئة أو مفرطة، وقد أشرنا سابقًا إلى بعض مشاكل سهولة الوصول المتعلقة بشيفرة جافاسكربت خاصةً في شيفرة HTML الدلالية، إذ يجب دائمًا استخدام شيفرة HTML دلالية مناسبة لتنفيذ الوظائف أينما كانت متاحةً مثل استخدام الروابط والأزرار حسب الحاجة، كما لا تُستخدَم عناصر <div> مع شيفرة جافاسكربت لتزييف الوظائف إذا كان ذلك ممكنًا، فهي عرضة للخطأ وتحتاج عملًا أكثر من استخدام الوظائف المجانية التي توفرها شيفرة HTML.

الوظائف البسيطة

يجب أن تعمل الوظائف البسيطة باستخدام شيفرة HTML فقط، إذ يجب استخدام شيفرة جافاسكربت لتحسين الوظائف فقط، وليس لبنائها بالكامل، وتشمل الاستخدامات الجيدة لشيفرة جافاسكربت ما يلي:

• توفير التحقق من صحة النموذج من طرف العميل الذي ينبّه المستخدِمين بالمشاكل المتعلقة بإدخالات النماذج بسرعة دون الحاجة إلى الانتظار حتى يتحقق الخادم من البيانات، فإذا لم يكن ذلك متاحًا، فسيبقى النموذج يعمل بنجاح، ولكن يمكن أن يكون التحقق من صحته أبطأ.
• توفير عناصر تحكم مخصصة لعناصر <video> التي يمكن أن يصل إليها مستخدِمو لوحة المفاتيح فقط، إذ لا يمكن الوصول إلى عناصر التحكم الافتراضية في المتصفح من خلال لوحة المفاتيح في معظم المتصفحات.

يمكن أن تؤدي تطبيقات جافاسكربت الأكثر تعقيدًا إلى حدوث مشاكل في سهولة الوصول، لذا يجب أن تفعل ما بوسعك، فليس معقولًا مثلًا أن تتوقع إنشاء لعبة ثلاثية الأبعاد معقدة مكتوبة باستخدام واجهة WebGL يمكن أن يصل إليها شخص كفيف بنسبة 100%، ولكن يمكنك تنفيذ عناصر تحكم لوحة المفاتيح بحيث يمكن أن يستخدمها المستخدمِون الذين لا يستعملون الفأرة، وجعل نظام الألوان متباينًا بدرجة كافية ليتمكّن الأشخاص الذين يعانون من عمى الألوان من الوصول إليها.

الوظائف المعقدة

تُعَدّ التطبيقات المعقدة التي تتضمن عناصر تحكم معقدة في النماذج (مثل عنصر اختيار التاريخ Date Pickers) وتتضمن المحتوى الديناميكي الذي يُحدَّث بصورة متكررة ومتزايدة أحدَ المجالات الرئيسية التي تمثِّل مشكلة لسهولة الوصول.

تمثِّل عناصر التحكم المعقدة غير الأصيلة في النموذج مشكلةً لأنها تتضمّن الكثير من عناصر <div> المتداخلة، ولا يعرف المتصفح ما يجب فعله بها افتراضيًا، فإذا أنشأت عناصر التحكم المعقدة بنفسك، فيجب التأكد من أنه يمكن الوصول إليها من خلال لوحة المفاتيح، وإذا استخدَمت إطار عمل خارجي، فراجع بعناية الخيارات المتاحة لمعرفة مدى إمكانية الوصول إليها قبل المتابعة، ويبدو إطار عمل Bootstrap على سبيل المثال جيدًا إلى حد ما لعملية سهولة الوصول بالرغم من بعض مشاكله التي تتعلق بتباين الألوان بصورة أساسية.

يمكن أن يمثل المحتوى الديناميكي المُحدَّث بانتظام مشكلةً لأن مستخدِمي قارئات الشاشة يمكن أن يفوتهم ذلك خاصةً إذا جرى تحديثه بطريقة غير متوقعة، فإذا كان لديك تطبيق مؤلف من صفحة واحدة مع لوحة محتوى رئيسية يُحدَّث بانتظام باستخدام XMLHttpRequest أو Fetch، فيمكن أن يفوّت مستخدِمو قارئات الشاشة هذه التحديثات.

WAI-ARIA

إذا احتجتَ استخدام مثل هذه الوظائف المعقدة أو احتاجتها شيفرة HTML الدلالية القديمة، فعليك التفكير في استخدام مواصفات WAI-ARIA (تطبيقات الإنترنت الغنية سهلة الوصول Accessible Rich Internet Applications)، وهي مواصفات توفر دلالات Semantics بصورة سمات HTML جديدة لعناصر مثل عناصر التحكم المعقدة في النموذج ولوحات التحديث التي يمكن أن تفهمها معظم المتصفحات وقارئات الشاشة.

يمكن التعامل مع عناصر النماذج المعقدة من خلال استخدام سمات ARIA مثل السمة roles لتحديد الدور الذي تلعبه العناصر المختلفة في عنصر واجهة المستخدِم (مثل هل هو تبويب أم لوحة تبويب؟)، والسمة aria-disabled التي تخبرنا فيما إذا كان عنصر التحكم معطلًا أم لا.

يمكن التعامل مع مناطق المحتوى المحدّثة بانتظام من خلال استخدام السمة aria-live التي تحدد منطقة التحديث، وتشير قيمتها إلى مدى ضرورة أن يقرأ قارئ الشاشة هذا المحتوى، حيث يمكن أن تكون قيمتها إحدى القيم التالية:

• off: القيمة الافتراضية التي تمثّل أنه لا ينبغي الإعلان عن التحديثات.
• polite: يجب الإعلان عن التحديثات فقط إذا كان المستخدِم خاملًا.
• assertive: يجب الإعلان عن التحديثات للمستخدِم في أسرع وقت ممكن.
• rude: يجب الإعلان عن التحديثات مباشرةً حتى إذا تسبب ذلك في مقاطعة المستخدِم.

إليك المثال التالي:

<p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p>

يمكنك رؤية المثال العملي ARIA (Accessible Rich Internet Applications) Live Regions في موقع Freedom Scientific، حيث يجب أن تحدَّث الفقرة المُحدَّدة محتواها كل 10 ثوانٍ، ويجب على قارئ الشاشة قراءة ذلك للمستخدِم، ويمثل المثال ARIA Live Regions - Atomic مثالًا آخر مفيدًا.

الخلاصة

اطلعنا في هذا المقال على كيفية اختبار مشاكل سهولة الوصول الرئيسية التي يمكن أن تواجهها من أجل التغلب عليها، وسنلقي نظرةً في المقال التالي على أهم الأدوات اللازمة لتحقيق سهولة الوصول والتغلب على تلك المشاكل.

ترجمة -وبتصرُّف- لقسم من المقال Handling common accessibility problems.

اقرأ أيضًا

• المقال السابق: معالجة المشاكل الشائعة للتوافق مع المتصفحات في شيفرة جافاسكربت
• سهولة وصول جميع الزوار لمواقع وتطبيقات الويب
• سهولة الوصول في CSS
• شمولية التصميم: سهولة وصول جميع المستخدمين لصفحات موقع الويب

سنطّلع في هذا المقال على مشاكل التوافق مع المتصفحات Cross-browser الشائعة التي ستواجهها في شيفرة HTML و CSS، بالإضافة إلى الأدوات التي يمكن استخدامها لمنع حدوثها أو إصلاحها، إذ يتضمن ذلك كشف الأخطاء المحتملة في الشيفرة البرمجية والتعامل مع بادئات CSS واستخدام أدوات تطوير المتصفح لتعقّب المشاكل واستخدام تعويض نقص دعم المتصفحات Polyfill لإضافة الدعم إليها، ومعالجة مشاكل التصميم المتجاوب مع الشاشات وغير ذلك.

• المتطلبات الأساسية: يجب أن تتعلم أساسيات لغات HTML و CSS وجافاسكربت JavaScript، وأن تكون لديك فكرة عن المبادئ عالية المستوى لاختبار التوافق مع المتصفحات.
• الهدف: أن تكون قادرًا على تشخيص مشاكل التوافق مع المتصفحات المختلفة الشائعة في شيفرة HTML و CSS واستخدام الأدوات والتقنيات المناسبة لإصلاحها.

مشاكل لغتي HTML و CSS

تكمن مشاكل لغتَي HTML و CSS في حقيقة أنهما لغتان بسيطتان إلى حد ما، ولا يأخذها المطورون على محمل الجد في أغلب الأحيان من حيث التأكد من أن الشيفرة مُعَدّة جيدًا وفعالة وتصف الغرض من الميزات الموجودة في الصفحة.

تُستخدَم لغة جافاسكربت في أسوأ الحالات لإنشاء محتوى صفحة الويب وتنسيقها بالكامل، مما يجعل صفحاتك غير شاملة وذات أداء ضعيف، ويُعَد إنشاء عناصر DOM مكلفًا، كما لا تُدعَم الميزات الجديدة في حالات أخرى باستمرار على متصفحات متعددة، مما يجعل بعض الميزات والتنسيقات لا تعمل عند بعض المستخدِمين.

تُعَدّ مشاكل التصميم المتجاوب مع الشاشات شائعًا أيضًا، إذ يمكن أن يوفر الموقع الذي يبدو جيدًا في متصفح على حاسوب تجربةً سيئةً على هاتف محمول، لأن المحتوى صغير جدًا بحيث لا يمكن قراءته أو بسبب كون الموقع بطيئًا بسبب الحركات الثقيلة.

لننتقل الآن إلى كيفية تقليل الأخطاء على المتصفحات التي تنتج عن شيفرة HTML أو CSS.

إصلاح المشاكل العامة

يُعَدّ اختبار بعض المتصفحات الحديثة على الحاسوب وعلى الهاتف المحمول استراتيجيةً جيدةً للتأكد من عمل شيفرتك بنجاح قبل التركيز على مشاكل التوافق مع المتصفحات.

قدّمنا في مقالَي تنقيح أخطاء شيفرة HTML وتنقيح أخطاء شيفرة CSS بعض الإرشادات الأساسية حول تنقيح أخطاء شيفرة HTML و CSS، فإذا لم تكن على دراية بالأساسيات، فيجب عليك بالتأكيد مراجعة هذين المقالين قبل المتابعة، إذ يتعلق الأمر بالتحقق مما إذا كانت شيفرة HTML و CSS منسقةً جيدًا ولا تحتوي على أيّ أخطاء صياغية.

ملاحظة: تظهر إحدى المشاكل الشائعة في لغتَي CSS و HTML عندما تبدأ قواعد CSS المختلفة في التعارض مع بعضها البعض، ويمكن أن يشكّل ذلك مشكلةً خاصةً عند استخدام شيفرة خارجية مثل استخدام إطار عمل خاص بلغة CSS ثم تجد أن أحد أسماء الأصناف Class التي يستخدِمها هذا الإطار يتعارض مع اسم استخدَمته مسبقًا لغرض مختلف، أو يمكن أن تجد أن شيفرة HTML التي تنشئها واجهة برمجة تطبيقات جهة خارجية -مثل إنشاء إعلانات- تتضمن اسم صنف أو معرّف ID استخدمته مسبقًا لغرض مختلف، ويمكنك ضمان عدم حدوث ذلك من خلال البحث في الأدوات التي تستخدِمها أولًا وتصميم شيفرتك على أساسها، ويمكنك استخدام فضاء أسماء Namespace في CSS إذا كان لديك عنصر واجهة مستخدم Widget مثلًا، ولكن تأكد من أنه يحتوي على صنف مميز، ثم استخدم المحدّدات Selectors التي تحدد العناصر ضمن عنصر واجهة المستخدم باستخدام هذا الصنف، وبالتالي تقل احتمالية التعارضات مثل ‎.audio-player ul a.

التحقق من صحة شيفرة HTML و CSS

يتضمن التحققُ من صحة شيفرة HTML التأكدَ من أن جميع الوسوم Tags مغلقة ومتداخلة بطريقة صحيحة، وأنك تستخدِم DOCTYPE والوسوم لغرضها الصحيح، كما يجب التحقق من صحة الشيفرة البرمجية بانتظام، وإحدى الخدمات التي يمكنها التحقق من صحة الشيفرة البرمجية هي خدمة Markup Validation Service من W3C التي تسمح لك بالإشارة إلى شيفرتك البرمجية ثم تعيد قائمةً بالأخطاء:

كما تحتاج إلى شيفرة CSS للتحقق من أنّ أسماء الخاصيات مكتوبة بطريقة صحيحة وأنّ قيم الخاصيات صحيحة وصالحة مع الخاصيات المستخدَمة فيها، وللتحقق من عدم فقدان أي أقواس معقوصة وما إلى ذلك، كما تحتوي W3C على أداة التحقق CSS Validator أيضًا.

منقحات الصياغة Linters

لا يشير تطبيق منقّح الصياغة Linter إلى الأخطاء فقط، وإنما يمكنه إعطاء تحذيرات حول الممارسات السيئة في شيفرة CSS، ويمكن تخصيص منقّحات الصياغة لتكون أكثر أو أقل صرامةً في تقارير الأخطاء أو التحذيرات الناتجة.

هناك العديد من تطبيقات منقحات الصياغة على الإنترنت وأفضلها تطبيق Dirty Markup لشيفرات HTML و CSS وجافاسكربت وتطبيق CSS Lint لشيفرة CSS فقط، إذ تسمح لك هذه التطبيقات بلصق شيفرتك في نافذة ما ثم ستضع علامة x على الأخطاء، ويمكن بعد ذلك تحريك مؤشر الفأرة فوقها للحصول على رسالة خطأ تخبرك ما هي المشكلة، ويسمح لك تطبيق Dirty Markup بإجراء إصلاحات على شيفرة HTML باستخدام زر التنظيف "Clean".

ولكن لا يُعَدّ ذلك ملائمًا، إذ ستضطر إلى نسخ شيفرتك ولصقها في صفحة ويب للتحقق من صحتها عدة مرات، إذ تريد منقّح صياغة يتناسب مع سير عملك بأقل قدر من المتاعب، كما تحتوي العديد من محرّرات الشيفرات البرمجية على إضافات تنقيح الصياغة، إذ يحتوي المحرّر Atom من GitHub مثلًا على نظام بيئي غني بالإضافات مع العديد من خيارات تنقيح الأخطاء، وإليك مثال عن كيفية عمل هذه الإضافات Plugins:

1. ثبّت المحرّر Atom إذا لم يكن لديك إصدار حديث مثبَّت مسبقًا.
2. انتقل إلى مربع حوار تفضيلات Atom من خلال اختيار قائمة Atom ثم التفضيلات Preferences على نظام Mac أو من قائمة ملف File ثم Preferences في نظامَي Windows و Linux، ثم اختر خيار التثبيت Install في القائمة اليسرى.
3. اكتب الكلمة "lint" في حقل البحث عن الحزم Search Packages واضغط على الزر Enter أو Return للبحث عن الحِزم المتعلقة بتنقيح الصياغة.
4. يجب أن ترى حزمة تسمى "lint" في أعلى القائمة، لذا ثبّتها باستخدام زر التثبيت Install، إذ تعتمد منقّحات الصياغة الأخرى عليها في العمل، ثم ثبّت الإضافة linter-csslint لتنقيح صياغة شيفرة CSS والإضافة linter-tidy لتنقيح صياغة شيفرة HTML.
5. حاول تحميل ملف HTML وملف CSS بعد انتهاء تثبيت الحزم، حيث سترى المشاكل مميزةً باللون الأخضر للتحذيرات وسترى دوائر حمراء للأخطاء بجوار أرقام الأسطر، ولوحةً منفصلةً في الأسفل توفِّر أرقام الأسطر ورسائل الخطأ وقيمًا مقترحة أو إصلاحات أخرى في بعض الأحيان.

يتوفر لدى المحررات المشهورة الأخرى حزم تنقيح صياغة مماثلة مثل:

• SublimeLinter للمحرّر Sublime Text.
• Notepad++ Linter.
• VSCode linters.

أدوات المطور في المتصفحات

تتميز أدوات المطور المُضمَّنة في معظم المتصفحات بأدوات مفيدة لتعقب الأخطاء خاصة في شيفرة CSS.

ملاحظة: لا تظهر أخطاء شيفرة HTML بسهولة في أدوات المطور، إذ سيحاول المتصفح تصحيح الوسوم ذات التنسيق السيئ تلقائيًا، حيث تُعَدّ أداة التحقق W3C Validator أفضل طريقة للعثور على أخطاء HTML.

يعرض فاحص CSS في المتصفح Firefox مثلًا تصريحات CSS غير المُطبَّقة مشطوبة مع مثلث تحذير بجانبها، وسيوفر تحريك الفأرة فوق مثلث التحذير رسالةً تشرح الخطأ كما يلي:

تمتلك أدوات التطوير في المتصفحات الأخرى ميزات مماثلة أيضًا.

المشاكل الشائعة للتوافق مع المتصفحات

لننتقل الآن إلى إلقاء نظرة على بعض مشاكل HTML و CSS الأكثر شيوعًا للتوافق مع المتصفحات، فالمجالات الرئيسية التي سنركز عليها هي نقص دعم الميزات الحديثة ومشاكل التخطيط.

لا تدعم المتصفحات القديمة الميزات الحديثة

تُعَدّ هذه المشكلة شائعةً خاصةً عندما تحتاج إلى دعم المتصفحات القديمة مثل إصدارات IE القديمة، أو إذا أردت استخدام ميزات تُطبَّق باستخدام بادئات CSS، إذ تعمل معظم وظائف HTML و CSS الأساسية مثل عناصر HTML وتنسيق CSS الأساسي للألوان والنصوص على معظم المتصفحات التي تريد دعمها، ولكن يظهر مزيد من المشاكل عندما تبدأ في استخدام ميزات أحدث من HTML و CSS.

يُفضَّل البحث عن المتصفحات المدعومة والتقنيات ذات الصلة المفيدة بعد تحديد قائمة بالتقنيات غير المدعومة بصورة عامة التي ستستخدمها.

سلوك HTML الاحتياطي

يمكن حل بعض المشاكل بمجرد الاستفادة من الطريقة التي تعمل بها لغة HTML و CSS.

تُعامَل عناصر HTML التي لا يتعرّف عليها المتصفح بوصفها عناصر مضمنةً مجهولة الاسم، أي هي عناصر مضمنة فعالة بدون قيمة دلالية مثل عناصر <span>، ولا يزال بإمكانك الإشارة إليها باستخدام أسماءها وتنسيقها باستخدام لغة CSS، فما عليك سوى التأكد من أنها تتصرف كما تريدها أن تتصرف مثل إعداد الخاصية display‎ إلى شيء آخر غير inline إن كان هنالك حاجة.

تحتوي عناصر HTML الأكثر تعقيدًا مثل <video> و <audio> و <canvas> على آليات احتياطية لإضافتها، والتي تعمل باستخدام المبدأ السابق نفسه، إذ يمكنك إضافة محتوًى احتياطيًا بين وسمَي الفتح والإغلاق، وستتجاهل المتصفحات غير الداعمة العنصر الخارجي بفعالية وتشغّل المحتوى المتداخل.

إليك المثال التالي:

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
  <!-- Offer download -->
  <p>Your browser does not support HTML5 video; here is a link to
  <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p>
</video>

يتضمن هذا المثال رابطًا بسيطًا يسمح لك بتنزيل الفيديو إذا لم يعمل مشغل فيديو HTML، لذا لا يزال على الأقل بإمكان المستخدِم الوصول إلى الفيديو.

تعرض عناصر نموذج HTML صفات احتياطية، إذ أدخلت لغة HTML5 أنواعًا خاصة من عناصر <input> لإدخال معلومات محددة في النماذج مثل الأوقات والتواريخ والألوان والأعداد وما إلى ذلك أو يستعمل النوع النصي type="text"‎ إن لم يدعم المتصفح نوعًا حديثًا يقدم ميزة جديدة، وهي مفيدة جدًا لا سيما على منصات الهاتف المحمول، إذ توفر طريقةً لإدخال البيانات التي تُعَدّ مهمةً جدًا لتجربة المستخدِم، كما توفر المنصات الداعمة أدوات واجهة مستخدِم خاصةً عند استخدام هذه الأنواع من حقول الإدخال مثل أداة التقويم لإدخال التواريخ.

يوضِّح المثال التالي حقول إدخال التاريخ والوقت:

<form>
  <div>
    <label for="date">Enter a date:</label>
    <input id="date" type="date">
  </div>
  <div>
    <label for="time">Enter a time:</label>
    <input id="time" type="time">
  </div>
</form>

يكون خرج الشيفرة السابقة كما يلي:

ملاحظة: يمكنك مشاهدة هذا الخرج قيد التشغيل مباشرةً على forms-test.html، كما يمكنك الاطلاع على شيفرة هذا المثال على GitHub.

إذا عرضت هذا المثال على متصفح داعم مثل المتصفح Chrome للحاسوب ولنظام Android أو iOS Safari، فسترى عناصر واجهة المستخدِم أو الميزات الخاصة قيد التشغيل أثناء إدخال البيانات. بينما ستعود المدخلات إلى مدخلات نص عادية على منصة غير داعمة مثل Internet Explorer، لذا لا يزال بإمكان المستخدِم إدخال بعض المعلومات على الأقل.

سلوك CSS الاحتياطي

يمكن القول أنّ لغة CSS أفضل من لغة HTML في الإجراءات الاحتياطية، فإذا صادف المتصفح تصريحًا أو قاعدةً لا يفهمها، فسيتخطاها دون تطبيقها أو ارتكاب خطأ ما، ويمكن أن يكون ذلك محبطًا لك وللمستخدِمين إذا انتقل هذا الخطأ إلى شيفرة الإنتاج، ولكن هذا يعني على الأقل عدم انهيار الموقع بأكمله بسبب خطأ واحد.

لنلقِ نظرةً على المثال التالي الذي يحوي مربعًا بسيطًا مُنسَّقًا باستخدام CSS المختلفة:

ملاحظة: يمكنك مشاهدة هذا المثال قيد التشغيل مباشرةً على button-with-fallback.html.

يحتوي الزر على عدد من التصريحات الخاصة بتنسيقه، ولكن أكثر ما نهتم به هو ما يلي:

button {
  ...

  background-color: #ff0000;
  background-color: rgba(255,0,0,1);
  box-shadow: inset 1px 1px 3px rgba(255,255,255,0.4),
              inset -1px -1px 3px rgba(0,0,0,0.4);
}

button:hover {
  background-color: rgba(255,0,0,0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4),
              inset -1px -1px 3px rgba(255,255,255,0.4);
}