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

أ. متى تكون سمة "النص البديل" alt ضرورية، وما هي بعض الأمثلة على النصوص البديلة الجيدة Good Alt Text ؟

النص البديل الذي يُشار إليه غالباً بالاختصار alt text هو "وصف نصي موجز للصورة" a brief text description of an image . وهو يوفر معلومات جوهرية حول الصورة للمستخدمين الذين لا يستطيعون رؤيتها، مثل الأشخاص الذين يستخدمون "برامج قراءة الشاشة" screen readers وغيرها من "التقنيات المساعدة" assistive technologies .

يُعد ذلك أمراً ضرورياً لجعل "المواقع الإلكترونية متاحة" websites accessible للأشخاص ذوي "الإعاقة البصرية" visual disabilities .

تستخدم "محركات البحث" Search engines أيضاً "النص البديل" Alternative text لفهم الصور، كما قد تعرضه بعض المتصفحات في حال عدم تحميل الصورة بشكل صحيح، إذ قد يحدث ذلك عند فقدان ملف الصورة أو مواجهة المستخدم لمشكلات في الاتصال، مما يجعله مفيداً لأغراض متعددة.

لن يتمكن الشخص ذو "الإعاقة البصرية" a visual disability من معرفة محتوى الصورة ما لم يتم وصفه في "النص البديل" the alt text . ومن الأمثلة على "النص البديل السيئ" bad alt text لصورة جرو عبارة "جرو لطيف" (A cute puppy) .

هذا النص "ليس محدداً بما يكفي" is not specific enough لنقل "التفاصيل المهمة" the important details في الصورة، مثل: كيف يبدو الجرو؟ وأين يوجد؟ وهل توجد أي أجسام مهمة حوله؟

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

يمكنك هنا رؤية ذلك بصيغة HTML ، متضمناً "عنصر الصورة" image element ، وسمة "النص البديل" alt ، ووصفاً أكثر تفصيلاً:

<img src="puppy.png" alt="جرو أبيض وأسود يرتدي طوقاً برتقالياً يستلقي على بطنه فوق الرمال، ناظراً إلى الجانب، وتوجد كرة برتقالية زاهية بالقرب من مخلبيه ​​الأماميين." />
                

من المهم الإشارة إلى أنه لا توجد طريقة واحدة صحيحة لكتابة "النص البديل" alt text للصورة، إذ يعتمد ما تدرجه في "الوصف" description على السياق الذي تُستخدم فيه الصورة. على سبيل المثال، إذا كانت صورة الجرو معروضة على موقع إلكتروني يتناول سلالات الكلاب، فقد ترغب في "تضمين تفاصيل أكثر دقة" include more specifics حول المظهر الجسدي للجرو، وربما تتجاهل حقيقة وجوده على الشاطئ وهو يلعب بكرة برتقالية. وفي النهاية، ينبغي لـ"النص البديل" alt أن يعكس "الغرض الأساسي" the primary purpose من إدراج الصورة في الصفحة، وأن توفر المعلومات الواردة فيه "التفاصيل اللازمة" the necessary details للأشخاص الذين لا يستطيعون رؤية الصورة لكي يدركوا ذلك الغرض.

لدينا هنا مثال آخر لـ"منتجع استوائي جميل" a beautiful tropical resort . دعونا نصفه.

من الأمثلة على "النص البديل السيئ" bad alt text لهذه الصورة كلمة "منتجع" Resort .

هذا الوصف "قصير للغاية" too short ولا يوفر "معلومات كافية" enough information عن الصورة. ولتحسينه، يمكنك توسيعه ليشمل أهم عناصر الصورة:

"منتجع استوائي يضم مسبحاً تحيط به أشجار النخيل والأكواخ."

يمكنك استخدام السمة alt في HTML على النحو التالي

<img src="resort.png" alt="منتجع استوائي يضم مسبحاً تحيط به أشجار النخيل والأكواخ." />
                

الآن بعد أن عرفت ما الذي يجعل "النص البديل" alt جيداً أو سيئاً، دعنا نلقي نظرة على بعض "أفضل الممارسات" the best practices .

