سرفصل ها و نشانه ها

راب دادسون

صفحه‌خوان‌ها فرمان‌هایی برای پرش سریع بین سرفصل‌ها یا مناطق شاخص خاص دارند. در واقع، یک نظرسنجی از کاربران صفحه‌خوان نشان داد که آنها اغلب با کاوش در سرفصل‌ها، در یک صفحه ناآشنا حرکت می‌کنند.

با استفاده از سرفصل های صحیح و عناصر شاخص، می توانید تجربه ناوبری در سایت خود را برای کاربران فناوری های کمکی به طور چشمگیری بهبود بخشید.

از عناوین برای طرح کلی صفحه استفاده کنید

از عناصر h1 - h6 برای ایجاد یک طرح کلی ساختاری برای صفحه خود استفاده کنید. هدف ایجاد یک اسکلت یا داربست از صفحه است به گونه ای که هر کسی که بر اساس سرفصل ها حرکت می کند بتواند تصویر ذهنی ایجاد کند.

یک روش معمول این است که از یک h1 برای عنوان یا لوگوی اصلی در یک صفحه، از عناصر h2 برای تعیین بخش‌های اصلی و از عناصر h3 در بخش‌های فرعی استفاده کنید:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

سطوح عنوان را نادیده نگیرید

توسعه دهندگان اغلب سطوح عنوان را نادیده می گیرند تا از سبک های پیش فرض مرورگر استفاده کنند که دقیقاً با طراحی آنها مطابقت دارد. این یک ضد الگو در نظر گرفته می شود زیرا مدل طرح کلی را می شکند.

به جای تکیه بر اندازه فونت پیش‌فرض مرورگر برای سرفصل‌ها، از CSS خود استفاده کنید و سطوح را نادیده نگیرید.

به عنوان مثال، این سایت دارای بخشی به نام "در اخبار" است که با دو عنوان دنبال می شود:

یک سایت خبری با تیتر، تصویر قهرمان و زیربخش.

عنوان بخش، "IN THE NEWS" می تواند یک h2 باشد، و سرفصل های پشتیبان می توانند هر دو عنصر h3 باشند.

از آنجایی که font-size "IN THE NEWS" کوچکتر از عنوان است، ممکن است وسوسه انگیز باشد که عنوان داستان اول را h2 و "IN THE NEWS" را h3 کنید. اگرچه ممکن است با استایل پیش‌فرض مرورگر مطابقت داشته باشد، اما طرح کلی ارائه شده به کاربر صفحه‌خوان را از بین می‌برد!

می توانید از Lighthouse استفاده کنید تا بررسی کنید که آیا صفحه شما از هر سطح عنوان رد می شود یا خیر. ممیزی دسترس‌پذیری ( Lighthouse > Options > Accessibility ) را اجرا کنید و به دنبال نتایج سرفصل‌های ممیزی سطوح نباشید بگردید .

از نقاط دیدنی برای کمک به ناوبری استفاده کنید

عناصر HTML5 مانند main ، nav و aside به عنوان نشانه‌ها یا مناطق خاصی در صفحه عمل می‌کنند که یک صفحه‌خوان می‌تواند به آن بپرد.

به جای تکیه بر div ها، از تگ های نقطه عطف برای تعریف بخش های اصلی صفحه خود استفاده کنید. مراقب باشید که زیاده روی نکنید زیرا داشتن مکان های دیدنی بیش از حد ممکن است طاقت فرسا باشد. به عنوان مثال، به جای 3 یا 4، فقط به یک عنصر 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 ، NY Times و Wikipedia همگی حاوی پیوندهای پرش هستند. سعی کنید از آنها دیدن کنید و چند بار کلید TAB را روی صفحه کلید خود فشار دهید.

Lighthouse می تواند به شما کمک کند بررسی کنید که آیا صفحه شما حاوی پیوند پرش است یا خیر. بازرسی دسترس‌پذیری را دوباره اجرا کنید و به دنبال نتایج صفحه بگردید که شامل عنوان، پیوند پرش یا ممیزی منطقه شاخص است .