إنشاء تطبيق يمكن الوصول إليه

يحتاج ما يزيد عن 20% من مستخدمي الإنترنت إلى تطبيقات ويب يمكن الوصول إليها. على هذا النحو، من المهم التأكد من أن التطبيق الخاص بك مصمم بحيث يمكن لأي مستخدم استخدامه بسهولة. بدلاً من التفكير في إمكانية الوصول لمجموعة من المهام لإكمالها، فكر في الأمر كجزء من تجربة المستخدم الإجمالية. كلما زادت إمكانية الوصول إلى تطبيقك، زاد عدد الأشخاص الذين يمكنهم استخدامه.

عندما يتعلق الأمر بالمحتوى التفاعلي الغني مثل الخريطة، فإن بعض الاعتبارات الشائعة المتعلقة بإمكانية الوصول هي:

• دعم قارئ الشاشة للمستخدمين الذين يجدون صعوبة في رؤية تطبيق الويب.
• لديك أساليب متعددة للتفاعل مع تطبيق الويب والتنقل فيه مثل الماوس واللمس ولوحة المفاتيح.
• تأكد من تباين الألوان بحيث لا تمتزج الألوان معاً ويصعب تمييزها عن بعضها البعض.

تأتي خرائط Azure Web SDK مسبقة الإنشاء مع ميزات إمكانية وصول ذوي الاحتياجات الخاصة مثل:

• أوصاف قارئ الشاشة عندما تتحرك الخريطة وعندما يركز المستخدم على عنصر تحكم أو نافذة منبثقة.
• دعم الماوس واللمس ولوحة المفاتيح.
• دعم تباين الألوان الذي يمكن الوصول إليه في نمط خريطة الطريق.
• دعم التباين العالي.

للحصول على تفاصيل توافق إمكانية وصول ذوي الاحتياجات الخاصة لجميع منتجات Microsoft، راجع تقارير التوافق مع إمكانية وصول ذوي الاحتياجات الخاصة. ابحث عن "Azure Maps web" للعثور على المستند المخصص لخرائط Azure Web SDK.

التنقل في الخريطة

توجد عدة طرق مختلفة يمكن من خلالها تكبير الخريطة وتحريكها وتدويرها وتصغيرها. توضح التفاصيل التالية جميع الطرق المختلفة للتنقل على الخريطة.

تكبير الخريطة

• باستخدام الماوس، انقر نقراً مزدوجاً على الخريطة لتكبير مستوى واحد.
• باستخدام الماوس، قم بتمرير العجلة لتكبير الخريطة.
• باستخدام شاشة تعمل باللمس، المس الخريطة بإصبعين وضمهما معاً للتصغير أو باعد بين الإصبعين للتكبير.
• باستخدام شاشة تعمل باللمس، انقر نقراً مزدوجاً على الخريطة لتكبير مستوى واحد.
• مع التركيز على الخريطة، استخدم علامة الجمع (+) أو علامة يساوي (=) لتكبير مستوى واحد.
• مع التركيز على الخريطة، استخدم علامة الطرح أو الواصلة (-) أو الشرطة السفلية (_) لتصغير مستوى واحد.
• استخدام التحكم في التكبير / التصغير بالماوس أو اللمس أو علامة تبويب لوحة المفاتيح / إدخال المفاتيح.
• اضغط باستمرار على الزر Shift واضغط على زر الماوس الأيسر لأسفل على الخريطة واسحب لرسم منطقة لتكبير الخريطة.
• باستخدام بعض منصات اللمس المتعدد، اسحب بإصبعين لأعلى للتصغير أو لأسفل للتكبير.

تحريك الخريطة

• باستخدام الماوس، اضغط لأسفل بزر الماوس الأيسر على الخريطة واسحب في أي اتجاه.
• باستخدام شاشة تعمل باللمس، المس الخريطة واسحب في أي اتجاه.
• مع تركيز الخريطة، استخدم مفاتيح الأسهم لتحريك الخريطة.

تدوير الخريطة

• باستخدام الماوس، اضغط لأسفل بزر الماوس الأيسر على الخريطة واسحب لليسار أو لليمين.
• باستخدام شاشة تعمل باللمس، المس الخريطة بإصبعين وقم بالتدوير.
• مع تركيز الخريطة، استخدم مفتاح Shift ومفاتيح الأسهم لليسار أو لليمين.
• استخدام عنصر التحكم في التدوير بالماوس أو اللمس أو علامة تبويب لوحة المفاتيح / إدخال المفاتيح.

اعرض الخريطة

• باستخدام الماوس، اضغط لأسفل بزر الماوس الأيمن على الخريطة واسحب لأعلى أو لأسفل.
• باستخدام شاشة تعمل باللمس، المس الخريطة بإصبعين واسحبهما لأعلى أو لأسفل معاً.
• مع التركيز على الخريطة، استخدم مفتاح shift بالإضافة إلى مفتاحي الأسهم لأعلى أو لأسفل.
• استخدام التحكم في درجة الصوت بالماوس أو اللمس أو علامة تبويب لوحة المفاتيح / مفاتيح الإدخال.

