فارسی

راهنمای جامع دسترس‌پذیری وب (a11y) برای توسعه‌دهندگان فرانت‌اند، با پوشش اصول و تکنیک‌ها برای ایجاد تجربیات وب فراگیر برای همه کاربران.

دسترس‌پذیری وب (a11y): راهنمای عملی برای توسعه‌دهندگان فرانت‌اند

دسترس‌پذیری وب (که اغلب به صورت a11y مخفف می‌شود، جایی که 11 نشان‌دهنده تعداد حروف بین 'a' و 'y' است) عمل طراحی و توسعه وب‌سایت‌ها و برنامه‌های وب است که برای افراد دارای معلولیت قابل استفاده باشد. این شامل افراد با اختلالات بینایی، شنوایی، حرکتی، شناختی و گفتاری می‌شود. ساخت وب‌سایت‌های قابل دسترس تنها به معنای رعایت قوانین نیست؛ بلکه به معنای ایجاد تجربیات دیجیتال فراگیر و عادلانه برای همه، صرف‌نظر از توانایی‌ها یا فناوری‌هایی است که برای دسترسی به وب استفاده می‌کنند. این امر همچنین برای دستیابی به مخاطبان گسترده‌تر ضروری است. به عنوان مثال، کنتراست رنگ خوب به نفع کاربرانی است که در نور شدید خورشید هستند و طرح‌بندی‌های واضح به کسانی که دارای اختلالات شناختی هستند یا به سادگی در حال انجام چند کار همزمان هستند، کمک می‌کند.

چرا دسترس‌پذیری وب مهم است؟

دلایل قانع‌کننده متعددی برای اولویت‌بندی دسترس‌پذیری وب وجود دارد:

درک استانداردها و دستورالعمل‌های دسترس‌پذیری

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

WCAG حول چهار اصل سازماندهی شده است که اغلب به آنها POUR گفته می‌شود:

WCAG دارای سه سطح انطباق است: A، AA و AAA. سطح A ابتدایی‌ترین سطح دسترس‌پذیری است، در حالی که سطح AAA جامع‌ترین سطح است. اکثر سازمان‌ها برای انطباق با سطح AA تلاش می‌کنند، زیرا تعادل خوبی بین دسترس‌پذیری و عملی بودن فراهم می‌کند. بسیاری از قوانین و مقررات، انطباق با سطح AA را الزامی می‌کنند.

تکنیک‌های عملی برای توسعه‌دهندگان فرانت‌اند

در اینجا چند تکنیک عملی وجود دارد که توسعه‌دهندگان فرانت‌اند می‌توانند برای بهبود دسترس‌پذیری وب‌سایت‌ها و برنامه‌های وب خود استفاده کنند:

۱. HTML معنایی (Semantic HTML)

استفاده از عناصر HTML معنایی برای دسترس‌پذیری حیاتی است. HTML معنایی به محتوای شما معنا و ساختار می‌بخشد و درک و تفسیر آن را برای فناوری‌های کمکی آسان‌تر می‌کند. به جای استفاده از عناصر عمومی <div> و <span> برای همه چیز، از عناصر معنایی HTML5 مانند موارد زیر استفاده کنید:

مثال:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content here...</p>
  </article>
</main>

<footer>
  <p>© 2023 My Website</p>
</footer>

استفاده از سطوح عنوان‌بندی مناسب (<h1> تا <h6>) نیز برای ایجاد یک ساختار منطقی سند ضروری است. از عنوان‌ها برای سازماندهی محتوای خود و آسان‌تر کردن ناوبری برای کاربران استفاده کنید. <h1> باید برای عنوان اصلی صفحه استفاده شود و عنوان‌های بعدی باید برای ایجاد سلسله مراتب اطلاعات استفاده شوند. از پرش از سطوح عنوان‌بندی (مثلاً رفتن از <h2> به <h4>) خودداری کنید زیرا این کار می‌تواند کاربران صفحه‌خوان را سردرگم کند.

۲. متن جایگزین برای تصاویر

همه تصاویر باید متن جایگزین (alt text) معناداری داشته باشند که محتوا و عملکرد تصویر را توصیف کند. متن جایگزین توسط صفحه‌خوان‌ها برای انتقال اطلاعات تصویر به کاربرانی که نمی‌توانند آن را ببینند، استفاده می‌شود. اگر یک تصویر صرفاً تزئینی است و هیچ اطلاعات مهمی را منتقل نمی‌کند، ویژگی alt باید روی یک رشته خالی (alt="") تنظیم شود.

مثال:

<img src="logo.png" alt="Company Logo">
<img src="decorative-pattern.png" alt="">

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

