بررسی کنید که همه کنترل‌های سفارشی role مناسبی داشته باشند و ویژگی‌های ARIA مورد نیاز که ویژگی‌ها و حالت‌های آن‌ها را ارائه می‌دهند، داشته باشند. به عنوان مثال، یک چک باکس سفارشی به یک role="checkbox" و aria-checked="true|false" نیاز دارد تا وضعیت خود را به درستی منتقل کند.
نحوه استفاده از ARIA و HTML را بیاموزید تا بفهمید چه زمانی بهتر است معناهای گمشده برای کنترل های سفارشی ارائه شود.
چگونه تست کنیم
برای بررسی اینکه آیا همه کنترل‌های تعاملی سفارشی دارای نقش‌های ARIA مناسب هستند، صفحه را با استفاده از صفحه دسترس‌پذیری Chrome DevTools یا یک صفحه‌خوان آزمایش کنید.
JAWS و NVDA دو مورد از محبوب‌ترین صفحه‌خوان‌های ویندوز هستند. VoiceOver یک صفحه خوان است که در macOS تعبیه شده است.
با CSS، می‌توانید عناصر <div> و <button> را به گونه‌ای استایل دهید که بصری‌های مشابهی را منتقل کنند، اما تجربه در هنگام استفاده از صفحه‌خوان بسیار متفاوت است. <div> فقط یک عنصر گروه بندی عمومی است، بنابراین یک صفحه خوان فقط محتوای متن <div> را اعلام می کند. <button> به عنوان یک "دکمه" اعلام می شود، سیگنالی بسیار قوی تر به کاربر مبنی بر اینکه چیزی است که می تواند با آن تعامل داشته باشد.
همچنین به Semantics and screen readers مراجعه کنید.
چگونه رفع کنیم
بهترین راه حل برای این مشکل اجتناب از کنترل های تعاملی سفارشی به طور کلی است. به عنوان مثال، یک <div> که مانند یک دکمه عمل می کند را با یک <button> واقعی جایگزین کنید.
<button>Learn more</button>
اگر باید از یک <div> استفاده کنید، role="button" و aria-pressed="false" را اضافه کنید.
<div role="button" aria-pressed="false">Learn more</div>
اکنون صفحه خوان ها نقش و وضعیت تعاملی <div> را اعلام می کنند.
چرا این مهم است
اگر قبلاً از فناوری کمکی استفاده نکرده اید، ممکن است ندانید که محتوای شما برای کاربران فناوری کمکی چگونه عمل می کند. در حالت ایده‌آل، می‌توانید با کاربرانی که به طور منظم از فناوری کمکی استفاده می‌کنند صحبت کنید و می‌توانید بازخورد خود را در مورد نحوه عملکرد وب‌سایت یا برنامه وب خود به اشتراک بگذارید.
راه دیگر برای درک اینکه کاربران فناوری کمکی چگونه محتوای شما را تجربه می کنند ، آزمایش با فناوری کمکی است. استفاده از صفحه‌خوان به شما کمک می‌کند تا درک واضح‌تری از نحوه برچسب‌گذاری محتوایتان و وجود موانعی در مسیریابی داشته باشید.
منابع
می توانید به کد منبع کنترل های سفارشی دارای ممیزی نقش های ARIA نگاه کنید