دسترسی‌پذیری (Accessibility)

دسترسی‌پذیری (Accessibility) — مخفف a11y — هنر قابل استفاده کردن وب‌سایت برای بیشترین تعداد کاربر ممکن است.

هر انگیزه‌ای برای بهبود دسترسی‌پذیری داشته باشید، inclusive بودن سایت اخلاقی‌ترین رویکرد است و در بلندمدت به کسب‌وکار شما سود می‌رساند.

طبق WHO حدود ۱۵٪ جمعیت جهان نوعی ناتوانی دارند. زمان شما بهتر است صرف بهبود دسترسی‌پذیری سایت شود تا بهینه‌سازی برای IE (با حدود ۲٪ استفاده جهانی). در برخی کشورها این الزام قانونی است.

Bricks چگونه به دسترسی‌پذیری کمک می‌کند

Bricks ابزارهایی می‌دهد تا معنایی‌ترین HTML ممکن تولید کنید و بدون کدنویسی به الزامات و best practiceهای a11y نزدیک شوید.

محتوا باید برای اکثر بازدیدکنندگان هدف قابل فهم باشد. HTML معتبر با ساختار معنایی مناسب، لینک‌ها و دکمه‌های توصیفی کافی، alt مناسب برای تصاویر و موارد مشابه از جنبه‌های مهم a11y هستند.

نقاط عطف ARIA (ARIA landmarks)

Bricks به‌طور پیش‌فرض سه landmark region می‌سازد: Header، Main و Footer.

المان‌های Bricks تا حد ممکن semantic tag مناسب دارند. مثلاً المان Form از tag form و Nav Menu از nav استفاده می‌کند. برای landmark بیشتر یا tag معنایی دیگر، از Container و HTML tag مورد نیاز استفاده کنید. tag سفارشی هم قابل تعریف است.

Bricks 1.3 ویژگی‌های سفارشی (Custom Attributes) را معرفی کرد تا attribute دیگر به هر المان اضافه کنید.

مثال رایج: attribute role روی container — به Style > Attributes بروید، با «+» attribute جدید اضافه کنید، Name را role و Value را مقدار مناسب بگذارید:

تصاویر

تصاویر در Bricks با متن جایگزین (alt) از media وردپرس رندر می‌شوند. alt جایی است که توصیف تصویر برای کسانی که آن را نمی‌بینند قرار می‌گیرد. در Image element داخل سازنده می‌توانید alt سفارشی هم بدهید.

برای background image در صورت نیاز Bricks خودکار role="img" aria-label="{image alt description}" به div پس‌زمینه اضافه می‌کند. توصیف از alt تعریف‌شده در media وردپرس می‌آید.

لینک‌ها

اگر توضیح لینک خالی یا نامشخص است، aria-label (و title) را در سازنده تنظیم کنید. این attributeها نحوه تفسیر سایت توسط screen reader را بهبود می‌دهند.

از لینک‌هایی مثل «Read more» یا «Click here» بدون context پرهیز کنید. اگر مجبورید استفاده کنید، aria-label برای context بگذارید.

فرم‌ها

Form element امکان افزودن/حذف label فیلد را می‌دهد. label برای a11y مهم است. اگر label نمایش نمی‌دهید، Bricks خودکار aria-label را با label تعریف‌شده در سازنده روی input می‌گذارد.

ناوبری با کیبورد

یکی از الزامات اصلی a11y این است که سایت فقط با کیبورد قابل استفاده باشد. Bricks 1.3 CSS پیش‌فرض برای استایل :focus دارد.

استایل focus خود را در Settings > Theme Styles > Typography > Focus Outline تنظیم کنید. توصیه نمی‌شود، اما برای حذف outline پیش‌فرض مقدار را none بگذارید.

لینک‌های skip navigation

هنگام ناوبری با کیبورد، عبور از همه لینک منو قبل از محتوای اصلی آزاردهنده است. best practice همراه با ARIA landmark، لینک skip در بالای صفحه است.

Bricks 1.3 دو skip link پیش‌فرض دارد: یکی به محتوا و یکی به footer (در صورت وجود). فقط با فشردن TAB ظاهر می‌شوند.

منوها

منوی ناوبری پرکاربردترین المان‌هاست. همه منوهای Bricks داخل tag nav هستند و کاملاً با کیبورد در دسترس‌اند:

• TAB: آیتم بعدی منو
• SHIFT TAB: آیتم قبلی
• ENTER: دنبال کردن لینک (مثل کلیک)
• SPACE: toggle زیرمنو (در صورت وجود)

Bricks ناوبری منو با کیبورد را با رویکرد fly-out menu پیاده می‌کند.

یادداشت

با تکامل الزامات دسترسی‌پذیری، Bricks هم به‌روز می‌شود. اگر بهبود احتمالی دیدید، به ما اطلاع دهید.