این ماژول بر استفاده از فناوری کمکی (AT) برای تست دسترسی تمرکز دارد. یک فرد دارای معلولیت می تواند از AT برای کمک به افزایش، حفظ یا بهبود قابلیت های انجام یک کار استفاده کند.
در فضای دیجیتال، AT ها می توانند:
- بدون یا با تکنولوژی پایین: میله های سر و دهان، ذره بین های دستی، دستگاه هایی با دکمه های بزرگ
- فناوری پیشرفته: دستگاه‌های فعال‌کننده صدا، دستگاه‌های ردیابی چشم، صفحه‌کلیدهای تطبیقی و موش‌ها
- سخت‌افزار: دکمه‌های سوئیچ، صفحه‌کلیدهای ارگونومیک، دستگاه بریل با تازه‌سازی خودکار
- نرم افزار: برنامه های تبدیل متن به گفتار، زیرنویس زنده، صفحه خوان
ما شما را تشویق می کنیم که از چندین نوع AT در گردش کار آزمایشی خود استفاده کنید.
اصول اولیه تست صفحه خوان
در این ماژول، ما بر روی یکی از محبوب ترین AT های دیجیتال، یعنی صفحه خوان ها تمرکز می کنیم. صفحه خوان نرم افزاری است که کدهای یک وب سایت یا اپلیکیشن را می خواند. سپس آن اطلاعات را به گفتار یا خروجی بریل برای کاربر تبدیل می کند.
صفحه‌خوان‌ها برای افراد نابینا و ناشنوا ضروری هستند، اما می‌توانند برای افراد کم بینا، اختلالات خواندن و ناتوانی‌های شناختی نیز مفید باشند.
سازگاری با مرورگر
چندین گزینه صفحه خوان موجود است. محبوب ترین صفحه خوان ها JAWS، NVDA و VoiceOver برای رایانه های رومیزی و VoiceOver و Talkback برای دستگاه های تلفن همراه هستند.
بسته به سیستم عامل (OS)، مرورگر مورد علاقه و دستگاهی که استفاده می کنید، یک صفحه خوان ممکن است بهترین گزینه باشد. اکثر صفحه خوان ها با در نظر گرفتن سخت افزار و مرورگرهای وب خاص ساخته شده اند. وقتی از یک صفحه‌خوان با مرورگری که برای آن کالیبره نشده است استفاده می‌کنید، ممکن است با «اشکالات» یا رفتار غیرمنتظره‌ای بیشتری مواجه شوید. صفحه‌خوان‌ها وقتی در ترکیب‌های زیر استفاده می‌شوند بهترین کار را دارند.
| صفحه خوان | سیستم عامل | سازگاری با مرورگر |
|---|---|---|
| دسترسی به شغل با گفتار (JAWS) | ویندوز | کروم، فایرفاکس، اج |
| دسترسی غیر بصری دسکتاپ (NVDA) | ویندوز | کروم و فایرفاکس |
| راوی | ویندوز | لبه |
| VoiceOver | macOS | سافاری |
| اورکا | لینوکس | فایرفاکس |
| TalkBack | اندروید | کروم و فایرفاکس |
| VoiceOver (برای موبایل) | iOS | سافاری |
| ChromeVox | ChromeOS | کروم |
دستورات صفحه خوان
هنگامی که نرم افزار صفحه خوان خود را برای دسکتاپ یا دستگاه تلفن همراه خود تنظیم کردید، باید به مستندات صفحه خوان (که در جدول قبل پیوند داده شده است) نگاه کنید و برخی از دستورات ضروری صفحه خوان را اجرا کنید تا با این فناوری آشنا شوید. اگر قبلاً از صفحه‌خوان استفاده کرده‌اید، یک صفحه‌خوان جدید را امتحان کنید!
هنگام استفاده از صفحه‌خوان برای تست دسترس‌پذیری، هدف شما شناسایی مشکلاتی در کدتان است که با استفاده از وب‌سایت یا برنامه‌تان تداخل دارد، نه شبیه‌سازی تجربه کاربر صفحه‌خوان. به این ترتیب، با دانش پایه، چند دستور صفحه خوان، و کمی (یا زیاد) تمرین می توانید کارهای زیادی انجام دهید.
اگر نیاز به درک بیشتر تجربه کاربری افرادی دارید که از صفحه‌خوان‌ها و سایر ATها استفاده می‌کنند، می‌توانید با بسیاری از سازمان‌ها و افراد تعامل داشته باشید تا این بینش ارزشمند را به دست آورید. به یاد داشته باشید که استفاده از AT برای آزمایش کد در برابر مجموعه ای از قوانین و پرسش از کاربران در مورد تجربه آنها اغلب نتایج متفاوتی را به همراه دارد. هر دو جنبه مهم برای ایجاد محصولات کاملاً فراگیر هستند.
دستورات کلیدی برای صفحه خوان های دسکتاپ
| عنصر | NVDA (ویندوز) | VoiceOver (macOS) |
|---|---|---|
| کلیدهای دستور عمومی | درج کنید | کنترل + گزینه |
| صدا را متوقف کنید | کنترل کنید | کنترل کنید |
| بعدی/قبلی را بخوانید | ↓ یا ↑ | Control + Option + → یا ← |
| شروع به خواندن کنید | درج ↓ | کنترل + گزینه + A |
| فهرست عناصر/روتور | NVDA + F7 | کنترل + گزینه + U |
| نقاط دیدنی | D | کنترل + گزینه + U |
| سرفصل ها | اچ | کنترل + گزینه + فرمان + H |
| پیوندها | ک | Control + Option + Command + L |
| کنترل های فرم | اف | Control + Option + Command + J |
| جداول | تی | Control + Option Command + T |
| درون جداول | Alt + ↓ ↑ ← → را وارد کنید | کنترل + گزینه + ↓ ↑ ← → |
دستورات کلیدی برای صفحه‌خوان‌های موبایل
| عنصر | TalkBack (اندروید) | VoiceOver (iOS) |
|---|---|---|
| کاوش کنید | یک انگشت را دور صفحه بکشید | یک انگشت را دور صفحه بکشید |
| را انتخاب یا فعال کنید | دو ضربه سریع بزنید | دو ضربه سریع بزنید |
| بالا یا پایین حرکت کنید | با دو انگشت به بالا یا پایین بکشید | با سه انگشت به بالا یا پایین بکشید |
| تغییر صفحات | با دو انگشت به چپ یا راست بکشید | با سه انگشت به چپ یا راست بکشید |
| بعدی/قبلی | با یک انگشت به چپ یا راست بکشید | با یک انگشت به چپ یا راست بکشید |
نسخه ی نمایشی تست صفحه خوان
برای آزمایش نسخه ی نمایشی خود، از یک Safari روی لپ تاپی که دارای macOS است استفاده کردیم و صدا را ضبط کردیم. می‌توانید این مراحل را با استفاده از هر صفحه‌خوانی طی کنید، اما روشی که با برخی خطاها مواجه می‌شوید ممکن است با نحوه توصیف آن در این ماژول متفاوت باشد.
مرحله 1
از CodePen به روز شده دیدن کنید، که تمام به روز رسانی های دسترسی خودکار و دستی را در آن اعمال شده است.
برای ادامه آزمایش‌های بعدی، آن را در حالت اشکال‌زدایی مشاهده کنید. این مهم است، زیرا <iframe> را که صفحه وب دمو را احاطه کرده است، حذف می کند، که ممکن است با برخی از ابزارهای آزمایش تداخل داشته باشد. درباره حالت اشکال زدایی CodePen بیشتر بیاموزید.
مرحله 2
صفحه خوان مورد نظر خود را فعال کنید و به صفحه نمایشی بروید. ممکن است قبل از تمرکز روی مسائل خاص، کل صفحه را از بالا به پایین مرور کنید.
ما صفحه‌خوان خود را برای هر مشکل، قبل و بعد از اعمال اصلاحات در نسخه نمایشی، ضبط کرده‌ایم. ما شما را تشویق می کنیم که نسخه ی نمایشی را با صفحه خوان خود اجرا کنید.
موضوع 1: ساختار محتوا
سرفصل ها و نشانه ها یکی از راه های اصلی پیمایش افراد با استفاده از صفحه خوان ها هستند. اگر اینها وجود نداشته باشند، کاربر صفحه خوان باید کل صفحه را بخواند تا زمینه را درک کند. این می تواند زمان زیادی را ببرد و باعث ناامیدی شود.
اگر سعی کنید بر اساس هر یک از عناصر در نسخه نمایشی حرکت کنید، به سرعت متوجه خواهید شد که آنها وجود ندارند.
- مثال برجسته:
<div class="main">...</div> - مثال عنوان:
<p class="h1">Join the Club</p>
اگر همه چیز را به درستی به‌روزرسانی کرده باشید، نباید هیچ تغییر بصری ایجاد شود، اما تجربه صفحه‌خوان شما به طرز چشمگیری بهبود یافته است.
بیا درستش کنیم برخی از عناصر غیرقابل دسترس را نمی توان تنها با نگاه کردن به سایت مشاهده کرد. ممکن است اهمیت سطوح عنوان و HTML معنایی را از ماژول ساختار محتوا به خاطر داشته باشید. یک قطعه محتوا ممکن است مانند یک عنوان به نظر برسد، اما محتوا در واقع در یک <div> سبک پیچیده شده است.
برای رفع مشکل سرفصل‌ها و نشانه‌ها، ابتدا باید هر عنصری را که باید به‌عنوان آن علامت‌گذاری شود شناسایی کنید و HTML مربوطه را به‌روزرسانی کنید. حتما CSS مربوطه را نیز آپدیت کنید.
- مثال برجسته:
<main>...</main> - مثال عنوان:
<h1>Join the Club</h1>
اگر همه چیز را به درستی به‌روزرسانی کرده باشید، نباید هیچ تغییر بصری ایجاد شود، اما تجربه صفحه‌خوان شما به طرز چشمگیری بهبود یافته است.
مسئله 2: زمینه پیوند
مهم است که به کاربران صفحه‌خوان در مورد هدف یک پیوند و اینکه آیا پیوند آنها را به مکان جدیدی خارج از وب‌سایت یا برنامه هدایت می‌کند، محتوا بدهید.
در نسخه ی نمایشی خود، هنگام به روز رسانی متن جایگزین تصویر فعال، اکثر پیوندها را اصلاح کردیم، اما چند پیوند اضافی در مورد بیماری های نادر مختلف وجود دارد که می توانند از زمینه اضافی بهره مند شوند - به خصوص که آنها به مکان جدیدی هدایت می شوند.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
برای رفع این مشکل برای کاربران صفحه‌خوان، کد را به‌روزرسانی می‌کنیم تا اطلاعات بیشتری را بدون تأثیرگذاری بر عنصر بصری اضافه کنیم. یا، برای کمک به افراد بیشتری مانند افراد مبتلا به اختلالات خواندن و شناختی، ممکن است به جای آن متن بصری بیشتری اضافه کنیم.
الگوهای مختلفی وجود دارد که ممکن است برای افزودن اطلاعات پیوند اضافی در نظر بگیریم. بر اساس محیط ما که فقط یک زبان را پشتیبانی می کند، یک برچسب ARIA در این شرایط یک گزینه ساده است. ممکن است متوجه شوید که برچسب ARIA متن پیوند اصلی را لغو می کند، بنابراین مطمئن شوید که این اطلاعات را در به روز رسانی خود قرار دهید.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
مسئله 3: تصویر تزئینی
در ماژول تست خودکار ما، Lighthouse نتوانست SVG درون خطی را که به عنوان تصویر اصلی در صفحه نمایشی ما عمل می کند، انتخاب کند. با این حال، صفحه خوان آن را پیدا می کند و بدون اطلاعات اضافی آن را به عنوان "تصویر" اعلام می کند. این درست است، حتی بدون افزودن صریح ویژگی role="img" به SVG.
<div class="section-right">
<svg>...</svg>
</div>
برای رفع این مشکل، ابتدا باید تصمیم بگیریم که آیا تصویر آموزنده است یا تزئینی . بر اساس آن تصمیم، باید متن جایگزین تصویر مناسب (تصویر آموزنده) را اضافه کنیم یا تصویر را از دید کاربران صفحه‌خوان پنهان کنیم (تزیینی).
ما مزایا و معایب بهترین روش دسته‌بندی تصویر را سنجیدیم و به این نتیجه رسیدیم که تزئینی است، به این معنی که می‌خواهیم کد را اضافه یا تغییر دهیم تا تصویر را پنهان کنیم. یک روش سریع اضافه کردن یک role="presentation" مستقیم به تصویر SVG است. این یک سیگنال به صفحه‌خوان می‌فرستد تا از روی این تصویر بگذرد و آن را در گروه تصاویر فهرست نکند.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
مسأله 4: تزیین گلوله
ممکن است متوجه شده باشید که صفحه خوان تصویر گلوله CSS را در بخش بیماری های نادر می خواند. در حالی که این نوع تصویر سنتی نیست که ما در ماژول Images در مورد آن صحبت کردیم، تصویر همچنان باید اصلاح شود زیرا جریان محتوا را مختل می کند و می تواند کاربر صفحه خوان را منحرف یا گیج کند.
<p class="bullet">...</p>
دقیقاً مانند مثال تصویر تزئینی که قبلاً مورد بحث قرار گرفت، می‌توانید یک role="presentation" به HTML با کلاس bullet اضافه کنید تا آن را از صفحه‌خوان پنهان کنید. به طور مشابه، role="none" کار خواهد کرد. فقط مطمئن شوید که از aria-hidden: true استفاده نکنید یا تمام اطلاعات پاراگراف را از کاربران صفحه خوان پنهان خواهید کرد.
<p class="bullet" role="none">...</p>
مسئله 5: فیلد فرم
در ماژول Forms یاد گرفتیم که تمام فیلدهای فرم باید دارای برچسب بصری و برنامه ای نیز باشند. این برچسب باید همیشه قابل مشاهده باشد.
در نسخه ی نمایشی خود، یک برچسب بصری و برنامه ای را در قسمت ایمیل ثبت نام خبرنامه خود از دست داده ایم. یک عنصر مکان‌نمای متنی وجود دارد، اما این عنصر جایگزین برچسب نمی‌شود، زیرا از نظر بصری پایدار نیست و کاملاً با همه صفحه‌خوان‌ها سازگار نیست.
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
برای رفع این مشکل، جای جای متن را با یک عنصر برچسب مشابه جایگزین کنید. آن عنصر برچسب به صورت برنامه‌ریزی به فیلد فرم متصل است و حرکت با جاوا اسکریپت اضافه شد تا برچسب حتی زمانی که محتوا به فیلد اضافه می‌شود قابل مشاهده بماند.
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
جمع کنید
تبریک می گویم! شما تمام آزمایشات این نسخه نمایشی را انجام داده اید. می توانید همه این تغییرات را در Codepen به روز شده برای این نسخه نمایشی مشاهده کنید.
اکنون، می‌توانید از آنچه یاد گرفته‌اید برای بررسی دسترسی به وب‌سایت‌ها و برنامه‌های خود استفاده کنید.
هدف همه این تست‌های دسترسی، رسیدگی به بسیاری از مسائل احتمالی است که کاربر ممکن است با آن مواجه شود. با این حال، این بدان معنا نیست که وب‌سایت یا برنامه شما پس از اتمام کار کاملاً در دسترس است. بیشترین موفقیت را با طراحی وب سایت یا برنامه خود با قابلیت دسترسی در طول فرآیند، و ترکیب این تست ها با سایر آزمایشات قبل از راه اندازی خود خواهید داشت.
درک خود را بررسی کنید
دانش خود را در مورد تست دسترسی خودکار آزمایش کنید
بهترین صفحه‌خوانی که برای آزمایش دسترسی استفاده می‌شود چیست؟
هدف از آزمایش با فناوری کمکی چیست؟