M

MLOG

فارسی

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

دسترس‌پذیری در CSS: راهنمای عملی برای انطباق با WCAG

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

WCAG چیست و چرا مهم است؟

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

اصول WCAG: POUR

WCAG بر چهار اصل اساسی استوار است که اغلب با سرواژه POUR به خاطر سپرده می‌شوند:

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

CSS نقش حیاتی در دستیابی به انطباق با WCAG ایفا می‌کند. در اینجا چند تکنیک کلیدی CSS برای در نظر گرفتن آورده شده است:

۱. HTML معنایی و CSS

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

مثال:

به جای استفاده از عناصر عمومی <div> برای همه چیز، از عناصر معنایی مانند <article>، <nav>، <aside>، <header>، <footer>، <main>، <section> و تگ‌های عنوان (<h1> تا <h6>) استفاده کنید.

HTML:

<article> <h2>عنوان مقاله</h2> <p>محتوای مقاله در اینجا قرار می‌گیرد.</p> </article>

CSS:

article { margin-bottom: 20px; } h2 { font-size: 1.5em; font-weight: bold; margin-bottom: 10px; }

با استفاده از <article> و <h2>، شما معنای معنایی به محتوا می‌بخشید که به فناوری‌های کمکی کمک می‌کند تا ساختار و زمینه را درک کنند.

۲. رنگ و کنتراست

از کنتراست رنگ کافی بین متن و رنگ پس‌زمینه اطمینان حاصل کنید تا محتوا برای کاربران کم‌بینا یا کوررنگ خوانا باشد. WCAG 2.1 سطح AA به نسبت کنتراست حداقل ۴.۵:۱ برای متن معمولی و ۳:۱ برای متن بزرگ (۱۸ پوینت یا ۱۴ پوینت ضخیم) نیاز دارد.

ابزارهایی برای بررسی کنتراست رنگ:

مثال:

