You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
243 lines
23 KiB
243 lines
23 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "f0c88c3e2cefa8952d356f802b1e47ca",
|
|
"translation_date": "2025-08-28T22:30:45+00:00",
|
|
"source_file": "1-getting-started-lessons/3-accessibility/README.md",
|
|
"language_code": "ar"
|
|
}
|
|
-->
|
|
# إنشاء صفحات ويب قابلة للوصول
|
|
|
|
|
|
> رسم توضيحي بواسطة [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
## اختبار ما قبل المحاضرة
|
|
[اختبار ما قبل المحاضرة](https://ff-quizzes.netlify.app/web/)
|
|
|
|
> قوة الويب تكمن في عالميته. الوصول للجميع بغض النظر عن الإعاقة هو جانب أساسي.
|
|
>
|
|
> \- السير تيموثي بيرنرز لي، مدير W3C ومخترع شبكة الويب العالمية
|
|
|
|
هذه الاقتباسة تسلط الضوء بشكل مثالي على أهمية إنشاء مواقع ويب قابلة للوصول. التطبيق الذي لا يمكن للجميع الوصول إليه هو بطبيعته إقصائي. كمطوري ويب، يجب أن نضع إمكانية الوصول دائمًا في الاعتبار. من خلال التركيز على هذا الجانب منذ البداية، ستكون في طريقك لضمان أن الجميع يمكنهم الوصول إلى الصفحات التي تنشئها. في هذه الدرس، ستتعلم عن الأدوات التي يمكن أن تساعدك في ضمان أن موارد الويب الخاصة بك قابلة للوصول وكيفية البناء مع مراعاة إمكانية الوصول.
|
|
|
|
> يمكنك أخذ هذا الدرس على [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
|
|
|
|
## الأدوات المستخدمة
|
|
|
|
### قارئات الشاشة
|
|
|
|
من بين أدوات إمكانية الوصول الأكثر شهرة هي قارئات الشاشة.
|
|
|
|
[قارئات الشاشة](https://en.wikipedia.org/wiki/Screen_reader) هي عملاء شائعون للأشخاص الذين يعانون من ضعف البصر. كما نقضي الوقت لضمان أن المتصفح ينقل المعلومات التي نرغب في مشاركتها بشكل صحيح، يجب علينا أيضًا ضمان أن قارئ الشاشة يقوم بنفس الشيء.
|
|
|
|
بأبسط أشكاله، يقوم قارئ الشاشة بقراءة الصفحة من الأعلى إلى الأسفل بشكل مسموع. إذا كانت صفحتك تحتوي على نص فقط، فسيقوم القارئ بنقل المعلومات بطريقة مشابهة للمتصفح. بالطبع، نادرًا ما تكون صفحات الويب نصية فقط؛ فهي تحتوي على روابط، ورسومات، وألوان، ومكونات بصرية أخرى. يجب أن يتم أخذ الحذر لضمان أن هذه المعلومات تُقرأ بشكل صحيح بواسطة قارئ الشاشة.
|
|
|
|
يجب على كل مطور ويب أن يتعرف على قارئ الشاشة. كما هو مذكور أعلاه، فهو العميل الذي سيستخدمه المستخدمون. بنفس الطريقة التي تعرف بها كيفية عمل المتصفح، يجب أن تتعلم كيفية عمل قارئ الشاشة. لحسن الحظ، يتم تضمين قارئات الشاشة في معظم أنظمة التشغيل.
|
|
|
|
بعض المتصفحات تحتوي أيضًا على أدوات مدمجة وإضافات يمكنها قراءة النص بصوت عالٍ أو حتى توفير بعض ميزات التنقل الأساسية، مثل [أدوات إمكانية الوصول في متصفح Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). هذه أيضًا أدوات مهمة لإمكانية الوصول، لكنها تعمل بشكل مختلف تمامًا عن قارئات الشاشة ولا ينبغي اعتبارها أدوات اختبار لقارئات الشاشة.
|
|
|
|
✅ جرب قارئ شاشة وقارئ نصوص المتصفح. على نظام Windows، يتم تضمين [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) بشكل افتراضي، ويمكن تثبيت [JAWS](https://webaim.org/articles/jaws/) و [NVDA](https://www.nvaccess.org/about-nvda/). على macOS و iOS، يتم تثبيت [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) بشكل افتراضي.
|
|
|
|
### التكبير
|
|
|
|
أداة أخرى تُستخدم بشكل شائع من قبل الأشخاص الذين يعانون من ضعف البصر هي التكبير. النوع الأكثر أساسية من التكبير هو التكبير الثابت، الذي يتم التحكم فيه من خلال `Control + علامة زائد (+)` أو عن طريق تقليل دقة الشاشة. هذا النوع من التكبير يؤدي إلى إعادة حجم الصفحة بالكامل، لذا فإن استخدام [تصميم متجاوب](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) مهم لتوفير تجربة مستخدم جيدة عند مستويات التكبير العالية.
|
|
|
|
نوع آخر من التكبير يعتمد على برامج متخصصة لتكبير منطقة واحدة من الشاشة والتحريك، مثل استخدام عدسة مكبرة حقيقية. على نظام Windows، يتم تضمين [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) بشكل افتراضي، و [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) هو برنامج تكبير تابع لجهة خارجية يحتوي على ميزات أكثر وقاعدة مستخدمين أكبر. يحتوي كل من macOS و iOS على برنامج تكبير مدمج يسمى [Zoom](https://www.apple.com/accessibility/mac/vision/).
|
|
|
|
### أدوات فحص التباين
|
|
|
|
يجب اختيار الألوان في مواقع الويب بعناية لتلبية احتياجات المستخدمين الذين يعانون من عمى الألوان أو صعوبة رؤية الألوان ذات التباين المنخفض.
|
|
|
|
✅ اختبر موقع ويب تستمتع باستخدامه لمعرفة كيفية استخدامه للألوان باستخدام إضافة متصفح مثل [أداة فحص الألوان من WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). ماذا تعلمت؟
|
|
|
|
### Lighthouse
|
|
|
|
في منطقة أدوات المطور في متصفحك، ستجد أداة Lighthouse. هذه الأداة مهمة للحصول على نظرة أولية على إمكانية الوصول (بالإضافة إلى تحليلات أخرى) لموقع ويب. بينما من المهم عدم الاعتماد فقط على Lighthouse، فإن الحصول على درجة 100% مفيد جدًا كنقطة انطلاق.
|
|
|
|
✅ ابحث عن Lighthouse في لوحة أدوات المطور في متصفحك وقم بإجراء تحليل لأي موقع. ماذا اكتشفت؟
|
|
|
|
## التصميم مع مراعاة إمكانية الوصول
|
|
|
|
إمكانية الوصول موضوع كبير نسبيًا. لمساعدتك، هناك العديد من الموارد المتاحة.
|
|
|
|
- [Accessible U - جامعة مينيسوتا](https://accessibility.umn.edu/your-role/web-developers)
|
|
|
|
بينما لن نتمكن من تغطية كل جانب من جوانب إنشاء مواقع قابلة للوصول، أدناه بعض المبادئ الأساسية التي سترغب في تنفيذها. تصميم صفحة قابلة للوصول منذ البداية **دائمًا** أسهل من العودة إلى صفحة موجودة لجعلها قابلة للوصول.
|
|
|
|
## مبادئ العرض الجيدة
|
|
|
|
### لوحات ألوان آمنة
|
|
|
|
يرى الناس العالم بطرق مختلفة، وهذا يشمل الألوان. عند اختيار نظام ألوان لموقعك، يجب أن تضمن أنه قابل للوصول للجميع. أداة رائعة [لإنشاء لوحات ألوان هي Color Safe](http://colorsafe.co/).
|
|
|
|
✅ حدد موقع ويب يعاني من مشاكل كبيرة في استخدامه للألوان. لماذا؟
|
|
|
|
### استخدام HTML الصحيح
|
|
|
|
مع CSS و JavaScript، من الممكن جعل أي عنصر يبدو كأي نوع من عناصر التحكم. يمكن استخدام `<span>` لإنشاء `<button>`، ويمكن أن يصبح `<b>` رابطًا. بينما قد يُعتبر هذا أسهل في التصميم، فإنه لا ينقل أي شيء لقارئ الشاشة. استخدم HTML المناسب عند إنشاء عناصر التحكم على الصفحة. إذا كنت تريد رابطًا، استخدم `<a>`. استخدام HTML الصحيح للعناصر المناسبة يُعرف باستخدام HTML الدلالي.
|
|
|
|
✅ اذهب إلى أي موقع ويب وتحقق مما إذا كان المصممون والمطورون يستخدمون HTML بشكل صحيح. هل يمكنك العثور على زر يجب أن يكون رابطًا؟ تلميح: انقر بزر الماوس الأيمن واختر "عرض مصدر الصفحة" في متصفحك لرؤية الكود الأساسي.
|
|
|
|
### إنشاء تسلسل عناوين وصفي
|
|
|
|
يعتمد مستخدمو قارئات الشاشة [بشكل كبير على العناوين](https://webaim.org/projects/screenreadersurvey8/#finding) للعثور على المعلومات والتنقل عبر الصفحة. كتابة محتوى عناوين وصفي واستخدام علامات العناوين الدلالية أمر مهم لإنشاء موقع سهل التنقل لمستخدمي قارئات الشاشة.
|
|
|
|
### استخدام أدلة بصرية جيدة
|
|
|
|
يوفر CSS تحكمًا كاملاً في مظهر أي عنصر على الصفحة. يمكنك إنشاء مربعات نصية بدون إطار أو روابط بدون خط تحتها. للأسف، إزالة هذه الأدلة يمكن أن يجعل من الصعب على شخص يعتمد عليها التعرف على نوع العنصر.
|
|
|
|
## أهمية نص الرابط
|
|
|
|
الروابط هي جوهر التنقل في الويب. لذلك، ضمان أن قارئ الشاشة يمكنه قراءة الروابط بشكل صحيح يسمح لجميع المستخدمين بالتنقل في موقعك.
|
|
|
|
### قارئات الشاشة والروابط
|
|
|
|
كما هو متوقع، تقرأ قارئات الشاشة نص الرابط بنفس الطريقة التي تقرأ بها أي نص آخر على الصفحة. مع وضع ذلك في الاعتبار، قد يبدو النص الموضح أدناه مقبولًا تمامًا.
|
|
|
|
> البطريق الصغير، المعروف أحيانًا باسم البطريق الجني، هو أصغر بطريق في العالم. [اضغط هنا](https://en.wikipedia.org/wiki/Little_penguin) لمزيد من المعلومات.
|
|
|
|
> البطريق الصغير، المعروف أحيانًا باسم البطريق الجني، هو أصغر بطريق في العالم. قم بزيارة https://en.wikipedia.org/wiki/Little_penguin لمزيد من المعلومات.
|
|
|
|
> **NOTE** كما ستقرأ الآن، يجب **ألا** تنشئ روابط تبدو مثل ما سبق.
|
|
|
|
تذكر، قارئات الشاشة هي واجهة مختلفة عن المتصفحات ولها مجموعة ميزات مختلفة.
|
|
|
|
### المشكلة مع استخدام عنوان URL
|
|
|
|
تقرأ قارئات الشاشة النص. إذا ظهر عنوان URL في النص، فستقرأ قارئ الشاشة عنوان URL. بشكل عام، لا ينقل عنوان URL معلومات ذات معنى، وقد يبدو مزعجًا. ربما تكون قد واجهت هذا إذا قرأ هاتفك رسالة نصية تحتوي على عنوان URL بصوت عالٍ.
|
|
|
|
### المشكلة مع "اضغط هنا"
|
|
|
|
قارئات الشاشة لديها أيضًا القدرة على قراءة الروابط فقط على الصفحة، بنفس الطريقة التي يقوم بها الشخص المبصر بمسح الصفحة بحثًا عن الروابط. إذا كان نص الرابط دائمًا "اضغط هنا"، فكل ما سيسمعه المستخدم هو "اضغط هنا، اضغط هنا، اضغط هنا، اضغط هنا، اضغط هنا، ..." الآن أصبحت جميع الروابط غير مميزة عن بعضها البعض.
|
|
|
|
### نص الرابط الجيد
|
|
|
|
نص الرابط الجيد يصف بإيجاز ما يوجد على الجانب الآخر من الرابط. في المثال أعلاه الذي يتحدث عن البطريق الصغير، الرابط هو إلى صفحة ويكيبيديا عن النوع. العبارة *البطريق الصغير* ستكون نص رابط مثالي لأنها توضح بوضوح ما سيتعلمه الشخص إذا ضغط على الرابط - البطريق الصغير.
|
|
|
|
> [البطريق الصغير](https://en.wikipedia.org/wiki/Little_penguin)، المعروف أحيانًا باسم البطريق الجني، هو أصغر بطريق في العالم.
|
|
|
|
✅ تصفح الويب لبضع دقائق للعثور على صفحات تستخدم استراتيجيات ربط غامضة. قارنها بمواقع أخرى ذات روابط أفضل. ماذا تعلمت؟
|
|
|
|
#### ملاحظات محركات البحث
|
|
|
|
كمكافأة إضافية لضمان أن موقعك قابل للوصول للجميع، ستساعد محركات البحث في التنقل في موقعك أيضًا. تستخدم محركات البحث نص الرابط لفهم موضوعات الصفحات. لذا فإن استخدام نص رابط جيد يساعد الجميع!
|
|
|
|
### ARIA
|
|
|
|
تخيل الصفحة التالية:
|
|
|
|
| المنتج | الوصف | الطلب |
|
|
| ------------ | ------------------ | ------------ |
|
|
| الأداة | [الوصف](../../../../1-getting-started-lessons/3-accessibility/') | [الطلب](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
| الأداة الممتازة | [الوصف](../../../../1-getting-started-lessons/3-accessibility/') | [الطلب](../../../../1-getting-started-lessons/3-accessibility/') |
|
|
|
|
في هذا المثال، تكرار نص الوصف والطلب منطقي لشخص يستخدم المتصفح. ومع ذلك، شخص يستخدم قارئ الشاشة سيسمع فقط الكلمات *الوصف* و *الطلب* مكررة بدون سياق.
|
|
|
|
لدعم هذه الأنواع من السيناريوهات، يدعم HTML مجموعة من السمات تُعرف باسم [تطبيقات الإنترنت الغنية القابلة للوصول (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). تسمح هذه السمات بتوفير معلومات إضافية لقارئات الشاشة.
|
|
|
|
> **NOTE**: مثل العديد من جوانب HTML، قد يختلف دعم المتصفحات وقارئات الشاشة. ومع ذلك، فإن معظم العملاء الرئيسيين يدعمون سمات ARIA.
|
|
|
|
يمكنك استخدام `aria-label` لوصف الرابط عندما لا يسمح تنسيق الصفحة بذلك. يمكن تعيين الوصف للأداة كالتالي:
|
|
|
|
``` html
|
|
<a href="#" aria-label="Widget description">description</a>
|
|
```
|
|
|
|
✅ بشكل عام، استخدام العلامات الدلالية كما هو موضح أعلاه يتفوق على استخدام ARIA، ولكن في بعض الأحيان لا يوجد مكافئ دلالي لعناصر HTML المختلفة. مثال جيد هو الشجرة. لا يوجد مكافئ HTML للشجرة، لذا تحدد العنصر العام `<div>` لهذه العنصر بدور وقيم aria المناسبة. يحتوي [توثيق MDN حول ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) على معلومات أكثر فائدة.
|
|
|
|
```html
|
|
<h2 id="tree-label">File Viewer</h2>
|
|
<div role="tree" aria-labelledby="tree-label">
|
|
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
|
</div>
|
|
```
|
|
|
|
## الصور
|
|
|
|
من البديهي أن قارئات الشاشة غير قادرة على قراءة ما يوجد في الصورة تلقائيًا. ضمان أن الصور قابلة للوصول لا يتطلب الكثير من العمل - هذا هو الغرض من السمة `alt`. يجب أن تحتوي جميع الصور ذات المعنى على `alt` لوصف ما هي عليه. الصور التي تكون زخرفية فقط يجب أن تحتوي على السمة `alt` فارغة: `alt=""`. هذا يمنع قارئات الشاشة من الإعلان عن الصورة الزخرفية بشكل غير ضروري.
|
|
|
|
✅ كما قد تتوقع، محركات البحث أيضًا غير قادرة على فهم ما يوجد في الصورة. تستخدم أيضًا نص alt. لذا مرة أخرى، ضمان أن صفحتك قابلة للوصول يوفر مكافآت إضافية!
|
|
|
|
## لوحة المفاتيح
|
|
|
|
بعض المستخدمين غير قادرين على استخدام الماوس أو لوحة التتبع، ويعتمدون بدلاً من ذلك على التفاعلات عبر لوحة المفاتيح للتنقل من عنصر إلى آخر. من المهم أن يقدم موقع الويب الخاص بك محتواه بترتيب منطقي بحيث يمكن لمستخدم لوحة المفاتيح الوصول إلى كل عنصر تفاعلي أثناء التنقل عبر المستند. إذا قمت ببناء صفحات الويب الخاصة بك باستخدام علامات دلالية واستخدمت CSS لتصميم تخطيطها البصري، يجب أن يكون موقعك قابلًا للتنقل عبر لوحة المفاتيح، ولكن من المهم اختبار هذا الجانب يدويًا. تعرف على المزيد حول [استراتيجيات التنقل عبر لوحة المفاتيح](https://webaim.org/techniques/keyboard/).
|
|
|
|
✅ اذهب إلى أي موقع ويب وحاول التنقل فيه باستخدام لوحة المفاتيح فقط. ما الذي يعمل، وما الذي لا يعمل؟ لماذا؟
|
|
|
|
## الملخص
|
|
|
|
الويب الذي يمكن الوصول إليه للبعض ليس "شبكة عالمية" حقيقية. أفضل طريقة لضمان أن المواقع التي تنشئها قابلة للوصول هي دمج أفضل ممارسات إمكانية الوصول منذ البداية. بينما هناك خطوات إضافية متضمنة، فإن دمج هذه المهارات في سير عملك الآن يعني أن جميع الصفحات التي تنشئها ستكون قابلة للوصول.
|
|
|
|
---
|
|
|
|
## 🚀 التحدي
|
|
|
|
خذ هذا الكود HTML وأعد كتابته ليكون قابلاً للوصول قدر الإمكان، بناءً على الاستراتيجيات التي تعلمتها.
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>
|
|
Example
|
|
</title>
|
|
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
|
</head>
|
|
<body>
|
|
<div class="site-header">
|
|
<p class="site-title">Turtle Ipsum</p>
|
|
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
|
</div>
|
|
<div class="main-nav">
|
|
<p class="nav-header">Resources</p>
|
|
<div class="nav-list">
|
|
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
|
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
|
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="main-content">
|
|
<div>
|
|
<p class="page-title">Welcome to Turtle Ipsum.
|
|
<a href="">Click here</a> to learn more.
|
|
</p>
|
|
<p class="article-text">
|
|
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<div class="footer-section">
|
|
<span class="button">Sign up for turtle news</span>
|
|
</div><div class="footer-section">
|
|
<p class="nav-header footer-title">
|
|
Internal Pages
|
|
</p>
|
|
<div class="nav-list">
|
|
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
|
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
|
</div>
|
|
</div>
|
|
<p class="footer-copyright">© 2016 Instrument</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
## اختبار ما بعد المحاضرة
|
|
[اختبار ما بعد المحاضرة](https://ff-quizzes.netlify.app/web/en/)
|
|
|
|
## المراجعة والدراسة الذاتية
|
|
تضع العديد من الحكومات قوانين تتعلق بمتطلبات الوصول. قم بالاطلاع على قوانين الوصول في بلدك. ما الذي يتم تغطيته وما الذي لا يتم تغطيته؟ مثال على ذلك هو [هذا الموقع الحكومي](https://accessibility.blog.gov.uk/).
|
|
|
|
## المهمة
|
|
|
|
[تحليل موقع ويب غير قابل للوصول](assignment.md)
|
|
|
|
الاعتمادات: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) بواسطة Instrument
|
|
|
|
---
|
|
|
|
**إخلاء المسؤولية**:
|
|
تم ترجمة هذا المستند باستخدام خدمة الترجمة بالذكاء الاصطناعي [Co-op Translator](https://github.com/Azure/co-op-translator). بينما نسعى لتحقيق الدقة، يرجى العلم أن الترجمات الآلية قد تحتوي على أخطاء أو معلومات غير دقيقة. يجب اعتبار المستند الأصلي بلغته الأصلية المصدر الموثوق. للحصول على معلومات حاسمة، يُوصى بالاستعانة بترجمة بشرية احترافية. نحن غير مسؤولين عن أي سوء فهم أو تفسيرات خاطئة ناتجة عن استخدام هذه الترجمة. |