چک‌لیست سریع بررسی دسترس‌پذیری در وب

مقدمه

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

این نوشته مناسب چه افرادی است؟

اطلاعات این نوشته برای طراحان، توسعه‌دهندگان یا مدیران وب‌سایت می‌تواند مفید باشد.

اطلاعات این نوشته مطابق چه استانداردی است؟

از این اطلاعات می‌توانید به‌عنوان راهنمایی برای ارزیابی میزان دسترس‌پذیری محتوای وب‌سایت خود به‌منظور انطباق با سطح A استاندارد WCAG 2.0 استفاده کنید. سطح A این استاندارد به‌عنوان پایین‌ترین سطح موردنیاز برای تمامی وب‌سایت‌ها، اپلیکیشن‌ها و محتواهای الکترونیکی مانند سندهای متنی (Documents) است.

بخش‌های مورد ارزیابی کدامند؟

در این نوشته برخی موارد به‌منظور ارزیابی بخش‌های زیر از صفحه وب ارائه شده‌است:

• عنوان صفحه (Page title)
• متن جایگزین برای عکس (Image text alternatives)
• تضاد رنگ (Color contrast)
• دسترسی به صفحه کلید (Keyboard access)
• فرم‌ها و برچسب‌ها (Forms and labels)
• جایگزین‌های چندرسانه‌ای (Multimedia alternatives)
• ساختار پایه (Basic structure)

عنوان صفحه

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

کجا را بررسی کنیم؟

در مرورگرهای وب، به متن ثبت‌شده در نوار عنوان پنجره دقت نمایید یا با قراردادن مکان‌نما برروی زبانه مرورگر (Browser Tab)، متنی که پدیدار می‌شود را بررسی نمایید.

دنبال چه چیزی باشیم؟

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

متن جایگزین برای عکس

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

کجا را بررسی کنیم؟

درون فایل HTML خود را بررسی کنید تا برای تمامی عکس‌ها با تگ <img>، ویژگی (attribute) alt مقدار داشته باشد.

دنبال چه چیزی باشم؟

• اگر یک عکس نشان‌دهنده اطلاعاتی مفید برای فهم بهتر محتوای صفحه باشد، پس نیاز به متن جایگزین دارد.
• اگر یک عکس تنها برای زیبایی استفاده شده‌است و افراد نیازی به آن ندارند، پس مقدار جایگزین آن بایستی خالی (""=alt) باشد.
• متن جایگزین بایستی تجربه کاربری مشابهی را ایجاد کند و لزوماً بیانگر محتوای عکس نباشد. به‌طور مثال، متن جایگزین دکمه جستجو با یک عکس ذره‌بین بایستی کلمه «جستجو» باشد نه «ذره‌بین».

نمونه تگ <img> مورد استفاده برای نمایش عکس با متن جایگزین در پارامتر alt به‌صورت زیر است:

<img alt=&quotUnited Nations&quot … />

تضاد رنگ

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

کجا را بررسی کنیم؟

• بخش‌هایی درون صفحه وب که رنگ متن با پس‌زمینه همراه است یا عکس‌هایی که تضاد رنگ کمی دارند.
• برای سازگاری با سطح AA استاندارد WCAG 2.0، صفحه‌های وب بایستی حداقل نسبت تضاد 4.5:1 برای متن با اندازه نرمال (یا نسبت 3:1 برای متن با اندازه بزرگ) را داشته باشند.
• به هیچ عنوان پیام‌های مهم را درون عکس استفاده نکنید. متن موجود در عکس، زمانی که از ابزار تغییر اندازه متن استفاده می‌شود، تغییر نمی‌کنند.

برای بررسی تضاد رنگ می‌توانید از ابزارهایی مانند ColorZilla، WebAIM Contrast Checker و Coolors استفاده نمایید.

دسترسی به صفحه کلید

بسیاری از کاربران امکان استفاده از ماوس را ندارند و تعامل آن‌ها با وب‌سایت به کمک صفحه کلید است. کاربرانی که دارای نابینایی یا ناتوانی حرکتی هستند از ابزارهای فناوری کمکی یا Assistive Technology استفاده می‌کنند (این ابزارها به صفحه کلید وابسته هستند تا به‌درستی اجرا شوند). در صورت انتخاب یک المان به‌کمک صفحه کلید و قرارگرفتن در وضعیت Focused، بایستی این وضعیت برای کاربر مشخص شود. هم‌چنین کاربر بایستی بتواند به کمک صفحه کلید، المان‌های داخل صفحه را به‌ترتیب منطقی پیمایش کند.

کجا را بررسی کنیم؟

کاربران بایستی بتوانند در یک چرخه (Cycle) تکرارپذیر، المان‌های داخل صفحه را پیمایش کنند (به کمک Tab و Shift+Tab).

دنبال چه چیزی باشیم؟

• بررسی نمایید که با فشردن دکمه Tab برروی صفحه کلید، المان‌های مختلف صفحه مانند لینک‌ها، فیلدهای فرم، دکمه‌ها و کنترلگرهای رسانه قابل پیمایش هستند و در وضعیت Focused قرار می‌گیرند.
• بررسی نمایید که هیچ تله‌ای در زمان کار با صفحه کلید وجود ندارد. بدین معنا که با انتخاب Tab به بخشی وارد شوید که با همین دکمه نتوان از آن خارج شد.
• برای وضعیت Focused هر المان، یک حالت بصری مشخص نمایید.
• آیتم‌های لیست Drop-down بایستی بدون اجرای کاری به‌صورت خودکار، به کمک کلیدهای جهت یا Tab قابل پیمایش باشند.