برای تصاویر پیچیده، مانند نمودارها و گراف‌ها، ارائه توضیحات دقیق‌تر در متن اطراف یا استفاده از عناصر <figure> و <figcaption> را در نظر بگیرید.

۳. دسترس‌پذیری با صفحه‌کلید

تمام عناصر تعاملی در وب‌سایت شما باید با استفاده از صفحه‌کلید قابل دسترس باشند. این برای کاربرانی که نمی‌توانند از ماوس یا دستگاه اشاره‌گر دیگری استفاده کنند، حیاتی است. اطمینان حاصل کنید که کاربران می‌توانند با استفاده از کلید Tab در وب‌سایت شما حرکت کنند و با استفاده از کلیدهای Enter یا Spacebar با عناصر تعامل داشته باشند.

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

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

مثال:

/* CSS */
a:focus, button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

۴. ویژگی‌های ARIA

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

برخی از ویژگی‌های رایج ARIA عبارتند از:

مثال:

<button aria-label="Close dialog" onclick="closeDialog()">X</button>
<div role="dialog" aria-labelledby="dialog-title">
  <h2 id="dialog-title">My Dialog</h2>
  <p>Dialog content here...</p>
</div>

هنگام استفاده از ویژگی‌های ARIA، مهم است که از قوانین استفاده از ARIA پیروی کنید:

۵. کنتراست رنگ

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

WCAG نسبت کنتراست حداقل 4.5:1 برای متن معمولی و 3:1 برای متن بزرگ (18pt یا 14pt برجسته) را الزامی می‌کند. می‌توانید از ابزارهای بررسی کنتراست رنگ برای تأیید اینکه وب‌سایت شما این الزامات را برآورده می‌کند، استفاده کنید. ابزارهای آنلاین رایگان زیادی مانند بررسی‌کننده کنتراست WebAIM در دسترس هستند.

مثال:

/* CSS */
body {
  color: #333; /* متن خاکستری تیره */
  background-color: #fff; /* پس‌زمینه سفید */
}

(این مثال دارای نسبت کنتراست 7:1 است که الزامات WCAG را برآورده می‌کند.)

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

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

برچسب‌گذاری صحیح عناصر فرم برای دسترس‌پذیری حیاتی است. از عنصر <label> برای مرتبط کردن یک برچسب متنی با هر ورودی فرم استفاده کنید. ویژگی for عنصر <label> باید با ویژگی id عنصر ورودی مربوطه مطابقت داشته باشد.

مثال:

<label for="name">Name:</label>
<input type="text" id="name" name="name">

برای فرم‌های پیچیده، از عناصر <fieldset> و <legend> برای گروه‌بندی کنترل‌های فرم مرتبط استفاده کنید. این کار می‌تواند به کاربران در درک هدف هر گروه از کنترل‌ها کمک کند.

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

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

۷. دسترس‌پذیری چندرسانه‌ای

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

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

برای ویدئوها توضیحات صوتی ارائه دهید. توضیحات صوتی روایتی از محتوای بصری ویدئو را ارائه می‌دهند و آنچه را که روی صفحه اتفاق می‌افتد توصیف می‌کنند. توضیحات صوتی برای کاربرانی که نابینا یا کم‌بینا هستند ضروری است.

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

۸. محتوای پویا و به‌روزرسانی‌ها

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

از مناطق زنده ARIA برای اعلام به‌روزرسانی‌های پویا به صفحه‌خوان‌ها استفاده کنید. مناطق زنده ARIA مناطقی از صفحه هستند که برای دریافت به‌روزرسانی‌ها تعیین شده‌اند. هنگامی که محتوای یک منطقه زنده تغییر می‌کند، صفحه‌خوان تغییرات را به کاربر اعلام می‌کند. از ویژگی aria-live برای تعریف یک منطقه زنده استفاده کنید. ویژگی‌های aria-atomic و aria-relevant می‌توانند برای تنظیم دقیق نحوه اعلام تغییرات توسط صفحه‌خوان استفاده شوند.

مثال:

<div aria-live="polite">
  <p id="status-message">در حال بارگذاری...</p>
</div>

<script>
  // به‌روزرسانی پیام وضعیت هنگام بارگذاری داده‌ها
  function updateStatus(message) {
    document.getElementById("status-message").textContent = message;
  }
</script>

در این مثال، ویژگی aria-live="polite" نشان می‌دهد که صفحه‌خوان باید تغییرات محتوای عنصر <div> را اعلام کند، اما نباید کار فعلی کاربر را قطع کند. تابع updateStatus() محتوای عنصر <p> را به‌روز می‌کند، که باعث می‌شود صفحه‌خوان پیام وضعیت جدید را اعلام کند.

۹. تست دسترس‌پذیری

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

دسترس‌پذیری فراتر از مرورگر

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

نتیجه‌گیری

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

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