• عليك محاولة إبقاء "النص البديل" alt موجزاً، إذ ينبغي أن يكون "مفصلاً بما يكفي" detailed enough لفهم الصورة، ولكن دون إطالة قد تؤدي إلى "الارتباك" confusing .

• لا ينبغي لك محاولة وصف كل تفصيل صغير، بل ركّز على "الجوانب الأكثر أهمية" the most important aspects في الصورة.

• بشكل عام، لا داعي للبدء بعبارة "صورة لـ" ( "image of" or "picture of" ) ، إذ يمكنك البدء في الوصف مباشرةً.

• أيضاً، إذا كان هناك "نص مشابه" similar text حول الصورة، فلن تحتاج إلى كتابته مرة أخرى.

• عادةً ما يُنصح بإنهاء "النص البديل" the alt text بنقطة لضمان الاتساق.

• إذا كانت الصورة تمثل "رابطاً لصفحة أخرى" a link to another page ، فيجب أن يصف "النص البديل" alt ما سيحدث عند "النقر عليها" click on it ، بدلاً من وصف الصورة نفسها.

على سبيل المثال، إذا كان موقعك الإلكتروني يحتوي على "أيقونة سهم متجه لليمين" a right arrow icon تنقل المستخدم إلى الصفحة التالية، فبدلاً من كتابة "نص بديل" an alt text يكتفي بعبارة "سهم لليمين" right arrow — كما هو الحال في هذا المثال الذي يظهر فيه "سمة النص البديل" the alt attribute بهذا الوصف:

<img src="arrow-right.png" alt="سهم لليمين." />
                

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

<img src="arrow-right.png" alt="انتقل إلى الصفحة التالية." />
                

يجب توفير "نص بديل" alt text فقط للصور التي تنقل "معلومات مهمة" important information . أما إذا كانت الصورة "تُستخدم لأغراض تزيينية بحتة" only used for decorative purposes ، فينبغي أن يكون "النص البديل" alt text الخاص بها "فارغاً" ( null "empty" ) ، وذلك لكي تتجاهلها "برمجيات قراءة الشاشة" screen readers وغيرها من "التقنيات المساعدة" assistive technologies .

إليك مثال على سمة alt "فارغة" empty :

<img src="decorative_image.jpg" alt="" />
                

يجب أن تحتوي "كل صورة" Every image على موقعك الإلكتروني على "سمة نص بديل" ( alt attribute ) ، حتى وإن كانت فارغة. فإذا أغفلت هذه السمة تماماً، قد تقوم "بعض برامج قراءة الشاشة" some screen readers بقراءة "اسم الملف" the file name بدلاً منها، مما قد يسبب "تشتتاً" distracting لمستخدمي "التقنيات المساعدة" assistive technologies ، ولذلك، لا يُنصح بهذا الإجراء.

وأخيراً، وقبل إطلاق موقعك الإلكتروني، ينبغي عليك اختبار ما إذا كانت "برامج قراءة الشاشة" screen readers قادرة على قراءة "النص البديل" alt text بشكل صحيح.

تُعد كتابة "النص البديل" ( alt text ) بفعالية أمراً جوهرياً لإنشاء "محتوى ويب يسهل الوصول إليه" accessible web content ، فبصفتك "مطور ويب" a web developer ، يمكنك من خلال تقديم "أوصاف واضحة" clear descriptions للصور ضمان قدرة الجميع على التفاعل مع موقعك الإلكتروني ضمن "تجربة رقمية شاملة" an inclusive online experience للجميع.

ب. ما هي فوائد نصوص الروابط الجيدة فيما يتعلق بإمكانية الوصول Accessibility Benefits for Good Link Text ، وما هي الأمثلة على نصوص الروابط الجيدة Good Link Text ؟

لنلقِ نظرةً على فوائد كتابة "نصوص روابط جيدة" good link texts من منظور "إتاحة الوصول" Accessibility ، وكذلك على بعض الأمثلة لنصوص روابط جيدة.

تتمثل الفائدة الملموسة الأولى لـ"نص الرابط الجيد" a good link text في أنه يسهّل على الجميع العثور على المعلومات بسرعة، إذ تساعد "الروابط الوصفية" Descriptive links المستخدمين على معرفة وجهتهم وما سيصلون إليه، مما يجنبهم الشعور بالضياع ويُحسّن "تجربة المستخدم الشاملة" the overall user experience .

