بناء تطبيق يمكن الوصول إليه
يحتاج أكثر من 20٪ من مستخدمي الإنترنت إلى تطبيقات ويب يمكن الوصول إليها. على هذا النحو ، من المهم التأكد من تصميم تطبيقك بحيث يمكن لأي مستخدم استخدامه بسهولة. بدلا من التفكير في إمكانية الوصول كمجموعة من المهام التي يجب إكمالها ، فكر فيها كجزء من تجربة المستخدم الشاملة. كلما كان تطبيقك أكثر سهولة ، زاد عدد الأشخاص الذين يمكنهم استخدامه.
عندما يتعلق الأمر بالمحتوى التفاعلي الغني مثل الخريطة، فإن بعض اعتبارات إمكانية الوصول الشائعة هي:
- دعم قارئ الشاشة للمستخدمين الذين يجدون صعوبة في رؤية تطبيق الويب.
- لديك طرق متعددة للتفاعل مع تطبيق الويب والتنقل فيه مثل الماوس واللمس ولوحة المفاتيح.
- تأكد من أن تباين الألوان لا يمتزج مع بعضها البعض ويصبح من الصعب تمييزه عن بعضها البعض.
تأتي خرائط Azure Web SDK مصممة مسبقا مع العديد من ميزات إمكانية الوصول مثل:
- أوصاف قارئ الشاشة عندما تتحرك الخريطة وعندما يركز المستخدم على عنصر تحكم أو نافذة منبثقة.
- دعم الماوس واللمس ولوحة المفاتيح.
- دعم تباين الألوان الذي يمكن الوصول إليه في نمط خريطة الطريق.
- دعم عالي التباين.
يمكن العثور على تفاصيل المطابقة الكاملة لإمكانية الوصول لجميع منتجات Microsoft هنا. ابحث عن "خرائط Azure الويب" للعثور على المستند خصيصا ل خرائط Azure Web SDK.
التنقل في الخريطة
هناك عدة طرق مختلفة يمكن من خلالها تكبير الخريطة وتحريكها وتدويرها وعرضها. فيما يلي تفاصيل جميع الطرق المختلفة للتنقل في الخريطة.
تكبير الخريطة
- باستخدام الماوس، انقر نقرا مزدوجا فوق الخريطة لتكبير مستوى واحد.
- باستخدام الماوس، مرر العجلة لتكبير الخريطة.
- باستخدام شاشة تعمل باللمس، المس الخريطة بإصبعين واضغط معا للتصغير أو انشر الأصابع بعيدا للتكبير.
- باستخدام شاشة تعمل باللمس، انقر نقرا مزدوجا فوق الخريطة لتكبير مستوى واحد.
- مع تركيز الخريطة، استخدم علامة الجمع () أو علامة يساوي (
+=) لتكبير مستوى واحد. - مع تركيز الخريطة، استخدم علامة الطرح أو الواصلة () أو الشرطة السفلية (
-_) لتصغير مستوى واحد. - باستخدام عنصر التحكم في التكبير/التصغير باستخدام الماوس أو اللمس أو لوحة المفاتيح لعلامة التبويب/إدخال المفاتيح.
- اضغط مع الاستمرار على الزر واضغط على زر الماوس الأيسر لأسفل على
Shiftالخريطة واسحب لرسم منطقة لتكبير الخريطة إليها. - باستخدام بعض لوحات اللمس المتعدد، اسحب إصبعين لأعلى للتصغير، أو لأسفل للتكبير.
تحريك الخريطة
- باستخدام الماوس، اضغط لأسفل باستخدام زر الماوس الأيسر على الخريطة واسحب في أي اتجاه.
- باستخدام شاشة تعمل باللمس، المس الخريطة واسحب في أي اتجاه.
- مع تركيز الخريطة، استخدم مفاتيح الأسهم لنقل الخريطة.
تدوير الخريطة
- باستخدام الماوس، اضغط لأسفل بزر الماوس الأيمن على الخريطة واسحب إلى اليسار أو اليمين.
- باستخدام شاشة تعمل باللمس، المس الخريطة بإصبعين وقم بالتدوير.
- مع تركيز الخريطة، استخدم مفتاح shift ومفاتيح الأسهم اليسرى أو اليمنى.
- باستخدام عنصر التحكم في التدوير باستخدام الماوس أو اللمس أو لوحة المفاتيح / مفاتيح الإدخال.
عرض الخريطة
- باستخدام الماوس، اضغط لأسفل بزر الماوس الأيمن على الخريطة واسحب لأعلى أو لأسفل.
- باستخدام شاشة تعمل باللمس، المس الخريطة بإصبعين واسحبهما لأعلى أو لأسفل معا.
- مع تركيز الخريطة، استخدم مفتاح shift بالإضافة إلى مفتاحي السهمين لأعلى أو لأسفل.
- باستخدام التحكم في درجة الصوت باستخدام الماوس أو اللمس أو لوحة المفاتيح / مفاتيح الإدخال.
تغيير نمط الخريطة
لا يريد جميع المطورين أن تكون جميع أنماط الخرائط الممكنة متاحة في تطبيقاتهم. إذا عرض المطور عنصر تحكم منتقي النمط في الخريطة، فيجوز للمستخدم تغيير نمط الخريطة باستخدام الماوس أو اللمس أو لوحة المفاتيح باستخدام علامة التبويب أو مفتاح الإدخال. يمكن للمطور تحديد أنماط الخريطة التي يريد إتاحتها في عنصر تحكم منتقي نمط الخريطة. أيضا ، يمكن للمطور تعيين نمط الخريطة وتغييره برمجيا.
استخدام تباين عال
- عند تحميل عنصر تحكم الخريطة، فإنه يتحقق لمعرفة ما إذا كان التباين العالي ممكنا وأن المتصفح يدعمه.
- لا يراقب عنصر تحكم الخريطة وضع التباين العالي للجهاز. إذا تغير وضع الجهاز، فلن تتغير الخريطة. وبالتالي ، سيحتاج المستخدم إلى إعادة تحميل الخريطة عن طريق تحديث الصفحة.
- عند اكتشاف تباين عال، سيتحول نمط الخريطة تلقائيا إلى تباين عال، وستستخدم جميع عناصر التحكم المضمنة نمط تباين عال. على سبيل المثال ، سيستخدم ZoomControl و PitchControl و CompassControl و StyleControl وعناصر التحكم المضمنة الأخرى نمط تباين عال.
- هناك نوعان من التباين العالي ، الضوء والظلام. إذا كان من الممكن اكتشاف نوع التباين العالي بواسطة عناصر تحكم الخريطة ، ضبط سلوك الخريطة وفقا لذلك. إذا كان الضوء ، تحميل نمط الخريطة grayscale_light. إذا تعذر اكتشاف النوع أو كان داكنا، تحميل نمط high_contrast_dark.
- في حالة إنشاء عناصر تحكم مخصصة، من المفيد معرفة ما إذا كانت عناصر التحكم المضمنة تستخدم نمط تباين عال. يمكن للمطورين إضافة فئة css على div حاوية الخريطة للتحقق. فئات CSS التي سيتم إضافتها هي
high-contrast-darkوhigh-contrast-light. للتحقق من استخدام جافا سكريبت، استخدم:
map.getMapContainer().classList.contains("high-contrast-dark")
أو، استخدم:
map.getMapContainer().classList.contains("high-contrast-light")
اختصارات لوحة المفاتيح
تحتوي الخريطة على عدد من اختصارات لوحة المفاتيح المضمنة التي تسهل استخدام الخريطة. تعمل اختصارات لوحة المفاتيح هذه عندما يكون للخريطة تركيز.
| المفتاح | إجراء |
|---|---|
Tab |
تنقل عبر عناصر التحكم والنوافذ المنبثقة في الخريطة. |
ESC |
انقل التركيز من أي عنصر في الخريطة إلى عنصر خريطة المستوى الأعلى. |
Ctrl + Shift + D |
تبديل مستوى تفاصيل قارئ الشاشة. |
| مفتاح السهم لليسار | تحريك الخريطة اليسرى 100 بكسل |
| مفتاح السهم لليمين | قم بتحريك الخريطة بشكل صحيح 100 بكسل |
| مفتاح السهم لأسفل | تحريك الخريطة لأسفل 100 بكسل |
| مفتاح السهم لأعلى | تحريك الخريطة بسرعة 100 بكسل |
Shift + سهم لأعلى |
زيادة درجة وضوح الخريطة بمقدار 10 درجات |
Shift + سهم لأسفل |
تقليل درجة ميل الخريطة بمقدار 10 درجات |
Shift + سهم لليمين |
تدوير الخريطة 15 درجة في اتجاه عقارب الساعة |
Shift + سهم لليسار |
تدوير الخريطة 15 درجة عكس اتجاه عقارب الساعة |
علامة الجمع () أو *علامة يساوي (+=) |
التكبير |
علامة الطرح أو الواصلة () أو *الشرطة السفلية (_-) |
التصغير |
Shift + سحب الماوس على الخريطة لرسم المنطقة |
تكبير المنطقة |
* عادة ما تشترك اختصارات المفاتيح هذه في نفس المفتاح على لوحة المفاتيح. تمت إضافة هذه الاختصارات لتحسين تجربة المستخدم. لا يهم أيضا ما إذا كان المستخدم يستخدم مفتاح shift أم لا لهذه الاختصارات.
دعم قارئ الشاشة
يمكن للمستخدمين التنقل في الخريطة باستخدام لوحة المفاتيح. في حالة تشغيل قارئ شاشة، ستقوم الخريطة بإعلام المستخدم بالتغييرات التي تطرأ على حالته. على سبيل المثال، يتم إعلام المستخدمين بتغييرات الخريطة عند تحريك الخريطة أو تكبيرها. بشكل افتراضي، توفر الخريطة أوصافا مبسطة تستبعد مستوى التكبير/التصغير وإحداثيات مركز الخريطة. يمكن للمستخدم تبديل مستوى تفاصيل هذه الأوصاف باستخدام اختصار Ctrl + + ShiftDلوحة المفاتيح .
يجب أن تحتوي أي معلومات إضافية يتم وضعها على الخريطة الأساسية على معلومات نصية مقابلة لمستخدمي قارئ الشاشة. تأكد من إضافة سمات تطبيقات الإنترنت الغنية التي يمكن الوصول إليها (ARIA) والبديل والعنوان عند الاقتضاء.
جعل لوحة المفاتيح المنبثقة متاحة
غالبا ما تستخدم علامة أو رمز لتمثيل موقع على الخريطة. عادة ما يتم عرض معلومات إضافية حول الموقع في نافذة منبثقة عندما يتفاعل المستخدم مع العلامة. في معظم التطبيقات، تظهر النوافذ المنبثقة عندما ينقر المستخدم على علامة أو ينقر عليها. ومع ذلك، يتطلب النقر واللمس من المستخدم استخدام الماوس وشاشة تعمل باللمس، على التوالي. تتمثل إحدى الممارسات الجيدة في جعل النوافذ المنبثقة متاحة عند استخدام لوحة مفاتيح. يمكن تحقيق هذه الوظيفة عن طريق إنشاء نافذة منبثقة لكل نقطة بيانات وإضافتها إلى الخريطة.
يقوم المثال التالي بتحميل نقاط الاهتمام على الخريطة باستخدام طبقة رمز ويضيف نافذة منبثقة إلى الخريطة لكل نقطة اهتمام. يتم تخزين مرجع لكل نافذة منبثقة في خصائص كل نقطة بيانات. يمكن أيضا استردادها للحصول على علامة، مثل عند النقر فوق علامة. عند التركيز على الخريطة ، سيسمح الضغط على مفتاح tab للمستخدم بالتنقل عبر كل نافذة منبثقة على الخريطة.
نصائح إضافية حول إمكانية الوصول
فيما يلي بعض النصائح الإضافية لجعل تطبيق تعيين الويب الخاص بك أكثر سهولة.
- في حالة عرض العديد من بيانات النقاط التفاعلية على الخريطة، ضع في اعتبارك تقليل الفوضى واستخدام التجميع.
- تأكد من أن نسبة تباين الألوان بين النص/الرموز وألوان الخلفية هي 4.5:1 أو أكثر.
- حافظ على رسائل قارئ الشاشة (سمات ARIA والبديل والعنوان) قصيرة ووصفية وذات مغزى. تجنب المصطلحات والمختصرات غير الضرورية.
- حاول تحسين الرسائل المرسلة إلى قارئ الشاشة لتوفير معلومات قصيرة ذات مغزى يسهل على المستخدم هضمها. على سبيل المثال، إذا كنت تريد تحديث قارئ الشاشة بتردد عال، مثل عندما تتحرك الخريطة، ففكر في القيام بالنقاط التالية:
- انتظر حتى تنتهي الخريطة من التحرك لتحديث قارئ الشاشة.
- خنق التحديثات إلى مرة واحدة كل بضع ثوان.
- دمج الرسائل معا بطريقة منطقية.
- تجنب استخدام اللون كوسيلة وحيدة لنقل المعلومات. استخدم النص أو الرموز أو الأنماط لتكملة اللون أو استبداله. بعض الاعتبارات:
- إذا كنت تستخدم طبقة فقاعة لإظهار القيمة النسبية بين نقاط البيانات، ففكر في قياس نصف قطر كل فقاعة أو تلوين الفقاعة أو كليهما.
- فكر في استخدام طبقة رموز ذات أيقونات مختلفة لفئات مترية مختلفة، مثل المثلثات والنجوم والمربعات. تدعم طبقة الرمز أيضا قياس حجم الرمز. يمكن أيضا عرض تسمية نصية.
- في حالة عرض بيانات الخط، يمكن استخدام العرض لتمثيل الوزن أو الحجم. يمكن استخدام نمط صفيف شرطة لتمثيل فئات مختلفة من الخطوط. يمكن استخدام طبقة الرمز مع خط لتراكب الرموز على طول الخط. يعد استخدام رمز سهم مفيدا لإظهار تدفق الخط أو اتجاهه.
- في حالة عرض بيانات المضلع، يمكن استخدام نمط، مثل الخطوط، كبديل للون.
- لا يمكن للمستخدمين الذين يعانون من ضعف البصر الوصول إلى بعض المرئيات مثل الخرائط الحرارية وطبقات التجانب وطبقات الصور. بعض الاعتبارات:
- اطلب من قارئ الشاشة وصف ما تعرضه الطبقة عند إضافته إلى الخريطة. على سبيل المثال، إذا تم عرض طبقة تجانب رادار الطقس، فاجعل قارئ الشاشة يقول "بيانات رادار الطقس متراكبة على الخريطة".
- حدد مقدار الوظائف التي تتطلب تمرير الماوس. لن يتمكن المستخدمون الذين يستخدمون لوحة مفاتيح أو جهاز يعمل باللمس من الوصول إلى هذه الوظائف للتفاعل مع تطبيقك. لاحظ أنه لا يزال من الممارسات الجيدة أن يكون لديك نمط تمرير للمحتوى التفاعلي مثل الرموز والروابط والأزرار القابلة للنقر.
- حاول التنقل في تطبيقك باستخدام لوحة المفاتيح. تأكد من أن ترتيب علامات التبويب منطقي.
- في حالة إنشاء اختصارات لوحة المفاتيح، حاول قصرها على مفتاحين أو أقل.
الخطوات التالية
تعرف على إمكانية الوصول في وحدات ويب SDK.
تعرف على كيفية تطوير تطبيقات يمكن الوصول إليها باستخدام Microsoft Learn:
ألق نظرة على أدوات إمكانية الوصول المفيدة التالية: