چگونه قابلیت دسترسی را در فرآیند تیم خود بگنجانید.
دسترسی بیشتر به سایت شما می تواند یک کار دلهره آور باشد. اگر برای اولین بار است که به دسترسی نزدیک می شوید، گستردگی موضوع می تواند شما را به این فکر کند که از کجا شروع کنید. از این گذشته، کار برای تطبیق طیف متنوعی از توانایی‌ها به این معنی است که طیف متنوعی از مسائل وجود دارد که باید در نظر گرفته شوند.
به یاد داشته باشید، دسترسی یک تلاش گروهی است. هر فردی نقشی دارد. این مقاله معیارهایی را برای هر یک از رشته‌های اصلی (مدیر پروژه، طراح UX و توسعه‌دهنده) ترسیم می‌کند تا بتوانند بهترین شیوه‌های دسترسی را در فرآیند خود بگنجانند.
مدیر پروژه
یک هدف اساسی برای هر مدیر پروژه، تلاش برای گنجاندن کار دسترسی در هر نقطه عطفی است. اطمینان حاصل کنید که به همان اندازه موضوعات دیگری مانند عملکرد و تجربه کاربر در اولویت است. در زیر چند مورد چک لیستی وجود دارد که باید هنگام انجام فرآیند خود به خاطر داشته باشید.
- آموزش دسترسی را در اختیار تیم قرار دهید.
- سفرهای حیاتی کاربر را در سایت یا برنامه شناسایی کنید.
- سعی کنید چک لیست دسترسی را در فرآیند تیم بگنجانید.
- در صورت امکان، سایت یا برنامه را با مطالعات کاربر ارزیابی کنید.
آموزش دسترسی
تعدادی منبع رایگان عالی برای یادگیری در مورد دسترسی به وب وجود دارد. اختصاص دادن زمانی برای تیم شما برای مطالعه موضوع می‌تواند گنجاندن قابلیت دسترسی در مراحل اولیه را آسان‌تر کند.
برخی از منابع ارائه شده توسط گوگل عبارتند از:
دسترسی به وب توسط Google — یک دوره آموزشی چند هفته ای تعاملی.
اصول دسترسی - راهنماهای دسترسی نوشتاری و بهترین شیوه ها.
دستورالعمل‌های مواد: دسترسی - مجموعه‌ای از بهترین شیوه‌های UX برای طراحی فراگیر.
شناسایی سفرهای حیاتی کاربر
هر برنامه دارای برخی اقدامات اولیه است که کاربر باید انجام دهد. به عنوان مثال، اگر در حال ساخت یک برنامه تجارت الکترونیک هستید، هر کاربر باید بتواند یک کالا را به سبد خرید خود اضافه کند.
برخی از اقدامات ممکن است اهمیت ثانویه داشته باشند و شاید فقط گاهی انجام شوند. به عنوان مثال، تغییر عکس آواتار یک ویژگی خوب است، اما ممکن است برای هر تجربه حیاتی نباشد.
شناسایی اقدامات اولیه و ثانویه در برنامه به شما کمک می کند تا کار دسترسی پیش رو را اولویت بندی کنید. بعداً، می توانید این اقدامات را با یک چک لیست دسترسی ترکیب کنید تا پیشرفت خود را پیگیری کنید و از پسرفت جلوگیری کنید.
ترکیب چک لیست دسترسی
موضوع دسترسی بسیار گسترده است، بنابراین داشتن یک چک لیست از زمینه های مهم می تواند به شما کمک کند مطمئن شوید که همه پایه های خود را پوشش می دهید.
تعدادی چک لیست دسترسی وجود دارد که چند نمونه صنعتی عبارتند از:
WebAIM WCAG چک لیست دستورالعمل های دسترسی Vox
با در دست داشتن یک چک لیست، می توانید اقدامات اولیه و ثانویه خود را بررسی کنید تا کارهایی را که هنوز باید انجام شود شروع کنید. شما می‌توانید در مورد این فرآیند کاملاً تاکتیکی کنید و حتی یک ماتریس از اقدامات اولیه و ثانویه بسازید و برای هر مرحله از آن فرآیندها تعیین کنید که آیا بیت‌های دسترسی گم شده است یا خیر.
ارزیابی با مطالعات کاربر
هیچ چیز بهتر از نشستن با کاربران واقعی و مشاهده آنها در تلاش برای استفاده از برنامه شما نیست. اگر دسترسی را در یک تجربه موجود تقویت می کنید، این فرآیند می تواند به شما کمک کند تا به سرعت مناطقی را که نیاز به بهبود دارند شناسایی کنید. و اگر در حال شروع یک پروژه جدید هستید، مطالعات اولیه کاربر می تواند به شما کمک کند تا از صرف زمان زیاد برای توسعه یک ویژگی که استفاده از آن دشوار است جلوگیری کنید.
سعی کنید تا حد امکان بازخوردهای مختلف از یک جمعیت کاربر را در خود جای دهید. کاربرانی را در نظر بگیرید که عمدتاً با صفحه‌کلید پیمایش می‌کنند یا به فناوری کمکی مانند صفحه‌خوان‌ها یا ذره‌بین‌های صفحه متکی هستند.
طراح UX
از آنجایی که مردم تمایل دارند با استفاده از تعصبات خود طراحی کنند، اگر شما معلولیت ندارید و همکارانی با معلولیت ندارید، ممکن است ناخواسته فقط برای برخی از کاربران خود طراحی کنید. در حین کار، از خود بپرسید "همه انواع کاربرانی که ممکن است بر این طراحی تکیه کنند کدامند؟" در اینجا چند تکنیک وجود دارد که می توانید سعی کنید فرآیند خود را فراگیرتر کنید.
- محتوا کنتراست رنگی کافی دارد.
- ترتیب برگه ها تعریف شده است.
- کنترل ها دارای برچسب های قابل دسترسی هستند.
- راه های مختلفی برای تعامل با UI وجود دارد.
محتوا کنتراست رنگ خوبی دارد
هدف اصلی اکثر سایت ها انتقال برخی اطلاعات به کاربر، چه از طریق متن نوشته شده و چه از طریق تصاویر است. با این حال، اگر این محتوا کنتراست پایینی داشته باشد، ممکن است خواندن آن برای برخی از کاربران (به ویژه آنهایی که اختلال بینایی دارند) دشوار باشد. این ممکن است بر تجربه کاربری آنها تأثیر منفی بگذارد. برای رفع این نگرانی، تمام متن ها و تصاویر دارای کنتراست رنگی کافی باشند.
کنتراست با مقایسه درخشندگی رنگ پیش زمینه و پس زمینه اندازه گیری می شود. برای متن کوچکتر (هر چیزی زیر 18pt یا 14pt پررنگ) حداقل نسبت 4.5:1 توصیه می شود. برای متن بزرگتر، این نسبت را می توان روی 3:1 تنظیم کرد.
در تصویر زیر، متن سمت چپ دارای حداقل کنتراست است، در حالی که متن سمت راست کنتراست پایینی دارد.
تعدادی ابزار برای اندازه گیری کنتراست رنگ وجود دارد، مانند ابزار رنگی مواد گوگل، برنامه نسبت کنتراست Lea Verou و تبر Deque.
ترتیب برگه ها تعریف شده است
ترتیب برگه ترتیبی است که در آن عناصر با فشار دادن کلید تب توسط کاربر فوکوس دریافت می کنند. برای کاربرانی که عمدتاً با صفحه‌کلید پیمایش می‌کنند، کلید تب ابزار اصلی آنها برای دسترسی به همه چیز روی صفحه است. به آن مانند نشانگر ماوس آنها فکر کنید.
در حالت ایده‌آل، ترتیب برگه‌ها باید از ترتیب خواندن پیروی کند و از بالای صفحه به پایین جریان یابد و موارد مهم‌تر در بالاترین ترتیب ظاهر شوند. این باعث می شود هر کسی که از صفحه کلید استفاده می کند به سرعت به این موارد دسترسی پیدا کند.
رابط ساختگی بالا برای نشان دادن ترتیب برگه ها شماره گذاری شده است. ایجاد یک مدل شبیه به این می تواند با شناسایی ترتیب برگه های مورد نظر کمک کند. سپس می توان آن را با توسعه دهندگان و آزمایش کنندگان QA به اشتراک گذاشت تا مطمئن شوند که به درستی اجرا و آزمایش شده است.
کنترل ها دارای برچسب های قابل دسترسی هستند
برای کاربران فناوری کمکی مانند صفحه‌خوان‌ها، برچسب‌ها اطلاعاتی را ارائه می‌کنند که در غیر این صورت فقط بصری هستند. به عنوان مثال، یک دکمه جستجو که فقط یک نماد ذره بین است، می تواند برچسب قابل دسترس "جستجو" را داشته باشد تا به پر کردن امکان بصری از دست رفته کمک کند.
در اینجا چند پیشنهاد ساده وجود دارد که باید هنگام طراحی برچسب های در دسترس رعایت کنید:
- مختصر باشید - گوش دادن به توضیحات طولانی می تواند خسته کننده باشد.
- سعی کنید نوع یا وضعیت کنترل را درج نکنید - اگر کنترل به درستی کدگذاری شده باشد، یک صفحه خوان به طور خودکار این موضوع را اعلام می کند.
- روی افعال کنشی تمرکز کنید - از "جستجو" استفاده کنید نه از "ذره بین".
ممکن است در نظر داشته باشید که یک ماک با برچسب تمام کنترل های خود ایجاد کنید. این را می توان با تیم توسعه و تیم QA برای اجرا و آزمایش به اشتراک گذاشت.
راه های متعدد برای تعامل و درک UI
به راحتی می توان فرض کرد که همه کاربران با صفحه عمدتاً با استفاده از ماوس تعامل دارند. هنگام طراحی، در نظر بگیرید که چگونه شخصی با استفاده از صفحه کلید با یک کنترل تعامل می کند.
حالت های تمرکز خود را برنامه ریزی کنید! این به این معنی است که وقتی کاربر کنترل را با tab فوکوس می‌کند یا کلیدهای جهت‌نما را فشار می‌دهد، تعیین کنید که چگونه به نظر می‌رسد. برنامه ریزی زودهنگام این حالت ها به جای تلاش برای جا انداختن آنها در طراحی مفید است.
در نهایت، برای هر نقطه تعامل، می‌خواهید مطمئن شوید که کاربر راه‌های متعددی برای درک محتوا دارد. سعی کنید از رنگ به تنهایی برای انتقال اطلاعات استفاده نکنید، زیرا این نشانه های ظریف ممکن است توسط کاربر با کمبود دید رنگ نادیده گرفته شود. یک مثال کلاسیک یک فیلد متنی نامعتبر است. به جای فقط یک زیر خط قرمز برای نشان دادن یک مشکل، اضافه کردن متن کمکی را نیز در نظر بگیرید. به این ترتیب پایه های بیشتری را پوشش می دهید و احتمال اینکه کاربر متوجه این مشکل شود افزایش می یابد.
توسعه دهنده
نقش توسعه‌دهنده جایی است که مدیریت تمرکز و معناشناسی ترکیب می‌شوند تا یک تجربه کاربری قوی را شکل دهند. در زیر چند مورد وجود دارد که توسعه دهندگان می توانند در حین کار بر روی سایت یا برنامه خود در نظر داشته باشند:
- ترتیب برگه ها منطقی است.
- تمرکز به درستی مدیریت شده و قابل مشاهده است.
- عناصر تعاملی از صفحه کلید پشتیبانی می کنند.
- نقش ها و ویژگی های ARIA در صورت نیاز اعمال می شوند.
- عناصر به درستی برچسب گذاری شده اند.
- تست خودکار است.
ترتیب زبانه منطقی
عناصر بومی مانند input ، button و select به صورت رایگان در ترتیب برگه شرکت می کنند و به طور خودکار با صفحه کلید قابل فوکوس هستند. اما همه عناصر این رفتار یکسان را دریافت نمی کنند! به طور خاص، عناصر عمومی مانند div و span در ترتیب برگه ها انتخاب نمی شوند. این بدان معناست که اگر از یک div برای ایجاد یک کنترل تعاملی استفاده می‌کنید، باید کارهای بیشتری انجام دهید تا صفحه کلید قابل دسترسی باشد.
دو گزینه عبارتند از:
- به کنترل یک
tabindex="0"بدهید. این حداقل آن را قابل تمرکز می کند، اگرچه احتمالاً باید کارهای بیشتری برای اضافه کردن پشتیبانی از فشار کلید انجام دهید. - در صورت امکان، استفاده از یک
buttonبه جایdivیاspanبرای کنترل دکمه مانند در نظر بگیرید. استایل کردن عنصرbuttonبومی بسیار آسان است و به صورت رایگان از صفحه کلید پشتیبانی می کند.
مدیریت تمرکز
هنگامی که محتوای صفحه را تغییر می دهید، مهم است که توجه کاربر را با حرکت دادن فوکوس هدایت کنید. یک مثال کلاسیک از زمانی که این تکنیک مفید است، هنگام باز کردن یک گفتگوی مدال است. اگر کاربری که به صفحه‌کلید متکی است، دکمه‌ای را برای باز کردن یک دیالوگ فشار می‌دهد و تمرکز او به عنصر گفتگو منتقل نمی‌شود ، در این صورت تنها اقدام او این است که کل سایت را برگه بزند تا در نهایت کنترل جدید را پیدا کند. با انتقال تمرکز به محتوای جدید به محض ظاهر شدن، می توانید کارایی تجربیات این کاربران را بهبود ببخشید.
پشتیبانی از صفحه کلید برای عناصر تعاملی
اگر در حال ساختن یک کنترل سفارشی مانند چرخ فلک یا کرکره هستید، باید کارهای بیشتری برای اضافه کردن پشتیبانی از صفحه کلید انجام دهید. راهنمای شیوه‌های نویسندگی ARIA منبع مفیدی است که الگوهای مختلف رابط کاربری و انواع عملکردهای صفحه‌کلید را که انتظار می‌رود پشتیبانی کنند، شناسایی می‌کند.
برای کسب اطلاعات بیشتر در مورد افزودن پشتیبانی صفحه کلید به یک عنصر، نگاهی به بخش فهرست برگه های چرخشی در اسناد اصول دسترسی Google بیاندازید.
نقش ها و ویژگی های ARIA در صورت نیاز اعمال می شوند
کنترل های سفارشی نه تنها به پشتیبانی مناسب از صفحه کلید نیاز دارند، بلکه به معنایی مناسب نیز نیاز دارند. پس از همه، یک div ، از نظر معنایی، فقط یک ظرف گروه بندی عمومی است. اگر از یک div به عنوان مبنای منوی کشویی خود استفاده می‌کنید، باید به ARIA برای لایه‌بندی معنایی اضافی تکیه کنید تا بتوان نوع کنترل را به فناوری کمکی منتقل کرد. در اینجا مجدداً راهنمای شیوه‌های نویسندگی ARIA می‌تواند با شناسایی نقش‌ها، وضعیت‌ها و ویژگی‌هایی که باید از آنها استفاده کنید کمک کند. به عنوان یک امتیاز اضافی، بسیاری از توضیحات در راهنمای ARIA نیز با نمونه کد ارائه می شود!
عناصر برچسب گذاری
برای برچسب زدن ورودی های بومی، می توانید از عنصر داخلی <label> همانطور که در MDN توضیح داده شده است استفاده کنید. این نه تنها به شما کمک می کند تا یک قیمت بصری روی صفحه ایجاد کنید، بلکه به ورودی یک نام قابل دسترسی در درخت دسترسی نیز می دهد. این نام سپس توسط فناوری کمکی (مانند صفحه خوان) انتخاب شده و به کاربر اعلام می شود.
متأسفانه <label> از دادن یک نام قابل دسترسی به کنترل های سفارشی (مانند مواردی که با استفاده از عناصر سفارشی یا خارج از div ها و دهانه های ساده ایجاد شده اند) پشتیبانی نمی کند . برای این نوع کنترل ها باید از ویژگی های aria-label و aria-labelledby استفاده کنید.
تست خودکار
تنبلی می تواند خوب باشد، به خصوص وقتی نوبت به آزمایش می رسد. تا جایی که ممکن است به دنبال خودکارسازی تست های دسترسی خود باشید تا مجبور نباشید همه کارها را به صورت دستی انجام دهید. امروزه تعدادی ابزار تست صنعتی عالی وجود دارد تا بررسی مشکلات دسترسی رایج را آسان و سریع کند:
aXe که توسط سیستم‌های Deque ایجاد شده است، به عنوان یک افزونه کروم و یک ماژول Node (مناسب برای محیط‌های یکپارچه‌سازی مداوم) در دسترس است. این کوتاه A11ycast چند روش مختلف برای گنجاندن ax در فرآیند توسعه شما را توضیح می دهد.
Lighthouse پروژه منبع باز گوگل برای بررسی عملکرد برنامه های وب پیشرو شما است. لایت‌هاوس علاوه بر بررسی اینکه آیا PWA شما از مواردی مانند Service Worker و Web App Manifest پشتیبانی می‌کند، مجموعه‌ای از بهترین آزمایش‌ها را نیز اجرا می‌کند، از جمله آزمایش‌هایی برای مشکلات دسترسی.
نتیجه
دسترسی یک تلاش تیمی است. هرکسی نقشی دارد. این راهنما چند مورد کلیدی را ارائه کرده است که هر یک از اعضای تیم می توانند از آنها برای افزایش سریع موضوع استفاده کنند و امیدواریم تجربه کلی برنامه خود را بهبود بخشند.
برای کسب اطلاعات بیشتر در مورد دسترس‌پذیری، حتماً دوره رایگان Udacity ما را بررسی کنید و اسناد دسترس‌پذیری موجود در اینجا در web.dev را مرور کنید.