پنج شنبه, 09 شهریور 1396
مسعود جهانی

چگونه سایت خودتان را بیشتر دسترس‌پذیر کنید؟

همه ما می‌دانیم که دسترس‌پذیری (Accessibility) در یک وب سایت مهم است. مشکل اینجاست که مشخص نیست دقیقاً چه کاری می‌توانیم انجام دهیم تا وب سایت‌های ما بیشتر دسترس‌پذیر باشند.

accessibility website

کنسرسیوم جهانی وب (W3C)، دستورالعمل‌هایی جهت دسترس‌پذیری محتوای وب (WCAG) برای ما و توسعه دهندگان محتوای وب ایجاد کرده تا وب سایت‌های دسترس‌پذیر بهتری ایجاد کنیم. WCAG حاوی اطلاعات بسیار مفیدی است، در ادامه تعدادی از دستورالعمل‌های عملی آن را برای دسترس پذیر کردن بهتر وب سایت‌هایمان مطرح می‌کنیم.

 

نمای کلی

دستورالعمل‌‌ها برای دسترس‌پذیری محتوا دارای چهار اصل کلی است. شما می‌توانید بر روی لینک‌های زیر کلیک کنید تا به قسمت مربوطه به آن موضوع بروید.

 1. قابل فهم - اجزای رابط کاربری و اطلاعات باید به گونه‌ای باشند که کاربران بتوانند آنها را بفهمند.

1.1. متن جایگزین
2.1. جایگزین برای رسانه‌های مبتنی بر زمان
3.1. محتوای انعطاف پذیر
4.1. تشخیص پذیر

2 . قابل عمل - اجزای رابط کاربری و ناوبری باید قابل عمل باشند.

1.2. صفحه کلید قابل دسترس
2.2. زمان کافی
3.2. تشنج
4.2. قابل ردگیری

3 . قابل درک - اطلاعات و عملکرد رابط کاربری باید قابل درک باشد.

1.3. قابل خواندن
2.3. قابل پیش بینی
3.3. کمک ورودی

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

1.4. سازگار

 

اصل 1. قابل فهم

 

1.1. متن جایگزین

"تمام محتوای غیر متنی که به کاربر ارائه می‌شود، یک متن جایگزین دارد که معادل با آن است."

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

 

برای تصاویر، از ویژگی alt استفاده کنید. متن جایگزین برای یک تصویر باید به گونه‌ای توصیفی باشد که بتواند همان پیام را منتقل کند.

 

برای عناصر صوتی و ویدئویی، متن گفتاری آن را ارائه دهید. شما می توانید از تگ track برای تعیین متن زمان بندی شده عناصر رسانه‌ای استفاده کنید.

 

برای عناصر رابط کاربری، از لیبل استفاده کنید. لیبل‌ها می‌توانند اطلاعات مورد نیازی که ممکن است که به صورت بصری شفاف ارائه نشده است را فراهم کنند. به عنوان مثال، جایی ممکن است شما یک ناوبری اولیه و ثانویه داشته باشید که به شکل متفاوتی طراحی شده است، شما از aria-label برای تشخیص بین آنها استفاده می‌کنید.

 

2.1. جایگزین برای رسانه‌های مبتنی بر زمان

"جایگزین برای رسانه‌های مبتنی بر زمان ارائه کنید."

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

  • زبان اشاره به عنوان بخشی از یک فایل ویدئویی
  • جایگزین صوتی برای فایل‌های ویدئویی
  • فایل ویدئویی با زبان اشاره به عنوان جایگزین برای فایل‌های صوتی

  

3.1. محتوای انعطاف پذیر

"محتویاتی ایجاد کنید که می توانند از طریق روش‌های مختلف بدون اینکه اطلاعات یا ساختار را از دست بدهند (به عنوان مثال چیدمان ساده‌تر) ارائه شوند."

HTML خود را به شکل معنی دار بنویسید. سند شما باید بدون CSS قابل خواندن و قابل فهم باشد. HTML خود را برای خواندن در صفحه در نظر بگیرید که در صورت نیاز از نشانه گذاری تگ‌ها استفاده می‌کنید.

 

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

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

button delete content

 

4.1. تشخیص پذیر

" کار کاربران را برای مشاهده و شنیدن محتوا از جمله جدا کردن پیش زمینه از پس زمینه، آسان‌تر کنید."

نسبت کنتراست متن به پس زمینه باید حداقل 4.5:1 و ترجیحاً 7:1 باشد. شما می‌توانید از Contrast Ratio برای پیدا کردن کنتراست رنگ‌های سایت خود استفاده کنید.

contrast ratio

 

سایزبندی متن باید به راحتی قابل تغییر باشد. متن باید با استفاده از مکانیزم‌های پیش فرض مرورگر تا 200٪ بدون از دست دادن محتوا یا عملکرد قابل سایزبندی باشد.

text resizable

 

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

کنترل رسانه‌های صوتی را ارائه کنید. اگر هر صوتی در یک صفحه وب پخش می‌شود باید مکانیزم کنترلی آن را برای کاربران فراهم کنید تا آنها با دکمه های مکث / پخش و کنترل‌های حجم مستقل از کنترل‌های حجم صدا سیستم بتوانند آن را کنترل کند.

 

