افزونهها به کاربران این امکان را میدهند که تجربه مرور ایدهآل خود را متناسب با تواناییها و ترجیحات فردی ایجاد کنند. افزونهها باید شامل اجزای دسترسی باشند که با فراهم کردن امکان دسترسی افراد دارای اختلالات بینایی، کم شنوایی، مهارتهای حرکتی محدود و سایر معلولیتها به افزونه، یک پایگاه کاربری فراگیر را تشویق کنند.
نه فقط کاربران دارای نیازهای ویژه، بلکه همه میتوانند از ویژگیهای دسترسی بهرهمند شوند. افراد دارای اختلال بینایی، کم مهارت و کاربران حرفهای، همگی از میانبرهای صفحه کلید بهرهمند میشوند. زیرنویسها و رونوشتها برای کاربران ناشنوا ضروری هستند، اما به زبانآموزان نیز کمک میکنند.
افراد ممکن است به روشهای مختلفی با یک افزونه تعامل داشته باشند. برخی از کاربران مانیتور، صفحه کلید و ماوس استاندارد دارند - یا ممکن است به یک ذرهبین صفحه نمایش و احتمالاً یک صفحهخوان وابسته باشند. اگرچه پیشبینی اینکه افراد از چه ابزارهایی برای دسترسی به یک افزونه استفاده میکنند غیرممکن است، اما مراحلی وجود دارد که هر توسعهدهندهای میتواند برای هرچه بیشتر در دسترس قرار دادن یک افزونه انجام دهد.
کنترلهای رابط کاربری قابل دسترس را ادغام کنید
اگر کاربران نتوانند به کنترلهای رابط کاربری دسترسی داشته باشند، نمیتوانند از افزونهها استفاده کنند. سادهترین راه برای ایجاد یک رابط کاربری قابل دسترس، استفاده از یک کنترل استاندارد HTML است.
کنترلهای استاندارد
هر زمان که ممکن است، از کنترلهای رابط کاربری استاندارد HTML استفاده کنید. کنترلهای استاندارد HTML با کیبورد قابل دسترسی هستند، به راحتی مقیاسپذیرند و عموماً توسط صفحهخوانها قابل درک هستند.
WAI-ARIA در کنترلهای سفارشی
ابتکار دسترسیپذیری وب - برنامههای غنی اینترنتی قابل دسترس ، WAI-ARIA، مشخصاتی برای قابل دسترس کردن کنترلهای رابط کاربری برای خوانندگان صفحه نمایش از طریق مجموعهای استاندارد از ویژگیهای DOM است. این ویژگیها اطلاعاتی در مورد عملکرد و وضعیت فعلی کنترلها در یک صفحه وب به خواننده صفحه نمایش ارائه میدهند.
برای افزودن پشتیبانی WAI-ARIA به کنترلهای سفارشی، عناصر DOM یک افزونه باید اصلاح شوند تا شامل ویژگیهایی باشند که کروم برای ایجاد رویدادها در طول تعامل کاربر استفاده میکند. صفحهخوانها به این رویدادها پاسخ میدهند و عملکرد کنترل را توصیف میکنند. ویژگیهای 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 یک کنترل اضافه شوند، گوگل کروم رویدادهای مناسب را برای صفحهخوان فراخوانی میکند. از آنجایی که پشتیبانی از WAI-ARIA هنوز در حال انجام است، ممکن است گوگل کروم برای هر ویژگی WAI-ARIA رویدادی را فراخوانی نکند و صفحهخوانها ممکن است همه رویدادهای فراخوانی شده را تشخیص ندهند.
برای آموزش سریع اضافه کردن کنترلهای WAI-ARIA به کنترلهای سفارشی، به ارائه دیو راگت از 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>
افزونهها میتوانند میانبرهای صفحهکلید واضحی برای عناصر مهم رابط کاربری افزونه ایجاد کنند. برای پیادهسازی این میانبرها، شنوندههای رویداد صفحهکلید را به کنترلها متصل کنید. با ارائه میانبرهای موجود در صفحه گزینهها ، کاربران را از آنها آگاه کنید.
ارائه محتوای قابل دسترس
ارائه محتوای قابل دسترس برای همه کاربران مهم است. بسیاری از دستورالعملهای زیر ممکن است آشنا به نظر برسند، زیرا منعکس کننده شیوههای خوب برای همه محتوای وب هستند.
متن
انتخاب فونت و اندازه متن بر میزان خوانایی محتوای یک افزونه تأثیر میگذارد. کاربرانی که مشکل بینایی دارند ممکن است نیاز داشته باشند اندازه متن افزونه را افزایش دهند. اگر از میانبرهای صفحه کلید استفاده میکنید، مطمئن شوید که با میانبرهای بزرگنمایی داخلی کروم تداخل ندارند.
به عنوان شاخصی برای انعطافپذیری رابط کاربری یک افزونه، آزمون ۲۰۰٪ را اعمال کنید؛ اگر اندازه متن یا بزرگنمایی صفحه ۲۰۰٪ افزایش یابد، آیا هنوز قابل استفاده است؟
از قرار دادن متن در تصاویر خودداری کنید. کاربران قادر به تغییر اندازه نیستند و صفحهخوانها قادر به تفسیر تصاویر نیستند. در عوض، از فونت وب با استایل خاص، مانند یکی از فونتهای موجود در Google Font API، استفاده کنید. فونتهای وب میتوانند در اندازههای مختلف مقیاسبندی شوند و افرادی که از صفحهخوان استفاده میکنند، میتوانند به آنها دسترسی داشته باشند.
رنگها
باید بین رنگ پسزمینه و رنگ متن در یک افزونه تضاد کافی وجود داشته باشد. از یک ابزار بررسی تضاد برای آزمایش اینکه آیا رنگهای پسزمینه و پیشزمینه تضاد مناسبی را ارائه میدهند یا خیر، استفاده کنید.
هنگام ارزیابی کنتراست، مطمئن شوید که هر بخشی از افزونه که برای انتقال اطلاعات به گرافیک متکی است، به وضوح قابل مشاهده باشد. برای تصاویر خاص، میتوان از ابزارهایی مانند Coblis - Color Blindness Simulator برای مشاهدهی چگونگی ظاهر یک تصویر در اشکال مختلف نقص رنگ استفاده کرد.
برای ایجاد تضاد بهتر، ارائه تمهای رنگی مختلف یا امکان سفارشیسازی طرح رنگ را برای کاربر در نظر بگیرید.
صدا
اگر افزونهای برای انتقال اطلاعات به صدا یا تصویر متکی است، مطمئن شوید که زیرنویس یا متن آن موجود است. برای اطلاعات بیشتر در مورد زیرنویسها، به دستورالعملهای برنامه رسانههای توصیفشده و زیرنویسشده مراجعه کنید.
تصاویر
متن جایگزین (alt text) آموزنده برای تصاویر ارائه دهید.
<img src="img.jpg" alt="The logo for the extension">
از متن جایگزین (alt text) برای بیان هدف تصویر استفاده کنید، نه برای توصیف تحتاللفظی محتوای تصویر. تصاویر فاصلهدار یا تصاویر صرفاً تزئینی باید متن جایگزین خالی "" داشته باشند یا به طور کامل از HTML حذف شده و در CSS قرار گیرند.
اگر افزونه باید از متن در تصویر استفاده کند، متن تصویر را در متن جایگزین قرار دهید. منبع خوبی برای مراجعه، مقاله WebAIM در مورد متن جایگزین مناسب است.
بیشتر بدانید
با مراجعه به کانال A11ycasts و مطالعهی مستندات فنی دسترسیپذیری کرومیوم ، اطلاعات بیشتری در مورد قابلیت دسترسی در کروم کسب کنید.