افزایش دسترس‌پذیری به فضای وب با صفحه کلید

بسیاری از افرادی که دارای ناتوانی جسمی هستند، امکان استفاده از ماوس را ندارند و از ابزارهای دیگری مانند صفحه کلید، کنترل با صدا (Voice Control) یا ابزارهای اشاره‌گر (Pointing devices) برای تعامل و جابجایی در فضای وب بهره می‌برند. از جنبه طراحی و کدنویسی، المان‌هایی مانند دکمه‌ها، پیوندها، کنترل‌ها بایستی به کمک صفحه کلید (علاوه بر ماوس) قابل دسترسی باشند. المان‌های اصلی HTML حالت Focus مشخصی دارند. اما المان‌هایی که به‌کمک تگ‌های div یا span ساخته می‌شوند، بایستی با استفاده از JavaScript حالت تعاملی برای آن‌ها ایجاد کرد. بنابراین اگر همچین اقدامی برای این دسته از المان‌ها صورت نگیرد، عملاً امکان دسترسی کاربر به این موارد وجود ندارد. به‌طور مثال، بسیاری از توسعه‌دهندگان برای تعریف یک دکمه اختصاصی از تگ‌های div و span استفاده می‌کنند و بنابراین نیاز است تا حالت‌های مختلف (State) این المان جدید را مشخص کنند.شکل ۱ - نمونه المان‌های تعریف‌شده با div که حالت Focus ندارندشکل ۲ - نمونه المان‌های تعریف‌شده با div که حالت Focus دارندتعریف حالت Focusالمان‌ها باید حالت Focus مناسب داشته باشند. بدین معنی که وقتی به‌کمک صفحه کلید انتخاب می‌شوند، این انتخاب به‌وضوح مشخص باشد. به‌طور مثال تغییر رنگ محسوسی داشته باشند یا دور المان خط یا خط‌چین نمایش داده شود (استفاده از Outline در CSS) که کاربر متوجه شود در حال حاضر بروی کدام المان قرار دارد.شکل ۳ - یک نمونه حالت Focus مناسب شکل ۴ - یک نمونه حالت Focus نامناسب. در این حالت کاربر به‌سختی متوجه خواهد شد که کدام دکمه انتخاب شده‌است.پیوندها، دکمه‌ها و فرم‌ها (و المان‌های وابسته آن) به‌صورت پیش‌فرض توسط صفحه کلید قابل دسترسی هستند. اما برخی المان‌ها در صفحه با ماوس (یا لمس‌کردن) قابل تعامل نیستند زیرا نیازی به حالت تعاملی ندارند. اگر برای این دسته از المان‌ها حالت Focus تعریف شود (مثلا استفاده از tabindex)، امکان ایجاد سردرگمی برای کاربر وجود دارد. برای اطلاعات بیشتر در مورد tabindex به این پیوند مراجعه فرمایید.ترتیب Focus ترتیب انتخاب المان‌ها بایستی درست باشد (استفاده از tabindex). به‌عبارت دیگر کاربر باید با یک ترتیب درست تمامی المان‌های موردنیاز در صفحه را به‌کمک صفحه کلید پیمایش کند و این پیمایش از یک توالی منطقی تبعیت کند تا کاربر به‌راحتی به هدف خود برسد.در وب‌سایت‌های فارسی ترتیب المان‌ها از راست به چپ و بالا به پایین است. بنابراین یک ترتیب منطقی از بخش‌ها به‌صورت زیر است:هدر نوار ناوبری اصلیناوبری درون صفحهمحتوای اصلیفوتر شکل ۵ - پیمایش المان‌ها با Tab و Shift + Tabتبعاً داخل هر بخش مجدداً توالی بایستی منطقی باشد تا کاربر را سردرگم نکند و بتواند پیمایش خود را انجام دهد. به‌طور مثال اگر در یک بخش سه عدد کارت به‌صورت ستونی کنار هم باشند، کارت‌ها بایستی از راست به چپ پیمایش شوند و محتوای هر کارت باید از بالا به پایین پیمایش شود.انتقال به وضعیت جدیدیکی از مشکلات رایج در ترتیب المان‌ها، زمانی رخ می‌دهد که یک المان، محتوا یا وضعیت صفحه را تغییر می‌دهد و در صورت عدم بروزرسانی حالت Focused در شرایط جدید، مجدداً کاربر با مشکل مواجه می‌شود. به‌طول مثال دکمه تایید پرداخت منجر به باز شدن یک مودال (Modal) در صفحه می‌شود. اگر حالت Focused به مودال منتقل نشود، کاربر بایستی تمامی المان‌های پشت مودال را پیمایش کند تا به بخش مودال برسد که امری بسیار زمان‌بر و اذیت‌کننده است.شکل ۶ - نمونه انتقال به وضعیت جدید نمایش Tooltipیکی از مشکلات رایج دیگر، نمایش Tooltip ها است. این کامپوننت فقط با قرارگرفتن نشانگر ماوس بروی المان موردنظر نمایش داده می‌شود. اگر به‌شکل مناسبی پیاده‌سازی نشود، برخی کاربران نمی‌توانند به این راهنماها با صفحه کلید دسترسی داشته باشد. به‌طور مثال، راهنماهای گام‌به‌گام که در بسیاری از محصولات وجود دارند از نمونه Tooltipهای قابل دسترس با صفحه کلید محسوب می‌شوند.شکل ۷ - نمونه Tooltip قابل دسترس با صفحه کلیدردکردن پیوندهادر وب‌سایت‌هایی که بخش ناوبری پیچیده‌ای دارند، بهتر است پیوندی مانند «Skip to Content» در بالاترین قسمت صفحه و به‌عنوان اولین پیوندی که کاربر با آن برخورد می‌کند قرار گیرد تا کاربر بدون پیمایش بخش ناوبری به محتوای صفحه دسترسی پیدا کند.صفحه کلیدهای مجازیاین نوع صفحه‌کلید که در گوشی‌های همراه یا تبلت‌ها مورد استفاده هستند، به‌دلیل نزدیکی حروف و فضای کم لمس‌کردن بخش موردنظر از صفحه می‌توانند برای کاربر مشکلاتی ایجاد کنند. به‌طور مثال برای افرادی که مشکل لرزش دست ‌دارند. برای کاهش تاثیر این مشکلات که ناشی از محدودیت‌های سیستمی است، بایستی امکانات دیگری هم در کنار صفحه کلید ارائه شود. به‌طور مثال:امکان تعامل با صداارائه اطلاعات به‌صورت چند گزینه‌ای: بهره‌گیری از دکمه‌های Radio یا Checkbox ها به‌جای درخواست از کاربر برای واردکردن اطلاعات در فیلد متنیپشتیبانی از واژگان یا عبارت‌های پیشنهادیتکمیل فرم‌ها با استفاده از اطلاعات از پیش تعیین‌شدهسخن پایانیبرای بررسی میزان اهمیت دسترس‌پذیری در یک وب‌سایت با صفحه کلید، کافی است ماوس را کنار بگذارید و تنها با صفحه کلید به پیمایش در صفحه موردنظر ادامه بدهید. در پیوند زیر اطلاعات بیشتری در مورد دسترس‌پذیری با صفحه کلید وجود دارد که توصیه می‌کنم مطالعه کنید:Keyboard Accessibilityنکته مهم: بسیاری از کاربرانی که ناتوانی جسمی دارند و از گوشی‌های موبایل استفاده می‌کنند، معمولا از صفحه کلید فیزیکی برای تعامل با دستگاه بهره می‌برند. بنابراین بررسی دسترس‌پذیری در این دستگاه‌ها هم مهم است.