بالنسبة لمستخدمي "برامج قراءة الشاشة" screen readers ، يُعد استخدام "نص رابط واضح ووصفي" a clear and descriptive link text أمراً ضرورياً، إذ تقوم هذه البرامج بقراءة "نص الرابط" the link text بصوت مسموع، ولذا فإن عبارة مثل ("اقرأ دليل إمكانية الوصول الخاص بنا") تُعد أفضل بكثير من عبارة ("اضغط هنا").

إن جعل "نص الرابط" link text واضحاً وواصفاً لا يقتصر نفعه على ذوي "الإعاقات البصرية" visual impairments فحسب، فـ"الروابط الواصفة" Descriptive links تساعد أيضاً الأشخاص ذوي "الإعاقات الإدراكية" cognitive disabilities من خلال توفير "سياق واضح" clear context .

إليك "بعض أفضل الممارسات" some best practices التي يجب وضعها في الاعتبار عند كتابة "نصوص الروابط" link texts :

• احرص على جعل "الروابط" links متميزة بصرياً باستخدام "التسطير" underlining و"علامات بصرية أخرى" other visual cues ، ليتسنى للمستخدمين تمييزها والتنقل عبرها بسهولة.

• تجنب "نصوص الروابط العامة" generic link texts مثل "هنا" و"اضغط هنا" و"مزيد من المعلومات"، فهي لا تقدم أي معلومات مفيدة.

• احرص على أن تكون "نصوص الروابط" link texts موجزة وواصفة — بحيث تتراوح مثاليًا بين كلمتين و5 كلمات — وتُعبّر بوضوح عن "الغرض من الرابط" the link's purpose .

• تجنب "المصطلحات المتخصصة والاختصارات" jargon and abbreviations التي قد لا يفهمها المستخدمون.

• ركّز على "الوجهة" the destination لا على "الإجراء" the action ، على سبيل المثال: "نتائج سلوك المستخدم" بدلاً من "اضغط هنا لقراءة المزيد".

• لا تكرر "نص الرابط نفسه" same link text لـ"وجهات مختلفة" different destinations .

• ضع "الروابط" links بحيث تكون ملائمة للسياق المحيط بها، على سبيل المثال، استخدم عبارة "لمزيد من التفاصيل، تفضل بزيارة صفحة الفعاليات" بدلاً من "اضغط هنا للمزيد".

إليك بعض الأمثلة على "نصوص روابط جيدة" good link texts لحالات استخدام محددة، مقارنةً بأخرى أقل فائدة. لنفترض أنك تريد وضع "رابط" link لصفحة تقدم تفاصيل حول حدث ما، على النحو التالي:

<a href="webinar-details-link">التفاصيل</a>
                

التفاصيل "غامضة" is vague ولا تقدم معلومات محددة عما سيجده المستخدم عند النقر على "الرابط" the link . وفي غياب "سياق إضافي" additional context ، قد لا يدرك المستخدمون ما إذا كان "الرابط" the link يؤدي إلى تفاصيل حول ندوة عبر الإنترنت، أو منتج، أو سياسة، أو أي شيء آخر.

إليك الآن مثال على "نص رابط جيد" good link text :

<a href="webinar-details-link">
 احصل على تفاصيل حول ندوتنا الإلكترونية القادمة
</a>
                

يُزوِّد "نص الرابط هذا" This link text المستخدمين بسياقٍ حول المحتوى الذي سيجدونه، مما يسهِّل عليهم اتخاذ قرار بشأن النقر عليه. كما أنه يزيل "الغموض" ambiguity من خلال توضيح أن "الرابط" the link يتعلق بندوة عبر الإنترنت.

إليك مثال آخر "يربط" linking بـ"منشور" a post في مدونة:

<a href="/blog-post-link">اقرأ المزيد</a>
                

لا يُعد "نص الرابط" The link text "اقرأ المزيد" مثالياً من حيث "إمكانية الوصول" Accessibility ، لأنه يفتقر إلى السياق.

