جلسه پنجاه و هفتم: آموزش کامل اتریبیوت ARIA در HTML
به دوره حرفهای آموزشHTML در آوای وب خوش اومدی! اگه دنبال یه راهنمای کامل برای اتریبیوت ARIA در HTML هستی، جای درستی اومدی! این اتریبیوتها بهت کمک میکنن وبسایتت رو برای همه کاربرا، از جمله افراد دارای معلولیت، در دسترس کنی و همزمان سئوی سایتت رو به اوج برسونی. تو این مقاله، با تمرکز روی سئو و دسترسیپذیری، تمام حالتها و ویژگیهای ARIA رو با مثالهای کاربردی و ترفندهای حرفهای برات توضیح میدیم. هیچچیز از قلم نمیافته! آمادهای؟ بزن بریم!
آنچه در این مقاله میخوانید:
🏷️ چرا اتریبیوت ARIA مهمه؟
تصور کن کاربری داری که نابینا یا کمبیناست و فقط با صفحهخوان (Screen Reader) وبگردی میکنه. یا کاربری که نمیتونه با ماوس کار کنه و فقط از کیبورد استفاده میکنه. اینجاست که اتریبیوت aria وارد عمل میشه.
🔹اتریبیوت ARIA کمک میکنه:
- اپلیکیشنهای تحت وب (SPA، فرمها، منوهای داینامیک) برای همه قابل استفاده باشن.
- نقش و وضعیت عناصر برای صفحهخوانها مشخص بشه.
- تجربه کاربری عادلانهتری برای همه فراهم بشه.
✨ به زبان ساده: اتریبیوت ARIA به مرورگر و ابزارهای کمکی میگن «این عنصر چی هست» و «الان تو چه وضعیتی قرار داره».
💡اتریبیوت ARIA دقیقاً چیه؟
ARIA مجموعهای از اتریبیوتها هست که میتونی به HTML اضافه کنی. این اتریبیوتها برای کاربر عادی شاید تغییری در ظاهر ایجاد نکنن، اما برای کاربرانی که از فناوریهای کمکی استفاده میکنن، خیلی حیاتی هستن.
طبق استاندارد W3C WAI-ARIA، این اتریبیوتها به سه دسته تقسیم میشن:
- Role → نقش عنصر رو مشخص میکنه (مثل دکمه، منو، هشدار)
- State → وضعیت فعلی عنصر رو توضیح میده (مثل فعال/غیرفعال بودن)
- Property → ویژگی یا خصوصیات عنصر رو معرفی میکنه (مثل برچسب جایگزین)
✨ حالتها و ویژگیهای ARIA چیه و چرا مهمه؟
اتریبیوتهای ARIA (Accessible Rich Internet Applications) به سه دسته تقسیم میشن: نقشها (Roles)، حالتها (States)، و ویژگیها (Properties). تو این مقاله، چون نقشها رو کامل در جلسه بعدی پوشش خواهیم داد، تمرکزمون روی حالتها و ویژگیهاست. اتریبیوت ARIA وضعیت یا اطلاعات اضافی عناصر HTML رو برای فناوریهای کمکی (مثل صفحهخوانها) مشخص میکنن تا کاربرایی با نیازهای خاص (مثل نابینایی یا مشکلات حرکتی) بتونن با سایت تعامل کنن.
- حالتها (States): وضعیت فعلی یه عنصر رو نشون میدن (مثل باز/بسته، انتخابشده/نشده).
- ویژگیها (Properties): توضیحات یا روابط بین عناصر رو تعریف میکنن (مثل برچسب یا عنصر کنترلشده).
✨ چرا مهمه؟
- پشتیبانی: همه مرورگرهای مدرن و ابزارهای کمکی (مثل NVDA، VoiceOver) از ARIA پشتیبانی میکنن.
- دسترسیپذیری: صفحهخوانها با این اتریبیوتها محتوای داینامیک و روابط عناصر رو بهتر منتقل میکنن.
- سئوی غیرمستقیم: بهبود تجربه کاربری (UX) نرخ پرش رو کم میکنه و سیگنال مثبتی برای گوگله.
- جذب مخاطب: سایتهای در دسترس برای کاربرای بیشتری جذابه.
💡 لیست کامل حالتها و ویژگیهای ARIA
اینجا تمام حالتها و ویژگیهای ARIA (به جز نقشها) رو با توضیح و مثال آوردیم. هیچچیز از قلم نیفتاده!
✨ حالتها (States)
حالتها وضعیت فعلی یه عنصر رو نشون میدن و معمولاً با جاوااسکریپت بهروزرسانی میشن.
| اتریبیوت | توضیح | مقادیر معتبر | کاربرد |
|---|---|---|---|
| aria-checked | نشون میده یه چکباکس، دکمه رادیویی یا آیتم مشابه انتخابشدهست یا نه | true, false, mixed | برای چکباکسها یا منوهای انتخابی |
| aria-disabled | مشخص میکنه یه عنصر غیرفعاله | true, false | برای دکمهها یا ورودیهای غیرقابل کلیک |
| aria-expanded | نشون میده یه عنصر (مثل منو یا آکاردئون) باز یا بستهست | true, false, undefined | برای منوهای بازشونده یا آکاردئونها |
| aria-hidden | مشخص میکنه یه عنصر برای فناوریهای کمکی مخفیه | true, false | برای مخفی کردن محتوای غیرضروری از صفحهخوانها |
| aria-invalid | نشون میده ورودی کاربر تو فرم معتبر نیست | true, false, grammar, spelling | برای اعتبارسنجی فرمها |
| aria-pressed | نشون میده یه دکمه تو حالت فشرده (تغییر وضعیت) هست یا نه | true, false, mixed | برای دکمههای تغییر وضعیت (مثل روشن/خاموش) |
| aria-required | مشخص میکنه یه فیلد تو فرم اجباریه | true, false | برای فیلدهای اجباری فرم |
| aria-selected | نشون میده یه آیتم (مثل تب یا گزینه) انتخابشدهست | true, false, undefined | برای تبها یا لیستهای انتخابی |
✨ ویژگیها (Properties)
ویژگیها توضیحات یا روابط بین عناصر رو تعریف میکنن و معمولاً ثابت هستن.
| اتریبیوت | توضیح | مقادیر معتبر | کاربرد |
|---|---|---|---|
| aria-activedescendant | مشخص میکنه کدوم زیرعنصر تو یه ویجت ترکیبی (مثل لیست) فعاله | آیدی عنصر | مدیریت فوکوس تو لیستها یا منوها |
| aria-atomic | تعیین میکنه تغییرات یه منطقه داینامیک کامل به صفحهخوان اعلام بشه یا نه | true, false | مناطق داینامیک مثل چت |
| aria-autocomplete | نوع تکمیل خودکار ورودی | inline, list, both, none | فیلدهای جستجو یا کادرهای کشویی |
| aria-braillelabel | برچسب متنی برای نمایشگرهای بریل | متن | نمایشگرهای بریل |
| aria-brailleroledescription | توضیح نقش عنصر برای نمایشگرهای بریل | متن | توضیحات سفارشی در بریل |
| aria-busy | نشون میده یه عنصر در حال بارگذاری یا آپدیته | true, false | محتوای داینامیک در حال لود |
| aria-controls | مشخص میکنه یه عنصر کدوم بخش رو کنترل میکنه | آیدی عنصر | تبها، آکاردئونها، منوها |
| aria-current | نشون میده آیتم تو مجموعه فعاله | page, step, location, date, time, true, false | منوهای ناوبری یا مراحل فرم |
| aria-describedby | به یه عنصر با توضیحات اضافی اشاره میکنه | آیدی عنصر | توضیحات فرم یا خطاها |
| aria-details | به یه عنصر با اطلاعات مفصل اشاره میکنه | آیدی عنصر | تصاویر یا نمودارها |
| aria-dropeffect | نوع افکت درگانددراپ | copy, execute, link, move, none, popup | رابطهای درگانددراپ |
| aria-errormessage | به پیام خطای مرتبط با ورودی اشاره میکنه | آیدی عنصر | اعتبارسنجی فرم |
| aria-flowto | مسیر ناوبری پیشنهادی برای صفحهخوان | آیدی عنصر | هدایت محتوای پیچیده |
| aria-grabbed | نشون میده یه عنصر در درگانددراپ انتخابشدهست | true, false, undefined | رابطهای درگانددراپ |
| aria-haspopup | نشون میده عنصر یه منو/دیالوگ بازشونده داره | true, false, menu, listbox, tree, grid, dialog | منوهای کشویی یا دیالوگها |
| aria-label | برچسب متنی مستقیم برای عنصر | متن | آیکونها یا عناصر بدون متن بصری |
| aria-labelledby | به یه عنصر با برچسب متنی اشاره میکنه | آیدی عنصر | تبها، دکمهها با توضیحات خارجی |
| aria-level | سطح سلسلهمراتب عنصر (مثل تیتر) | عدد | تیترهای سفارشی |
| aria-live | نحوه اعلام تغییرات داینامیک | off, polite, assertive | هشدارها یا چتها |
| aria-modal | نشون میده یه دیالوگ مداله | true, false | پنجرههای محاورهای |
| aria-multiline | مشخص میکنه ورودی متنی چندخطیه | true, false | تکستایریا یا ورودی بزرگ |
| aria-multiselectable | نشون میده لیست چند آیتم قابل انتخاب داره | true, false | لیستهای چندانتخابی |
| aria-orientation | جهت ویجت رو مشخص میکنه | horizontal, vertical, undefined | اسکرولبارها یا اسلایدرها |
| aria-placeholder | متن پیشفرض ورودی | متن | فیلدهای ورودی بدون placeholder |
| aria-posinset | موقعیت آیتم در مجموعه | عدد | لیستها یا منوها |
| aria-readonly | نشون میده ورودی فقط خوندنیه | true, false | فیلدهای غیرقابل ویرایش |
| aria-relevant | نوع تغییرات منطقه داینامیک که باید اعلام بشه | additions, removals, text, all | چتها یا فیدهای خبری |
| aria-roledescription | توضیح سفارشی برای نقش عنصر | متن | توضیحات کاربرپسندتر |
| aria-rowcount | تعداد کل ردیفها در جدول/گرید | عدد | جداول بزرگ |
| aria-rowindex | شماره ردیف عنصر در جدول | عدد | جداول پیمایشی |
| aria-rowspan | تعداد ردیفهای تحت پوشش سلول | عدد | جداول پیچیده |
| aria-setsize | تعداد کل آیتمها در مجموعه | عدد | لیستها یا منوها |
| aria-sort | نحوه مرتبسازی ستون جدول | ascending, descending, none, other | جداول قابل مرتبسازی |
| aria-valuemax | حداکثر مقدار ویجت عددی | عدد | اسلایدرها یا ورودیهای عددی |
| aria-valuemin | حداقل مقدار ویجت عددی | عدد | اسلایدرها |
| aria-valuenow | مقدار فعلی ویجت عددی | عدد | اسلایدرها یا progressbar |
| aria-valuetext | توضیح متنی برای مقدار عددی | متن | توضیحات کاربرپسندتر |
💡 چطور اتریبیوت ARIA به سئو کمک میکنه؟
این اتریبیوتها بهصورت غیرمستقیم روی سئو تاثیر میذارن:
- بهبود UX: توضیحات واضح و تعامل داینامیک باعث میشه کاربرا بیشتر تو صفحه بمونن.
- دسترسیپذیری: گوگل سایتهای در دسترس رو بهعنوان منابع باکیفیت میشناسه.
- ساختار معنایی: اتریبیوتهایی مثل
aria-labelوaria-describedbyبه ایندکس بهتر محتوا کمک میکنن. - جذب مخاطب: سایتهای در دسترس ترافیک بیشتری از کاربرای متنوع جذب میکنن.
📌 هشدار: استفاده نادرست (مثل aria-label غیرضروری یا آیدیهای اشتباه) میتونه باعث خطای دسترسیپذیری بشه.
📝 مثالهای سئو محور: اتریبیوت ARIA تو عمل
1. فرم با اعتبارسنجی و aria-invalid, aria-errormessage
<form>
<label for="email">ایمیل:</label>
<input id="email" type="email" aria-required="true" aria-invalid="true" aria-errormessage="error">
<span id="error">ایمیل نامعتبر</span>
<button type="submit">ارسال</button>
</form>✨ چرا سئو محوره؟
aria-invalidوaria-errormessageخطاها رو به کاربرا و صفحهخوانها واضح میکنن.- فرمهای در دسترس تعامل کاربر رو بالا میبرن.
آکاردئون با aria-expanded, aria-controls
<button aria-expanded="false" aria-controls="content">نمایش محتوا</button>
<div id="content" hidden>محتوای آکاردئون</div>✨ چرا سئو محوره؟
aria-expandedوaria-controlsتعامل داینامیک رو برای صفحهخوانها واضح میکنن.- جاوااسکریپت بهینه سرعت صفحه رو حفظ میکنه.
3. هشدار داینامیک با aria-live, aria-atomic
<div aria-live="assertive" aria-atomic="true">
<p>خطا: لطفاً فرم را کامل کنید.</p>
</div>
<script>
setTimeout(() => {
document.querySelector('[aria-live]').innerHTML = '<p>فرم ارسال شد!</p>';
}, 3000);
</script>✨ چرا سئو محوره؟
aria-liveوaria-atomicتغییرات رو فوراً به صفحهخوانها اعلام میکنن.- هشدارهای واضح تعامل کاربر رو بالا میبره.
❓ پرسشهای متداول (FAQ)
۱. آیا اتریبیوت ARIA روی سئو تاثیر مستقیم داره؟
نه، ولی تجربه کاربری بهتر → تاثیر غیرمستقیم روی سئو.
۲. میشه فقط با اتریبیوت ARIA کار کرد و تگهای استاندارد رو کنار گذاشت؟
خیر. اولویت با HTML معنایی هست. ARIA فقط مکمل هست.
۳. فرق aria-label و aria-labelledby چیه؟
aria-label→ متن توصیفی مستقیمaria-labelledby→ متن توصیفی توسط عنصر دیگه
🎯 پروژه عملی: یک منوی دسترسپذیر با اتریبیوت ARIA بساز
ازت میخوام یه منوی کشویی ساده طراحی کنی که:
- با دکمه باز و بسته بشه.
- از
aria-expandedبرای وضعیت منو استفاده کنه. - از
aria-controlsبرای اتصال دکمه به منو استفاده کنه. - برای هر آیتم منو برچسب (
aria-label) تعریف بشه.
💡 نکته: لازم نیست ظاهر رو پیچیده کنی، تمرکز روی استفاده درست از اتریبیوت ARIA باشه. در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.
🏁 جمعبندی: وبسایتت رو با اتریبیوت ARIA بترکون!
اتریبیوتهای ARIA در HTML یکی از کلیدهای مهم برای ساختن وبسایتهای دسترسپذیر هستن.
- نباید جایگزین تگهای HTML بشه، بلکه باید مکملشون باشه.
- ARIA کمک میکنه عناصر داینامیک برای همه کاربران قابل درک باشن.
- نقش (
role)، وضعیت (state) و ویژگیها (property) رو مشخص میکنه.
💬 ایدههات رو فریاد بزن!
نظرت درباره اتریبیوت ARIA چیه؟ دلت میخواد چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنت مونده؟ تو نظرات برامون بگو! تیم حرفهای پشتیبانی با جون و دل جوابت رو میده!
شهرام نجفی
شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب بهصورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشتهام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG مینویسم و قبل از انتشار در مرورگرهای واقعی تست میکنم. نمونهکارهایم در shahramnajafi.com است.