یک کامپوننت خوب در Vue تنها زیبا و قابل استفادهٔ مجدد نیست؛ باید برای همهٔ کاربران، از جمله کسانی که با صفحهخوان یا فقط با صفحهکلید کار میکنند، قابل استفاده باشد. دسترسیپذیری یا a11y نه یک افزودنی تزئینی، بلکه بخشی از تعریف «کامپوننت کامل» در طراحی وبسایت حرفهای است.
پایهایترین اصل، استفاده از عنصر HTML درست برای کار درست است. یک دکمه باید عنصر button باشد، نه یک div با رویداد کلیک. عناصر معنایی بهصورت پیشفرض رفتار صحیح صفحهکلید و نقش درست برای صفحهخوان را دارند. تنها وقتی عنصر بومی مناسبی وجود ندارد، سراغ ویژگیهای ARIA میرویم تا نقش و وضعیت را بهصراحت اعلام کنیم.
مدیریت فوکوس در کامپوننتهای تعاملی مثل مودال و منوی کشویی اهمیت ویژه دارد. هنگام باز شدن مودال، فوکوس باید به درون آن منتقل و در آن محبوس شود تا کاربر صفحهکلید سرگردان نشود، و با بسته شدن، به عنصری که مودال را باز کرد بازگردد. کلید Escape هم باید همیشه راه خروج باشد.
طراحی واکنشگرا را با همین ذهنیت پیش میبریم. بهجای نقاط شکست خشک، از واحدهای نسبی و چیدمانهای منعطف مثل Grid و Flexbox استفاده میکنیم تا کامپوننت در هر اندازهٔ صفحه طبیعی بماند. آزمودن واقعی با کیبورد و یک صفحهخوان، تنها راه اطمینان از این است که کامپوننت در عمل برای همه کار میکند.