این ماژول بر استفاده از فناوری کمکی (AT) برای تست دسترسی تمرکز دارد. یک فرد دارای معلولیت می تواند از AT برای کمک به افزایش، حفظ یا بهبود قابلیت های انجام یک کار استفاده کند.
در فضای دیجیتال، AT ها می توانند:
- بدون / با تکنولوژی پایین: میله های سر/دهانی، ذره بین های دستی، دستگاه هایی با دکمه های بزرگ
- فناوری پیشرفته: دستگاه‌های فعال‌کننده صدا، دستگاه‌های ردیابی چشم، صفحه‌کلید/موش‌های تطبیقی
- سخت‌افزار: دکمه‌های سوئیچ، صفحه‌کلیدهای ارگونومیک، دستگاه بریل با تازه‌سازی خودکار
- نرم افزار: برنامه های تبدیل متن به گفتار، زیرنویس زنده، صفحه خوان
ما شما را تشویق می کنیم که از چندین نوع AT در گردش کار آزمایشی خود استفاده کنید.
اصول اولیه تست صفحه خوان
در این ماژول، ما بر روی یکی از محبوب ترین AT های دیجیتال، یعنی صفحه خوان ها تمرکز می کنیم. صفحه خوان نرم افزاری است که کدهای یک وب سایت یا اپلیکیشن را می خواند. سپس آن اطلاعات را به گفتار یا خروجی بریل برای کاربر تبدیل می کند.
صفحه‌خوان‌ها برای افرادی که نابینا و ناشنوا هستند ضروری است، اما می‌تواند برای افراد کم بینا، اختلالات خواندن یا ناتوانی‌های شناختی نیز مفید باشد.
سازگاری مرورگر
چندین گزینه صفحه خوان موجود است. محبوب ترین صفحه خوان های امروزی JAWS، NVDA و VoiceOver برای رایانه های رومیزی و VoiceOver و Talkback برای دستگاه های تلفن همراه هستند.
بسته به سیستم عامل (OS)، مرورگر مورد علاقه و دستگاهی که استفاده می کنید، یک صفحه خوان ممکن است بهترین گزینه باشد. اکثر صفحه خوان ها با در نظر گرفتن سخت افزار و مرورگرهای وب خاص ساخته شده اند. وقتی از یک صفحه‌خوان با مرورگری که برای آن کالیبره نشده است استفاده می‌کنید، ممکن است با «اشکالات» یا رفتار غیرمنتظره‌ای بیشتری مواجه شوید. صفحه‌خوان‌ها وقتی در ترکیب‌های زیر استفاده می‌شوند بهترین کار را دارند.
دستورات صفحه خوان
هنگامی که نرم افزار صفحه خوان خود را برای دسکتاپ یا دستگاه تلفن همراه خود تنظیم کردید، باید به مستندات صفحه خوان (که در جدول قبل پیوند داده شده است) نگاه کنید و برخی از دستورات ضروری صفحه خوان را اجرا کنید تا با این فناوری آشنا شوید. اگر قبلاً از صفحه‌خوان استفاده کرده‌اید، یک صفحه‌خوان جدید را امتحان کنید!
هنگام استفاده از صفحه‌خوان برای تست دسترس‌پذیری، هدف شما شناسایی مشکلاتی در کدتان است که با استفاده از وب‌سایت یا برنامه‌تان تداخل دارد، نه شبیه‌سازی تجربه کاربر صفحه‌خوان. به این ترتیب، می‌توانید با دانش پایه، چند دستور صفحه‌خوان، و کمی یا تمرین زیاد، کارهای زیادی انجام دهید.
اگر نیاز به درک بیشتر تجربه کاربری افرادی دارید که از صفحه‌خوان‌ها و سایر ATها استفاده می‌کنند، می‌توانید با بسیاری از سازمان‌ها و افراد تعامل داشته باشید تا این بینش ارزشمند را به دست آورید. به یاد داشته باشید که استفاده از AT برای آزمایش کد در برابر مجموعه ای از قوانین و پرسش از کاربران در مورد تجربه آنها اغلب نتایج متفاوتی را به همراه دارد. هر دو جنبه مهم برای ایجاد محصولات کاملاً فراگیر هستند.
دستورات کلیدی برای صفحه خوان های دسکتاپ
دستورات کلیدی برای صفحه‌خوان‌های موبایل
نسخه ی نمایشی تست صفحه خوان
برای آزمایش نسخه ی نمایشی خود، از یک سافاری روی لپ تاپی که دارای 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 به روز شده برای این نسخه نمایشی مشاهده کنید.
اکنون، می‌توانید از آنچه یاد گرفته‌اید برای بررسی دسترسی به وب‌سایت‌ها و برنامه‌های خود استفاده کنید.
هدف همه این تست‌های دسترسی، رسیدگی به بسیاری از مسائل احتمالی است که کاربر ممکن است به طور بالقوه با آن مواجه شود. با این حال، این بدان معنا نیست که وب سایت یا برنامه شما پس از اتمام کار کاملاً در دسترس خواهد بود. بیشترین موفقیت را با طراحی وب سایت یا برنامه خود با قابلیت دسترسی در طول فرآیند، و ترکیب این تست ها با سایر آزمایشات قبل از راه اندازی خود خواهید داشت.
درک خود را بررسی کنید
دانش خود را در مورد تست دسترسی خودکار آزمایش کنید
بهترین صفحه‌خوانی که برای آزمایش دسترسی استفاده می‌شود چیست؟
هدف از آزمایش با فناوری کمکی چیست؟