بعد از آن آنکه شروع به نوشتن این مجموعه در پی بهتر کردن قابلیت دسترسی‌پذیری کردم، تصمیم گرفتم که ی مطلب کوتاه نیز در رابطه با آزمایش کردن و انجام تست روی وبسایت کنونی و برای کشف خطاها بنویسم. خوشبختانه انجام اینکار با برخی از ابزارها بسیار کار ساده‌ای است.
ابزارهای خودکار
خب در ابتدای ماجرا بیایید آن را ساده در نظر بگیریم. شما می توانید یکی از ابزارهای خودکارسازی آزمایش را برای اینکه متوجه شوید وبسایتتان به چه میزان قابلیت دسترسی‌پذیری دارد را انتخاب کنید. ابزاری که به شخصه آن را انتخاب می کنم و مورد علاقه‌ام است WAVE نام دارد. این ابزار توسط WebAIM طراحی و توسعه داده شده است. WebAIM یکی از بهترین منابع برای ساختن یک وبسایت مناسب است.
برای استفاده از WAVE کافی است آدرس وبسایت خود را در آن وارد کنید. بعد از آن WAVE برای شما گزارشی شامل تمام مشکلات و خطاها برای شما درست می کند. در این برنامه به شما راه های پیشنهادی برای رفع کردن مشکلات نیز گفته می شود.
آزمایش یک وبسایت
برای آزمایش این برنامه ها من از یک وبسایت خبری معروف دانمارکی استفاده می کنم. این وبسایت را می توانید در این لینک مشاهده کنید. بدلیل محبوب بودن این وبسایت پس نیاز است که قابلیت دسترسی پذیری بسیار خوبی داشته باشد. بعد از انجام تست وبسایت در WAVE من با لیست زیر مواجه شدم:
- 170 Errors
- 476 Alerts
- 84 Features
- 398 Structural Elements
- 0 HTML5 and ARIA
- 34 Contrast Errors
واو! این نتایج اصلا خوب نیستند. خب بیاید نگاهی به این بیاندازیم که چگونه می شود به سادگی اکثر خطاها را پاک کنیم.
متن جایگزین
۲۶ خطا در این لیست مربوط به این می شود که برای تصاویر از متن جایگزین استفاده نشده است. همانطور که می دانید یکی از بهترین کارها در زمان قرار دادن تصویر جایگذاری متن جایگزین برای آنها است. این خاصیت برای screen reader ها بسیار مهم است که بتوانند برای افراد نابینا در رابطه با تصویر یکسری کلمات را بیان کنند. تنها در این صورت است که تصویر برای نابینایان مفهوم پیدا می کند.
کاری که این وبسایت انجام داده است به صورت زیر است:
<img class=”fullsize” src=”http://ekstrabladet.dk/migration_catalog/article3816801.ece/image_binary/original/tour_926" style=”outline: red dashed 2px;”>
در صورتی که باید به اینصورت باشد:
<img class=”fullsize” src=”http://ekstrabladet.dk/migration_catalog/article3816801.ece/image_binary/original/tour_926" alt=”Tour de France” style=”outline: red dashed 2px;”>
تصاویر لینک شده
۱۲۹ خطا مربوط به تصاویر لینک شده ای بود که در آنها از خاصیت alt استفاده نشده است. به صورت کلی اتفاقی که اینجا می افتد این است که تصاویر به عنوان لینک‌ها استفاده می شوند. کاربری که از تکنولوژی های کمکی استفاده نمی کند به راحتی می تواند تمام موارد را مشاهده کند اما برای فردی که از تکنولوژی های کمکی استفاده می کند اینها ممکن است به عنوان لینک های خالی نشان داده شوند. بدین جهت است که استفاده از متن های جایگزین در محتوا انقدر مهم است.
کاری که این وبسایت انجام داده است به صورت زیر است:
<img class=”df-article-img” alt=”” src=”http://frontimg.dk/users/drf-eb/images/3953334.jpg?t%5Bcrop%5D%5Bwidth%5D=457&t%5Bcrop%5D%5Bheight%5D=371&t%5Bcrop%5D%5Bx%5D=96&t%5Bcrop%5D%5By%5D=0&t%5Bresize%5D%5Bwidth%5D=285&t%5Bresize%5D%5Bheight%5D=231&t%5Bquality%5D=85&t%5Bsharpen%5D%5Bmode%5D=variable&t%5Bstrip%5D=true&accessToken=4ead43be5006f2fa3376883cf1978db65e8a636b7e6b0c3d07d52e45beff575b" title=”” width=”285" height=”231" style=”outline: red dashed 2px;”>
در صورتی که باید به اینصورت باشد:
<img class=”df-article-img” alt=”Title of the article goes right here” src=”http://frontimg.dk/users/drf-eb/images/3953334.jpg?t%5Bcrop%5D%5Bwidth%5D=457&t%5Bcrop%5D%5Bheight%5D=371&t%5Bcrop%5D%5Bx%5D=96&t%5Bcrop%5D%5By%5D=0&t%5Bresize%5D%5Bwidth%5D=285&t%5Bresize%5D%5Bheight%5D=231&t%5Bquality%5D=85&t%5Bsharpen%5D%5Bmode%5D=variable&t%5Bstrip%5D=true&accessToken=4ead43be5006f2fa3376883cf1978db65e8a636b7e6b0c3d07d52e45beff575b" title=”” width=”285" height=”231" style=”outline: red dashed 2px;”>
در پایان
با وجود آنکه هنوز اشکالات و خطاهایی در وبسایت دیده می شود اما تنها با اضافه کردن خاصیت متن جایگزین ۱۵۵ خطا را توانستیم حل کنیم. من عقیده دارم که این خطا در بیشتر وبسایت های امروزی دیده می شود. به یاد داشته باشید که این میزان خطا تنها با مشاهده صفحه اول وبسایت پیدا شدند، در صورتی که هنوز برگه های زیادی مانده است.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید