برنامه‌های افزودنی به کاربران این امکان را می‌دهد تا تجربه مروری ایده‌آل خود را، متناسب با توانایی‌ها و ترجیحات یک فرد ایجاد کنند. برنامه‌های افزودنی باید شامل اجزای دسترسی باشد که با امکان دسترسی افراد دارای اختلالات بینایی، کم شنوایی، مهارت محدود و سایر ناتوانی‌ها، یک پایگاه کاربر فراگیر را تشویق می‌کند.
همه، نه فقط کاربران با نیازهای خاص، می توانند از ویژگی های دسترسی بهره مند شوند. کاربرانی که دارای ضعف بینایی، مهارت کم و توانمند هستند، همگی از میانبرهای صفحه کلید بهره می برند. زیرنویس‌ها و رونوشت‌ها برای کاربران ناشنوا ضروری هستند، اما به زبان‌آموزان نیز کمک می‌کنند.
افراد ممکن است به طرق مختلف با یک برنامه افزودنی تعامل داشته باشند. برخی از کاربران یک مانیتور، صفحه کلید و ماوس استاندارد دارند - یا ممکن است به یک ذره بین صفحه و احتمالاً یک صفحه خوان وابسته باشند. در حالی که نمی‌توان پیش‌بینی کرد که افراد از چه ابزارهایی برای دسترسی به یک برنامه افزودنی استفاده می‌کنند، مراحلی وجود دارد که هر توسعه‌دهنده‌ای می‌تواند برای دسترسی به یک برنامه افزودنی تا حد امکان انجام دهد.
کنترل های UI قابل دسترسی را یکپارچه کنید
اگر کاربران نتوانند به کنترل های رابط کاربری دسترسی داشته باشند، نمی توانند از افزونه استفاده کنند. ساده ترین راه برای ایجاد یک رابط کاربری در دسترس، استفاده از یک کنترل استاندارد HTML است.
کنترل های استاندارد
در صورت امکان، از کنترل‌های استاندارد HTML UI استفاده کنید. کنترل‌های استاندارد HTML قابل دسترسی با صفحه‌کلید هستند، به راحتی مقیاس‌بندی می‌شوند و عموماً توسط صفحه‌خوان‌ها قابل درک هستند.
WAI-ARIA در کنترل های سفارشی
ابتکار دسترس‌پذیری وب - برنامه‌های کاربردی غنی اینترنت قابل دسترسی ، WAI-ARIA، مشخصاتی برای دسترسی به کنترل‌های UI برای صفحه‌خوان‌ها از طریق مجموعه استانداردی از ویژگی‌های DOM است. این ویژگی ها اطلاعاتی را در مورد عملکرد و وضعیت فعلی کنترل ها در یک صفحه وب به خواننده صفحه نمایش می دهد.
برای افزودن پشتیبانی WAI-ARIA به کنترل‌های سفارشی، عناصر DOM یک برنامه افزودنی باید اصلاح شوند تا ویژگی‌هایی را که Chrome برای بالا بردن رویدادها در طول تعامل با کاربر استفاده می‌کند، شامل شود. صفحه خوان ها به این رویدادها پاسخ می دهند و عملکرد کنترل را توصیف می کنند. ویژگی های DOM مشخص شده توسط WAI-ARIA به نقش ها ، حالت ها و ویژگی ها طبقه بندی می شوند.
<div role="toolbar">
ویژگی aria-activedescendant مشخص می کند که کدام فرزند نوار ابزار زمانی که نوار ابزار فوکوس را دریافت می کند، فوکوس را دریافت می کند. کد tabindex="0" مشخص می کند که نوار ابزار فوکوس را به ترتیب سند دریافت می کند.
مشخصات کامل یک نمونه نوار ابزار زیر را در نظر بگیرید:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
هنگامی که نقش‌ها، وضعیت‌ها و ویژگی‌های WAI-ARIA به DOM یک کنترل اضافه می‌شوند، Google Chrome رویدادهای مناسب را در صفحه‌خوان نمایش می‌دهد. از آنجایی که پشتیبانی از WAI-ARIA هنوز در حال انجام است، ممکن است Google Chrome رویدادی را برای هر ویژگی WAI-ARIA ایجاد نکند و صفحه‌خوان‌ها ممکن است همه رویدادهای مطرح شده را تشخیص ندهند.
برای آموزش سریع اضافه کردن کنترل‌های WAI-ARIA به کنترل‌های سفارشی، به ارائه Dave Raggett از WWW2010 مراجعه کنید.
بر روی کنترل های سفارشی تمرکز کنید
فوکوس صفحه کلید برای کاربرانی که بدون ماوس در وب حرکت می کنند ضروری است. مطمئن شوید که کنترل‌های عملیات و پیمایش، مانند دکمه‌ها، کادرهای فهرست و نوارهای منو می‌توانند فوکوس صفحه‌کلید را دریافت کنند.
به طور پیش‌فرض، تنها عناصر موجود در HTML DOM که می‌توانند فوکوس صفحه‌کلید را دریافت کنند، لنگرها، دکمه‌ها و کنترل‌های فرم هستند. با این حال، تنظیم ویژگی HTML tabIndex روی 0 ، عناصر DOM را در توالی برگه پیش‌فرض قرار می‌دهد و آنها را قادر می‌سازد فوکوس صفحه کلید را دریافت کنند.
element.tabIndex = 0
element.focus();
تنظیم tabIndex = -1 عنصر را از دنباله برگه ها حذف می کند اما همچنان به عنصر اجازه می دهد تا فوکوس صفحه کلید را به صورت برنامه ای دریافت کند.
پشتیبانی از دسترسی به صفحه کلید
برنامه‌های افزودنی باید فقط با یک صفحه کلید قابل استفاده باشند و به کاربرانی که نمی‌توانند از ماوس استفاده کنند و کاربران قدرتمندی که نمی‌توانند از ماوس استفاده کنند، اجازه دسترسی به آنها را می‌دهد.
جهت یابی
بررسی کنید که کاربر می تواند بدون استفاده از ماوس بین قسمت های مختلف یک برنامه افزودنی حرکت کند. بررسی کنید که استفاده از پنجره بازشو با صفحه کلید قابل پیمایش باشد. از میانبرهای صفحه کلید Chrome برای تعیین اینکه آیا یک برنامه افزودنی قابل پیمایش است یا خیر استفاده کنید.
مطمئن شوید که به راحتی می توانید ببینید کدام بخش از رابط فوکوس صفحه کلید دارد. معمولاً طرح فوکوس در اطراف رابط حرکت می کند، با این حال، اگر CSS بیش از حد استفاده شود، ممکن است طرح کلی سرکوب شود یا کنتراست کاهش یابد.
میانبرها
در حالی که رایج ترین استراتژی ناوبری صفحه کلید شامل استفاده از کلید Tab برای چرخش فوکوس از طریق رابط برنامه افزودنی است، اما همیشه ساده ترین یا کارآمدترین گزینه نیست.
یک کنترل کننده صفحه کلید جاوا اسکریپت ساده می تواند شبیه زیر باشد. توجه داشته باشید که چگونه ویژگی WAI-ARIA aria-activedescendant در پاسخ به ورودی کاربر به روز می شود تا دکمه نوار ابزار فعال فعلی را منعکس کند.
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
برنامه‌های افزودنی می‌توانند میانبرهای صریح صفحه‌کلید برای عناصر مهم رابط کاربری افزونه ایجاد کنند. برای پیاده سازی این میانبرها، شنوندگان رویدادهای صفحه کلید را به کنترل ها متصل کنید. کاربران را از میانبرهای موجود با ارائه آنها در صفحه گزینه ها آگاه کنید.
محتوای قابل دسترس ارائه کنید
ارائه محتوای قابل دسترس برای همه کاربران مهم است. بسیاری از دستورالعمل های زیر ممکن است آشنا به نظر برسند، زیرا آنها منعکس کننده شیوه های خوب برای تمام محتوای وب هستند.
متن
انتخاب فونت و اندازه متن بر میزان خوانایی محتوای یک برنامه افزودنی تأثیر می گذارد. کاربرانی که مشکل بینایی دارند ممکن است نیاز به افزایش اندازه متن پسوند داشته باشند. اگر از میانبرهای صفحه کلید استفاده می کنید، مطمئن شوید که با میانبرهای بزرگنمایی تعبیه شده در Chrome تداخلی ندارند.
به‌عنوان شاخص انعطاف‌پذیری رابط کاربری افزونه، آزمایش 200% را اعمال کنید. اگر اندازه متن یا بزرگنمایی صفحه 200% افزایش یابد، آیا همچنان قابل استفاده است؟
از پختن متن در تصاویر خودداری کنید. کاربران قادر به تغییر اندازه نیستند و صفحه خوان ها قادر به تفسیر تصاویر نیستند. در عوض، فونت وب استایل‌دار را انتخاب کنید، مانند یکی از فونت‌های موجود در Google Font API . فونت های وب می توانند در اندازه های مختلف مقیاس شوند و افرادی که از صفحه خوان ها استفاده می کنند می توانند به آنها دسترسی داشته باشند.
رنگ ها
باید کنتراست کافی بین رنگ پس زمینه و رنگ متن در یک پسوند وجود داشته باشد. از یک ابزار بررسی کنتراست برای بررسی اینکه آیا رنگ های پس زمینه و پیش زمینه کنتراست مناسبی ارائه می دهند یا خیر، استفاده کنید.
هنگام ارزیابی کنتراست، بررسی کنید که هر بخشی از برنامه افزودنی که برای انتقال اطلاعات به گرافیک متکی است به وضوح قابل مشاهده است. برای تصاویر خاص، از ابزارهایی مانند Coblis—Color Blindness Simulator می توان استفاده کرد تا ببیند یک تصویر در اشکال مختلف کمبود رنگ چگونه به نظر می رسد.
پیشنهاد تم های رنگی مختلف را در نظر بگیرید یا به کاربر امکان سفارشی کردن طرح رنگ را برای ایجاد کنتراست بهتر در نظر بگیرید.
صدا
اگر برنامه افزودنی برای انتقال اطلاعات به صدا یا ویدیو متکی است، اطمینان حاصل کنید که زیرنویس یا رونوشت در دسترس است. برای اطلاعات بیشتر در مورد شرح‌ها، دستورالعمل‌های برنامه رسانه توصیف‌شده و زیرنویس را ببینید.
تصاویر
متن جایگزین آموزنده برای تصاویر ارائه دهید.
<img src="img.jpg" alt="The logo for the extension">
از متن جایگزین برای بیان هدف تصویر به جای توصیف تحت اللفظی محتوای یک تصویر استفاده کنید. تصاویر Spacer یا تصاویر صرفاً تزئینی باید یک متن جایگزین "" خالی داشته باشند یا به طور کامل از HTML حذف شده و در CSS قرار گیرند.
اگر برنامه افزودنی باید از متن در تصویر استفاده کند، متن تصویر را در متن جایگزین قرار دهید. یک منبع خوب برای مراجعه به مقاله WebAIM در مورد متن جایگزین مناسب است.
بیشتر بدانید
با بررسی کانال A11ycasts و مطالعه از طریق مستندات فنی دسترسی Chromium، درباره دسترس‌پذیری در Chrome بیشتر بیاموزید.