اصل 2. قابل عمل

1.2. صفحه کلید قابل دسترس

"تمام قابلیت‌ها را از صفحه کلید قابل دسترس قرار دهید."

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

 

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

focus state

از تله‌های صفحه کلید اجتناب کنید. اطمینان حاصل کنید که فوکوس صفحه کلید بر روی محتویات وب سایت از ابتدا تا انتها در تله‌ای گیر نکند.

 

2.2. زمان کافی

"زمان کافی برای خواندن و استفاده از محتوا به کاربران ارائه کنید."

کنترل برای محتوا بهنگام ارائه کنید. شما برای هر گونه تعاملات مربوط به زمان - از جمله انتقال اطلاعات، به روز رسانی خودکار، یا زمان وقفه صفحه - باید حداقل یکی از ضوابط زیر را پیاده سازی کنید:

  • کاربران می‌توانند محدودیت زمانی را خاموش کنند
  • کاربران می‌توانند محدودیت زمانی را حداقل 10 برابر مقدار پیش فرض تنظیم کنند
  • به کاربران قبل از زمان منقضی شدن هشدار داده می‌شود و حداقل 20 ثانیه طول می‌کشد تا محدودیت زمانی را با یک عمل ساده افزایش دهند

timed content

 

3.2. تشنج

"محتوا را به نحوی طراحی نکنید که علت تشنج باشد."

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

 

4.2. قابل ردگیری

"راه‌هایی برای کمک به کاربران در حرکت، پیدا کردن محتوا و تعیین جایی که هستند، ارائه کنید."

یک لینک برای کاربران برای پرش به محتوای اصلی صفحه ارائه کنید. یکی از اولین لینک‌ها برای کاربران در هر صفحه وب سایت باید یک لینک رد کردن بلوک‌های مکرر از محتوا مانند ناوبری باشد. این امکان به خصوص برای صفحاتی که دارای منوهای ناوبری بزرگ و چند لایه هستند اهمیت دارد. نیازی به مشاهده این لینک زمانی که خارج از فوکوس است وجود ندارد. برای مثال:

 

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

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

link text

 

بیش از یک راه برای دسترسی به یک صفحه وب ارائه کنید. برای مثال:

  • نقشه سایت را تکمیل کنید
  • جستجو به همه محتوا دسترسی داشته باشد
  •  ناوبری به تمام صفحات لینک باشد

 اطلاعات مربوط به مکان فعلی را ارائه دهید. ارائه اطلاعات به کاربران در مورد جایی که صفحه فعلی در ارتباط با بقیه وب سایت است، مفید است. این را می توان با هر یک از موارد زیر بدست آورد:

  • بردکرامب
  • نقشه سایت
  • برجسته کردن مکان فعلی در ناوبری
  • با استفاده از تگ <link rel="index | next | prev | contents"> برای مشخص کردن رابطه صفحه فعلی با صفحات دیگر

 

اصل 3. قابل درک

1.3. قابل خواندن

"محتوای متن را قابل خواندن و قابل درک ارائه کنید."

زبان(ها) صفحه را مشخص کنید. زبان صفحه فعلی را در عنصر HTML و زبان هر بخش را در خودش مشخص کنید.

 

معانی لغات غیر معمول و تلفظ کلمات دشوار را ارائه کنید. شما می توانید از ویژگی title برای ارائه معانی اختصارات و کلمات غیر معمول استفاده کنید. برای تعاریف، می‌توانید از تگ dl برای ارائه یک لیست تعریف استفاده کنید.

 

2.3. قابل پیش بینی

"صفحات وبی ارائه کنید که به روش‌های قابل پیش بینی ظاهر می‌شوند و عمل می‌کنند."

ناوبری مستمر است. عناصر ناوبری باید به طور صحیح در سراسر وب تکرار شود.

شناسایی مستمر است. اصطلاحات و عناصر تکرارپذیر باید به طور مداوم در سراسر وب نمایش داده شوند.

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

 

3.3. کمک ورودی

"به کاربران برای جلوگیری و اصلاح اشتباهات کمک کنید."

دستورالعمل‌ها را ارائه کنید. دستورالعمل‌هایی برای عناصر ورودی ارائه دهید. جایی که یک خطای معمول ایجاد می‌شود، پیشنهاداتی را ارائه دهید تا کاربران بتوانند پاسخ‌های خود را در برابر آنها مدل کنند.

 labels and instructions

 

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

error messages

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

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

 

اصل 4. نیرومند

1.4. سازگار

"حداکثر سازگاری با عوامل فعلی و آینده کاربر، از جمله فن آوری‌های کمکی را ارائه دهید."

کد معتبر بنویسید. از سازگاری HTML خود با بررسی اعتبار سنجی‌ها، اطمینان حاصل کنید. برخی از چیزهای مهم در بررسی اعتبار سنجی عبارتند از:

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

 

جایی که label را نمی‌توانید استفاده کنید، از ویژگی title استفاده کنید.

 

همچنین می‌تواند از aria-label برای عناصری که در آنها امکان استفاده از لیبل وجود ندارد، استفاده کنید.

 

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

مسعود جهانی

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

You have no rights to post comments