عناصر HTML5 مانند main، nav و aside به عنوان نقاط عطف یا مناطق خاصی در صفحه عمل می کنند که خواننده های صفحه و سایر فناوری های کمکی می توانند به آن ها پرش کنند. با استفاده از عناصر نقاط عطف، می توانید تجربه ناوبری در سایت خود را برای کاربران فناوری های کمکی به طور چشمگیری بهبود بخشید.
نحوه بررسی دستی نقاط عطف
از لیست W3C برای عناصر نقاط عطف استفاده کنید تا بررسی کنید که هر بخش اصلی صفحه شما توسط یک عنصر نقطه عطف محصور شده است. به عنوان مثال:
<header>
<p>Put product name and logo here</p>
</header>
<nav>
<ul>
<li>Put navigation here</li>
</ul>
</nav>
<main>
<p>Put main content here</p>
</main>
<footer>
<p>Put copyright info, supplemental links, etc. here</p>
</footer>همچنین می توانید از ابزارهایی مانند Microsoft's Accessibility Insights extension برای تجسم ساختار صفحه خود و تشخیص بخش هایی که در نقاط عطف محصور نشده اند استفاده کنید:
نحوه استفاده مؤثر از نقاط عطف
از عناصر نقاط عطف برای تعریف بخش های اصلی صفحه خود به جای تکیه بر عناصر عمومی مانند <div> یا <span> استفاده کنید. از نقاط عطف برای انتقال ساختار صفحه خود استفاده کنید. به عنوان مثال، عنصر <main> باید شامل تمام محتوای مرتبط با ایده اصلی صفحه باشد، بنابراین فقط باید یک مورد در هر صفحه وجود داشته باشد. برای یادگیری نحوه استفاده از هر نقطه عطف، خلاصه عناصر بخش بندی محتوا در MDN را ببینید.
از نقاط عطف با احتیاط استفاده کنید. داشتن نقاط عطف بیش از حد می تواند در واقع ناوبری را برای کاربران فناوری های کمکی دشوارتر کند زیرا از پرش آسان آن ها به یک قطعه محتوای دلخواه جلوگیری می کند.