فن تصميم مواقع الويب سهلة الوصول
8 نصائح لتحسين إمكانية الاستخدام وإمكانية الوصول إلى تطبيق الويب الخاص بك
في العام الماضي ، ألقيت خطابا في جامعة ميلانو-بيكوكا حول تصميم تطبيقات الويب التي يمكن الوصول إليها. شرحت لماذا هو مهم وكيف نفعل ذلك. إذا كنت متحدثًا باللغة الإيطالية الأصلية ، فقد تم نشر التسجيلات والشرائح هنا.
في هذه القصة ، سنستعرض 8 نصائح ، ونأخذها من الخطاب ونترجمها إلى الإنجليزية.
1. استخدام المعايير المفتوحة
نسيان Flash و Silverlight: إنهما ألم في الرقبة. استخدم HTML5 بدلاً من ذلك. في الواقع ، تفتقر أول تكنولوجيتين إلى الدعم على الأجهزة المحمولة والعرفية مثل برامج قراءة الشاشة. كما أنها لا تملك أدوات إمكانية الوصول المبنية حولها بسبب طبيعتها (فهي ليست معايير مفتوحة).
2. الويب الدلالي
استخدم عناصر HTML5 التي لها معنى دلالي بدلاً من إساءة استخدام عناصر "div" و "span". على سبيل المثال ، ضع في اعتبارك هذا المقتطف:
<!DOCTYPE HTML>
<html>
<head>
<title>Lorem Ipsum - Hello world!</title>
</head>
<body>
<h1>Hello world!</h1>
<h2>Lorem Ipsum</h2>
<div>
Lorem ipsum dolor ...<br>
Etiam bibendum tincidunt urna...
</div>
<div id="footer">
Example. UnixMiB rules.
</div>
</body>
</html>
في الفقرة التالية سترى نفس الصفحة مع العناصر الدلالية:
<!DOCTYPE HTML>
<html>
<head>
<title>Lorem Ipsum - Hello world!</title>
</head>
<body>
<header><h1>Hello world!</h1></header>
<main>
<article>
<header><h2>Lorem Ipsum</h2></header>
<section>
<p>Lorem ipsum dolor ...</p>
<p>Etiam bibendum tincidunt urna...</p>
</section>
</article>
</main>
<footer>
Example. UnixMiB rules.
</footer>
</body>
</html>
ستكون الواجهة الأمامية أكثر وضوحًا لك كمطور وللفريق ؛ كما سيعمل أيضًا على تحسين إمكانية الوصول بفضل الأدوات التي تستخدم هذه المعلومات لتحسين فهمها للصفحة.
3. لا تعيد اختراع العجلة
استخدم أطر عمل مستقرة مثل Bootstrap؛ النظر أيضا وفقا لمبادئ التصميم المستخدمة عادة (على سبيل المثال تصميم المواد): يقف دائما على أكتاف العمالقة فكرة جيدة. تذكر أن إعادة اختراع العجلة هو نمط مضاد في مجال التنمية. إذا كنت تكتب من كل شيء ، يجب عليك الحفاظ على جميع تعليمات البرمجة بدون مساعدة المجتمع: حاول أن تجعل موقع الويب الخاص بك متوافقًا مع كل متصفح وجهاز يستخدمه العملاء قبل أي شيء آخر.
4. تصميم الاشياء استجابة
يجب أن يتم عرض مواقع الويب من أجهزة الكمبيوتر والهواتف الذكية وأجهزة التلفزيون الكبيرة. تأكد من أن الصفحة تناسب كل شاشة ، بغض النظر عن الحجم أو الدقة.
5. كن دائمًا نصًا بديلًا للصور والترجمات لمقاطع الفيديو والتسجيلات الصوتية
يسمح وجود تسمية توضيحية / ترجمة لعناصر الوسائط للأعمى والأشخاص الصم بفهم محتوى المحتوى.
على سبيل المثال ، إذا كانت لديك صورة بها ثلاث قطط تنام ، فيجب إدراج سمة "alt":
<img src=”/cats.png” alt=”Three cats who are sleeping” />
إذا كنت تقوم بتطوير تطبيق يسمح للمستخدمين بتحميل عناصر الوسائط ، فعليك التفكير في استخدام أدوات تعتمد على التعلم الآلي لتمييزها تلقائيًا مثل Facebook.
6. استخدم الوحدات الصحيحة
قد يكون الاختيار بين الوحدات المطلقة (مثل وحدات البكسل والنقاط) والوحدات النسبية (مثل نظام الإدارة البيئية) أمرًا صعبًا في البداية ، ولكن دائمًا ما يكون MDN موردًا جيدًا للتعلم منه: https://developer.mozilla.org/en-US/docs/ تعلم / CSS / Introduction_to_CSS / Values_and_units.
7. اجعل العناصر قابلة للتركيز عند الحاجة
لا يعد الماوس طريقة الإدخال الوحيدة المستخدمة للتنقل عبر الإنترنت. الكثير من الناس (على وجه الخصوص الأشخاص الذين يعانون من إعاقة حركية) يستخدمون لوحة المفاتيح بدلاً من ذلك.
اجعل العناصر في جدول مثل الصفوف أو الأعمدة التي يمكن التركيز عليها ستجعل الحياة أسهل بالنسبة للمستخدمين النهائيين. يسمح الرمز التالي للمستخدمين بالتنقل في الجدول ، مع التركيز على كل صف ، في كل مرة.
<table>
<tr tabindex="0">
<th>Index</th>
<th>Value</th>
</tr>
<tr tabindex="0">
<td>Index A</td>
<td>Index B</td>
</tr>
<tr tabindex="0">
<td>Value A</td>
<td>Value B</td>
</tr>
</table>
8. اختبار التطبيق الخاص بك
أخيرًا وليس آخرًا ، تحتاج إلى تدقيق.
يتيح لك الاختبار باستخدام الأدوات التي تسمح لك بمحاكاة الإعاقات (على سبيل المثال ChromeVox و RGBlind) تحسين البرنامج الخاص بك: فقط سيخبرك ما إذا كان التطبيق الخاص بك قابلاً للوصول فعلاً أم لا.
أيضا ، تحتاج دائما إلى التحقق من صحة التعليمات البرمجية الخاصة بك مع لعبة الداما مثل https://validator.w3.org/ و https://jigsaw.w3.org/css-validator/.
تعد إضافات المتصفح مثل Lighthouse ميزة إضافية ، مما يتيح لك الحصول على مقاييس.
الاستنتاجات
قد يكون الوصول إلى البرامج أمرًا صعبًا ومحبطًا في البداية ، ولكن اتباع هذه النصائح البسيطة البسيطة يسمح لك بتحسين جودة مواقع الويب الخاصة بك.
مما يجعل الوصول إلى الأشياء سيقودك إلى امتلاك قاعدة أوسع.
إذا كنت مهتمًا بتطوير الويب القابل للوصول إليه ، ففكر في الحصول على دورة تدريبية مجانية عبر الإنترنت ، مثل "إمكانية الوصول إلى الويب" بواسطة Google من Udacity.