تنفيذ مكبرات الشاشة

10 دقائق

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

دعم تغيير الحجم

تعيين التركيز على العنصر وتوفير حدود العناصر

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

تنفيذ نمط النص

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

تغيير حجم DPI

تقيس النقاط في البوصة (DPI) عدد النقاط أو وحدات البكسل التي يمكن احتواؤها في بوصة واحدة من جهاز العرض. يشير ارتفاع DPI إلى تفاصيل أكبر وصور أكثر وضوحا. يعمل تغيير حجم نقطة لكل بوصة (DPI) على ضبط حجم عناصر واجهة المستخدم استنادا إلى إعدادات DPI لجهاز العرض، وهو أمر مهم بشكل خاص للشاشات ذات نقطة لكل بوصة (DPI) الموجودة على الهواتف الذكية الحديثة وأجهزة الكمبيوتر اللوحية وأجهزة العرض عالية الدقة. عادة ما يتم دمج تعديلات تغيير حجم DPI في استراتيجيات التصميم المستجيبة. عندما يقوم المستخدمون بتكبير إعدادات العرض أو تعديلها، يضمن تغيير حجم كافة عناصر واجهة المستخدم، مثل النص والأزرار والصور، بشكل صحيح. تساعد هذه الوظيفة على منع التمرير الأفقي والحفاظ على تخطيط مرن مع تكيف المحتوى مع أحجام الشاشة ودقتها المختلفة. عند تنفيذ تحجيم DPI، من الضروري مراعاة الأنظمة الأساسية مثل النظام الأساسي العام ل Windows (UWP) وتطبيقات Office Win32.

تحجيم النص

لدعم تحجيم النص في تطبيقات الويب، من المهم اختيار وحدات CSS بعناية، حيث ستتوسع بعض الوحدات بينما لن يتم تغيير حجم الوحدات الأخرى. يتم تعيين حجم الخط الافتراضي إلى 16 بكسل، ويتم تطبيق عامل مقياس النص على هذا الحجم الأساسي. تستند الوحدات النسبية مثل em أو ex أو ch أو النسب المئوية إلى حجم خط العنصر الأصل، لذلك سيتم تغيير حجمها وفقا لذلك. وهذا يعني أن أي عناصر تابعة تستخدم هذه الوحدات ستغير حجمها أيضا. في المقابل، لن يتم تغيير حجم الوحدات المطلقة أو تلك المتعلقة بمنفذ العرض، مما يعني أن العناصر التابعة التي تستخدم هذه الوحدات ستظل دون تغيير، حتى إذا كانت تستخدمها أو ex أو ch أو النسب المئوية. ومع ذلك، سيتم تغيير حجم العناصر التابعة التي تستخدم الريم بشكل صحيح لأن الريم يستند إلى حجم الخط للعنصر الجذر بدلا من العنصر الأصل. بالنسبة للعناصر والحاويات التي يجب تغيير حجم الخط بها، من الأفضل استخدام rem أو em أو ex أو ch لعرضها وارتفاعها. ترتبط العروض والارتفاعات المستندة إلى النسبة المئوية بأبعاد العنصر الأصل، لذلك لن يتم تغيير حجمها إلا إذا تغيرت أبعاد العنصر الأصل.

Resource

Deque University: أنماط النص وتغيير الحجم وإعادة الانسياب والتكبير/التصغير

دعم إعادة الانسياب

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

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

بالنسبة لتطبيقات الويب، تأكد من عرض الصفحة على المقياس الصحيح في البداية عن طريق الإضافة <meta name="viewport" content="width=device-width, initial-scale=1"> إلى الرأس. لا تقوم وثائق إعادة انسياب WCAG بتعيين عرض منفذ العرض، مما يؤدي إلى عرضه على نطاق صغير بشكل افتراضي على iPhone.

<meta name="viewport" 
      content="width=device-width, initial-scale=1">

إذا كان تطبيق الويب الخاص بك يحتوي على وظائف التصغير والتكبير/التصغير الخاصة به، فحدد user-scalable=no لتعطيل تكبير/تصغير المستعرض. وإلا، اتركه ممكنا.

<meta name="viewport" 
      content="width=device-width, initial-scale=1, user-scalable=no">

لجعل تجربة مستخدم الويب (تجربة المستخدم) تتكيف مع موانئ عرض أضيق، تجنب تعيين عرض ثابت للصور. بدلا من ذلك، استخدم max-width: 100% للسماح بتقليص الصور داخل حاويات ضيقة دون التوسع في حاويات واسعة. تعيين الارتفاع إلى تلقائي أو حذفه للحفاظ على التناسب. وهذا يضمن بقاء الصور داخل منفذ العرض وتبقى متناسبة.

