تنفيذ دعم قارئ الشاشة

  • 16 دقائق

هناك ثلاثة نهج عامة لتنفيذ إمكانية الوصول.

  • عناصر التحكم الدلالية (المضمنة)
  • عنَاصر التحكم المخصصة
  • عناصر التحكم البديلة

دعونا نشرح كل نهج من هذه الأساليب.

عناصر التحكم الدلالية (المضمنة)

أولا، استخدم عناصر التحكم الدلالية واترك الأساس يعالج معظم العمل نيابة عنك. عناصر التحكم المضمنة هي عناصر HTML مضمنة مثل الأزرار والارتباطات وحقول النماذج التي تأتي مع ميزات إمكانية وصول ذوي الاحتياجات الخاصة المتأصلة. على سبيل المثال، يضمن استخدام <علامة زر> بدلا من div< ذي> النمط إمكانية الوصول إلى الزر بشكل افتراضي، مع الاسم الوارد من محتويات العلامة والدور هو "الزر". فيما يلي بعض الاعتبارات لعناصر التحكم المضمنة الشائعة:

نص ثابت (<امتداد>)

تأكد من أن النص الثابت له معنى ويوفر سياقا. في هذا المثال للنص الثابت في HTML، الاسم هو محتوى العلامة، والدور هو النص.

<span>Office privacy settings give you control over your experience and data.</span>

Name   Office privacy settings give you control over your experience and data.
Role     text

صورة (<img>)

للحصول على صورة، استخدم <علامة img> . في المثال، يأتي الاسم من السمة البديلة ، والدور هو الصورة. استخدم السمة البديلة لتوفير بديل نصي للصور.

<img src="SmartArt2.png" alt="Alternating Hexagons">

Name   Alternating Hexagons
Role     image

الزر (<زر>)

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

<button>End Session</button> 

Name   End Session
Role     button

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

<a href=”https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25”>Learn more about accessibility in PowerPoint</a>

Name   Learn more about accessibility in PowerPoint
Role     Link
Value   https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25

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

خانة الاختيار (<نوع الإدخال="خانة الاختيار">)

بالنسبة لخانات الاختيار، استخدم <نوع الإدخال="خانة الاختيار"> واستخدم علامة تسمية للتسمية. في المثال، يأتي الاسم من محتوى علامة التسمية، ويأتي الدور من سمة النوع. لكل نوع إدخال دوره الخاص، مثل الراديو والنص وما إلى ذلك. تحتوي خانة الاختيار أيضا على قيمة. يأتي من السمة المحددة.

<label for=”checkboxId”>Always Use Subtitles</label>
<input type=”checkbox” id=”checkboxId” checked>


Name   Always Use Subtitles
Role     checkbox
Value   ToggleState_On

عنَاصر التحكم المخصصة

إذا لم تلبي عناصر التحكم الدلالية/المضمنة احتياجاتك، فقد تحتاج إلى تنفيذ عناصر تحكم مخصصة. تعلم العديد من مطوري الويب أنه يمكنهم إضافة التصميم ومعالجات الأحداث إلى div<> لجعله يبدو ويعمل بالطريقة التي يريدها، مما يؤدي إلى إنشاء عناصر تحكم مخصصة بهذه الطريقة. ومع ذلك، هناك حاجة إلى عمل إضافي لتسهيل الوصول إلى عناصر التحكم المخصصة هذه. يجب أن تكون قابلة للتشغيل باستخدام كل من لوحة المفاتيح والماوس، ويجب عرض المعلومات الدلالية لتمثيلها بشكل صحيح في شجرة إمكانية الوصول.

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

في عام 2014، نشر W3C معيار تطبيقات الإنترنت الغنية التي يمكن الوصول إليها (ARIA)، والذي يسمح لمطوري الويب بتوفير الدلالات اللازمة لعناصر التحكم المخصصة التي يمكن الوصول إليها. على سبيل المثال، إذا كان لديك رسم SVG تريد أن يعمل كزر تبديل، يمكنك إضافة سمة تسمية aria لتحديد اسم ودور="زر" لتعريف دوره في شجرة إمكانية وصول ذوي الاحتياجات الخاصة. بالإضافة إلى ذلك، يمكنك استخدام السمة التي يتم ضغطها على aria لتحديد حالة التبديل. 

<svg role=”button” aria-label=”Bullets” aria-pressed=”true”
	tabindex=”0” xmlns=”http://www.w3.org/2000/svg” width=”32”
	height=”32” viewBox=”0,0,2048,2048”>
		<!-- paths -->
	</svg>

Name    Bullets
Role      button
Value    ToggleState_On

موارد

عناصر التحكم البديلة

في حالات نادرة، قد تحتاج إلى إنشاء تمثيل بديل، ولكن يجب أن يكون هذا الملاذ الأخير. يتضمن ذلك إنشاء عناصر منفصلة لما يتم عرضه على الصفحة مقابل ما يتم عرضه في شجرة إمكانية وصول ذوي الاحتياجات الخاصة لقارئات الشاشة. على سبيل المثال، قد تستخدم** aria-hidden="true"** لإخفاء عنصر من شجرة إمكانية وصول ذوي الاحتياجات الخاصة أثناء عرضه على الصفحة.

<!- - visible on page, but not to screen reader  - - >
<div aria-hidden=”true”>
</div>

<!- - visible to screen reader, but not on page  - - >
,div class=”srOnly” role=”menu” aria-label=”More options”>
</div>

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

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

الاسم

يمكن تعريف الاسم باستخدام سمات مثل aria-labelby أو aria-label أو محتوى <علامة التسمية> أو السمة البديلة إذا كانت <img> أو نوع الإدخال ="صورة". يمكنك أيضا استخدام محتوى العلامة أو سمة العنوان أو السمة aria-describedby أو سمة aria-description . الثلاثة الأخيرة هي خيارات احتياطية إذا لم يتم تحديد أي من الخيارات الأخرى. وهذا يعطي ترتيب الأولوية لحساب الاسم.

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

دور

يتم تحديد دور عنصر بواسطة سمة الدور إذا تم تحديده. يتم تحديدها بواسطة سمة النوع إذا لم يتم تحديدها وكنت تستخدم <علامة إدخال> . بالنسبة إلى الأنواع الأخرى من العلامات (<img> وزر <><وزر> وما إلى ذلك)، يتم تحديدها حسب نوع العلامة.

القيمة

تشير القيمة إلى خصائص مثل aria-checked، وsria-pressed، و aria-expanded، و aria-selected، و aria-disabled، اعتمادا على نوع عنصر التحكم. بالنسبة لعلامات <الإدخال>، يتم استخدام السمة المحددة أو المعطلة، وبالنسبة للارتباطات التي تستخدم<> علامة، يتم استخدام السمة href.

يضمن تحديد هذه الخصائص بشكل صحيح أن التقنيات المساعدة يمكنها تفسير العناصر والتفاعل معها بدقة.

Resource

CSS قيد التنفيذ: محتوى غير مرئي لمستخدمي قارئ الشاشة فقط

تحديد اللغة

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

<p lang="en-us">This is English text</p>
<p lang="fr-fr">C'est Français texte</p>
<p lang="zh-cn">&#36825;&#26159;&#20013;&#25991;&#30430;</p>

Specify the lang attribute on the <html> tag
Specify the lang attribute on any tag that uses a different language than its parent
Narrator reads the text in each language properly
If lang attribute is specified
And Text-to-Speech is installed for that language

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