צריך לוודא שלכל הפקדים בהתאמה אישית יש role מתאים ולכל מאפיין ARIA שנדרש מהם המאפיינים והמצב שלהם.
לדוגמה, בתיבת סימון מותאמת אישית נדרשים role="checkbox" ו-aria-checked="true|false" כדי להעביר את המצב שלה בצורה תקינה.
במאמר מבוא ל-ARIA תוכלו לקבל סקירה כללית לגבי האופן שבו ARIA יכולה לספק סמנטיקה חסרה באמצעי בקרה בהתאמה אישית.
איך מבצעים בדיקה ידנית
כדי לוודא שלכל הפקדים האינטראקטיביים המותאמים אישית יש תפקידי ARIA מתאימים, צריך לבדוק את הדף באמצעות חלונית הנגישות של Chrome DevTools או באמצעות קורא מסך. JAWS ו-NVDA הם שניים מקוראי המסך הפופולריים יותר ב-Windows. VoiceOver הוא קורא מסך מובנה ב-MacOS.
בשימוש ב-CSS ניתן לסגנן את הרכיבים של <div> ושל <button> כך שיציגו את אותם מוצרים ויזואליים, אבל שתי חוויות השימוש שונות מאוד בקורא מסך.
<div> הוא רכיב קיבוץ כללי,
כך שקורא המסך מכריז רק על תוכן הטקסט של <div>.
<button> מוקרא כ'לחצן',
אות חזק הרבה יותר למשתמש שזה משהו שהוא יכול לנהל איתו אינטראקציה.
למידע נוסף, אפשר לקרוא את המאמר בנושא סמנטיקה וקוראי מסך.
איך פותרים את הבעיה
הפתרון הפשוט ביותר לבעיה הזו הוא להימנע לגמרי מבקרות אינטראקטיביות מותאמות אישית.
לדוגמה, צריך להחליף <div> שפועל כמו לחצן ב-<button> ממשי.
אם חייבים לשמור את <div>, צריך להוסיף את role="button" ואת aria-pressed="false" ל-<div>.
עכשיו קוראי מסך יכריזו על התפקיד והמצב האינטראקטיבי של <div>.
למה זה חשוב
הדרך היחידה להבין באמת איך משתמשים בטכנולוגיה מסייעת חווים את התוכן שלכם היא לבדוק את התוכן בעצמכם באמצעות קורא מסך. השימוש בקורא מסך ממקור ראשון יבהיר לכם איך מתבצע תיוג התוכן, והאם יש הפרעות לניווט באמצעות טכנולוגיה. אם אתם לא מכירים את האופן שבו טכנולוגיה מסייעת מפרשת תגי עיצוב סמנטיים, תוכלו לקרוא את המאמר מבוא לסמנטיקה כדי לרענן את הידע שלכם.
למידע נוסף, ראו כיצד לבצע בדיקת נגישות.