مقالة مقدمة من wulin.com (www.vevb.com): 10 سهولة استخدام النصائح لمواقع الويب التي يمكن للجميع استخدامها.
1. إضافة نص بديل إلى شعارك
هذا له فوائدان: يمكن لقارئ الشاشة التعرف على معنى صورة الشعار ، وعندما لا يتم تحميل الصورة ، يمكن أيضًا أن تخبر المستخدمين غير المتأاعبين بشكل مرئي حيث يكون شعارك.
عدة طرق:
<img src = logo.png alt = موقع تدريس الويب>
أو ، إذا كنت تستخدم صورة الخلفية لتنفيذ الشعار ، يمكنك أيضًا إضافة سمة العنوان لتنفيذها:
<span title = web صفحة تدريس موقع> </span>
بالطبع ، فإن صورة الخلفية + الارتباط هي أفضل طريقة ، ولكن من الأفضل إضافة سمة العنوان أيضًا:
<a title = شبكة تدريس الويب> شبكة تدريس الويب </a>
2. أضف المعالم الأساسية
Aria Landmark هي مجموعة من قواعد قابلية استخدام موقع الويب المحددة بواسطة W3C. إن إضافة معلم وصفي إلى وحدات مختلفة من موقع الويب - أو يسمى مباشرة الدور ، يفضي إلى شاشة قراءة البرامج لفهم صفحات الويب الخاصة بك بشكل أفضل ، بحيث يمكن للمستخدمين الذين يعانون من ضعف البصر استخدام موقع الويب الخاص بك بشكل أفضل.
<nav rol = navigation>
<div id = دور maincontent = main>
<form action = search.php rol = search>
3. تعزيز تعريف التركيز
في الواقع ، ستحاول العديد من مواقع الويب كل الوسائل لإزالة نمط تركيز المتصفح ، خاصة بالنسبة لمتصفح IE. في الواقع ، من المنطقي أن يكون المتصفح مع التركيز الافتراضي. يمكن أن يشير إلى مكان تركيز الماوس الحالي للمستخدم. هذا مهم بشكل خاص لتدفق لوحة المفاتيح.
لذا يرجى عدم إزالة: نمط التركيز. حتى لو كنت تعتقد أن النمط الافتراضي ليس ذو مظهر جيد أو غير متسق (أي مربع منقط ، فإن WebKit عبارة عن صندوق صلب مميز ، و Safari أزرق ، والكروم برتقالي) يمكنك أيضًا تحديد لون مميز بنفسك:
ج: التركيز {
الخطوط العريضة: 1 بكسل الصلب الأحمر.
الخلفية: أصفر.
}
إذا أصر مدير المنتج أو المصمم البصري على إزالة حالة التركيز ، فما عليك سوى خذ الماوس ليوم واحد وأخبره أنه يمكنك استخدام علامة التبويب فقط لتبديل الروابط. . .
4. تحديد عناصر النموذج المطلوبة
استخدم السمة المطلوبة من ARIA لتحديد العناصر المطلوبة في النموذج - حسنًا ، من المقرر أن تخبر برنامج قراءة الشاشة:
<نوع الإدخال = اسم النص = اسم المستخدم ARIA-Reiquired = true>
5. أضف H1 إلى صفحتك
والسبب بسيط ، ليس فقط لكبار المسئولين الاقتصاديين ، ولكن أيضًا لقابلية الاستخدام الكلية وقابلية القراءة للموقع. أيضا ، هل ليس لديك هوس رمز؟
6. تحديد رأس الجدول
عادة ما يتم استخدام العديد من الأشخاص لاستخدام علامات TD لجميع النماذج. في الواقع ، فإن الجداول ليس فقط علامات عالية الدقة ، ولكن أيضًا Th ، Col ، Scope ، إلخ.
لذا ببساطة ، قم بتغيير الرأس إلى العلامة:
<th scope = col> date </h>
7. تحديد وصف الجدول
لا تضيف ببساطة p أمام/بعد الجدول. يحتوي الجدول على علامة توضيحية مخصصة ، تمامًا مثل الصورة.
<griding>
<Sption> جدول الفئة </caption>
<tr>
...
8. تجنب النقر هنا
على الرغم من أن وصف الرابط هذا لا يهم الأشخاص العاديين ، إلا أنه أمر سيء للغاية بالنسبة لبرامج قراءة الشاشة. إنه في الواقع تدخل لإعاقة المستخدمين بصريًا.
لذلك ، فقط استخدم الرابط في المكان الصحيح.
9. إزالة tabindex
مرة واحدة على وقت ، استخدم العديد من الأشخاص TabIndex لتحسين تجربة المستخدم ، ولكن هذه السمة ستعطل ترتيب القراءة العادي للصفحة ، وهو أمر كارثي على تعويض المستخدمين بصريًا ، وقد لا يكون ودودًا للمستخدمين العاديين.
لذلك لا تسيء استخدام سمة Tabindex.
10. تحقق من ذلك عبر الإنترنت
حسنًا ، عندما رأيت هذا ، وجدت أنه كان في الواقع إعلانًا ، ولكن إذا كان يمكن اكتشاف مشكلة قابلية استخدام الموقع ، فهذا أمر جيد أيضًا. ستكتشف أداة الويب التي تم تطويرها بواسطة WebAIM تلقائيًا عن طريق إدخال عنوان URL. اختبرت أنه جيد جدا.