فوکوس صفحه کلید

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

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

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

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

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

ترتیب فوکوس

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

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

به طور پیش‌فرض، ترتیب فوکوس شامل عناصر HTML با قابلیت فوکوس طبیعی، مانند لینک‌ها، چک‌باکس‌ها و ورودی‌های متنی می‌شود. عناصر HTML با قابلیت فوکوس طبیعی شامل پشتیبانی از ترتیب تب داخلی و مدیریت رویدادهای صفحه‌کلید اولیه هستند.

شما می‌توانید ترتیب فوکوس را به‌روزرسانی کنید تا هر عنصری را که معمولاً فوکوس دریافت نمی‌کند، مانند عناصر HTML غیرتعاملی، کامپوننت‌های سفارشی یا عناصر دارای ARIA ، شامل شود و معنای طبیعی فوکوس را نادیده بگیرید.

تب ایندکس

ترتیب فوکوس با عناصری که دارای ویژگی tabindex مثبت هستند (در صورت وجود) شروع می‌شود و از کوچکترین عدد مثبت به بزرگترین (مانند ۱، ۲، ۳) حرکت می‌کند. سپس بر اساس ترتیب آنها در DOM، عناصری با tabindex صفر را در بر می‌گیرد. هر عنصری که tabindex منفی داشته باشد از ترتیب فوکوس طبیعی حذف می‌شود.

وقتی tabindex صفر ( tabindex="0" ) روی عناصری که معمولاً فوکوس نمی‌شوند اعمال می‌شود، آن‌ها طبق نحوه نمایش در DOM به ترتیب فوکوس طبیعی صفحه اضافه می‌شوند. با این حال، برخلاف عناصر HTML که به طور طبیعی فوکوس می‌شوند، برای دسترسی کامل به آن‌ها باید پشتیبانی صفحه‌کلید اضافی ارائه دهید .

به طور مشابه، اگر عنصری دارید که معمولاً قابلیت فوکوس دارد اما غیرفعال است - مانند دکمه‌ای که تا زمانی که فیلد ورودی پر نشود، غیرفعال است - باید یک tabindex منفی ( tabindex="-1" ) به این عنصر اضافه کنید. اضافه کردن tabindex منفی به فناوری‌های کمکی و صفحه‌کلید نشان می‌دهد که این دکمه باید از ترتیب فوکوس طبیعی حذف شود. اما نگران نباشید - می‌توانید در صورت نیاز از جاوا اسکریپت برای بازگرداندن فوکوس به عنصر استفاده کنید.

در این مثال، یک ویژگی tabindex به عناصری اضافه شده است که به طور طبیعی فوکوس دریافت نمی‌کنند. ترتیب عناصر با استفاده از tabindex دستکاری شده است تا قدرتی که می‌تواند بر ترتیب فوکوس داشته باشد، نشان داده شود. این مثالی از کاری است که نباید انجام داد!

رد کردن لینک‌ها

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

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

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

مانند همه لینک‌ها، مهم است که لینک رد شدن شامل توضیحاتی در مورد هدف لینک باشد. اضافه کردن عبارت "به محتوای اصلی بروید" به کاربر اطلاع می‌دهد که لینک او را به کجا می‌برد. هنگام ارائه توضیحات اضافی به لینک‌هایتان، گزینه‌های کد زیادی برای انتخاب وجود دارد، مانند aria-labelledby ، aria-label یا اضافه کردن آن به محتوای متن عنصر <a> ، همانطور که در مثال نشان داده شده است.

نشانگر فوکوس

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

یک نشانگر فوکوس قابل مشاهده برای اطلاع‌رسانی به کاربران در مورد موقعیت مکانی آنها در هر زمان در صفحه بسیار مهم است. این امر به ویژه برای کاربران بینا که فقط از صفحه کلید استفاده می‌کنند، اهمیت دارد. گزینه Focus Not Obscured (Minimum) تضمین می‌کند که نشانگر فوکوس در زیر سایر اجزا پنهان نشده باشد.

استایل پیش‌فرض مرورگر

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

اگر به مرورگر اجازه می‌دهید که استایل‌بندی focus را مدیریت کند، بررسی کد شما برای تأیید اینکه قالب شما استایل‌بندی پیش‌فرض مرورگر را لغو نمی‌کند، مهم است. یک override اغلب به صورت "outline: 0" یا "outline: none" در style sheet شما نوشته می‌شود. این قطعه کد کوچک می‌تواند استایل‌بندی پیش‌فرض نشانگر focus مرورگر را حذف کند، که پیمایش وب‌سایت یا برنامه شما را برای کاربران بسیار دشوار می‌کند.

توصیه نمی‌شود - بدون طرح کلی

a:focus {
  outline: none; /* don't do this! */
}

توصیه شده - طرح کلی استایل دار

a:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

سبک‌های سفارشی

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

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

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

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

هیچ قانونی در مورد تعداد سبک‌های نشانگر تمرکز در یک صفحه وجود ندارد - اما حتماً تعداد آنها را در حد معقولی نگه دارید تا از سردرگمی غیرضروری جلوگیری شود.