حالت آفلاین — محتوا از حافظهٔ کش نمایش داده می‌شود
HTML از صفر؛ ساخت وب‌سایت

نام دسترس‌پذیر و ARIA؛ اول HTML بومی

۶. دسترس‌پذیری و صفحهٔ فارسی · 0٪

برای ذخیره پیشرفت و استفاده از دستیار وارد شوید.

HTML درست، نقطهٔ شروع است

برای دکمه از button، برای برچسب فرم از label و برای تیتر از h1 تا h6 استفاده کن. افزودن role="button" به div رفتار صفحه‌کلید و فوکوس دکمه را خودکار ایجاد نمی‌کند. نقش اضافی برای عنصر بومیِ مناسب معمولاً لازم نیست.

aria-label نامی می‌دهد که ابزار کمکی می‌خواند. aria-labelledby به id عنصر یا عنصرهای نام‌گذار اشاره می‌کند. aria-describedby برای توضیح تکمیلی است و جای label را نمی‌گیرد.

<label for="email">ایمیل</label>
<input id="email" name="email" type="email"
       aria-describedby="email-help" required>
<p id="email-help">نمونه: name@example.com</p>
<button type="button" aria-label="بستن پنجره">×</button>
<nav aria-label="منوی پایین صفحه">
  <a href="help.html">راهنما</a>
</nav>

اگر کنترل متنِ دیدنی دارد، نام دسترس‌پذیر باید آن متن را هم شامل شود. aria-label نام مرتبط ولی متفاوت از متن نساز. aria-hidden="true" محتوا را از درخت دسترس‌پذیری کنار می‌گذارد؛ روی کنترل فوکوس‌پذیر یا والد آن قرار نده. برای تصویر تزئینی معمولاً alt خالی کافی است.

ARIA ساختار و حالت را توصیف می‌کند؛ قابلیت تازه‌ای پیاده‌سازی نمی‌کند. اعلان خطای پویا و aria-live زمانی معنا پیدا می‌کند که رفتار پویا هم درست ساخته شود. در این دوره از کنترل‌های بومی استفاده می‌کنیم و طراحی ابزار تعاملی پیچیده را به مباحث JavaScript می‌سپاریم.