M

MLOG

العربية

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

تنفيذ التلميحات: معلومات يمكن الوصول إليها عند التمرير والتركيز

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

لماذا تعد إمكانية الوصول مهمة للتلميحات

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

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

المبادئ الأساسية للتلميحات التي يمكن الوصول إليها

المبادئ التالية حاسمة لإنشاء تلميحات يمكن الوصول إليها:

  1. توفير وصول بديل: تأكد من أن التلميحات يمكن الوصول إليها عبر كل من التمرير والتركيز باستخدام لوحة المفاتيح.
  2. استخدام سمات ARIA: استخدم سمات ARIA (تطبيقات الإنترنت الغنية التي يمكن الوصول إليها) لتحديد ووصف التلميحات بشكل صحيح للتقنيات المساعدة.
  3. إدارة التركيز: تحكم في مكان انتقال التركيز عند عرض التلميح وإخفائه.
  4. ضمان تباين كافٍ: وفر تباينًا لونيًا كافيًا بين نص التلميح والخلفية.
  5. السماح بوقت كافٍ: امنح المستخدمين وقتًا كافيًا لقراءة محتوى التلميح.
  6. جعلها قابلة للإغلاق: وفر طريقة واضحة لإغلاق التلميح.
  7. تجنب الإفراط في الاستخدام: استخدم التلميحات باعتدال وفقط عند الضرورة.

تقنيات التنفيذ

1. استخدام التمرير والتركيز

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

HTML:

<a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

الشرح:

JavaScript (تحكم متقدم - اختياري):

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

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. استخدام سمات ARIA

سمات ARIA ضرورية لتوفير معلومات دلالية للتقنيات المساعدة. فيما يلي تفصيل للسمات الرئيسية:

مثال:

<button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>

JavaScript (لأجل aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. إدارة التركيز

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

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

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

4. ضمان التباين الكافي

تباين الألوان أمر بالغ الأهمية للقراءة. تأكد من أن لون النص في تلميحاتك له تباين كافٍ مع لون الخلفية. توصي إرشادات الوصول إلى محتوى الويب (WCAG) بنسبة تباين لا تقل عن 4.5:1 للنص العادي و 3:1 للنص الكبير (18 نقطة أو 14 نقطة بخط عريض).

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

مثال (تباين جيد):

.tooltip {
  background-color: #000;
  color: #fff;
}

مثال (تباين ضعيف):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. السماح بوقت كافٍ

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

إذا كان محتوى التلميح طويلاً، ففكر في توفير طريقة للمستخدم لإغلاق التلميح يدويًا (مثل زر إغلاق أو الضغط على مفتاح Escape).

6. جعلها قابلة للإغلاق

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

طرق إغلاق التلميحات:

مثال (زر الإغلاق):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">Close</button>
</div>

مثال (مفتاح Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Replace with your actual hide tooltip function
  }
});

7. تجنب الإفراط في الاستخدام

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

بدائل التلميحات:

اعتبارات متقدمة

المحتوى الديناميكي

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

تحديد الموضع

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

الأجهزة المحمولة

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

اختبار التلميحات الخاصة بك

اختبر التلميحات الخاصة بك بدقة للتأكد من أنها متاحة لجميع المستخدمين. استخدم مزيجًا من الاختبار اليدوي وأدوات اختبار إمكانية الوصول الآلية.

طرق الاختبار:

التدويل (i18n) والتوطين (l10n)

عند تطوير تلميحات لجمهور عالمي، ضع التدويل والتوطين في اعتبارك:

الخاتمة

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

المصادر