ابزارهای مختلفی وجود دارد که می تواند به شما کمک کند تا برنامه شما را در دسترس قرار دهد. امروز می خواهم در مورد ابزار DevTools با شما صحبت کنم.
من از افزونه برای کروم استفاده می کنم
Axe DevTools دقت بی‌نظیری را در دسترسی به صفحه و اجزای آزمایشی هنگام کدنویسی ارائه می‌کند. موتور قوانین ما بر اساس دستورالعمل های دسترسی به محتوای وب (WCAG) است. افزونه مرورگر ما 57 درصد از مشکلات را به خودی خود پیدا می کند. از تست هوشمند هدایت شده (IGT) ما برای دستیابی به 80٪ یا بیشتر از مسائل بدون نیاز به آموزش اضافی استفاده کنید. Axe DevTools کدنویسی قابل دسترس را به سطح بعدی می آورد.
این ابزاری است که وقتی به یک وبینار در مورد دسترسی کمک کردم آن را کشف کردم.
مشکلات دسترسی بیشتر را در طول توسعه وب سایت با ax DevTools پیدا کنید و برطرف کنید.
افزونه رایگان مرورگر ax DevTools یک ابزار تست سریع، سبک و در عین حال قدرتمند است که توسط معتبرترین موتور تست دسترسی جهان، ax-core، توسعه یافته توسط Deque هدایت می‌شود.
این شکلی است که به نظر می رسد
برخی از عملکردها کاملاً رایگان هستند و برخی از آنها باید به Pro بروید، اینها موارد پولی هستند.
★ تست هدایت شده هوشمند (IGT)
تست های پیشرفته تری را بدون نیاز به تبدیل شدن به یک متخصص دسترسی انجام دهید. با استفاده از قالب پرسش و پاسخ ساده، IGT از یادگیری ماشینی استفاده می کند تا به شما کمک کند تا به سرعت مشکلاتی را که تنها با آزمایش خودکار قابل تشخیص نیستند، پیدا کرده و برطرف کنید. افزودن IGT می‌تواند 8o% یا بیشتر را پوشش دهد — در حالی که کدنویسی می‌کنید.★ تست در سطح جزء
تست خود را با تمرکز فقط بر بخش‌های خاص یک صفحه مرتبط با کار فوری خود، چابک‌تر کنید. با یافتن اشکالات دسترسی که می‌توانند موارد استفاده موجود را از بین ببرند، وصله و آزمایش مجدد را کاهش دهید.★ صادرات، ذخیره و به اشتراک گذاری
در تیم توسعه دهنده خود همکاری کنید! با یک کلیک، یک URL سفارشی با تمام اطلاعات شرح مشکل ایجاد کنید تا با همکاران یا نرم افزار ردیابی مشکل انتخابی خود به اشتراک بگذارید. در زمان و تلاش بقیه تیم خود صرفه جویی کنید و به آنها کمک کنید تا تجربیاتی فراگیر ایجاد کنند.★ چه چیزی برای آزمایش باقی مانده است؟
پس از اتمام تست‌های هدایت‌شده خودکار و هوشمند، اکنون می‌توانید گزارش «آنچه برای آزمایش باقی مانده است» ایجاد کرده و به اشتراک بگذارید و آنچه را که برای آزمایش‌کنندگان دستی باقی مانده است فهرست کنید. کارشناسان دسترس‌پذیری می‌توانند دقیقاً از همان جایی که متوقف کرده‌اید ادامه دهند تا مسائل پیچیده باقی‌مانده را بررسی کنند.
کاری که من معمولا انجام می دهم این است که تمام صفحه را اسکن کنم، برای این مثال می خواهم به یک صفحه تصادفی از GAP بروم: https://www.gap.com/browse/product.do?pid=549216022&cid=15207&pcid=8792&vid =1#pdp-page-content
این چیزی است که من گرفتم
از اینجا می توانم متوجه شوم که 28 موضوع وجود دارد، از آنها 9 مورد انتقادی، 14 مورد جدی، 2 مورد متوسط و 2 مورد جزئی می بینم.
اگر روی ساده 9 در بحرانی کلیک کنید، می توانید لیست مشکلات را فیلتر کنید و فقط موارد مهم را ببینید
اگر روی عنوان موضوع کلیک کنید، می توانید جزئیات بیشتری در مورد آن ببینید
با آیکون کنار عنوان موضوع (هدف؟) می توانید عنصری را که مشکل دارد انتخاب کنید
و با نگاه کردن به جزئیات بیشتر به شما می گوید که چگونه مشکل را برطرف کنید، در این مورد ما باید آن را برطرف کنیم ARIA attribute is not allowed: aria-checked="false"
بیایید چند نمونه دیگر را ببینیم.
در این مورد مسئله این است Invalid ARIA attribute value: aria-controls="popover-1" و همچنین توجه کنید که این موضوع در 7 قسمت از کد اتفاق می افتد.
و آخرین موضوع مهم اگر از من بپرسید یک موضوع بد است.
در این حالت، نوعی دکمه وجود دارد، اما اگر کاربر از یک برنامه صفحه‌خوان استفاده کند، پنهان است، پس کاربر زمان بسیار بدی را در تلاش برای فهمیدن اینکه آن دکمه برای چیست، پنهان می‌شود، زیرا صفحه‌خوان هیچ دکمه‌ای ندارد. مرجع یا اطلاعاتی برای دادن به کاربر. همه اینها و موارد دیگر را می توانید در بخش نحوه حل مشکل مشاهده کنید.
بیایید چند مثال در مورد مسائل جدی ببینیم.
در این شماره بعدی می توانید ببینید که مشکل همه چیز مربوط به رنگ هایی است که آنها برای استفاده در طراحی انتخاب کرده اند. باید کنتراست بیشتری داشته باشد تا کاربران با مشکلات بصری بتوانند به هر حال از سایت استفاده کنند.
موضوع بعدی درباره نحوه اجرای عکس‌های قابل کلیک است و باز هم عدم توجه به فناوری‌های کمکی است.
2 مسئله متوسط مربوط به نحوه تعامل کاربر با بخش قابل پیمایش است.
و 3 مشکل جزئی مربوط به شناسه عناصر در صفحه است.
گزینه دیگری که گاهی اوقات واقعاً مفید است دکمه اطلاعات بیشتر است.
این عالی است زیرا شما را به اسناد مربوط به موضوع می برد و این مستندات واقعاً کامل است، من آن را دوست دارم.
در نهایت چیزی که برای من به عنوان یک توسعه دهنده واقعاً مفید است دکمه بازرسی مسئله است.
این دکمه من را به کد می برد، که زمینه بیشتری را در مورد اینکه کدام قسمت از کد من مشکل دارد، به خصوص در سایت های بزرگی که ممکن است بخشی از میکروفونتندهای مختلف باشند، به من می دهد.
به هر حال، این فقط یک نمونه از کارهایی است که می توانید با انتخاب های رایگانی که دارید انجام دهید و همانطور که قبلاً گفتم کارهای بیشتری با نسخه پولی می توانید انجام دهید.
برای الان کافیست.
به سلامتی!
