دسترس‌پذیری (Accessibility) در طراحی سایت؛ طراحی برای همه کاربران

دسترس‌پذیری در طراحی سایت (Web Accessibility) یعنی ساختن سایتی که همه کاربران — از جمله افراد کم‌بینا، کم‌شنوا، با محدودیت حرکتی، یا با اختلالات شناختی — بتوانند از آن استفاده کنند. دسترس‌پذیری نه‌تنها یک الزام اخلاقی بلکه یک فاکتور سئو و قانونی در بسیاری از کشورها است.

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

دیاگرام ۱: شش اصل اصلی دسترس‌پذیری در طراحی سایت.

چرا دسترس‌پذیری در طراحی سایت مهم است؟

الزام اخلاقی

بر اساس گزارش WHO World Report on Disability (۲۰۲۴)، ۱۶ درصد جمعیت جهان — یعنی ۱.۳ میلیارد نفر — با نوعی محدودیت زندگی می‌کنند. سایت بدون دسترس‌پذیری، این افراد را از دست می‌دهد.

فاکتور سئو

بر اساس Google Search Central (۲۰۲۴)، دسترس‌پذیری یکی از فاکتورهای رتبه‌بندی گوگل است. سایت قابل‌دسترس، رتبه بهتری می‌گیرد.

الزام قانونی

در بسیاری از کشورها (ADA در آمریکا، EAA در اروپا)، دسترس‌پذیری سایت الزام قانونی است. عدم رعایت می‌تواند منجر به جریمه شود.

مزیت کسب‌وکاری

سایت قابل‌دسترس، مخاطب بیشتری دارد = مشتری بیشتر. بر اساس Click-Away Pound Study (۲۰۲۴)، ۷۱ درصد کاربران با محدودیت، سایتی که قابل‌دسترس نباشد را ترک می‌کنند.

WCAG چیست؟

معرفی WCAG

WCAG (Web Content Accessibility Guidelines) استاندارد بین‌المللی دسترس‌پذیری وب است که توسط W3C منتشر می‌شود. آخرین نسخه WCAG 2.2 (۲۰۲۴) است.

چهار اصل WCAG — POUR

سطوح WCAG

• سطح A: حداقل دسترس‌پذیری (الزام پایه)
• سطح AA: استاندارد صنعتی (توصیه‌شده)
• سطح AAA: بالاترین دسترس‌پذیری (آرمانی)

اصل ۱: کنتراست رنگ

قاعده کنتراست

بر اساس WCAG 2.2 (۲۰۲۴):

• متن عادی: حداقل ۴.۵:۱ کنتراست
• متن بزرگ (۱۸pt+): حداقل ۳:۱ کنتراست
• رابط کاربری: حداقل ۳:۱ کنتراست

ابزار تست کنتراست

• WebAIM Contrast Checker: رایگان و آنلاین
• Chrome DevTools: built-in contrast checker
• Stark: پلاگین Figma

برای آشنایی با رنگ، مقاله رنگ در طراحی سایت را بخوانید.

اصل ۲: ناوبری کیبورد

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

برخی کاربران نمی‌توانند از موس استفاده کنند — افراد با محدودیت حرکتی، کم‌بینا، یا کاربران صفحه‌خوان. این افراد فقط با کیبورد (Tab, Enter, Arrow) در سایت حرکت می‌کنند.

قواعد ناوبری کیبورد

• همه عناصر قابل‌دسترس با Tab: لینک، دکمه، فرم
• ترتیب منطقی: Tab به ترتیب بصری حرکت کند
• focus visible: عنصر-focused با outline مشخص باشد
• Skip to content: لینک «پرش به محتوا» در ابتدای صفحه

اصل ۳: متن جایگزین تصاویر (Alt Text)

چرا Alt Text مهم است؟

صفحه‌خوان‌ها تصاویر را نمی‌بینند — فقط Alt Text را می‌خوانند. بدون Alt Text، کاربر کم‌بینا نمی‌داند تصویر چه چیزی نشان می‌دهد.

قواعد Alt Text

• توصیفی: تصویر را توصیف کند
• مختصر: حداکثر ۱۲۵ کاراکتر
• بدون «تصویرِ»: صفحه‌خوان خودش می‌گوید «تصویر»
• تصاویر تزئینی: alt="" (خالی)

Alt Text و سئو

Alt Text به گوگل می‌گوید تصویر درباره چیست — این به سئو کمک می‌کند. برای آشنایی با سئو، مقاله طراحی سایت سئو‌محور را بخوانید.

اصل ۴: ساختار Semantic HTML

چرا HTML Semantic مهم است؟

صفحه‌خوان‌ها از ساختار HTML برای درک محتوا استفاده می‌کنند. HTML Semantic (مثل <nav>, <main>, <article>, <section>) به صفحه‌خوان می‌گوید هر بخش چه نقشی دارد.

قواعد Semantic

• <header>: هدر سایت
• <nav>: منوی ناوبری
• <main>: محتوای اصلی
• <article>: مقاله یا محتوای مستقل
• <section>: بخش محتوا
• <footer>: فوتر سایت
• <h1> تا <h6>: سلسله‌مراتب عنوان‌ها