إليك مثال أفضل لـ"نص الرابط" link text :

<a href="/blog-post-link">
 اقرأ أحدث تدويناتنا حول إمكانية الوصول إلى الويب
</a>
                

يمنح "نص الرابط المُحدَّث هذا" This updated link text المستخدمين فكرةً أوضح عما يمكن توقعه وسبب رغبتهم في النقر على "الرابط" the link ، وهو أمر بالغ الأهمية لا سيما لمستخدمي "برامج قراءة الشاشة" screen readers .

لنلقِ نظرةً على مثالٍ آخر. لنفترض أنك ترغب في تقديم المزيد من المعلومات حول موضوعٍ معين:

<a href="/link-to-topic">مزيد من المعلومات</a>
                

كما أن عبارة مزيد من المعلومات تتسم بـ"الغموض" Ambiguity وقد "تسبب مشكلات" be problematic تتعلق بـ"إمكانية الوصول" Accessibility ، فهي لا تقدم تفاصيل محددة حول "وجهة الرابط" the link's destination ، مما قد يربك المستخدمين الذين يعتمدون على "قارئات الشاشة" screen readers أو أولئك الذين يتصفحون الموقع بـ"أسلوب غير خطي" non-linear way .

إليك مثال أفضل لـ"نص الرابط" link text :

<a href="/link-to-topic">
 تعرّف على المزيد حول جهودنا في مجال إتاحة الوصول
</a>
                

يُعد "نص الرابط المُحدَّث هذا" This updated link text أفضل، لأنه يوضح بوضوح ما سيجده المستخدم عند النقر على "الرابط" the link . إذ يمكن للمستخدمين إدراك أن "الرابط" the link يؤدي إلى معلومات حول جهودك المتعلقة بـ"إتاحة الوصول" Accessibility على الفور.

ت. ما هي الطرق الفعالة لجعل المحتوى الصوتي والمرئي Audio and Video Content متاحاً Accessible للجميع؟

أصبحت "الوسائط المتعددة" Multimedia ، ولا سيما "الفيديو" video ، الصيغة المفضلة لمشاركة المعلومات عبر الإنترنت.

مع هذا التزايد الكبير في المحتوى، تبرز حاجة متنامية لضمان تمكّن الجميع من الوصول إلى "المحتوى المرئي والمسموع" video and audio content عبر الإنترنت والاستمتاع به، بغض النظر عن قدراتهم أو بيئتهم.

لا يقتصر "الفيديو" A video على الجوانب البصرية فحسب، بل يشمل الجوانب الصوتية أيضاً، لذا فإن أول ما ينبغي عليك التفكير فيه هو إضافة "نصوص توضيحية" captions أو "ترجمة" subtitles مصاحبة لمحتوى الفيديو الخاص بك.

توفر "التسميات التوضيحية" Captions "نسخة نصية" the text version للكلمات المنطوقة والأصوات المهمة غير اللفظية — مثل الموسيقى أو الضحك — "متزامنةً" synchronized مع الفيديو.

من ناحية أخرى، تُعد "الترجمة" Subtitles المصاحبة أمراً ضرورياً للأشخاص الذين لا يفهمون اللغة التي تتحدث بها، فهي لا تساعد فقط "الصم" deaf أو ضعاف السمع ، بل تفيد أيضاً من يشاهدون مقاطع الفيديو في "بيئات صاخبة أو هادئة" noisy or quiet environments .

لإضافة "تسميات توضيحية" captions أو "ترجمات" subtitles مصاحبة إلى محتوى الفيديو أو الصوت الخاص بك، يمكنك استخدام عنصر track داخل عنصر video أو audio :

<video
 width="400"
 height="300"
 controls
 src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4"    
>
 <track
  src="captions.vtt"
  kind="captions"
  srclang="en"
  label="English"
 />
</video>

<audio controls src="sample.mp3">
 <track
  src="captions.vtt"
  kind="captions"
  srclang="en"
  label="English"
 />
</audio>
                

