کجا باید aria-expanded بذاریم؟
فرانتاندClaude Opus 5خلاصهٔ کاملتر
استیو فرنزل تو این مقاله سراغ سؤالی میره که موقع ممیزی دسترسیپذیری مدام باهاش روبهرو میشه: این المانی که aria-expanded داره، اصلاً باید داشته باشه؟ حرف اصلیش اینه که معنی یه دکمهٔ بازشونده برای فناوری کمکی کاملاً به زمینهش بستگی داره، و همون زمینه تعیین میکنه چه ویژگیهای ARIA لازمه یا اضافهست.
به گفتهٔ نویسنده ویجتهای جمعشونده دو دستهان: بخشهای جمعشونده و المانهای تعاملی جمعشونده. دستهٔ اول شامل ویجت افشا و آکاردئونه، و دستهٔ دوم شامل منو، ناوبری، نمای درختی و کمبوباکس. ضمناً الگوهایی هم هستن که محتوا رو نشون میدن و پنهان میکنن ولی aria-expanded نمیخوان.
سادهترین نمونه ویجت افشاست: یه دکمه که حالتش رو با aria-expanded اعلام میکنه و با aria-controls به محتوا وصل میشه.
<button aria-controls="content" aria-expanded="false" type="button">
Show more
</button>
<div id="content">
<p>I am hidden no more!</p>
</div>نکتهٔ عملی اینه که اگه کار همینه و بیشتر از این نیست، بهتره اصلاً سراغ ARIA نری: المانهای بومی details و summary توی همهٔ مرورگرهای اصلی کار میکنن و فناوری کمکی هم میشناستشون. aria-controls هم اینجا فقط یه پشتیبان اختیاریه.
آکاردئون پیچیدهتره چون چند ویجت افشا رو کنار هم میذاره و بازم به aria-expanded نیاز داره. نویسنده به «آکاردئون انحصاری» — همونی که فقط یکی همزمان باز میمونه — گیر میده و به نوشتههای اریک اگرت و استیون هوبر ارجاع میده که چرا این الگو به ضرر کاربره.
توی ناوبری، مثالِ اصلاحشدهٔ W3C نشون میده ارتقای تدریجی یعنی چی: چون HTML معنایی استفاده شده و هیچ آیتمی پنهان نشده، اگه CSS و جاوااسکریپت لود نشن بازم ناوبری کار میکنه؛ aria-expanded فقط میگه زیرمنو الان جمعشدهست، و برای رابطهٔ بین ul و li هیچ ARIA اضافهای لازم نیست.
مهمترین تمایزی که تأکید میکنه مربوط به دکمهٔ همبرگریه: باید بدونی این دکمه قراره نوار ناوبری رو باز کنه یا یه منو. برای نوار ناوبری همون aria-expanded کافیه، ولی برای منو باید aria-haspopup هم بذاری. بسته به دامنهٔ منو ممکنه aria-labelledby، aria-activedescendant و aria-checked هم لازم بشن؛ aria-controls رو هم چون پشتیبانی مرورگرها ضعیفه بیشتر یه امکان خوبداشتنی میدونه.
برای نمای درختی و tree grid هم aria-expanded روی المان تعاملی الزامیه، در کنار aria-level و aria-posinset و aria-setsize و نقش treeitem. نویسنده یادآوری میکنه این ساختار بدون مقدار زیادی CSS و جاوااسکریپت هیچ اطلاعاتی رو، نه بصری و نه به فناوری کمکی، منتقل نمیکنه.
نکات کلیدی:
- معنی aria-expanded به زمینهش وابستهست؛ اول الگو رو تشخیص بده بعد ویژگی بذار
- برای یه افشای ساده، details و summary بومی به ARIA دستی ترجیح دارن
- آکاردئون انحصاری از نظر تجربهٔ کاربری الگوی خوبی نیست
- دکمهٔ همبرگر: برای نوار ناوبری aria-expanded کافیه، برای منو aria-haspopup هم لازمه
- توی ناوبری معنایی، ul و li خودشون رابطه رو منتقل میکنن و ARIA اضافه لازم نیست
- نمای درختی به aria-level و aria-posinset و aria-setsize هم نیاز داره
