‏Angular Aria: کامپوننت‌های دسترس‌پذیر بدون دردسر

تو این مستندات اومده که ساختن کامپوننت‌های دسترس‌پذیر (accessible) شاید ساده به نظر برسه، ولی پیاده‌سازی درستش طبق راهنماهای W3C کلی کار و تخصص می‌خواد. Angular Aria دقیقاً برای همینه: یه مجموعه دایرکتیو headless که الگوهای رایج WAI-ARIA رو پیاده می‌کنه.

منظور از headless اینه که این دایرکتیوها هیچ ظاهر و استایلی رو بهت تحمیل نمی‌کنن. کاری که می‌کنن مدیریت تعامل با کیبورد، ست کردن اتریبیوت‌های ARIA، مدیریت فوکوس و پشتیبانی از اسکرین‌ریدره. در عوض، خودت باید ساختار HTML، استایل CSS و منطق تجاری (business logic) کامپوننت رو فراهم کنی.

نصبش هم ساده‌ست و از طریق پکیج @angular/aria با npm یا هر پکیج‌منیجر دیگه‌ای انجام می‌شه.

برای نشون دادن فایده‌ش، مستندات مثال یه toolbar فرمت‌بندی متن رو می‌زنه. به گفتهٔ نویسنده، چیزی که شاید فقط یه ردیف دکمه به نظر بیاد، وقتی پای ناوبری با کیبورد و اسکرین‌ریدر وسط میاد پیچیدگی غیرمنتظره‌ای پیدا می‌کنه. تو کد، کافیه دایرکتیوهای Toolbar، ToolbarWidget و ToolbarWidgetGroup رو ایمپورت کنی و تو تمپلیت روی عنصرها بذاری:

<div ngToolbar aria-label="Text Formatting Tools">
  <div class="group">
    <button ngToolbarWidget value="undo" type="button" aria-label="undo">undo</button>
    <button ngToolbarWidget value="redo" type="button" aria-label="redo">redo</button>
  </div>
</div>

برای حالت‌های پیچیده‌تر هم می‌شه از ngToolbarWidgetGroup با role="radiogroup" استفاده کرد تا مثلاً گزینه‌های چیدمان متن (چپ، وسط، راست) مثل یه گروه رادیویی رفتار کنن. هر ویجت با [aria-pressed] یا [aria-checked] و متد selected() وضعیت انتخاب‌شدنش رو مدیریت می‌کنه. اینجوری همهٔ منطق دسترس‌پذیری زیر کاپوت انجام می‌شه و کد تمپلیت تمیز می‌مونه.

نکات کلیدی:

• Angular Aria مجموعه‌ای از دایرکتیوهای headless و دسترس‌پذیره که الگوهای WAI-ARIA رو پیاده می‌کنه.
• مدیریت کیبورد، اتریبیوت‌های ARIA، فوکوس و پشتیبانی اسکرین‌ریدر رو خودش انجام می‌ده.
• تو فقط ساختار HTML، استایل CSS و منطق کار رو می‌نویسی.
• با پکیج @angular/aria نصب می‌شه.
• مثال toolbar نشون می‌ده چطور پیچیدگی دسترس‌پذیری پشت یه API ساده پنهان می‌شه.