عناصر تعاملی هدف و وضعیت آنها را نشان می دهد

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

نحوه تست دستی

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

تست تمرکز بصری

برای آزمایش دستی فوکوس بصری، TAB را از طریق صفحه خود انجام دهید.

  • آیا می توانید به هر عنصر تعاملی TAB کنید ؟
  • وقتی به یک عنصر تعاملی می رسید، آیا سرنخ بصری وجود دارد که کاربران بتوانند با آن تعامل داشته باشند؟
  • آیا با انتخاب هر عنصر تعاملی ظاهر آن تغییر می کند؟

راه های زیادی برای استایل دادن به نشانگرهای فوکوس برای هر عنصر تعاملی وجود دارد. یک راه این است که به کلاس شبه :focus استایل بدهید. این سبک هر زمانی که عنصر فوکوس شود، صرف نظر از دستگاه ورودی یا روشی که برای تمرکز آن استفاده می‌شود، اعمال می‌شود.

درباره نحوه سبک دادن به تمرکز بیشتر بیاموزید.

با صفحه خوان ها تست کنید

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

در کنترل های سفارشی دارای نقش های ARIA بیشتر بدانید.

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

چرا این مهم است

ارائه نکات بصری در مورد آنچه که یک کنترل انجام می دهد می تواند به افراد کمک کند تا سایت شما را اداره و هدایت کنند. به این نکات مقرون به صرفه می گویند. Affordances این امکان را برای افراد فراهم می کند که از سایت شما در دستگاه های مختلف استفاده کنند.

منابع

کد منبع عناصر تعاملی هدف و ممیزی وضعیت آنها را نشان می دهد