عرض ثابت للصور	عرض 100% للصور
`.image {` `width: 556px;` `height: 278px;` `}`	`.image {` `max-width: 100%;` `}`

لضمان استجابة الأزرار بشكل جيد لتغيير حجم النص، اتبع الخطوات التالية:

تعيين حجم الخط: قم بزيادة حجم الخط إلى قيمة كبيرة جدا للتحقق من وجود مشاكل في الاقتطاع.
إزالة تجاوز السعة مخفي: قم بإزالة الخاصية overflow: hidden لمنع الاقتطاع. ومع ذلك، قد يؤدي هذا إلى توسيع النص خارج حدود الزر. تنشأ هذه المشكلة بسبب تعيين عرض الزر وارتفاعه بالبكسل، والتي لا يتم ضبطها مع تحجيم النص.
التبديل إلى وحدات REM: استبدل العرض والارتفاع المستندين إلى البكسل بوحداتالريم لدعم تحجيم النص. يسمح هذا للزر بتغيير الحجم مع النص.
ضبط الموضع: تغيير قيم الموضع من وحدات البكسل (px) إلى وحدات الريم لتجنب التداخل.
معالجة الترجمة: عند التحقق من الإصدارات المترجمة، مثل الروسية، قد تجد النص يلتف ويتسرب من الزر. وذلك لأن ارتفاع الزر ثابت، مع افتراض سطر واحد فقط من النص. قم بتعيين الارتفاع إلى تلقائي أو إزالته بالكامل للسماح للزر بالتكبير ليناسب النص.

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

قبل	بعد
`button {` `width: 120px;` `height: 30px;` `overflow: hidden;` `}` `.button1 {` `position: absolute;` `margin-left: 0px;` `margin-top: 0px;` `}` `.button2 {` `position: absolute;` `margin-left: 130px;` `margin-top: 0px;` `}`	`button {` `width: 7.5rem;` `height: 1.875rem;` `}` `.button1 {` `margin-left: 0rem;` `margin-top: 0rem;` `}` `.button2 {` `margin-left: 8.125rem;` `margin-top: 0rem;` `}`

إضافة هوامش: وأخيرا، أضف هوامش بين الأزرار للتأكد من وجود تباعد كاف عند مكدسها. يساعد هذا الأزرار على الالتفاف بشكل صحيح في منفذ عرض ضيق.
```
.button {
    width: 44%;
    margin: 2%;
}

@media all and 
(max-width: 18rem) {
    .button {
        width: 95%;
    }
}
```

لتخطيط الأزرار التي تملأ عرض الجزء وتتحول من صف واحد إلى صفين، يمكنك استخدام تقنيات CSS مختلفة. ابدأ باستخدام display: flex على الحاوية، التي توفر خيارات مختلفة للتحجيم والتباعد والمحاذاة والتفاف قائمة خطية من العناصر. Add display: flex إلى الحاوية وتعيين خصائص إضافية على كل من الحاوية والعناصر.

.buttoncontainer {
    display: flex;
    flex-direction: row;
    align-content: stretch;
}

.button {
    width: 100%;
    margin: 2%;
}

@media all and (max-width: 18rem) {
    .buttoncontainer {
        flex-wrap: wrap;
    }
}

بدلا من ذلك، يمكنك استخدام display: grid إمكانات تخطيط تشبه الجدول دون استخدام جدول فعلي. حدد حجم الصفوف والأعمدة وتباعدها في الحاوية، ثم حدد مواقع الصفوف والأعمدة لكل عنصر. استخدم استعلامات الوسائط لإعادة تكوين الشبكة حسب الحاجة. تتمثل ميزة هذه التقنيات في أنها تعريفية، باستخدام CSS فقط وليس JavaScript.

قبل	بعد
`.buttoncontainer {` `display: grid;` `grid-template-columns: 1fr 1fr;` `grid-template-rows: 1fr;` `column-gap: 10px;` `}` `.button {` `grid-row-start: 1;` `grid-row-end: 2;` `justify-self: stretch;` `}` `.button1 {` `grid-column-start: 1;` `grid-column-end: 2;` `}` `.button2 {` `grid-column-start: 2;` `grid-column-end: 3;` `}`	`@media all and (max-width: 18rem) {` `.buttoncontainer {` `grid-template-columns: 1fr;` `grid-template-rows: 1fr 1fr;` `row-gap: 10px;` `}` `.button {` `grid-column-start: 1;` `grid-column-end: 2;` `}` `.button1 {` `grid-row-start: 1;` `grid-row-end: 2;` `}` `.button2 {` `grid-row-start: 2;` `grid-row-end: 3;` `}` `}`

