‏چرا نباید روی div و span برچسب aria بذاری

نویسنده این پست رو بخشی از مجموعه‌ای به اسم WebAccessibilityFails معرفی می‌کنه که توش خطاهای رایج دسترس‌پذیری رو که تو ممیزی‌ها می‌بینه جمع می‌کنه. حرف اصلی اینه که نباید روی عنصرهای جنریک مثل div و span از aria-label یا aria-labelledby برای برچسب‌گذاری استفاده کنی.

دلیل اول استانداردیه. نویسنده به بخش «نقش‌هایی که نمی‌تونن اسم بگیرن» تو مشخصات ARIA اشاره می‌کنه که نقش generic هم توشه — و generic همون نقش پیش‌فرض div و span هست. پس از نظر تئوری اصلاً مجاز نیست که این عنصرها برچسب بگیرن.

دلیل دوم عملیه. نویسنده می‌گه خودش سه تا عنصر برچسب‌دار رو روی اسکرین‌ریدرهای مختلف تست کرده و نتیجه‌ها کاملاً ناهماهنگ بوده. مثلاً ساختاری مثل این رو امتحان کرده:

<div aria-label="News">Content</div>

طبق گفته‌اش، VoiceOver روی سافاری مک «News, group» می‌خونه، Talkback روی کروم اندروید فقط «News»، و Narrator روی ویندوز «News, group, content»؛ ولی بقیه اسکرین‌ریدرها برچسبی که نویسنده تعریف کرده رو کلاً نادیده می‌گیرن و فقط متن داخل عنصر رو می‌خونن. یعنی روی نتیجه‌ای که به کاربر می‌رسه هیچ تضمینی نداری.

نویسنده اضافه می‌کنه که اگه عنصر خالی باشه نتیجه‌ها باز هم فرق می‌کنه؛ تو خیلی از حالت‌ها مثل VoiceOver روی iOS یا JAWS هیچ چیزی اعلام نمی‌شه.

البته چند تا استثنا هم هست. عنصر section به‌صورت پیش‌فرض نقش generic داره، ولی همین که روش aria-label یا aria-labelledby بذاری نقشش به region تغییر می‌کنه و تبدیل به یه لندمارک می‌شه؛ پس برچسب‌گذاری section اشکالی نداره. همینطور اگه صفت popover رو روی یه div بذاری نقشش به group تغییر می‌کنه، که اون هم دیگه عنصر جنریک حساب نمی‌شه.

نکات کلیدی:

• روی div و span با نقش generic از aria-label و aria-labelledby استفاده نکن.
• استاندارد ARIA نقش generic رو جزو نقش‌هایی می‌دونه که نباید اسم بگیرن.
• رفتار اسکرین‌ریدرها با این برچسب‌ها ناهماهنگه؛ اکثرشون نادیده‌ش می‌گیرن.
• روی عنصر خالی نتیجه باز هم متفاوت و غیرقابل‌اتکاست.
• استثناها: section برچسب‌دار به region و div با popover به group تبدیل می‌شه.