ARIA: وقتی HTML معمولی کافی نیست
تو کل این دوره، بارها به دسترسیپذیری اشاره کردیم؛ از alt و label گرفته تا header و nav و figcaption. اونها همه بخشی از HTML معنایی بودن که بهطور طبیعی برای صفحهخوانها قابلفهمه. اما گاهی، مخصوصاً وقتی رابطهای کاربری سفارشی و پیچیده میسازیم (مثل یه منوی کشویی سفارشی یا یه تب پنل)، خود HTML بهتنهایی کافی نیست. اینجاست که ARIA وارد میشه.
ARIA چیه؟
ARIA مخفف Accessible Rich Internet Applications هست؛ یه مجموعه از ویژگیهای اضافه که میشه به هر عنصر HTML اضافه کرد تا اطلاعات دسترسیپذیری بیشتری به فناوریهای کمکی (مثل صفحهخوانها) منتقل بشه. نکتهی مهم اینه که ARIA هیچ رفتار یا ظاهر جدیدی به عنصر اضافه نمیکنه؛ فقط یه لایهی معنایی اضافهست که مخصوص فناوریهای کمکیه.
قانون طلایی ARIA: اول HTML معنایی، بعد ARIA
قبل از هر چیز، یه اصل مهم رو باید بدونی: بهترین ARIA، ARIA ای هست که اصلاً لازم نیست. یعنی اگه یه تگ استاندارد HTML وجود داره که همون معنا رو منتقل میکنه (مثل button برای دکمه، nav برای منو)، همیشه باید اول اون رو انتخاب کنی. ARIA فقط برای مواقعی هست که مجبوری از یه عنصر غیرمعنایی (مثل div) استفاده کنی و نیاز داری بهش معنای اضافه بدی.
<!-- بهتر: استفاده از تگ استاندارد -->
<button>ارسال</button>
<!-- بدتر: شبیهسازی دکمه با div و ARIA -->
<div role="button" tabindex="0">ارسال</div>هر دو کد بالا از نظر دسترسیپذیری تقریباً مشابه عمل میکنن (اگه درست پیادهسازی بشن)، اما نسخهی اول خیلی سادهتر و کمخطاتره؛ button بهطور طبیعی با صفحهکلید هم کار میکنه (Tab و Enter)، اما div با role="button" باید این رفتارها رو دستی با جاوااسکریپت هم اضافه کنه.
ویژگی role: تعریف نقش یه عنصر
<div role="alert">
خطا: لطفاً تمام فیلدهای اجباری را پر کنید.
</div>ویژگی role به مرورگر و صفحهخوان میگه این عنصر، از نظر عملکردی چه نقشی داره؛ حتی اگه از نظر تگ HTML یه div ساده باشه. تو این مثال، role="alert" باعث میشه صفحهخوان فوراً و بدون نیاز به فوکوس دستی کاربر، این پیام رو با صدای بلند اعلام کنه؛ دقیقاً مناسب برای پیامهای خطای مهم.
ویژگی aria-label: نامگذاری وقتی متن قابلمشاهده کافی نیست
<button aria-label="بستن پنجره">✕</button>گاهی یه دکمه فقط یه آیکون داره (مثل علامت ✕ برای بستن)، بدون هیچ متن قابلخوندنی. صفحهخوان نمیتونه از یه علامت گرافیکی معنایی استخراج کنه. ویژگی aria-label یه برچسب متنی جایگزین (که فقط برای صفحهخوان خونده میشه، نه برای کاربر بینا نمایش داده میشه) فراهم میکنه؛ تو این مثال، صفحهخوان میگه «بستن پنجره، دکمه»، نه فقط علامت ✕ بیمعنی.
مقایسهی aria-label با alt که تو فصل ۵ دیدیم
این دو مفهوم مشابه هستن اما برای موقعیتهای متفاوت: alt مخصوص تگ img هست (توضیح یه تصویر)، در حالی که aria-label رو میشه روی هر عنصری (نه فقط تصویر) گذاشت تا یه نام قابلفهم براش فراهم بشه، وقتی محتوای قابلمشاهدهش (یا نبودِ اون) بهتنهایی کافی نیست.
ویژگی aria-hidden: مخفیکردن از دید صفحهخوان
<span aria-hidden="true">★</span> امتیاز: ۴.۵ از ۵ویژگی aria-hidden="true" باعث میشه صفحهخوان این عنصر رو کاملاً نادیده بگیره، هرچند از نظر بصری همچنان قابلمشاهدهست. این برای مواردی مفیده که یه عنصر صرفاً تزئینیه (مثل یه آیکون ستاره که معنایی بهتنهایی نداره) و میخوای صفحهخوان بدون مکث اضافه، مستقیم بره سراغ متن واقعی («امتیاز: ۴.۵ از ۵»).
ویژگی aria-live: اعلام تغییرات پویا
<div aria-live="polite" id="cart-count">
۳ کالا در سبد خرید
</div>ویژگی aria-live به صفحهخوان میگه این بخش ممکنه بدون بارگذاری مجدد کل صفحه (مثلاً با جاوااسکریپت) تغییر کنه، و هر بار که تغییر میکنه، باید محتوای جدید رو اعلام کنه. مقدار polite یعنی این اعلام صبر میکنه تا کاربر کار فعلیش تموم بشه (مزاحم نمیشه)، برخلاف مقدار assertive که فوری و بدون معطلی اعلام میشه (مناسب برای هشدارهای واقعاً فوری).
یه مثال کامل: یه پیام خطای فرم دسترسیپذیر
<label for="email">ایمیل</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<p id="email-error" role="alert">
لطفاً یک آدرس ایمیل معتبر وارد کنید.
</p>ویژگی aria-describedby یه فیلد ورودی رو به یه عنصر توضیحی دیگه (مثل پیام خطا) وصل میکنه؛ وقتی کاربر صفحهخوان روی این فیلد فوکوس کنه، هم label («ایمیل») و هم متن توضیحی مرتبط («لطفاً یک آدرس ایمیل معتبر وارد کنید») هر دو خونده میشن.
چند اصل کلی برای استفادهی درست از ARIA
- همیشه اول دنبال تگ معنایی استاندارد HTML باش؛ ARIA رو فقط برای موقعیتهایی که تگ مناسبی وجود نداره استفاده کن.
- ARIA هیچ رفتاری (مثل قابلیت کلیک با Enter) اضافه نمیکنه؛ اگه از role="button" روی یه div استفاده میکنی، باید خودت با جاوااسکریپت رفتار کلیک و فوکوس صفحهکلید رو هم پیادهسازی کنی.
- ARIA اشتباه، بدتر از نبود ARIA است؛ چون میتونه اطلاعات نادرست به کاربر صفحهخوان بده.
چند اشتباه رایج
- استفاده از role و ARIA بهجای تگهای استاندارد HTML، در حالی که همون تگ استاندارد سادهتر و امنتر بود.
- گذاشتن role="button" روی یه div بدون اضافهکردن قابلیت فوکوس (tabindex) و رفتار صفحهکلید.
- استفادهی بیشازحد از aria-hidden روی محتوایی که در واقع باید برای صفحهخوان هم قابلدسترس باشه.
بهترین روشها
- همیشه اول تگ معنایی مناسب HTML رو در نظر بگیر؛ ARIA راهحل آخر باشه، نه اول.
- برای دکمههای فقط-آیکون، همیشه aria-label بذار.
- برای پیامهای خطا یا هشدارهای مهم، از role="alert" استفاده کن.
نکتهی سئو
ARIA تأثیر مستقیم قابلتوجهی روی رتبهبندی گوگل ندارد، اما ساختار دسترسیپذیرتر معمولاً با ساختار معنایی بهتر همراه است که بهطور غیرمستقیم برای فهم بهتر محتوا توسط موتورهای جستجو هم مفید است.
نکتهی دسترسیپذیری
ARIA وقتی بهدرستی و در جای مناسب استفاده بشه، میتونه تجربهی کاربران صفحهخوان رو در رابطهای کاربری پیچیده و سفارشی بهشدت بهبود بده؛ اما استفادهی نادرست یا اضافی از اون میتونه گیجکنندهتر از نبودش باشه.
جمعبندی
ARIA مجموعهای از ویژگیها (مثل role، aria-label، aria-hidden و aria-live) است که اطلاعات دسترسیپذیری اضافه به عناصر HTML میدهد، مخصوصاً وقتی از عناصر غیرمعنایی استفاده میشود. قانون طلایی این است که همیشه اول باید بهدنبال تگ استاندارد و معنایی HTML بود؛ ARIA فقط زمانی به کار میآید که هیچ گزینهی معنایی مناسبی وجود نداشته باشد.