تکنیک هایی برای بهبود دسترس پذیری در وب

محمدرضا کیکاوسی

در مقاله قبل در خصوص دسترس پذیری در وب نکاتی را بررسی کردیم. در این مقاله میخواهیم تکنیک هایی را که به توسعه دهندگان برای بهود دسترس پذیری کمک می کند بررسی کنیم

از تگ های معنایی استفاده کنید

تگ های معنایی یا Semantic که در HTML5 معرفی شدند، علاوه بر خوانایی کدهای شما، کدهای صفحه را برای screen reader ها قابل فهم می کنند و در نهایت افراد ناتوان بهتر می توانند از وب سایت شما استفاده کنند.

 

 

از نوشته برای عناصر غیرنوشته هم استفاده کنید

توجه نمایید که عناصر صفحه غیر از نوشته ها، برای کاربرانی که از صفحه خوان استفاده می کنند، بلااستفاده می ماند. برای مثال محتوای بصری مانند تصاویر و نمودارهای وب سایت شما برای یک فرد نابینا یا کم بینا قابل استفاده نیست. برای بهبود این مسئله لازم است که در تگ های تصویر از attribute های نوشتاری مانند alt و title استفاده کنید. استفاده از alt و title علاوه بر بهبود سئو صفحه شما، موجب بهبود دسترس پذیری صفحه هم می گردد. بنابر این صفحه خوان وقتی به تگ مورد نظر برسد محتوای alt را برای کاربر می خواند.

<img src="images/accessibility.png" alt="دسترس پذیری">

به عناصر فرم label اضافه کنید

عناصر فرم باید تگ label داشته باشند و نباید فقط شامل placeholder باشند. وجود label باعث می شود تا فرم برای screen reader ها خوانا شود. توجه کنید که در حالت عادی هم هیچ وقت به placeholder تنها در فرم های صفحه بسنده نکید. برخی مرورگرهای قدیمی placeholder را نمی شناسند و عملا بدون label، کاربر تنها چند فیلد خالی می بیند!

<label for="name"> Your Name </label> <input id="name">

المان focus شده را مشخص کنید

بسیاری از کاربران با استفاده کیبورد صفحه را پیمایش می کنند. کاربر باید بداند در حال حاضر کدام عناصر فرم یا دکمه را focus کرده است. برای این منظور حتما در طراحی عنصر focus شده طرح متفاوت با بقیه عناصر هم تراز خود داشته باشد. این کار را می توانید با هایلایت کردن یا تغییر رنگ border عنصر انتخاب شده انجام دهید. المان های تعاملی باید قابلیت focus شدن داشته باشند. span,img و... این قابلیت را ندارند.

استفاده از تگ های درست

نکته دیگری که حائز اهمیت است استفاده درست از تگ هاست. بسیاری از افراد از تگ درست در جای درست استفاده نمی کنند. برای مثال اگر جایی نیاز به دکمه داشتید حتما از تگ button استفاده کنید نه از تگ span و div و a , ... و همین طور جایی که قرار است لینکی بدهید، حتی اگر ظاهر آن شبیه دکمه بود، از تگ a استفاده کنید و با css تغییر استایل را لحاظ کنید. فراموش نکنید که screen reader تنها به html شما نیاز دارد.

کنتراست رنگی مناسب

کنتراست یا اختلاف رنگ، در زمینه و نوشته باید به صورت مناسبی رعایت شود. اگر رنگ زمینه با رنگ نوشته اختلاف زیادی نداشته باشد موجب خوانایی کم مخصوصا برای کسانی که مشکل بینایی دارند، می شود. مثالی برای بهترین کنتراست، زمنیه سفید با نوشته مشکی است.

 

فقط به رنگ ها تکیه نکنید

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

عنوان لینک ها باید دارای توضیح باشند

عنوان لینک یا anchor text علاوه بر اینکه ویژگی مهمی در سئو به حساب می آید می بایست برای بهبود دسترس پذیری هم به بهترین شکل رعایت گردد. عنوان لینک باید خوانا باشد. از به کار بردن لینک هایی نظیر "کلیک کنید" ، "اینجا را کلیک کنید" ، "دانلود کنید" و... بپرهیزید. لینک باید دارای توضیح باشد تا برای افراد حداکثر خوانایی را به همراه داشته باشد. برای مثال لینک های "ورود به بخش عضویت در سایت" ، "دانلود کتاب تجربه کاربری" و... مناسب هستند.

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