تُستخدم السمة kind لتحديد كيفية استخدام عنصر track . وتشمل "القيم الصالحة" Valid values لهذه السمة: "التسميات التوضيحية" ( "captions" ) ، و"الترجمة" ( "subtitles" ) ، و"الفصول" ( "chapters" ) ، و"البيانات الوصفية" ( "metadata" ) .

تمثّل السمة srclang لغة محتوى المسار track . أما السمة label فهي تمثّل "عنواناً وصفياً" a descriptive title لـ"مسار النص" the text track ، تستخدمه المتصفحات للتعرف عليه وعرضه ضمن قائمة "مسارات النصوص المتاحة" available text tracks .

من الأمور المهمة الأخرى التي يجب مراعاتها توفير "نص مكتوب" a transcript لمحتواك الصوتي والمرئي. و"النص المكتوب" a transcript هو "نسخة نصية" a text version لجميع الكلمات المنطوقة في المقطع الصوتي أو الفيديو، وعلى عكس "التسميات التوضيحية" captions ، لا يتطلب هذا النص "مزامنة" synchronized زمنية مع "الوسائط" the media . وتُعد هذه النصوص مفيدة للصم وضعاف السمع، وكذلك للأشخاص الذين يفضلون القراءة بدلاً من المشاهدة أو الاستماع. كما أنها تجعل محتواك "قابلاً للبحث" searchable ، مما يتيح للمستخدمين العثور بسرعة على أجزاء محددة من المقطع الصوتي أو الفيديو. وإذا كان لديك مقطع فيديو أو صوتي على موقع إلكتروني، فيمكنك ببساطة إضافة "النص المكتوب" the transcript أسفل ذلك المقطع:

<audio controls>
 <source src="audio.mp3" />
 متصفحك لا يدعم عنصر الصوت.
</audio>

<!-- Transcript نص مكتوب -->
<h3>نص مكتوب</h3>
<p>
 [المتحدث الأول]: مرحبًا بكم في هذا الدرس التعليمي حول إعداد محتوى متاح للجميع.
</p>
<p>
 [المتحدث الثاني]: سنتناول اليوم موضوعات الترجمة النصية، والنصوص المكتوبة، والمزيد.
</p>

<!-- Rest of transcript بقية النص المكتوب  -->
                

إذا كنت تنشر مقاطع "فيديو" videos على "منصة" platform لمشاركة الفيديوهات مثل YouTube أو Vimeo ، فإن هذه المنصات توفر ميزات "التسميات التوضيحية" captions و"النصوص المكتوبة" transcripts بشكل تلقائي. أما إذا لم تكن راضيًا عن تلك الخدمات، فيمكنك الاستعانة بخدمات أخرى مثل veed.io و Rev و Amara و Descript .

تشمل الطرق الأخرى لجعل محتواك المرئي والمسموع "متاحاً للجميع" accessible ما يلي:

• إضافة "تراكب للغة الإشارة" a sign language overlay على مقاطع الفيديو المخصصة للصم وضعاف السمع.

• توفير "عناصر التحكم" controls في مستوى الصوت والسرعة.

• ضمان "تباين جيد" good contrast للنصوص التي تظهر على الشاشة.

• توفير "تنسيقات متعددة" multiple formats .

ث. ما هي بعض الطرق لجعل تطبيقات الويب قابلة للاستخدام عبر لوحة المفاتيح Web Applications Keyboard Accessible ؟

يعتمد العديد من المستخدمين على "لوحات المفاتيح" (keyboards) بدلاً من "الفأرة" (mice) بسبب "إعاقات جسدية" (physical disabilities) ، أو إصابات ناتجة عن "الإجهاد المتكرر" (repetitive strain) ، أو لأسباب شخصية. ويشمل ذلك مستخدمي "برامج قراءة الشاشة" (screen readers) ، ومن قد لا يمتلكون فأرة تعمل. تضمن "إمكانية الوصول" (Accessibility) عبر "لوحة المفاتيح" (Keyboard) لهؤلاء المستخدمين تصفح تطبيقات الويب بـ"كفاءة" (effectively) ودون عوائق.

لنستعرض "بعض التقنيات العملية" (some practical techniques) التي يمكنك استخدامها "لجعل تطبيقات الويب قابلة للاستخدام عبر لوحة المفاتيح" (to make web applications keyboard accessible) .

يعتمد العديد من المستخدمين على مفتاح Tab للتنقل بين "العناصر التفاعلية" (interactive elements) في صفحات الويب. وتتيح المتصفحات — بشكل افتراضي— للمستخدمين التنقل عبر عناصر مثل "الروابط" (links) و"الأزرار" (buttons) و"حقول النماذج" (form fields) وفقاً لترتيب ظهورها في كود HTML ، وهو ما يُعرف بـ "ترتيب التنقل الطبيعي" (natural tab order) .

قد ترغب أحياناً في تعديل "العناصر القابلة لتلقي التركيز" (elements are focusable) أو تغيير ترتيب "التركيز الخاص بها" (their focus) ، وتتيح لك السمة tabindex القيام بذلك.

إليك "الصيغة الأساسية" (The basic syntax) :

<element tabindex="number">نص العنصر</element>
                

تُحدد قيمة tabindex كيفية تصرف العنصر عند "التنقل باستخدام لوحة المفاتيح" (keyboard navigation) :

tabindex="0" يُضيف العنصر إلى ترتيب التنقل الطبيعي بمفتاح Tab .

سيؤدي استخدام مفتاح Tab إلى نقل "التركيز" (focus) من "الزر" button إلى عنصر div ، ثم إلى "الرابط" (the link) ، وذلك وفقاً لترتيبها في كود HTML .

انقر في أي مكان ضمن "المساحة الفارغة" (the whitespace) في نافذة المعاينة، ثم استخدم مفتاح Tab لمشاهدة انتقال "التركيز" (the focus) بين العناصر المختلفة.

<button>أولاً</button>
<div tabindex="0">ثانياً</div>
<a href="#">ثالثاً</a>
                

السمة tabindex="-1" تجعل "العنصر قابلاً لتلقي التركيز برمجياً" (element focusable programmatically) . ويُعد هذا مفيداً لإدارة "التركيز" (focus) في "العناصر التي لا تقبل التركيز عادةً" (elements that are not normally focusable) ، مثل "العناوين" (headings) ، و"الحاويات" (containers) ، و"مربعات الحوار" (dialogs) ، أو "رسائل الخطأ" (error messages) :

<p tabindex="-1">عذراً، حدث خطأ أثناء إرسال طلبك.</p>
                

في هذا المثال، لا تُعد "الفقرة" (the paragraph) جزءاً من "تسلسل التنقل الافتراضي عبر مفتاح طاب" (the normal tab order) ، ولذلك لا يمكن للمستخدمين الوصول إليها بالضغط على هذا المفتاح Tab . ومع ذلك، إذا قمت بتوجيه "التركيز" (focus) إلى هذا العنصر باستخدام "برنامج نصي" (a script) ، فسيتم لفت انتباه المستخدم إلى الرسالة. وسوف تتعرف على المزيد حول هذه التقنية في دروس JavaScript .

عندما تكون قيمة tabindex أكبر من 0، يتم تحديد ترتيب مخصص للتنقل باستخدام مفتاح Tab ، وبذلك، يتم التركيز أولاً على العناصر ذات "القيم الموجبة الأقل" (lower positive values) .

في هذا المثال، سيؤدي التنقل باستخدام مفتاح Tab إلى نقل التركيز أولاً إلى عنصر "الإدخال" input الذي يحمل السمة tabindex="1" ، ثم إلى العنصر ذي القيمة "2" ، ثم "3" ، وذلك بغض النظر عن ترتيبها في كود HTML .

<input tabindex="2">
<input tabindex="1">
<input tabindex="3">
                

تُستخدم أحياناً "قيم موجبة مخصصة" (Custom positive values) في "عناصر الواجهة المعقدة" (complex widgets) — مثل "شريط الأدوات" (a toolbar) — عندما تكون هناك حاجة لـ"ترتيب تنقّل محدد" (a specific navigation order) . ومع ذلك، لا يُنصح باتباع هذا الأسلوب، إذ قد يجعل "عملية التنقّل" (navigation) مربكة ويصعّب "عمليات الصيانة" (maintain) ، لا سيما مع توسّع الصفحة أو تغيّرها.

