4.2 KiB
| title | localeTitle |
|---|---|
| Accessibility Examples | أمثلة على سهولة الوصول |
أمثلة على سهولة الاستخدام في التطبيق العملي
أكتب هذا الدليل المختصر لتقديم أمثلة عملية عن كيفية تنفيذ إمكانية الوصول في مواقع الويب. لم يتم التأكيد على إمكانية الوصول أثناء المدرسة ولا يتم التركيز عليها بشكل كاف في العالم الحقيقي لتطوير الويب. آمل أن تشجّع هذه المقالة ، إلى جانب العديد غيرها ، المطوّرين على إنشاء مواقع يسهل الوصول إليها من الآن فصاعدًا. لقد ساعدني دائمًا في الحصول على أمثلة عملية حول كيفية القيام بالأشياء. لذلك سيركز هذا الدليل على أمثلة العالم الحقيقي التي واجهتها في حياتي اليومية كمطور ويب.
تخطي الملاحة
من أجل منح المستخدمين غير النظر تجربة ممتعة على موقع الويب الخاص بك ، يجب أن يكونوا قادرين على الوصول إلى المحتوى بسرعة وكفاءة. إذا لم تجرب استخدام موقعًا على الويب من خلال قراءة الشاشة ، فأوصيك بذلك. إنها أفضل طريقة لاختبار مدى سهولة التنقل في الموقع للمستخدمين غير النظر. NVDA هو تطبيق جيد لقراءة الشاشة يتم توفيره مجانًا. ولكن إذا كنت تستخدم قارئ الشاشة وتجد أنه من المفيد التفكير في تقديم تبرع لفريق التطوير. يمكن تنزيل قارئ الشاشة من nvaccess.org .
للسماح للمستخدمين غير النظر بالانتقال إلى المحتوى الرئيسي للموقع وتجنب الجدولة عبر جميع روابط التنقل الرئيسية:
- إنشاء "تخطي صلة الملاحة" التي تعيش مباشرة تحت افتتاح
bodyعلامة.
<a tabindex="0" class="skip-link" href="#main-content">Skip to Main Content</a>
tabindex="0" يضاف للتأكد من أن الوصلة هي لوحة المفاتيح قابلة للتركيز على جميع المتصفحات. يمكن العثور على مزيد من المعلومات حول إمكانية الوصول إلى لوحة المفاتيح على webaim.org .
- يجب أن يرتبط ارتباط "تخطي التنقل" بعلامة html الرئيسية في مستند صفحة الويب الخاص بك باستخدام علامة التعريف.
<main id="main-content">
...page content
</main>
- إخفاء رابط "تخطي التنقل" افتراضيًا. يضمن هذا أن يكون الرابط مرئيًا فقط للمستخدمين الذين يتم رؤيتهم عند التركيز على الرابط.
- قم بإنشاء فصل للرابط الذي يمكن تنسيقه باستخدام CSS. في المثال الخاص بي قد أضفت
skip-link.
.skip-link {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0;
}
.skip-link:active, .skip-link:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none;
}
تخفي أنماط CSS هذه الارتباط افتراضيًا وتعرض الارتباط فقط عند تلقي التركيز على لوحة المفاتيح. لمزيد من المعلومات ، يرجى زيارة a11yproject وهذا بلوق وظيفة .