/* کنتراست خوب */ body { background-color: #000000; /* مشکی */ color: #FFFFFF; /* سفید */ } /* کنتراست ضعیف */ body { background-color: #FFFFFF; /* سفید */ color: #F0F0F0; /* خاکستری روشن */ }

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

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

۳. نشانگرهای فوکوس

هنگامی که کاربران با استفاده از کیبورد (مثلاً با استفاده از کلید Tab) در وب‌سایت شما پیمایش می‌کنند، ارائه نشانگرهای فوکوس بصری واضح بسیار مهم است تا بدانند کدام عنصر در حال حاضر فوکوس دارد. نشانگر فوکوس پیش‌فرض مرورگر ممکن است در برخی موارد ناکافی یا حتی نامرئی باشد. از CSS برای سفارشی کردن نشانگر فوکوس استفاده کنید تا برجسته‌تر شود.

مثال:a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid #007bff; /* یک حاشیه آبی */ outline-offset: 2px; /* فاصله‌ای بین عنصر و حاشیه ایجاد می‌کند */ }

این کد CSS یک حاشیه آبی به عناصر هنگام دریافت فوکوس اضافه می‌کند. ویژگی outline-offset یک فضای کوچک بین عنصر و حاشیه اضافه می‌کند که دید را بهبود می‌بخشد. از حذف کامل نشانگر فوکوس بدون ارائه جایگزین مناسب خودداری کنید، زیرا این کار می‌تواند وب‌سایت شما را برای کاربران کیبورد غیرقابل استفاده کند.

۴. ناوبری با کیبورد

اطمینان حاصل کنید که تمام عناصر تعاملی (لینک‌ها، دکمه‌ها، فیلدهای فرم و غیره) با استفاده از کیبورد قابل پیمایش هستند. این برای کاربرانی که نمی‌توانند از ماوس استفاده کنند، ضروری است. ترتیب عناصر در کد منبع HTML باید با ترتیب بصری در صفحه مطابقت داشته باشد تا یک جریان ناوبری منطقی تضمین شود. از CSS برای بازآرایی بصری عناصر و در عین حال حفظ ترتیب ناوبری منطقی کیبورد استفاده کنید.

مثال:

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

HTML:

<nav> <ul> <li><a href="#">خانه</a></li> <li><a href="#">درباره ما</a></li> <li><a href="#">خدمات</a></li> <li><a href="#">تماس با ما</a></li> </ul> </nav> <main> <h1>محتوای اصلی</h1> <p>این محتوای اصلی صفحه است.</p> </main>

CSS:

body { display: flex; } nav { order: 1; /* منوی ناوبری را به سمت راست منتقل می‌کند */ width: 200px; padding: 20px; } main { order: 0; /* محتوای اصلی را در سمت چپ نگه می‌دارد */ flex: 1; padding: 20px; }

با استفاده از ویژگی order در CSS، می‌توانید منوی ناوبری را به صورت بصری به سمت راست صفحه بازآرایی کنید در حالی که موقعیت اصلی آن در کد منبع HTML حفظ می‌شود. این تضمین می‌کند که کاربران کیبورد ابتدا با منوی ناوبری مواجه می‌شوند و دسترس‌پذیری بهبود می‌یابد.

۵. پنهان‌سازی مسئولانه محتوا

گاهی اوقات لازم است محتوا را از نمایش بصری پنهان کنید اما آن را برای صفحه‌خوان‌ها دسترس‌پذیر نگه دارید. برای مثال، ممکن است بخواهید زمینه بیشتری برای یک لینک یا دکمه که فقط با یک آیکون نمایش داده می‌شود، فراهم کنید. از استفاده از display: none یا visibility: hidden خودداری کنید، زیرا این ویژگی‌ها محتوا را هم از کاربران بصری و هم از صفحه‌خوان‌ها پنهان می‌کنند. به جای آن، از تکنیکی استفاده کنید که محتوا را به صورت بصری پنهان می‌کند در حالی که آن را برای فناوری‌های کمکی دسترس‌پذیر نگه می‌دارد.

مثال:

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

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

مثال HTML:

<a href="#">ویرایش <span class="sr-only">آیتم</span></a>

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

ویژگی‌های ARIA (اپلیکیشن‌های اینترنتی غنی دسترس‌پذیر): از ویژگی‌های ARIA با احتیاط برای افزایش دسترس‌پذیری محتوای پویا و اجزای پیچیده رابط کاربری استفاده کنید. ویژگی‌های ARIA اطلاعات معنایی بیشتری را برای فناوری‌های کمکی فراهم می‌کنند. با این حال، از استفاده از ویژگی‌های ARIA برای رفع مشکلات دسترس‌پذیری که با HTML معنایی قابل حل هستند، خودداری کنید. به عنوان مثال، از نقش‌ها و ویژگی‌های ARIA برای تعریف ویجت‌های سفارشی و ارائه به‌روزرسانی‌های وضعیت به صفحه‌خوان‌ها هنگامی که محتوا به صورت پویا تغییر می‌کند، استفاده کنید.

۶. طراحی واکنش‌گرا و دسترس‌پذیری

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

مثال:

@media (max-width: 768px) { nav ul { flex-direction: column; /* چیدن آیتم‌های ناوبری به صورت عمودی در صفحات کوچک‌تر */ } }

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

۷. انیمیشن‌ها و حرکت

انیمیشن‌های بیش از حد یا پیاده‌سازی ضعیف آن‌ها می‌تواند باعث تشنج یا بیماری حرکت در برخی کاربران شود. از CSS برای کاهش یا غیرفعال کردن انیمیشن‌ها برای کاربرانی که حرکت کاهش‌یافته را ترجیح می‌دهند، استفاده کنید. پرس‌وجوی رسانه‌ای prefers-reduced-motion به شما امکان می‌دهد تشخیص دهید که آیا کاربر درخواست کرده است که سیستم میزان انیمیشن یا حرکتی را که استفاده می‌کند به حداقل برساند.

مثال:

@media (prefers-reduced-motion: reduce) { .animated-element { animation: none !important; transition: none !important; } }

این کد CSS انیمیشن‌ها و انتقال‌ها را برای کاربرانی که تنظیم «حرکت کاهش‌یافته» را در سیستم عامل خود فعال کرده‌اند، غیرفعال می‌کند. ارائه کنترلی را در نظر بگیرید که به کاربران امکان می‌دهد انیمیشن‌ها را به صورت دستی در وب‌سایت شما غیرفعال کنند.

۸. آزمایش با فناوری‌های کمکی

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

صفحه‌خوان‌های محبوب:

نکات اضافی برای آزمایش:

تکنیک‌های پیشرفته CSS برای دسترس‌پذیری

۱. ویژگی‌های سفارشی (متغیرهای CSS) برای پوسته‌بندی

از ویژگی‌های سفارشی CSS (متغیرها) برای ایجاد پوسته‌های دسترس‌پذیر با گزینه‌های کنتراست بالا استفاده کنید. این به کاربران امکان می‌دهد ظاهر وب‌سایت شما را برای رفع نیازهای فردی خود سفارشی کنند.

مثال:

:root { --text-color: #333; --background-color: #fff; --link-color: #007bff; } body { color: var(--text-color); background-color: var(--background-color); } a { color: var(--link-color); } /* پوسته کنتراست بالا */ .high-contrast { --text-color: #fff; --background-color: #000; --link-color: #ff0; }

این مثال ویژگی‌های سفارشی CSS را برای رنگ متن، رنگ پس‌زمینه و رنگ لینک تعریف می‌کند. کلاس .high-contrast این متغیرها را برای ایجاد یک پوسته با کنتراست بالا لغو می‌کند. سپس می‌توانید از جاوا اسکریپت برای جابجایی کلاس .high-contrast روی عنصر <body> برای تغییر بین پوسته‌ها استفاده کنید.

۲. CSS Grid و Flexbox برای طرح‌بندی‌های دسترس‌پذیر

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

مثال:

هنگام استفاده از Flexbox یا Grid، اطمینان حاصل کنید که ترتیب تب‌ها منطقی باقی می‌ماند. ویژگی order در صورت عدم استفاده دقیق می‌تواند ترتیب تب‌ها را مختل کند.

۳. `clip-path` و دسترس‌پذیری

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

۴. `content` Property و Accessibility

ویژگی `content` در CSS می‌تواند برای درج محتوای تولید شده قبل یا بعد از یک عنصر استفاده شود. با این حال، محتوای تولید شده همیشه برای صفحه‌خوان‌ها دسترس‌پذیر نیست. از ویژگی `content` با احتیاط استفاده کنید و استفاده از ویژگی‌های ARIA را برای ارائه اطلاعات معنایی اضافی به فناوری‌های کمکی در نظر بگیرید.

مثال‌های واقعی و مطالعات موردی

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

اشتباهات رایج دسترس‌پذیری که باید از آنها اجتناب کرد

نتیجه‌گیری: پذیرش دسترس‌پذیری برای یک وب بهتر

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

منابع و مطالعه بیشتر