تغيير نمط الخريطة

لا يرغب جميع المطورين في إتاحة جميع أنماط الخرائط الممكنة في تطبيقاتهم. إذا قام المطور بعرض عنصر تحكم منتقي الأنماط في الخريطة، يمكن للمستخدم تغيير نمط الخريطة باستخدام الماوس أو اللمس أو لوحة المفاتيح بعلامة التبويب أو مفتاح الإدخال. يمكن للمطور تحديد أنماط الخريطة التي يريد إتاحتها في عنصر تحكم منتقي نمط الخريطة. أيضاً، يمكن للمطور تعيين نمط الخريطة وتغييره برمجياً.

استخدام التباين العالي

• عندما يتم تحميل عنصر التحكم في الخريطة، فإنه يتحقق لمعرفة ما إذا تم تمكين التباين العالي ويدعمه المستعرض.
• لا يراقب عنصر تحكم الخريطة وضع التباين العالي للجهاز. إذا تغير وضع الجهاز، فلن تتغير الخريطة. وبالتالي، يحتاج المستخدم إلى إعادة تحميل الخريطة عن طريق تحديث الصفحة.
• عند اكتشاف التباين العالي، يتحول نمط الخريطة تلقائيا إلى التباين العالي، وتستخدم جميع عناصر التحكم المضمنة نمط تباين عال. على سبيل المثال، يستخدم ZoomControl و PitchControl و CompassControl و StyleControl وعناصر التحكم المضمنة الأخرى نمطا عالي التباين.
• هناك نوعان من التباين العالي، الفاتح والظلام. إذا كان يمكن الكشف عن نوع التباين العالي بواسطة عناصر تحكم الخريطة، ضبط سلوك الخريطة وفقا لذلك. إذا كان فاتح، تحميل نمط الخريطة grayscale_light. إذا تعذر الكشف عن النوع أو كان داكنا، تحميل نمط high_contrast_dark.
• إذا كان إنشاء عناصر تحكم مخصصة، فمن المفيد معرفة ما إذا كانت عناصر التحكم المضمنة تستخدم نمط تباين عال. يمكن للمطورين إضافة فئة css على div حاوية الخريطة للتحقق منها. فئات css التي سيتم إضافتها هي high-contrast-dark وhigh-contrast-light. للتحقق من استخدام JavaScript، استخدم:

map.getMapContainer().classList.contains("high-contrast-dark")

أو استعمل:

map.getMapContainer().classList.contains("high-contrast-light")

‎اختصارات لوحة المفاتيح

تحتوي الخريطة على اختصارات لوحة المفاتيح المضمنة التي تسهل استخدام الخريطة. تعمل اختصارات لوحة المفاتيح هذه عندما يكون التركيز على الخريطة.

^* تشترك اختصارات المفاتيح هذه عادةً في نفس المفتاح على لوحة المفاتيح. تمت إضافة هذه الاختصارات لتحسين تجربة المستخدم. لا يهم أيضاً ما إذا كان المستخدم يستخدم مفتاح shift أم لا لهذه الاختصارات.

دعم قارئ الشاشة

يمكن للمستخدمين التنقل في الخريطة باستخدام لوحة المفاتيح. إذا كان قارئ الشاشة قيد التشغيل، تقوم الخريطة بإعلام المستخدم بالتغييرات التي تطرأ على حالته. على سبيل المثال، يتم إخطار المستخدمين بتغييرات الخريطة عند تحريك الخريطة أو تكبيرها. بشكل افتراضي، توفر الخريطة أوصافاً مبسطة تستبعد مستوى التكبير / التصغير وإحداثيات مركز الخريطة. يمكن للمستخدم تبديل مستوى التفاصيل لهذه الأوصاف باستخدام اختصار لوحة المفاتيح Ctrl + Shift + D.

يجب أن تحتوي أي معلومات إضافية يتم وضعها على الخريطة الأساسية على معلومات نصية مقابلة لمستخدمي قارئ الشاشة. تأكد من إضافة سمات Accessible Rich Internet Applications (ARIA)والسمات البديلة والعنوان حيثما كان ذلك مناسباً.

اجعل الوصول إلى لوحة المفاتيح المنبثقة

غالباً ما تُستخدم علامة أو رمز لتمثيل موقع على الخريطة. عادةً ما يتم عرض معلومات إضافية حول الموقع في نافذة منبثقة عندما يتفاعل المستخدم مع العلامة. في معظم التطبيقات، تظهر النوافذ المنبثقة عندما يحدد المستخدم علامة. ومع ذلك، فإن النقر والضغط يتطلبان من المستخدم استخدام الماوس وشاشة تعمل باللمس، على التوالي. من الممارسات الجيدة إتاحة الوصول إلى النوافذ المنبثقة عند استخدام لوحة المفاتيح. يمكن تحقيق هذه الوظيفة من خلال إنشاء نافذة منبثقة لكل نقطة بيانات وإضافتها إلى الخريطة.

