Web Accessibility چیست؟ راهنمای طراحی سایت برای همه کاربران

Web Accessibility چیست؟

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

چرا Accessibility در طراحی وب مهم است؟

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

چه کسانی از سایت دسترس‌پذیر بهره می‌برند؟

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

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

استاندارد WCAG چیست؟

یکی از مهم‌ترین منابع در زمینه دسترس‌پذیری وب، Web Content Accessibility Guidelines یا WCAG است که توسط W3C توسعه داده می‌شود. WCAG مجموعه‌ای از توصیه‌ها و معیارهای قابل بررسی برای افزایش دسترس‌پذیری محتوای وب ارائه می‌کند.

اصول اصلی WCAG بر چهار مفهوم مهم بنا شده‌اند:

• Perceivable: اطلاعات باید به شکلی ارائه شوند که کاربر بتواند آن‌ها را درک کند.
• Operable: رابط کاربری باید قابل استفاده و قابل تعامل باشد.
• Understandable: محتوا و عملکرد رابط باید تا حد امکان قابل فهم باشد.
• Robust: محتوا باید بتواند با فناوری‌های مختلف و ابزارهای کمکی به‌درستی کار کند.

این چهار اصل معمولاً با عبارت POUR شناخته می‌شوند.

کنتراست رنگ در طراحی سایت

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

فقط با رنگ اطلاعات را منتقل نکنید

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

به عنوان مثال:

✕ شماره موبایل واردشده صحیح نیست.

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

اهمیت متن جایگزین تصاویر

تصاویر بخش مهمی از بسیاری از وب‌سایت‌ها هستند، اما کاربرانی که از Screen Reader استفاده می‌کنند ممکن است تصویر را به شکل معمول مشاهده نکنند. برای تصاویر مهم و دارای مفهوم، استفاده از ویژگی alt می‌تواند اطلاعات جایگزین مناسبی فراهم کند.

برای مثال:

<img src="qr-code.png" alt="کد QR برای ورود به صفحه اصلی">

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

البته برای تصاویر تزئینی که اطلاعات خاصی منتقل نمی‌کنند، معمولاً استفاده از مقدار خالی برای alt مناسب‌تر است:

<img src="decoration.svg" alt="">

ساختار صحیح Headingها

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

برای مثال:

H1
 ├── H2
 │    ├── H3
 │    └── H3
 └── H2
      └── H3

استفاده از Headingها باید بر اساس ساختار معنایی محتوا باشد، نه صرفاً بر اساس اندازه فونت.

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

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

عناصر مهمی مانند موارد زیر باید قابل دسترسی با صفحه‌کلید باشند:

• لینک‌ها
• دکمه‌ها
• فیلدهای فرم
• منوها
• کنترل‌های تعاملی

یکی از مشکلات رایج در این زمینه، ساخت دکمه‌ها یا لینک‌های ظاهری با عناصر نامناسب HTML است.

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

استفاده از عناصر HTML معنایی می‌تواند ساختار صفحه را برای مرورگرها و فناوری‌های کمکی واضح‌تر کند. برای مثال، زمانی که یک عنصر واقعاً یک دکمه است، بهتر است از عنصر button استفاده شود:

<button type="submit">ثبت اطلاعات</button>

در بسیاری از موارد، استفاده از عناصر استاندارد HTML رفتارهای دسترسی و تعامل موردنیاز را ساده‌تر می‌کند.

لینک‌ها باید قابل فهم باشند

متن لینک باید تا حد امکان مشخص کند که با کلیک روی آن چه اتفاقی می‌افتد. عبارت‌هایی مانند «اینجا کلیک کنید» به‌تنهایی اطلاعات زیادی درباره مقصد لینک ارائه نمی‌کنند. در مقابل، متنی مانند «مشاهده راهنمای ساخت لینک کوتاه» اطلاعات بیشتری درباره مقصد در اختیار کاربر قرار می‌دهد. این موضوع به‌خصوص برای کاربرانی که با Screen Reader فهرست لینک‌های صفحه را مرور می‌کنند اهمیت دارد.

فرم‌های قابل دسترس طراحی کنید

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

برای مثال:

<label for="email">ایمیل</label>
<input id="email" name="email" type="email">

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

Placeholder جای Label را نمی‌گیرد

یکی از اشتباهات رایج این است که فقط از Placeholder برای توضیح فیلد استفاده شود.

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

اندازه و خوانایی متن

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

طراحی Responsive و دسترس‌پذیری

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

Focus State چیست؟

