راهنمای کامل توسعه‌دهندگان برای تست ناوبری صفحه‌کلید بر پایه WCAG

اصل ماجرا

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

متن کامل ترجمه‌شده

اگر وب سایت شما نمی تواند به طور کامل از کلیدواژه استفاده شود، شما آنها را به طور کامل خارج می کنید. چهار اصول هسته ای WCAG 2.2 اصول 2 (استفاده) شامل نیازهای کلیدواژه است: - 2.1.1 کلیدواژه (AA): تمام عملکرد باید از طریق کلیدواژه قابل اجرا باشد - 2.1.2 هیچ کلاهبرداری کلیدواژه (AA): اگر تمرکز به یک عنصر منتقل می شود، باید بتواند آن را خارج کند - 2.4.3 فرمان تمرکز (AA): اگر صفحه می تواند به طور تصادفی راه اندازی شود، ترتیب باید منطقی و قابل پیش بینی باشد - 2.4.7 تمرکز قابل مشاهده (AA): هر UI قابل اجرا کلیدواژه باید یک شاخص تمرکز قابل مشاهده داشته باشد - 2.4.11 ظاهر تمرکز (AA، جدید در 2).2): نشانگر تمرکز باید نیازهای اندازه و تعادل را برآورده کند تست بدون ابزارهای خودکار شروع با تست پایه کلید: - حذف (یا نادیده بگیرد) موش خود را - دکمه TAB برای حرکت به جلو از عناصر تعاملی - دکمه Shift+Tab برای حرکت به عقب - استفاده از Enter/Space برای فعال کردن دکمه ها، لینک ها، جعبه های چک - استفاده از کلید های پله برای گروه های رادیویی، مینو ها، چرخان - استفاده از Escape برای بسته کردن دیالوگ ها و مینوها هر عنصر که شما نمی توانید دسترسی یا فعال کردن؟ این یک شکست WCAG 2.1.1 است.به عنوان مثال می توان گفت که در این مطلب به عنوان مثال می توان گفت که در این مطلب به عنوان مثال می توان به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوان مثال به عنوانبه عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال، به عنوان مثال.* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *ابزارهای مانند AccesssiScan با 201 چک اتوماتیک یک نقطه شروع را ارائه می دهند، اما تست Tab-through در بالا هنوز برای شناسایی مدل های تعاملی که اتوماتیک از دست می دهد ضروری است.

چرا مهمه؟

سایت بدون امکان کار با کیبورد، ۲.۵ میلیون کاربر آمریکایی با ناتوانی حرکتی را کاملاً کنار می‌گذارد. طراحان و توسعه‌دهندگان وب باید با تست ساده Tab/Shift+Tab و رعایت نقش‌ها، فوکوس قابل مشاهده و مدیریت فوکوس در مودال‌ها، این مشکل را رفع کنند. خواننده که به بهبود دسترس‌پذیری سایت یا اپلیکیشن خود اهمیت می‌دهد، با اجرای این راهنما می‌تواند ریسک قانونی و تجربه کاربری ضعیف را کاهش دهد.

به درد کی می‌خوره؟

• طراحان رابط کاربری • توسعه‌دهندگان فرانت‌اند • تست‌کنندگان دسترس‌پذیری • مدیران محصول

تو عمل چی کار کنیم؟

با دنبال کردن تست‌های کلیدی کیبورد، می‌توانید عناصر غیردسترس‌پذیر را شناسایی و اصلاح کنید؛ استایل فوکوس را به‌صورت مناسب تعریف کنید؛ و از بروز خطاهای رایج مثل trap فوکوس جلوگیری کنید. این کار باعث می‌شود کاربران با ناتوانی حرکتی به راحتی بتوانند سایت شما را استفاده کنند.

نظر Blue IT News

پیشنهاد می‌کنیم هر بار قبل از انتشار، تست Tab-through را به‌عنوان بخشی از چک‌لیست QA بگنجانید؛ این کار ساده، هزینه‌بر نیست و اثر مستقیم بر رضایت کاربر دارد.

<div class=“disclosure”> این صفحه ترجمه و تفسیر کاملی از گزارش اصلی Dev است که توسط تیم تحریریه بلو آی تی نیوز به فارسی ترجمه و تحلیل شده. برای مشاهده نسخه اصلی، به منبع مراجعه کنید. </div>