يقوم مثال النوافذ المنبثقة التي يمكن الوصول إليها بتحميل نقاط الاهتمام على الخريطة باستخدام طبقة رمز ويضيف نافذة منبثقة إلى الخريطة لكل نقطة اهتمام. يتم تخزين مرجع لكل نافذة منبثقة في خصائص كل نقطة بيانات. يمكن أيضا استردادها لعلامة، مثل عند تحديد علامة. عند التركيز على الخريطة، يسمح الضغط على مفتاح علامة التبويب للمستخدم بالتنقل عبر كل نافذة منبثقة على الخريطة. للحصول على التعليمات البرمجية المصدر لهذا النموذج، راجع التعليمات البرمجية المصدر للنوافذ المنبثقة التي يمكن الوصول إليها.

المزيد من تلميحات إمكانية وصول ذوي الاحتياجات الخاصة

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

• إذا كنت تعرض العديد من بيانات النقاط التفاعلية على الخريطة، ففكر في تقليل الفوضى واستخدام نظام المجموعات.
• تأكد من أن نسبة تباين الألوان بين النص / الرموز وألوان الخلفية هي 4.5:1 أو أكثر.
• احتفظ برسائل قارئ الشاشة (سمات ARIA وalt وtitle) قصيرة ووصفية وذات مغزى. تجنب المصطلحات والمختصرات غير الضرورية.
• حاول تحسين الرسائل المرسلة إلى قارئ الشاشة لتوفير معلومات قصيرة ذات مغزى يسهل على المستخدم استيعابها. على سبيل المثال، إذا كنت تريد تحديث قارئ الشاشة بتردد عال، مثل وقت تحرك الخريطة، ففكر في القيام بالنقاط التالية:
  • انتظر حتى تنتهي الخريطة من التحرك لتحديث قارئ الشاشة.
  • تقييد التحديثات لمرة واحدة كل بضع ثوانٍ.
  • اجمع الرسائل معاً بطريقة منطقية.
• تجنب استخدام الألوان كوسيلة وحيدة لنقل المعلومات. استخدم النص أو الرموز أو الأنماط لتكملة اللون أو استبداله. بعض الاعتبارات:
  • إذا كنت تستخدم طبقة فقاعية لإظهار القيمة النسبية بين نقاط البيانات، ففكر في قياس نصف قطر كل فقاعة، أو تلوين الفقاعة، أو كليهما.
  • ضع في اعتبارك استخدام طبقة رمز بأيقونات مختلفة لفئات مترية مختلفة، مثل المثلثات والنجوم والمربعات. تدعم طبقة الرمز أيضاً تغيير حجم الرمز. يمكن أيضاً عرض تسمية نصية.
  • في حالة عرض بيانات الخط، يمكن استخدام العرض لتمثيل الوزن أو الحجم. يمكن استخدام نمط صفيف الشرطة لتمثيل فئات مختلفة من الخطوط. يمكن استخدام طبقة الرموز مع الخط لتراكب الرموز على طول الخط. يعد استخدام رمز السهم مفيداً لإظهار تدفق الخط أو اتجاهه.
  • في حالة عرض بيانات المضلع، يمكن استخدام نمط، مثل خط الشريحة، كبديل للون.
• لا يمكن الوصول إلى بعض المرئيات مثل خرائط التمثيل اللوني وطبقات التجانب وطبقات الصور للمستخدمين الذين يعانون من إعاقات بصرية. بعض الاعتبارات:
  • اجعل قارئ الشاشة يصف ما تعرضه الطبقة عند إضافتها إلى الخريطة. على سبيل المثال، إذا تم عرض طبقة تجانب رادار الطقس، فاطلب من قارئ الشاشة أن يقول "بيانات رادار الطقس متراكبة على الخريطة."
• حدد مقدار الوظائف التي تتطلب تمرير الماوس. لا يمكن للمستخدمين الذين يستخدمون لوحة مفاتيح أو جهاز يعمل باللمس الوصول إلى هذه الوظائف للتفاعل مع تطبيقك. لاحظ أنه لا يزال من الممارسات الجيدة أن يكون لديك نمط تمرير للمحتوى التفاعلي مثل الرموز والروابط والأزرار القابلة للنقر.
• حاول التنقل في التطبيق الخاص بك باستخدام لوحة المفاتيح. تأكد من أن ترتيب علامات التبويب منطقي.
• إذا كنت تقوم بإنشاء اختصارات لوحة المفاتيح، فحاول قصرها على مفتاحين أو أقل.

الخطوات التالية

تعرف على إمكانية الوصول في وحدات Web SDK.

تعرف على كيفية تطوير تطبيقات يمكن الوصول إليها:

ألق نظرة على أدوات الوصول المفيدة هذه: