مقدمة

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

تقنيات لإخفاء النص

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

visibility: hidden; و / أو display:none;

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

width:0px;height:0px

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

text-indent: -1000px;

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

محتوى المواقع قبالة الشاشة في مطلق

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

محتوى المواقع قبالة الشاشة

ويوصى الاساليب التالية لإخفاء بصريا محتويات يمكن ان تقرأ من قبل قارئ الشاشة.

وينبغي الإشارة إلى الطبقة المغلق المخفية في رمز للعنصر الذي يجب أن تكون مخفية على النحو التالي:

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

تحليل رمز بالتفصيل.

position:absolute; تخبر المتصفح لحذف هذا البند من تدفق الصفحة وتبدأ لوضعه. left:-10000px; . نقل محتويات 10000 بكسل إلى اليسار top:auto; تخبر المتصفح لوضع عموديا محتوى في نفس الموقف حيث كان في الأصل. فشل top يمكن أن يؤدي إلى أن أسلوب left يتم تجاهل في بعض الحالات وفي بعض المتصفحات. باختصار، هذه القطعة من قانون نقل بكسل 10000 الى اليسار.

width:1px; height:1px; overflow:hidden; تخبر المتصفح إلى 1px 1px حسب الحجم إلى العنصر المرئي وإخفاء كل ما لا يتفق مع هذه الأبعاد. هناك بعض الحالات التي يكون فيها موقف (يسار) قد لا تعمل في حين يتم تمكين جميع الأساليب الأخرى. في هذه الحالة، فإن العنصر لا يزال في موقفه المبدئي واتخاذ حجم 1 بكسل.

اختتام

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