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 میسپاریم.