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

11.1 چهار اصل اصلی WCAG: بنیان دسترسی‌پذیری

11.1.1 قابل‌ادراک (Perceivable)

• متن جایگزین برای تصاویر (alt)
• توضیحات برای ویدئوها (زیرنویس، توصیف)
• تفاوت کافی در رنگ (حداقل 4.5:1 برای متن)
• محتوای غیرتصویری (مانند اسکرول، انیمیشن) باید قابل دسترسی باشد

<img src="chart.png" alt="نمودار رشد فروش در سال ۱۴۰۳">
<video controls>
 <track kind="captions" src="subtitles.vtt" srclang="fa" label="زیرنویس فارسی">
</video>

11.1.2 قابل‌عمل (Operable)

• دسترسی با کیبورد (Tab - Enter - Arrow Keys)
• زمان کافی برای عمل (نه محدودیت زمانی برای کاربران ناهمخوان)
• جلوگیری از انگیزش‌های ناخواسته (مثلاً انیمیشن‌های مدام)

<button tabindex="0">اعمال تغییرات</button>
<a href="#content" class="skip-link">پرش به محتوا</a>

• tabindex="0" برای فعال‌سازی دسترسی با Tab.
• tabindex="-1" برای غیرفعال کردن از دسترسی (مثلاً در دکمه‌های موقت).

11.1.3 قابل‌فهم (Understandable)

• متن ساده و قابل فهم
• پیش‌بینی‌پذیری رفتار (مثلاً لینک‌ها در هر جا یکسان عمل کنند)
• راهنمایی در صورت خطای ورودی
• استفاده از عناصر معنایی (مثل <nav> - <main>)

<label for="email">ایمیل:</label>
<input type="email" id="email" name="email" required aria-invalid="true">
<p id="error-email" role="alert">لطفاً یک ایمیل معتبر وارد کنید.</p>

• aria-invalid="true" و role="alert" به Screen Readers کمک می‌کند تا خطا را به صورت فوری اعلام کند.
• استفاده از aria-live="polite" برای اعلان‌های غیرفوری (مثلاً "فرم ارسال شد").

11.1.4 مقاوم (Robust)

• سازگاری با نرم‌افزارهای خواننده متن (Screen Readers)
• سازگاری با ابزارهای تغییر تنظیمات (مثلاً بزرگ‌نمایی)
• استفاده از استانداردهای HTML و ARIA به درستی

<div role="region" aria-label="منوی اصلی">
 <ul>
  <li><a href="/">صفحه اصلی</a></li>
  <li><a href="/about">درباره ما</a></li>
 </ul>
</div>

• استفاده از role و aria-* به صورت صحیح، به ابزارهای دسترسی کمک می‌کند تا ساختار صفحه را به درستی تشخیص دهد.
• از role="application" فقط در موارد خاص (مثل ورودی پیچیده) استفاده کنید.

11.2 نقش‌ها و صفات ARIA: تقویت ساختار معنایی

11.2.1 نقش‌های ARIA (Roles)

• ARIA (Accessible Rich Internet Applications) به عنوان پل بین HTML و ابزارهای دسترسی عمل می‌کند.
• نقش‌ها مشخص می‌کنند که یک عنصر چه نوع عملکردی دارد.

<div role="alert" aria-live="assertive">
 فرم با موفقیت ارسال شد!
</div>

• aria-live="polite" برای اعلان‌های غیرفوری (مثلاً "آپدیت شد")
• aria-live="assertive" برای اعلان‌های فوری (مثلاً "خطای امنیتی")

11.2.2 ویژگی‌های ARIA (Properties & States)

<button 
 aria-expanded="false" 
 aria-controls="menu-content"
 onclick="toggleMenu()"
 >
 منو
</button>
<div id="menu-content" hidden>
 <ul>
  <li><a href="#">اولین مورد</a></li>
  <li><a href="#">دومین مورد</a></li>
 </ul>
</div>

• استفاده از aria-controls برای ارتباط بین دکمه و محتوای مرتبط.
• aria-expanded باید به صورت دینامیک تغییر کند (با JavaScript).

11.3 ناوبری بدون ماوس (کیبوردی): دسترسی برای تمام کاربران

11.3.1 tabindex: مدیریت ترتیب دسترسی

• 0: اضافه به ترتیب طبیعی DOM
• 1-: غیرقابل دسترسی با Tab
• 1, 2, ...: ترتیب دستی (نامناسب)

<a href="#content" tabindex="0">پرش به محتوا</a>

11.3.2 Skip Links (لینک‌های پرش): جلوگیری از گم‌شدن در منوی اصلی

<a href="#main-content" class="skip-link">پرش به محتوای اصلی</a>

<main id="main-content">
 <h1>محتوای اصلی صفحه</h1>
 <p>این محتوا بلافاصله بعد از پرش نمایش داده می‌شود.</p>
</main>

.skip-link {
 position: absolute;
 top: -40px;
 left: 0;
 background: #000;
 color: #fff;
 padding: 8px;
 text-decoration: none;
 z-index: 999;
 }
      
.skip-link:focus {
 top: 0;
 }

11.3.3 گردش در محتوا با کیبورد

11.3.3 گردش در محتوا با کیبورد

• Tab به عناصر بروند
• Enter روی دکمه‌ها کلیک کنند
• Space روی گزینه‌ها انتخاب کنند
• Arrow Keys در لیست‌ها، منوها، و جداول حرکت کنند
• Esc پنجره‌ها یا مودال‌ها را ببندند

<ul role="menubar">
 <li role="none">
  <a href="#" role="menuitem">منوی اول</a>
 </li>
 <li role="none">
  <a href="#" role="menuitem">منوی دوم</a>
 </li>
</ul>

بعدی

قبلی