فرم‌ها و برچسب‌ها

راه‌کارهای واضح، برچسب‌ها و کنترل خطا برای دسترس‌پذیری فرم‌ها بسیار مهم است. نشانه‌گذاری (Markdown) برچسب‌های فرم (Form labels) به‌روش صحیح امکان تعامل با فناوری کمکی را مهیا می‌کند و کاربر را به شکل بهتری درون فرم، راهنمایی و جهت‌دهی می‌کند.

کجا را بررسی کنیم؟

به کمک Tab میان فیلدهای فرم در صفحه وب جابجا شوید.

برروی برچسب‌های فیلد فرم (Form field labels) کلیک نمایید تا مطمئن شوید که فیلد ورودی مرتبط با آن در وضعیت Focused قرار گرفته‌است.

به‌دنبال چه چیزی باشیم؟

• مطمئن شوید که تمامی کنترلگرهای فرم (Form controls) را می‌توان به کمک Tab پیمایش کرد.
• مطمئن شوید که تمامی لیست‌های Drop-down به کمک کلیدهای جهت یا Tab قابل دسترس هستند.
• برروی برچسب‌های فیلد فرم کلیک کنید تا مطمئن شوید نشانه‌گذاری برچسب به‌درستی انجام شده‌است. برچسب‌ها زمانی که به‌درستی انتخاب شوند، قابل کلیک می‌شوند و باعث می‌شوند تا فیلد مرتبط با آن‌ها در وضعیت Focused قرار بگیرد.

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

جایگزین‌های چندرسانه‌ای

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

کجا را بررسی کنیم؟

• گوش‌دادن به صدا در زمان بارگیری محتوا
• بررسی وجود پخش‌کننده‌های ویدیو در صفحه

دنبال چه چیزی باشیم؟

• مطمئن شوید تا فایل صوتی به‌صورت خودکار در زمان بازشدن صفحه وب پخش نمی‌شود. در صورتی که صدا بایستی پخش شود، پس از ۳ ثانیه آن را متوقف نمایید.
• مطمئن شوید تا کنترل‌هایی برای نگه‌داشتن موقت یا توقف کامل پخش صدا در اختیار کاربر وجود دارد.
• امکان تنظیم صدا برای کاربر میسر باشد.
• تمامی فایل‌های صوتی که از پیش ضبط شده‌اند بایستی زیرنویس (Subtitle) داشته باشند.

ساختار پایه

صفحه‌های وب از ستون‌ها (Columns)، بخش‌ها (Sections)، رنگ‌‌های متعدد و جنبه‌های بصری دیگری تشکیل شده‌است که به سازمان‌دهی اطلاعات برای افرادی که وضعیت عادی این صفحه‌ها را می‌بینند، کمک می‌کند. بیننده این صفحه‌ها در حالت عادی نمی‌تواند کنترل ترتیب اطلاعات را تغییر دهد. برخی افراد با بینایی ضعیف، نحوه نمایش صفحه را به‌گونه‌ای تغییر می‌دهند که محتوای داخل آن قابل خواندن باشد. به‌طور مثال، ممکن است این افراد شیوه نمایش را از حالت چندستونه به تک‌ستونه یا اندازه متن یا موارد دیگر را تغییر دهند. البته در زمانی که محتوای یک صفحه به‌صورت خطی و تک‌ستونه تنظیم شده‌است، ترتیب قرارگرفتن محتوا می‌تواند مشکل‌ساز باشد.

کجا را بررسی کنیم؟

• عکس‌ها را غیرفعال و از متن جایگزین آن استفاده نمایید.
• استفاده از فایل CSS Style Sheet را غیرفعال کنید.
• بررسی نمایید که نشانه‌گذاری جدول‌های درون صفحه به‌درستی انجام شده باشند.

دنبال چه چیزی باشیم؟

• از ابزارهای توسعه وب در مرورگر خود استفاده و با غیرفعال‌کردن CSS و نمایش متن جایگزین برای عکس، ساختار خطی محتوای صفحه را بررسی نمایید (مانند افزونه Web Developer در مرورگر Google Chrome). مطمئن شوید ترتیب خطی محتوای صفحه معنادار باشد.
• مطمئن شوید که داده‌های داخل جدول به کمک Header مناسب نشانه‌گذاری شده‌اند. از تگ <th> برای مشخص‌کردن Header استفاده نمایید و پارامتر «scope» را با مقدارهای «col» و «row» اضافه کنید که ارتباط Header ها با سطر و ستون مشخص شود.

<th scope=&quotrow&quot>Value</th>

• بررسی نمایید که بلوکه‌های متنی دارای عنوان واضح باشند تا پیمایش محتوای صفحه را برای کاربر تا جای ممکن تسهیل کنند.

در صورتی که از محتوای تهیه‌شده لذت بردید، تقاضا دارم من را در شبکه‌های اجتماعی اینستاگرام و توییتر دنبال کنید.