طرق إخفاء صفحة الويب

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

• عنصر غير مرئي تمامًا ، علاوة على ذلك ، تتم إزالته من دفق المستند.
• لا يمكن رؤية العنصر من خلال العيون ، ولكنه موجود في المستند وهو متاح للتقنيات المساعدة مثل قارئات الشاشة.
• العنصر مرئي ولكنه مخفي عن قارئات الشاشة.

المقالة ، التي ننشرها اليوم ، مكرسة لتحليل طرق إخفاء عناصر صفحات الويب باستخدام HTML و CSS. هنا ، ستتم مناقشة مشكلات مثل إمكانية الوصول إلى المحتوى والرسوم المتحركة والسيناريوهات الخاصة باستخدام التقنيات لإخفاء البيانات على الصفحات.

HTML5 سمة خفية

Hidden هي سمة HTML منطقية تخفي العناصر التي تم تعيينها إليها. عندما يقوم المتصفح بتحميل الصفحة ، فلن يعرض العناصر ذات السمة hidden ، إلا في حالة تمكين رؤية العناصر يدويًا باستخدام CSS. يشبه تأثير هذه السمة تطبيق display: none قاعدة لعنصر CSS.

النظر في المثال التالي:

 <h1>Spring is on the way</h1> <img hidden src="landscape.jpg" alt=""> <p><!-- Description content --></p> 

هناك علامة تحدد العنوان والصورة والوصف. يجب عرض الصورة فقط إذا تجاوز عرض منفذ العرض 400px . لقد أضفت السمة hidden إلى العنصر <img> .

في CSS ، استخدمت السمة hidden لعرض العنصر فقط إذا كانت مساحة عرض الصفحة بالحجم الصحيح.


مقتطف صفحة الويب

فيما يلي كود CSS المستخدم هنا:

 img[hidden] {  display: none; } @media (min-width: 400px) {  img[hidden] {    display: block;  } } 

→ هنا مثال على هذه الصفحة على CodePen

هنا قد يكون لديك سؤال حول سبب عدم استخدام display: none فقط display: none . سؤال جيد عندما يتم استدعاء محدد صورة من خلال السمة hidden ، يمكننا التأكد من أنه حتى لو لم يتم تحميل رمز CSS لسبب ما ، فسيتم إخفاء العنصر.

▍ السمة المخفية وسهولة الوصول إلى المحتوى

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

خاصية عرض CSS

يحتوي كل عنصر من عناصر صفحة الويب على قيمة خاصية display معينة تم تعيينها إليها افتراضيًا. يمكن أن يكون inline-block ، block ، table وهلم جرا. لإخفاء عنصر باستخدام خاصية display ، يمكننا استخدام display: none بنية. إذا تم إخفاء عنصر باستخدام هذا البناء ، فسيتم إخفاء كل أحفاده به.

تخيل أننا نريد إخفاء الصورة من المثال السابق وقررنا استخدام كود CSS التالي:

 img {  display: none; } @media (min-width: 400px) {  img {    display: block;  } } 

من خلال هذا النهج ، سيتم استبعاد الصورة تمامًا من المستند (من ما يسمى بتدفق المستند - "تدفق المستند") ، وسيكون من المستحيل على قارئات الشاشة الوصول إليها. ربما لم تكن مدركًا تمامًا لمفهوم "تدفق المستندات". من أجل التعامل مع هذا المفهوم ، ألق نظرة على الشكل التالي.


تمت إزالة الكتاب الأزرق من المكدس.

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

إليك نسخة متحركة من مثال يوضح الكتب ما يحدث إذا تمت إزالة أحدها من المجموعة.


إذا قمت بإزالة كتاب من المكدس ، فسيتغير موضع الكتب الأخرى فيه

resources هل تم إخفاء الموارد عن طريق CSS؟

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

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


فحص صفحة تحتوي على صورة كامنة

style أسلوب العنصر

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

 <body>    <style>       .title { color: #000; }    </style> </body> 

إليك CSS التي نجعل بها عنصر style مرئيًا:

 style {    display: block; } 

قد تكون هذه التقنية مفيدة إذا كنت تريد أن تكون كتلة style مرئية ، بالإضافة إلى أنها قابلة للتحرير. لجعل هذه الكتلة قابلة للتحرير ، يمكنك إضافة السمة contenteditable=true إلى علامة style .

هنا هو كيف يبدو.


كتلة نمط مرئية للتحرير

→ هنا عرض توضيحي لهذا المثال

displayCSS خاصية العرض وإمكانية الوصول إلى المحتوى

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

خاصية العتامة CSS

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

هنا مثال.


الكتاب الأزرق غير مرئي ، لكن المكان الذي يحتله لا يزال محجوزًا

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

في CSS ، يبدو استخدام خاصية opacity كما يلي:

 img {    opacity: 0; } 

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


يتم إخفاء الصورة باستخدام خاصية العتامة CSS

كما ترى ، لا تزال الصورة موجودة على الصفحة ، لكن مكانها لا يشغلها. مخفي فقط عن المراقب ، لكنه لا يختفي من الصفحة. بعد نشر المادة ، قالوا لي أن pointer-events: none | auto الممتلكات pointer-events: none | auto يمكن استخدام pointer-events: none | auto لتعطيل أحداث الماوس على عناصر مخفية باستخدام خاصية opacity: 0 . هذه فكرة مهمة ، نظرًا لأن المستخدم قد يكون مرتبكًا من خلال التفاعل مع عنصر مخفي (النقر فوقه ، وتحريكه بالماوس ، واختيار النص).

→ هنا هو عرض لاستخدام خاصية opacity

خاصية العتامة CSS وإمكانية الوصول إلى المحتوى

عنصر مخفي مع opacity: 0 يظل متاحًا لقراء الشاشة. يمكن لمثل هذا العنصر الحصول على التركيز عند العمل مع الصفحة باستخدام لوحة المفاتيح.

خاصية رؤية CSS

باستخدام visibility: hidden خاصية visibility: hidden ، يمكنك إظهار أو إخفاء عناصر ، وذلك بالطريقة نفسها التي فعلنا بها مع opacity: 0 . هذا لا يؤثر على تدفق المستند.


عند استخدام الرؤية: مخفي ، يختفي الكتاب ، لكن مكانه لا يزال شاغلاً

يرجى ملاحظة أن الكتاب الأزرق قد اختفى ، لكن هذا لم يؤثر على ترتيب الكتب الأخرى في المجموعة.

تجدر الإشارة إلى أنه عند استخدام visibility: hidden للعنصر الأصل ، يتم إخفاء كل أحفاده ، ولكن إذا تم تعيين visibility: visible خاصية visibility: visible لأحد المتحدرين ، فسيكون هذا المنحدر مرئيًا.


مجموعة الكتب مخفية ، لكن الكتاب الأزرق مرئي.

دعونا نعود إلى مثالنا المعتاد مع العنوان والصورة والوصف. نعيد كتابة كود HTML الخاص به مثل هذا:

 <article>  <h1>Spring is on the way</h1>  <img align="center" src="landscape.jpg" alt="">  <p><!-- Desc --></p> </article> 

نقوم بتصميمه باستخدام كود CSS التالي:

 article {    visibility: hidden; } img {    visibility: visible; } 

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


العنصر المتداخل مرئي

هنا ، visibility: hidden يتم تعيين خاصية CSS visibility: hidden للعنصر <article> . وإذا قمت بإضافة visibility: visible خاصية visibility: visible إلى العنصر <img> ، فإن الصورة ستكون مرئية. مرة أخرى ، النقطة هنا هي أن الخاصية المعنية يتم تطبيقها على أحفاد العنصر ، ولكن يمكن تجاوزه في العنصر النازل.

→ هنا عرض توضيحي للعمل مع خاصية visibility

propertyCSS رؤية الملكية وسهولة الوصول إلى المحتوى

عند استخدام visibility: hidden خاصية visibility: hidden ، يكون العنصر مخفيًا. تتم إزالته أيضًا من شجرة إمكانية الوصول ، ونتيجة لذلك ، لا تلاحظه أدوات قراءة الشاشة.

إخفاء العناصر وتحديد المواقع

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


ربط مخفي خارج رؤية الصفحة

لوضع عنصر خارج منطقة رؤية الصفحة ، يمكنك استخدام كود CSS التالي:

 .skip-link {    position: absolute;    top: -100%; } 

قيمة top: -100% ستزيل عنصر من منفذ العرض بنسبة 100 ٪ من ارتفاعه. نتيجة لذلك ، سيكون العنصر غير مرئي تمامًا. ولكن إذا تلقى التركيز بعد أن يصل إليه المستخدم باستخدام المفاتيح الموجودة على لوحة المفاتيح ، فيمكن إظهار هذا العنصر:

 .skip-link:focus {    position: absolute;    top: 0; } 

→ هنا هو عرض لهذه الطريقة لإخفاء العناصر

خاصية موضع SSCSS وإمكانية الوصول إلى المحتوى

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

خاصية مسار CSS

إذا تم تطبيق خاصية CSS clip-path على عنصر ما ، فإنه يسمح لك بوصف منطقة تحدد أي جزء من العنصر يجب أن يكون مخفيًا وأيها يجب أن تكون مرئية.


صورة اقتصاص المنطقة

في المثال السابق ، يتم تطبيق خاصية clip-path على حقيقة أن الجانب الأيسر من الصورة مظلمة. عند تطبيق هذه الخاصية ، تختفي الأجزاء المظلمة من الصورة.

من أجل إلقاء نظرة على هذه الخاصية في العمل ، نستخدم أداة clippy . يبدأ العمل بقيم clip-path التالية المحددة في CSS ويصف القناع كمضلع:

 img {    clip-path: polygon(0 0, 0 0, 0 0, 0 0); } 

تجارب على خاصية مسار المقطع ، يتم تحديد منطقة الاقتصاص كمضلع

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

 img {    clip-path: circle(0 at 50% 50%); } 

هنا هو كيف يبدو.


تجارب على خاصية مسار المقطع ، يتم تعيين منطقة الاقتصاص كدائرة

يمكنك تجربة هذه الخاصية هنا.

خاصية مسار مقطع CSS وإمكانية الوصول إلى المحتوى

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

التلاعب مع لون النص وحجم الخط

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

transparencySet شفافية اللون

إذا كنت تستخدم لونًا شفافًا للنص ، فسيكون هذا النص غير مرئي. قد يكون ذلك مفيدًا عند إنشاء أزرار تستخدم الرموز فقط.

size ضبط حجم الخط

بالإضافة إلى ذلك ، إذا قمت بتعيين حجم الخط على 0 ، فسيؤدي ذلك أيضًا إلى إخفاء النص.

النظر في المثال التالي. يوجد زر هنا ، يتم تعريف هيكله من خلال كود HTML التالي:

 <button>  <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false">    <!-- Path data -->  </svg>  <span>Like</span> </button> 

هدفنا هو إخفاء نص هذا الزر ، ولكن في نفس الوقت ، اتركه متاحًا للتقنيات المساعدة. للقيام بذلك ، استخدمت كود CSS التالي:

 .button span {    color: transparent;    font-size: 0; } 

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


1. يتركز محتوى الزر. 2. يتم تعيين النص بلون شفاف. 3. يتم تعيين حجم الخط إلى 0

→ هنا هو عرض لهذا المثال

HTML سمة خفية الأغنية

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

 <button>    Menu    <svg aria-hidden="true"><!-- --></svg> </button> 

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

يتم استخدام هذه السمة ، وفقًا لمواد MDN ، في السيناريوهات التالية:

• إخفاء العناصر الزخرفية مثل الرموز والصور.
• إخفاء النص المكرر.
• إخفاء العناصر المصغرة أو العناصر التي هي خارج الشاشة.

▍Aria خفية السمة وسهولة الوصول إلى المحتوى

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

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

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

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

▍ الرسوم المتحركة القائمة: نهج خاطئ

لدينا قائمة ، عند فتحها ، يجب أن تخرج من الشاشة. أسهل طريقة للقيام بذلك هي باستخدام CSS التالي:

 ul {    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    opacity: 1;    transform: translateX(0); } 

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

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

إليك ما يبدو عليه العمل مع هذه القائمة.


ترك القائمة في العمل

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

إليك شجرة إمكانية الوصول للصفحة المعنية ، والتي تم إنشاؤها باستخدام أدوات علامة التبويب Accessibility لأداة Chrome.


شجرة إمكانية الوصول لقائمة مخفية سيئة التصميم

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

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

توضح الصورة التالية كيف تكون الصفحة مرئية لـ VoiceOver من Mac OS. من السهل ملاحظة أن هذه الأداة ترى القائمة تمامًا حتى لو لم تكن هذه القائمة على الشاشة.


يرى قارئ الشاشة ما لا يجب رؤيته

→ هنا نسخة العمل من هذا المثال

دعونا إصلاح الأخطاء المذكورة أعلاه.

▍ القائمة الرسوم المتحركة: إصلاحات الشوائب

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

 ul {    visibility: hidden;    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out; } ul.active {    visibility: visible;    opacity: 1;    transform: translateX(0); } 

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


قارئ الشاشة لا يرى أي شيء إضافي

→ هنا هو مشروع يوضح مثالا

عناصر خانة الاختيار المخصصة

عنصر خانة الاختيار

يصعب تكوين الإشارات القياسية ، عناصر <input> من checkbox type. إذا كنا بحاجة إلى تكوينها ، فهذا يعني أننا سنحتاج إلى إنشاء تطبيقنا الخاص لهذا العنصر. ألقِ نظرة على كود HTML الأساسي:

 <p class="c-checkbox">  <input class="sr-only" type="checkbox" name="" id="c1">  <label class="c-checkbox__label" for="c1">Custom checkbox</label> </p> 

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

 .sr-only {  border: 0;  clip: rect(0 0 0 0);  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  height: 1px;  margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px;  white-space: nowrap; } 

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

إخفاء المحتوى من قارئات الشاشة

▍ إخفاء بعض الشخصيات

,

, , . , , , :

 Hiding On The Web grinning face with open mouth 

, . , , , . , , , - . , aria-hidden . , <span> aria-hidden="true" .

 <h1>Hiding On The Web <span aria-hidden="true"></span></h1> 

, , .

▍

Twitter See New Tweets , aria-hidden . ( ) .

▍

. aria-hidden="true" , «» .

النتائج

- . , , .

أعزائي القراء! - ?