برنامج تعليمي مفصل حول أساليب ومزايا وعيوب إخفاء العناصر في الويب

كود مصدر الحالة:

https://codepen.io/shadeed/pen/03caf6b36727accb692eecbc38f95d39?editors=1100

5. أثر التيسير على الرؤية: مخفي

يكون العنصر مخفيًا، وتتم إزالة العناصر التابعة له من شجرة إمكانية الوصول، ولا تعرض برامج قراءة الشاشة العنصر.

(1) تحديد المواقع

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

ولوضع الرابط خارج الشاشة يجب أن نضيف ما يلي

「CSS」

 .تخطي الارتباط {
الموقف: مطلق؛
أعلى: -100%؛
}

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

 .تخطي الرابط: التركيز {
الموقف: مطلق؛
أعلى: 0؛
}

كود مصدر الحالة:

https://codepen.io/shadeed/pen/707992e7c98ea633fc6606e576ef8a04?editors=0100

6. أثر الوصول على الموضع: المطلق |

العنصر متاح لقارئات الشاشة ولوحة المفاتيح القابلة للتركيز. إنه مخفي فقط من إطار العرض.

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

في المثال أعلاه، تحتوي المنطقة السوداء الشفافة على مسار مقطع. عند تطبيق مسار المقطع على عنصر ما، لن يظهر أي شيء تحت المنطقة السوداء الشفافة.

لتوضيح ما سبق بشكل أكثر وضوحًا، سأستخدم أداة Clippy. في صورة GIF أدناه، لدي مسار المقطع التالي:

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

 إم جي {
مسار المقطع: دائرة (0 عند 50% 50%)؛
} 

7. تأثير إمكانية الوصول على مسار المقطع

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

كود مصدر الحالة:

https://codepen.io/shadeed/pen/9fdbd7be9fd9dac17a614c96ba7f64b1?editors=0100

3. التحكم في اللون وحجم الخط

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

1. لون شفاف

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

2. حجم الخط

بالإضافة إلى ذلك، من المفيد ضبط حجم الخط على 0، حيث يؤدي ذلك إلى إخفاء النص بشكل مرئي. خذ بعين الاعتبار المثال التالي، حيث يوجد زر بالبنية التالية:

 <زر>
<svg width = "24" height = "24" viewBox = "0 0 24 24" aria-hidden = "false" focusable = "false">
<!-- بيانات المسار -->
</svg>
<span>أعجبني</span>
</زر>

هدفنا هو إخفاء النص بطريقة يسهل الوصول إليها. لهذا أضفت CSS التالي

 نطاق الزر {
اللون: شفاف؛
حجم الخط: 0;
}

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

كود مصدر الحالة:

https://codepen.io/shadeed/pen/4eacdf50c3339fced7f787156c569372?editors=1100

3. الأغنية المخفية

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

 <زر>
قائمة طعام
<svg aria-hidden="true"><!-- --></svg>
</زر>

في المثال أعلاه، لدينا زر القائمة مع تسمية وأيقونة. لإخفاء الرموز عن قارئات الشاشة، تمت إضافة aria-hidden.

وفقًا لشبكة مطوري Mozilla (MDN)، فيما يلي حالات استخدام الخصائص

إخفاء المحتوى الزخرفي مثل الأيقونات والصور. إخفاء النص المنسوخ. إخفاء المحتوى الموجود خارج الشاشة أو المطوي.

4. تأثير إمكانية الوصول على aria-hidden="true"

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

(1) الرسوم المتحركة والتفاعل

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

الرسوم المتحركة القائمة - مثال سيء

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

 أول {
العتامة: 0؛
تحويل: ترجمة X (100٪)؛
الانتقال: 0.3 ثانية سهولة الخروج؛
}

أول.نشط {
العتامة: 1؛
تحويل: ترجمةX(0);
}

مع ما سبق، ستتوسع القائمة وتنهار بناءً على فئة .active، والتي ستتم إضافتها عبر JavaScript على النحو التالي:

 MenuToggle.addEventListener('click', function(e){
e.preventDefault();
navMenu.classList.toggle('active');
}); 

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

فيما يلي لقطة شاشة لشجرة إمكانية الوصول من Chrome Dev Tools:

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

تجنب استخدام تركيز لوحة المفاتيح عندما تكون القائمة مخفية. تجنب إخبار التنقل عبر قارئ الشاشة عندما يكون التنقل مخفيًا

توضح لقطة الشاشة أدناه كيف يرى دوار VoiceOver في نظام التشغيل Mac OS الصفحة. قائمة التنقل موجودة وهي مخفية

كود مصدر الحالة:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0100

الرسوم المتحركة القائمة - مثال جيد

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

「CSS」

 أول {
الرؤية: مخفية؛
العتامة: 0؛
تحويل: ترجمة X (100٪)؛
الانتقال: 0.3 ثانية سهولة الخروج؛
}

أول.نشط {
الرؤية: مرئية؛
العتامة: 1؛
تحويل: ترجمةX(0);
}

بمجرد إضافتها، سيتم إخفاء القائمة عن برامج قراءة الشاشة. لنختبر مرة أخرى ونرى ما سيعرضه VoiceOver:

كود مصدر الحالة:

https://codepen.io/shadeed/pen/e94f377dae6104fe45a71c80d59bb58d?editors=0110

5. خانة الاختيار المخصصة

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

 <p class="c-checkbox">
<input class = "sr-only" type = "checkbox" name = "" id = "c1">
<label class="c-checkbox__label" for="c1">مربع اختيار مخصص</label>
</ص>

لتخصيص مربع الاختيار، نحتاج إلى إخفاء الإدخال بطريقة يسهل الوصول إليها. لهذا الغرض ينبغي استخدام الموقف وغيرها من الخصائص. هناك فئة CSS شائعة تسمى sr-only أو visual-hidden والتي تخفي عنصرًا بشكل مرئي فقط وتجعله في متناول مستخدمي لوحة المفاتيح وقارئ الشاشة.

 .sr-فقط {
الحدود: 0؛
مقطع: مستقيم (0 0 0 0)؛
- مسار مقطع webkit: المضلع (0px 0px، 0px 0px، 0px 0px)؛
مسار المقطع: مضلع (0px 0px، 0px 0px، 0px 0px)؛
الارتفاع: 1 بكسل؛
الهامش: -1 بكسل؛
الفائض: مخفي؛
الحشو: 0؛
الموقف: مطلق؛
العرض: 1 بكسل؛
المساحة البيضاء: nowrap؛
}

كود مصدر الحالة: https://codepen.io/shadeed/pen/b722aa72dbe3574617f6506d14e5ac03?editors=1100

زر إخفاء

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

تلخيص

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