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

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

نحوه آزمون دستی تمرکز بصری

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

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

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

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

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

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

چرا این موضوع اهمیت دارد؟

ارائه نکات بصری در مورد اینکه یک کنترل چه کاری انجام می‌دهد به افراد کمک می‌کند سایت شما را اداره و در آن حرکت کنند. این نکات را «افوردانس» می‌نامند. ارائه افوردانس‌ها امکان استفاده از سایت شما را برای افراد در طیف وسیعی از دستگاه‌ها فراهم می‌کند.