عمادة تقنية المعلومات

القواعد الارشادية التي يجب اتباعها لتوافق المواقع الالكترونية مع قارئات الشاشة لذوي القدرات الخاصة (الكفيفين)

قارئ الشاشة:
برنامج لذوي القدرات الخاصة (فئة الكفيفين) يقوم بقراءة محتويات شاشة الكمبيوتر وتحويلها إلى كلام مسموع، ومن البرامج المتاحة والاكثر استخداما و يعتبر مجاني ومفتوح المصدر NVDA .

كخطوة أولى لتوظيف المواقع الالكترونية لقطاعات الجامعة لكي تعمل مع قارئات الشاشة، قمنا بحصر اهم القواعد الارشادية التي اصدرها اتحاد الشبكة العالمية (‏W3C WAI‏)، و تهدف الى تحسين امكانية وصول قارئات الشاشة الى محتوى الموقع الالكتروني، لذلك نؤكد على ضرورة تنفيذها على الموقع لمدة أقصاها أسبوع من تاريخه، والابتداء بمحتويات الموقع التي تهم الطالب.

      عناوين الصفحات:

 ضرورة الاهتمام بوضع عناوين الصفحات من خلال الوسم  <title> كالتالي :

<head>
<title>First Page</title>
</head>

    العناوين الداخلية في محتوى الصفحة:

 عدم وضع الوسوم الخاصة بالعناوين (h1-h6) المستخدمة في الصفحة وتركها فارغة، وضرورة اضافة نص بداخلها كالتالي :

<h2>Smashing Magazine</h2>

      الصور:

جميع الصور ومن ضمنها الايقونات يجب وضع خاصية Alt كنص بديل للصورة وباللغة العربية كالتالي:

<img src="logo.png"  alt= "KAU Logo" />

      الجداول:

الجداول يتم انشائها عن طريق الـ  Html باستخدام الوسم الخاص بالجداول  <table>، مع ضرورة تحديد خاصية اتجاه الجدول من اليمين لليسار أو اليسار لليمين dir =" ltr"  ، واستخدام الوسوم الفرعية الخاصة بها   <caption>كعنوان للجدول  ، scope="col"  عنوان للخلية  ،   scope="row" عنوان للصف بأكمله ، والكود التالي يوضح ذلك  :

<table dir =" ltr" >
<caption>Shelly's Daughters</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>
<tr>
<th scope="row">Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>
<tr>
<th scope="row">Beth</th>
<td>8</td>
<td>January 14</td>
</tr>
</table>

Birthday

Age

Name

 

April 5

5

Jackie

by birth

January 14

8

Beth

January 14

8

Beth

by marriage







         




أنماط تنسيق الصفحات
CSS :

في حال استخدام CSS يرجى استخدام الـ ID مرة واحدة فقط اما الـ class يمكن استخدامها عدة مرات :

<p id="homeNav" class="leftNav" >Home</p>
<p id="contactNav" class="leftNav" >Contact</p>

النماذج او الاستمارات Form :

 النماذج أو الاستمارات  <form> كل عنصر في الاستمارة يجب ان يحتوي على LABLE TAG لان خاصية الـ Label يقوم قارئ الشاشة على تضليل النص وقراءته كما في المثال التالي :

<p> <label for="searchbox">Search: </label> <input type="text" id="searchbox" /></p>
<p><input type="checkbox" id="remember" /> <label for="remember"> Remember</label> </p>

الروابط Links:

تسمية الروابط بمسمى واضح والبعد عن المسميات المختصرة مثل للمزيد واضغط هنا :

       لا يفضل الكتابة كالتالي:

< For the latest version of our software, <a href="/finest/download.html">click here.</a>

       ولكن الأفضل:

<a href="/finest/download.html">For the latest version of our software, click here.</a>     

ملفات PDF:

جميع ملفات الـ PDF والتي تحتوي على معلومات هامة للطالب كجداول الاختبارات والخطط الدراسية والدورات ...الخ يتم تحويلها الى صفحات Html عاجلا. 

الإعلانات والاخبار:

بخصوص جميع الإعلانات والاخبار التي يتم وصعها في وسائل التواصل الاجتماعي كصور يتم وضعها في الموقع كنص ومن ثم وضع روابطها في وسائل التواصل الاجتماعي وبالأخص الاخبار والاعلانات التي تهم الطالب كالدورات وورش العمل الخ ...

الوسائط المتعددة (الفيديو):

توجد العديد من الطرق لجعل الفيديوهات مدعومة من قبل قارئات الشاشة :

  • وضع توصيف “Transcript” نصي أسفل الفيديو بشكل مفصل ، كما هو موضح في الرابط التالي :
    http://www.w3.org/WAI/highlights/200606wcag2interview.html
  • وضع صوت مصاحب للفيلم بشكل واضح ومسموع كما هو موضح في الفيديو الموجود على الرابط التالي :

    http://dotsub.com/view/3f2e11e4-a8fb-47df-9d24-35ffadda60cb

  • وضع نص مرافق للفيديو Captions بشكل تزامني ، يساعد الأشخاص من ذوي الإعاقة السمعية من استيعاب الفيلم ، كما هو موضح في الفيديو الموجود على الرابط التالي :

خاصية الانتقال للمحتوى الاساسي:

هذه الخاصية تمكن القارئ من تخطي المحتوى الغير أساسي كالقوائم الافقية المنسدلة في جميع صفحات موقع الجامعة إلى المحتوى الاساسي للصفحة  من خلال النفر على زر Tap في لوحة المفاتيح تظهر عبارة (الانتقال إلى المحتوى الاساسي ) وعند النقر على زر Enter   يقوم القارئ بالتنقل في المحتوى الاساسي للصفحة 

طريقة تنفيذها : يتم وضع الكود الخاص بالصفحة الرئيسية للجهة ضمن وسم <div> التالي :

<div id="main" tabindex="-1">  
كود الصفحة الرئيسية

</div
>

 

أرسل الصفحة لصديق إطبع هذه الصفحة أبلغ عن خطأ في الصفحة أضف رابط الصفحة لموقعك
آخر تحديث 5/10/2015 1:11:08 PM