وقتی کاربر با صفحه‌کلید در صفحه حرکت می‌کند، باید مشخص باشد که در حال حاضر کدام عنصر در حالت Focus قرار دارد. اگر طراح با CSS حالت Focus را کاملاً حذف کند، کاربر صفحه‌کلید ممکن است نداند در کدام قسمت صفحه قرار دارد.

به همین دلیل، حالت Focus باید واضح و قابل مشاهده باشد.

button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

این فقط یک نمونه ساده است و ظاهر نهایی Focus باید متناسب با طراحی سایت انتخاب شود.

محتوای ویدیویی و صوتی

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

دکمه‌ها و عناصر تعاملی را واضح طراحی کنید

کاربر باید بتواند تشخیص دهد کدام عناصر قابل کلیک یا تعامل هستند. تفاوت مناسب میان لینک، دکمه، متن معمولی و عناصر غیرفعال باعث می‌شود رابط کاربری قابل فهم‌تر باشد. همچنین بهتر است وضعیت‌هایی مانند Hover، Focus، Active و Disabled در طراحی عناصر تعاملی در نظر گرفته شوند.

Accessibility فقط یک ویژگی ظاهری نیست

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

اشتباهات رایج در طراحی سایت

• استفاده از کنتراست بسیار پایین بین متن و پس‌زمینه
• حذف کامل Focus برای عناصر تعاملی
• استفاده از متن‌های لینک غیرتوصیفی
• نبود Label مناسب برای فیلدهای فرم
• وابسته کردن اطلاعات مهم فقط به رنگ
• استفاده نادرست از Headingها
• ساخت عناصر تعاملی با HTML نامناسب
• استفاده نکردن از متن جایگزین مناسب برای تصاویر مهم
• نادیده گرفتن کاربران صفحه‌کلید
• طراحی نامناسب در نمایشگرهای کوچک

چطور دسترس‌پذیری سایت را بررسی کنیم؟

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

یک بررسی ساده با صفحه‌کلید

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

بررسی کنید:

• آیا می‌توانید به تمام لینک‌ها و دکمه‌های مهم برسید؟
• آیا ترتیب حرکت بین عناصر منطقی است؟
• آیا عنصر Focus شده به‌وضوح دیده می‌شود؟
• آیا می‌توانید فرم‌ها را تکمیل کنید؟
• آیا می‌توانید منوها و بخش‌های اصلی سایت را کنترل کنید؟

یک چک‌لیست ساده برای Web Accessibility

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

• آیا ساختار Headingها منطقی است؟
• آیا تصاویر مهم دارای alt مناسب هستند؟
• آیا لینک‌ها متن واضح و قابل فهم دارند؟
• آیا فرم‌ها Label مناسب دارند؟
• آیا عناصر مهم با صفحه‌کلید قابل استفاده هستند؟
• آیا Focus به‌وضوح دیده می‌شود؟
• آیا متن و پس‌زمینه کنتراست مناسبی دارند؟
• آیا اطلاعات فقط با رنگ منتقل نشده‌اند؟
• آیا سایت در موبایل نیز قابل استفاده است؟
• آیا محتوای صوتی و ویدیویی تا حد مناسب قابل دسترسی است؟

دسترس‌پذیری چه ارتباطی با تجربه کاربری دارد؟

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

جمع‌بندی

Web Accessibility یعنی طراحی و توسعه وب‌سایت به شکلی که افراد بیشتری، با شرایط و روش‌های مختلف استفاده از وب، بتوانند محتوا و امکانات سایت را درک و استفاده کنند. دسترس‌پذیری فقط به ظاهر سایت مربوط نیست. ساختار HTML، صفحه‌کلید، فرم‌ها، لینک‌ها، تصاویر، رنگ‌ها، محتوای چندرسانه‌ای و نحوه تعامل کاربر با صفحه همگی در آن نقش دارند. لازم نیست برای شروع یک پروژه بزرگ انجام دهید. حتی بررسی چند مورد ساده مانند کنتراست رنگ، alt تصاویر، Label فرم‌ها، Focus و امکان استفاده با صفحه‌کلید می‌تواند قدم خوبی برای بهتر کردن دسترس‌پذیری سایت باشد.

در نهایت، طراحی یک سایت قابل دسترس به این معناست که هنگام طراحی فقط به این فکر نکنیم که «سایت برای من چگونه دیده می‌شود»، بلکه بپرسیم «کاربران مختلف چگونه می‌توانند از آن استفاده کنند؟»