Do's و Don'ts لإعادة الانسياب

فيما يلي بعض المهام والبعض لا يمكن إعادة انسيابها:

استخدم الحد الأقصى للعرض لجعل العناصر تتقلص لتناسب عرض الحاوية.
استخدم تلقائيا لجعل الحاويات تنمو لتناسب محتواها، وتحجيم الصور بشكل متناسب، وتوسيط العناصر بهوامش متساوية.
استخدم rem أو ex أو ch أو النسب المئوية لأحجام الخطوط والعناصر الأخرى لدعم تحجيم النص.
استخدم استعلامات الوسائط لتحديد تخطيطات مختلفة لعرض مختلف، مع إضافة تخطيط لكل نقطة توقف.
استخدام العرض: مضمن أو عرض: كتلة مضمنة مع موضع: ثابت للسماح للعناصر بالتكديس والالتفاف مثل النص
استخدام جهاز العرض: مرن لخيارات التخطيط المتقدمة للقوائم الخطية للعناصر، ولكن تحقق من التوافق إذا كنت بحاجة إلى دعم Internet Explorer.
استخدام جهاز العرض: شبكة لتخطيطات تشبه الجدول دون استخدام الجداول.
استخدم رسومات المتجهات كلما أمكن ذلك لضمان التنزيلات السريعة والصور الحادة على نطاقات أعلى. SVG المضمن هو خيار رائع.
استخدم img srcset لتحديد إصدارات دقة مختلفة من نفس الصورة، ما يسمح للمستعرض بتحديد النسخة المناسبة استنادا إلى إعدادات المقياس وعرض النطاق الترددي وحالة ذاكرة التخزين المؤقت.
لا تستخدم الموضع: مطلق ما لم يكن ذلك ضروريا، مثل إنشاء التراكبات، واستخدمه فقط على الحاوية، وليس العناصر الموجودة داخلها.
لا تستخدم وحدات مثل cm أو mm أو in أو px أو pt أو pc لأحجام الخطوط، لأنها لا تدعم تحجيم النص.
لا تستخدم الجداول للتخطيط؛ استخدمها فقط للبيانات الجدولية للحفاظ على الدلالات الصحيحة وإمكانية الوصول في شجرة إمكانية الوصول.

باختصار،

افعل ✓	عدم X
الحد الأقصى للعرض auto حركة العين السريعة ، السابقة ، الفصل ، % @media الكل و (أقصى عرض: 18rem) عرض: مضمن عرض: كتلة مضمنة جهاز العرض: flex (تحقق من توافق Internet Explorer) العرض: الشبكة (تحقق من توافق Internet Explorer) <SVG> <img srcset = " ">	الموضع: مطلق (باستثناء التراكبات) cm, mm, in, px, pt, pc (باستثناء الهوامش والمسافة والحدود والكتل الكبيرة) <جدول> (باستثناء البيانات الجدولية)

المحتوى عند المرور أو التركيز

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

تتضمن العناصر الرئيسية لتعريف أدوات مخصص وظيفي ما يلي:

معالجات الأحداث: السماح للمستخدمين باستدعاء تلميحات الأدوات ورفضها باستخدام معالجات الأحداث والمفاتيح. ستستدعي معالجات الأحداث مثل mouseEnter والتركيز إظهار تلميح الأدوات، وسيخفي onMouseOut و onBlur تلميح الأدوات جنبا إلى جنب مع الأحداث الرئيسية عندما يضغط المستخدم على مفتاح الإلغاء.
```
tooltip1.onmouseenter = showTooltip;
tooltip1.onmouseleave = hideTooltipAfterDelay;
```

إخفاء تلميحات الأدوات: السماح للمستخدمين بتجاهل تلميحات الأدوات باستخدام المفاتيح أو معالجات الأحداث مثل onBlur أو onMouseOut.

triggerElement.addEventListener('mouseenter', showTooltip);

triggerElement.addEventListener('focus', showTooltip);

triggerElement.addEventListener('mouseleave', hideTooltip);

triggerElement.addEventListener('blur', hideTooltip);

document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') hideTooltip();
});

معالج الأحداث لأسفل المفتاح: أضف معالج أحداث مفتاح لأسفل على المستند للتعامل مع مفتاح التحكم، مع التأكد من أنه يعمل بغض النظر عن مكان تركيز لوحة المفاتيح.
```
function documentKeyHandler(e) 
{
    e = e || window.event;
    if(e.ctrlKey) 
        hideTooltip();
}
```

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

الملاحظات

هل كانت هذه الصفحة مفيدة؟