اصل ۵: فرم‌های قابل‌دسترس

قواعد فرم

• label مرتبط: هر input یک <label> داشته باشد
• خطای واضح: خطا با متن توضیح داده شود (نه فقط رنگ)
• ترتیب منطقی: Tab به ترتیب صحیح حرکت کند
• اعتبارسنجی real-time: خطا را قبل از submit نشان دهید

اصل ۶: ARIA Labels

ARIA چیست؟

ARIA (Accessible Rich Internet Applications) مجموعه‌ای از attributeها است که به صفحه‌خوان اطلاعات اضافی درباره عناصر می‌دهد.

مثال‌های ARIA

• aria-label: برچسب برای عنصر بدون متن
• aria-describedby: توضیح اضافی برای فرم
• role="navigation": نقش عنصر را مشخص می‌کند
• aria-live="polite": محتوای پویا را اعلام می‌کند

قاعده ARIA

اولین قاعده ARIA: اگر می‌توانید از HTML Semantic استفاده کنید، از ARIA استفاده نکنید. ARIA فقط وقتی لازم است که HTML Semantic کافی نیست.

دسترس‌پذیری و سئو

ارتباط دسترس‌پذیری و سئو

بر اساس Google Search Central (۲۰۲۴)، دسترس‌پذیری و سئو همپوشانی زیادی دارند:

• Alt Text: هم برای دسترس‌پذیری و هم برای سئو
• HTML Semantic: هم برای صفحه‌خوان و هم برای گوگل
• سرعت سایت: هم برای کاربر کم‌بینا و هم برای رتبه‌بندی
• ناوبری شفاف: هم برای کیبورد و هم برای crawl گوگل

برای آشنایی با سئوی فنی، مقاله سئو تکنیکال را بخوانید.

ابزارهای تست دسترس‌پذیری

منابع معتبر

• W3C — Web Accessibility Guidelines (WCAG) — استاندارد رسمی دسترس‌پذیری
• Google Search Central — Search Essentials — راهنمای گوگل

«سایت قابل‌دسترس، سایت بهتری برای همه است — نه فقط برای افراد با محدودیت.» — W3C Web Accessibility Initiative (۲۰۲۴)

سوالات متداول

دسترس‌پذیری در طراحی سایت چیست؟

دسترس‌پذیری (Accessibility) یعنی ساختن سایتی که همه کاربران — از جمله افراد کم‌بینا، کم‌شنوا، با محدودیت حرکتی، یا با اختلالات شناختی — بتوانند از آن استفاده کنند. استاندارد اصلی WCAG است که توسط W3C منتشر می‌شود. دسترس‌پذیری نه‌تنها اخلاقی بلکه یک فاکتور سئو و قانونی است.

WCAG چیست؟

WCAG (Web Content Accessibility Guidelines) استاندارد بین‌المللی دسترس‌پذیری وب است که توسط W3C منتشر می‌شود. آخرین نسخه WCAG 2.2 (۲۰۲۴) است. چهار اصل WCAG: Perceivable (قابل‌درک)، Operable (قابل‌استفاده)، Understandable (قابل‌فهم)، و Robust (سازگار با فناوری‌های کمکی).

چرا Alt Text مهم است؟

Alt Text (متن جایگزین تصویر) به صفحه‌خوان‌ها می‌گوید تصویر چه چیزی نشان می‌دهد — کاربران کم‌بینا تصاویر را نمی‌بینند، فقط Alt Text را می‌شنوند. Alt Text همچنین به گوگل می‌گوید تصویر درباره چیست، که به سئو کمک می‌کند. بدون Alt Text، هم دسترس‌پذیری و هم سئو ضربه می‌خورند.

کنتراست رنگ چقدر باید باشد؟

بر اساس WCAG 2.2 (۲۰۲۴)، کنتراست متن عادی حداقل ۴.۵:۱ و متن بزرگ (۱۸pt+) حداقل ۳:۱ باشد. کنتراست پایین باعث می‌شود کاربران کم‌بینا و مسن نتوانند متن را بخوانند. از ابزارهایی مثل WebAIM Contrast Checker برای تست استفاده کنید.

آیا دسترس‌پذیری به سئو کمک می‌کند؟

بله، دسترس‌پذیری و سئو همپوشانی زیادی دارند. Alt Text، HTML Semantic، سرعت سایت، و ناوبری شفاف هم برای دسترس‌پذیری و هم برای سئو مهم هستند. بر اساس Google Search Central (۲۰۲۴)، دسترس‌پذیری یکی از فاکتورهای رتبه‌بندی گوگل است.

چگونه ناوبری کیبورد را تست کنیم؟

موس را отключ کنید و فقط با کیبورد (Tab, Enter, Arrow) در سایت حرکت کنید. همه لینک‌ها، دکمه‌ها، و فرم‌ها باید با Tab قابل‌دسترس باشند. ترتیب Tab باید منطقی (بصری) باشد و عنصر-focused با outline مشخص باشد. اگر نتوانید با کیبورد به عنصری برسید، سایت قابل‌دسترس نیست.