تُعد accesskey سمةً أخرى يمكنك استخدامها لجعل مشروع الويب الخاص بك قابلاً للاستخدام عبر "لوحة المفاتيح" (keyboard) ، فهي تتيح لك تحديد "مفتاحٍ" (a key) لنقل "التركيز" (focus) إلى عنصرٍ معين أو تفعيله.

إليك مثال تفاعلي يمكنك تجربته باتباع الاقتراحات الواردة أدناه :

• تُخصص السمة accesskey="s" المفتاح S لزر حفظ (Save) . في معظم المتصفحات، يؤدي الضغط على المفاتيح ALT + S (في نظام Windows) و CTRL + Option + S (في نظام Mac) إلى "تفعيل هذا الزر" (activate this button) .

• تُعيّن الخاصية accesskey="c" المفتاح C لزر إلغاء (Cancel) ، مما يتيح للمستخدمين تفعيله باستخدام التركيبة ALT + C (في نظام Windows) و CTRL + Option + C (في نظام Mac).

• تُخصص السمة accesskey="h" المفتاح H لرابط الرئيسية (Home) ، مما يتيح للمستخدمين الانتقال إلى الصفحة الرئيسية باستخدام التركيبة ALT + H (في نظام Windows) و CTRL + Option + H (في نظام Mac).

يرجى ملاحظة أن مجموعة المفاتيح الدقيقة لتفعيل "مفتاح الوصول" accesskey قد تختلف باختلاف المتصفح ونظام التشغيل، فعادةً ما تكون المجموعة هي ALT + Specified Key في نظام Windows ، و CTRL + Option + Specified Key في نظام Mac .

قد تسبب سمة accesskey مشكلات، إذ قد تتعارض مع "اختصارات" (shortcuts) موجودة بالفعل أو تختلف طريقة عملها باختلاف الأجهزة و"لوحات المفاتيح" (keyboards) ، كما أنها غالبًا ما تكون "غير بديهية" (not intuitive) ، مما يصعّب على المستخدمين اكتشافها أو تذكرها.

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

<button accesskey="s">حفظ</button>
<button accesskey="c">إلغاء</button>
<a href="index.html" accesskey="h">الرئيسية</a>
                

هناك طريقة أخرى لجعل "لوحة المفاتيح" (keyboard) "متاحة للاستخدام" (accessible) في تطبيقاتك، وهي الحرص على توفير "مؤشرات واضحة للتركيز" (clear focus indicators) . وإذا كنت ترى أن "مؤشر التركيز الافتراضي للمتصفح" (the default browser focus indicator) غير كافٍ، فيمكنك استبداله من خلال استهداف "حالة التركيز" (the focus state) الخاصة بالعنصر.

إليك مثال على تنسيق "حالة التركيز" (the focus state) لعنصر "زر" button . انقر في أي مكان ضمن "المساحة الفارغة" (the whitespace) في نافذة المعاينة، ثم اضغط على مفتاح Tab لنقل "التركيز" (focus) إلى "الزر" (the button) .

<link href="styles.css" rel="stylesheet">

<button>زر نموذجي</button>
            

button:focus {
 outline: 2px solid #005fcc;
}
            

معاينة:

تُستخدم الخاصية outline لتحديد "الإطار الخارجي للعنصر" (the outline around the element). يحدد هذا المثال الإطار ليكون خطاً أزرق متصلاً بسُمك "2 بكسل" (2 pixels) . ينبغي تنسيق "مؤشر التركيز" (The focus indicator) بطريقة تجعل من الواضح أي عنصر هو الذي يمتلك التركيز حالياً، ولضمان إتاحة الوصول (accessible) ، يجب أن يحقق المؤشر نسبة "تباين لوني" (color contrast) لا تقل عن 3:1 مقارنةً بـ"لون الخلفية" (background color) الذي يغطيها.

عليك أيضاً تجنب "فخاخ لوحة المفاتيح" (keyboard traps)، وهي الحالة التي يتعذر فيها على المستخدم نقل التركيز بعيداً عن عنصر معين في مكونات مثل "النوافذ المشروطة" (modals) و"النوافذ المنبثقة" (popups) .