خفية جدول المحتويات على الشاشة القراء

Question

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

ما هي أفضل طريقة لتنفيذ هذا ؟ وهذا هو ما هو في متناول معظم الأقل تطفلا على الشاشة القراء ؟ هنا هو ما كنت ألعب مع:

<div id="nav">
    <a href="#one">Jump to section one</a>
    <a href="#two">Jump to section two</a>
    <a href="#three">Jump to section three</a>
</div>

<!-- versus -->

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

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

والثاني هو أكثر قليلا مطول في بناء الجملة ، ولكن نأمل أن أكثر وصفية.

أي من هذه هو أفضل و هل هناك أفضل طريقة ؟

Answer 1

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

#nav {
    position: absolute;
    left: 0;
    top: -9999px

}

باستخدام display: none قد لا تقرأ في بعض قارئات الشاشة.

في بلدي المواقع, لقد عموما فعلت هذا:

<div id="section-nav">
    <p>Jump to</p>
    <ul>
       <li><a href="#section1">Section1</a></li>
    </ul>
</div>

Answer 2

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

(شخصيا, وأود أن لا تزال تذهب مع الثانية ، الدلالي الخيار ، ولكن هذا مجرد تفضيل شخصي.)

Answer 3

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

وضع "المجاهدين" في "شعبة" مع معرف "#nav" وظيفية ، ولكن div لا تفعل أي شيء آخر من التفاف "المجاهدين" من أجل تحديد الهوية.فمن نظافة فقط id "المجاهدين" وترك "div" للخروج.التعليمة البرمجية التالية هي أفضل (على ما أظن).نظيفة وإلى هذه النقطة.

<ul id="nav">
    <li><a href="#one">Jump to section one</a></li>
    <li><a href="#two">Jump to section two</a></li>
    <li><a href="#three">Jump to section three</a></li>
</ul>

لإزالة النص من الصفحة مع css ، يمكنك استخدام:

ul#nav {
    position: absolute;
    left: -9999px
}

Answer 4

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

Answer 5

أفضل طريقة لفعل ما كنت قد طلبت استخدام <ul> مع المراسي داخلها.

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

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