خوانندگان صفحه نمایش دستوراتی برای پرش سریع بین سرفصل‌ها یا رفتن به مناطق خاص دارند. در واقع، یک نظرسنجی از کاربران خوانندگان صفحه نمایش نشان داد که آنها اغلب با کاوش در سرفصل‌ها، در یک صفحه ناآشنا پیمایش می‌کنند.
با استفاده صحیح از عنوان‌ها و عناصر راهنما، می‌توانید تجربه ناوبری در سایت خود را برای کاربران فناوری‌های کمکی به طرز چشمگیری بهبود بخشید.
از سرتیترها برای مشخص کردن صفحه استفاده کنید
از عناصر h1 تا h6 برای ایجاد یک طرح کلی ساختاری برای صفحه خود استفاده کنید. هدف، ایجاد یک اسکلت یا چارچوب از صفحه است به طوری که هر کسی که با استفاده از عنوان‌ها پیمایش می‌کند، بتواند یک تصویر ذهنی از آن ایجاد کند.
یک روش معمول استفاده از یک h1 برای تیتر یا لوگوی اصلی در یک صفحه، عناصر h2 برای تعیین بخش‌های اصلی و عناصر h3 در زیربخش‌های پشتیبانی است:
<h1>Company name</h1>
<section>
<h2>Section Heading</h2>
…
<h3>Sub-section Heading</h3>
</section>
سطوح عنوان را از قلم نیندازید
توسعه‌دهندگان اغلب سطوح عنوان را نادیده می‌گیرند تا از سبک‌های پیش‌فرض مرورگر که با طراحی آنها مطابقت دارد استفاده کنند. این یک ضد الگو محسوب می‌شود زیرا مدل طرح کلی را می‌شکند.
به جای تکیه بر اندازه فونت پیش‌فرض مرورگر برای عنوان‌ها، از CSS خودتان استفاده کنید و از مراحل مختلف صرف نظر نکنید.
برای مثال، این سایت بخشی به نام «در اخبار» دارد که با دو تیتر دنبال می‌شود:
عنوان بخش «در اخبار» می‌تواند یک h2 باشد و تیترهای فرعی می‌توانند هر دو عنصر h3 باشند.
از آنجا که font-size «در اخبار» از تیتر کوچک‌تر است، ممکن است وسوسه‌انگیز باشد که تیتر خبر اول را h2 و «در اخبار» را h3 قرار دهید. اگرچه این ممکن است با سبک پیش‌فرض مرورگر مطابقت داشته باشد، اما طرح کلی منتقل شده به کاربر صفحه‌خوان را خراب می‌کند!
اگرچه ممکن است غیرمنطقی به نظر برسد، اما مهم نیست که از نظر بصری عناصر h3 و h4 بزرگتر از همتایان h2 یا h1 خود باشند. آنچه مهم است، طرح کلی است که توسط عناصر و ترتیب عناصر منتقل می‌شود.
می‌توانید از Lighthouse برای بررسی اینکه آیا صفحه شما از سطوح عنوان عبور می‌کند یا خیر، استفاده کنید. حسابرسی دسترسی ( Lighthouse > Options > Accessibility ) را اجرا کنید و نتایج حسابرسی سطوح عنوان را بررسی کنید.
استفاده از نشانه‌های جغرافیایی برای کمک به جهت‌یابی
عناصر HTML5 مانند main ، nav و aside به عنوان نقاط عطف یا مناطق خاصی در صفحه عمل می‌کنند که یک صفحه‌خوان می‌تواند به آنها پرش کند.
به جای تکیه بر div ها، از تگ‌های نشانه‌گذاری برای تعریف بخش‌های اصلی صفحه خود استفاده کنید. مراقب باشید که زیاده‌روی نکنید زیرا داشتن نشانه‌گذاری‌های زیاد می‌تواند طاقت‌فرسا باشد. به عنوان مثال، به جای ۳ یا ۴ عنصر اصلی، فقط به یک عنصر main بسنده کنید.
لایت‌هاوس توصیه می‌کند سایت خود را به صورت دستی بررسی کنید تا بررسی کنید که «از عناصر نشانه HTML5 برای بهبود ناوبری استفاده شده است.» می‌توانید از این لیست عناصر نشانه برای بررسی صفحه خود استفاده کنید.
با استفاده از لینک‌های رد کردن، از محتوای تکراری دوری کنید
بسیاری از سایت‌ها در هدر خود حاوی ناوبری تکراری هستند که می‌تواند برای پیمایش با فناوری کمکی آزاردهنده باشد. از یک لینک پرش استفاده کنید تا کاربران بتوانند از این محتوا عبور کنند.
لینک پرش، یک لنگر خارج از صفحه است که همیشه اولین مورد قابل تمرکز در DOM است. معمولاً حاوی یک لینک درون صفحه‌ای به محتوای اصلی صفحه است. از آنجا که اولین عنصر در DOM است، فقط یک اقدام از فناوری کمکی برای تمرکز روی آن و دور زدن ناوبری تکراری لازم است.
<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
[Main content]
</main>
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
بسیاری از سایت‌های محبوب مانند GitHub ، The NY Times و Wikipedia همگی دارای لینک‌های رد شدن از صفحه هستند. سعی کنید از آنها بازدید کنید و چند بار کلید TAB را روی صفحه کلید خود فشار دهید.
فانوس دریایی می‌تواند به شما کمک کند تا بررسی کنید که آیا صفحه شما حاوی پیوند رد شدن است یا خیر. دوباره حسابرسی دسترسی‌پذیری را اجرا کنید و به دنبال نتایج حسابرسی «صفحه حاوی عنوان، پیوند رد شدن یا منطقه مشخص شده است» باشید.