صحبت در مورد دسترسی به عناصر متمرکز – آیا در صفحات خود ناوبری خوبی را ارائه می دهید؟

توجه: این مقاله در ابتدا در LinkedIn من در 5 مارس 2025 (پیوند) ارسال شده است.

مقدمه

تصور کنید که به شهری سفر می کنید که هیچ مسیری را نمی شناسید. شما دستورالعمل های تلفن خود را دنبال کرده اید که ناگهان باتری تمام می شود و کاملاً خاموش می شود.

مشکلی نیست – بیایید علائم ترافیک بزرگراه را برای راهنمایی بررسی کنیم ، درست است؟

اما اگر بسیاری از این علائم خالی یا غیرقابل خواندن باشد ، چه می شود؟ این یک فاجعه خواهد بود ، درست است؟

متأسفانه ، هنگام دسترسی به صفحات بدون دسترسی ، برای کاربران بی شماری اتفاق می افتد. 😢

برای جلوگیری از این وضعیت ، ما می توانیم تنظیمات ساده ای را از طرف خود انجام دهیم تا این مسئله را کاهش دهیم.

محتوای اصلی

همانطور که این مقاله را می خوانید ، من واقعاً معتقدم که شما می دانید کاربران می توانند از نظر بصری و حرکتی داشته باشند. انواع مختلفی از موضوعات بصری از جمله تاری دید ، کوری رنگ و از بین رفتن بینایی (کل یا جزئی) وجود دارد. وقتی در مورد دسترسی در وب صحبت می کنیم ، در ابتدا معمول است که فکر کنیم فقط به افراد دارای یک مسئله بصری کمک می کند ، اما حقیقت این است که تجربه کاربر را برای همه بهبود می بخشد. علاوه بر این ، یک ساختار HTML خوب سازگاری خواننده صفحه نمایش را تقویت می کند و می تواند به بهبود نمره SEO شما کمک کند.

// Note: all codes below were written as JSX (React).

01 – اطمینان حاصل کنید که ناوبری توسط صفحه کلید در دسترس است

ناوبری کیبورد به کاربران متغیر حرکتی کمک می کند تا با استفاده از کلید Tab ، تمام پیوندها را در سایت حرکت کنند.

توجه: در React و بسیاری از کتابخانه های دیگر ، عناصر با onClick ممکن است قابل توجه نباشد ، اما می توانید اضافه کنید tabIndex برای حل آن

    Sign Up

مرجع اضافی:

02 – برای پیوندها از متن توصیفی استفاده کنید

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

مرجع اضافی:

03 – استفاده کنید aria-label یا aria-labelledby (در صورت لزوم)

گاهی اوقات ، هر توسعه دهنده پیوندهای رسانه های اجتماعی را در پاورقی صفحه با نمادها به عنوان محتوای خود کد می کند – بدون متن ، فقط یک نماد. در مواردی از این دست ، یا مواردی که ضرورت اضافه کردن جزئیات یا زمینه های بیشتر برای این پیوندها وجود دارد ، که خیلی واضح نیستند ، ویژگی ARIA در عمل وارد می شود.

با استفاده از arial-label، خوانندگان صفحه نمایش می توانند اطلاعات مربوط به این نوع مسئله را تکمیل کنند ، به عنوان مثال:

a:hover, a:focus {
    text-decoration: underline;
}