המודול הזה מתמקד בשימוש בטכנולוגיה מסייעת (AT) לבדיקות נגישות. אנשים עם מוגבלויות יכולים להיעזר ב-AT כדי לשפר, לתחזק או לשפר את היכולות לביצוע משימה.
במרחב הדיגיטלי, סוכנויות פרסום יכולות להיות:
- לא/שיטה פשוטה: מקלות ראש או פה, מגדילי תצוגה להחזקה ביד, מכשירים עם לחצנים גדולים
- טכנולוגיה מתקדמת: מכשירים שמופעלים באמצעות קול, מכשירים למעקב אחר העין, מקלדות/עכברים מותאמים
- חומרה: לחצני מתג, מקלדות ארגונומיות, מכשיר ברייל ברענון אוטומטי
- תוכנות: תוכניות המרת טקסט לדיבור (TTS), כתוביות מיידיות, קוראי מסך
אנחנו ממליצים להשתמש במספר סוגים של אזורי ATS בתהליך העבודה הכולל של הבדיקות.
יסודות הבדיקה של קורא מסך
במודול הזה נתמקד באחד מקוראי המסך הפופולריים ביותר בדיגיטל. קורא מסך הוא קטע תוכנה שקורא את הקוד הבסיסי של אתר או אפליקציה. לאחר מכן, המערכת ממירה את המידע הזה לפלט דיבור או ברייל בשביל המשתמש.
קוראי מסך חיוניים לאנשים עיוורים ולקוגניטיביים, אבל הם יכולים להועיל גם לאנשים עם ליקויי ראייה, הפרעות קריאה או קוגניטיביות.
תאימות דפדפן
יש כמה אפשרויות של קוראי מסך. קוראי המסך הפופולריים ביותר כיום הם JAWS, NVDA ו-VoiceOver למחשבים שולחניים, ו-VoiceOver ו-TalkBack למכשירים ניידים.
בהתאם למערכת ההפעלה (OS), לדפדפן המועדף ולמכשיר שבו אתם משתמשים, קורא מסך אחד עשוי להבליט את האפשרות הטובה ביותר. רוב קוראי המסך מבוססים על חומרה ודפדפני אינטרנט ספציפיים. אם משתמשים בקורא מסך בדפדפן שהוא לא עבר כיול, יכול להיות שיופיעו עוד 'באגים' או התנהגות בלתי צפויה. קוראי מסך פועלים בצורה הטובה ביותר כשמשתמשים בשילובים הבאים.
פקודות של קורא המסך
אחרי שתגדירו את תוכנת קורא המסך למחשב או לנייד שלכם, תוכלו לעיין בתיעוד של קורא המסך (כפי שמופיע בטבלה הקודמת) ולבצע כמה פקודות חיוניות בקורא מסך כדי להכיר את הטכנולוגיה. אם השתמשתם בקורא מסך בעבר, כדאי לנסות קורא מסך חדש.
כשמבצעים בדיקת נגישות באמצעות קורא מסך, המטרה היא לזהות בעיות בקוד שמפריעות לשימוש באתר או באפליקציה, ולא לבצע אמולציה של חוויית המשתמש בקורא מסך. לכן, יש הרבה דברים שאפשר לעשות עם ידע בסיסי, עם כמה פקודות של קורא מסך ועם הרבה מאוד תרגול.
אם אתם צריכים להבין טוב יותר את חוויית המשתמש של אנשים שמשתמשים בקוראי מסך ובספקי אינטרנט אחרים, תוכלו ליצור קשר עם ארגונים ואנשים רבים כדי לקבל את המידע החשוב הזה. חשוב לזכור ששימוש ב-AT כדי לבדוק קוד מול קבוצת כללים ושאל את המשתמשים על החוויה שלהם מניב בדרך כלל תוצאות שונות. שני ההיבטים האלה חשובים ליצירת מוצרים שמתאימים לכולם.
פקודות חשובות לקוראי מסך במחשב
פקודות חשובות לקוראי מסך בנייד
הדגמה לבדיקה של קורא מסך
כדי לבדוק את ההדגמה שלנו, השתמשנו ב-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 המוטבע, שמשמש כתמונת הפתיחה הראשית בדף ההדגמה שלנו. עם זאת, קורא המסך מוצא אותו ומכריז בתור "image" ללא מידע נוסף. הדבר נכון, גם בלי להוסיף את המאפיין role="img" באופן מפורש ל-SVG.
<div class="section-right">
<svg>...</svg>
</div>
כדי לפתור את הבעיה, קודם צריך לקבוע אם התמונה אינפורמטיבית או עיצובית. בהתאם להחלטה הזו, עלינו להוסיף את הטקסט החלופי המתאים לתמונה (תמונה אינפורמטיבית) או להסתיר את התמונה ממשתמשים בקורא מסך (דקורטיבי).
שקלנו את היתרונות והחסרונות של הדרך הטובה ביותר לסווג את התמונה והחלטנו שהיא דקורטיבית. כלומר, אנחנו רוצים להוסיף או לשנות את הקוד כדי להסתיר את התמונה. שיטה מהירה היא להוסיף role="presentation" ישירות לתמונת ה-SVG. הפעולה הזו שולחת אות לקורא המסך כדי לדלג על התמונה הזו ולא להוסיף אותה לקבוצת התמונות.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
בעיה 4: עיטור תבליטים
יכול להיות שהבחנתם שקורא המסך קורא את תמונת תבליט ה-CSS שמתחת של המחלות הנדירות. אומנם לא סוג התמונות המסורתי כמו שמתואר במודול 'תמונות', עדיין צריך לשנות את התמונה כי היא מפריעה את הזרימה של התוכן, ועלולים להסיח את דעתו של משתמש בקורא מסך או לבלבל אותו.
<p class="bullet">...</p>
בדומה לתמונה הדקורטיבית שהסברנו קודם לכן, אפשר להוסיף role="presentation" ל-HTML באמצעות סיווג התבליטים כדי להסתיר אותו מקורא המסך. באופן דומה, role="none" יעבוד. חשוב לא להשתמש ב-aria-hidden: true, אחרת כל פרטי הפסקה יוסתרו ממשתמשים בקורא מסך.
<p class="bullet" role="none">...</p>
בעיה 5: השדה בטופס
במודול Forms למדנו שכל חייבים גם להיות תוויות חזותיות ותווית פרוגרמטית. התווית חייבת להישאר גלוי כל הזמן.
בהדגמה שלנו, חסרה תווית ויזואלית וגם תווית פרוגרמטית בשדה אימייל של הרשמה לניוזלטר. יש רכיב placeholder של טקסט, אבל הוא לא מחליף את התווית כי היא לא עקבית מבחינה חזותית ולא תואמת באופן מלא לכל קוראי המסך.
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
כדי לפתור את הבעיה, צריך להחליף את ה-placeholder של הטקסט ברכיב של תווית דומה. רכיב התווית הזה מחובר באופן פרוגרמטי לשדה בטופס, ותנועה נוספה באמצעות JavaScript כדי שהתווית תישאר גלויה גם כשמוסיפים תוכן לשדה.
<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 המעודכנים להדגמה הזו.
עכשיו אפשר להשתמש במה שלמדת כדי לבדוק את הנגישות שלך אתרים ואפליקציות.
המטרה של כל בדיקות הנגישות האלה היא לטפל בכמה שיותר או בעיות שהמשתמשים עשויים להיתקל בהן. עם זאת, אין זה אומר שהאתר או האפליקציה יהיו נגישים לגמרי לאחר שסיימת. גודל ההצלחה הגדול ביותר במהלך עיצוב של האתר או האפליקציה שלכם בצורה שתומכת בנגישות לכל אורך התהליך, לשלב את הבדיקות האלה עם בדיקות אחרות לפני ההשקה.
בדיקת ההבנה
בחינת הידע שלכם לגבי בדיקות נגישות אוטומטיות
מהו קורא המסך הטוב ביותר לבדיקת הנגישות?
מה המטרה של בדיקות באמצעות טכנולוגיה מסייעת?