قابلیت دسترسی‌ پذیری عنوان‌ها

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

در این مجموعه مقاله دسترسی پذیری شما با موضوعات بسیار ساده‌ای آشنا خواهید شد که می توانید با آنها قابلیت دسترسی پذیری را بهتر کنید. در قسمت دوم این مجموعه شما یاد خواهید گرفت که چگونه به شیوه درست از عنوان‌ها استفاده کنید.

عنوان‌ها

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

یکی از مهمترین قضایا در استفاده از عناوین درست قرار گیری آنها در صفحه است. شاید به نظر بسیار موضوع ساده‌ای باشد اما باید بگویم که بسیاری از مردم راجع به این اشتباه می کنند. مردم در استفاده از عنوان ها باید نرخ اهمیت‌شان را در نظر بگیرند. بنابراین بالاترین نرخ را باید با تگ h1 نوشت و کمترین نرخ را با تگ h6. با در نظر گرفتن تنها این مسئله ساده از نابود کردن نرخ های اهمیت جلوگیری می‌کنید. به عنوان مثال توسعه دهندگان هیچوقت نباید بعد از یک تگ h4 از تگ h2 استفاده کنند. به این خاطر که باعث می شوند کاربر سرخورده شود و ابزارهای کمکی بیشتر از اینکه کاربر را هدایت نمایند وی را گیج کنند. پس باید نرخ اهمیت آن ها را در نظر گرفت و براساس آنها از تگ های مختلف استفاده کرد. پس برای سازمان دهی کردن برگه نیاز است که حتما این موارد را در نظر بگیرید. یک مثال ساده را می توانید در کد زیر مشاهده نمایید:

نمونه بد

<!-- Bad headings -->
<h1>Cool company name</h1>
<h3>Buy stuff</h3>
<h3>Jobs</h3>
<h2>Get our app</h2>

نمونه عالی

<!-- Great headings -->
<h1>Cool company name</h1>
<h2>Buy stuff</h2>
<h2>Jobs</h2>
<h2>Get our app</h2>

شاید الان با خودتان بگوید «خب اینکه واضحه»، حرفتان درست است اما واقعیت آن است که بسیاری از توسعه دهندگان این مسئله را رعایت نمی کنند. برای اطمینان بیشتر در رابطه با این قضیه و برای تست کردن صفحه خود می توانید از ابزار Tota11y استفاده کنید. از این ابزار برای آزمایش وبسایت محبوب دنیا نیز استفاده می شود.

منبع