בדיקת זמינות ממשק

1) מדוע ומה לדעתנו ”מוכן” ‏

• קריטריונים של WCAG 2 נענו. 1/2. 2 רמות AA עבור פלטפורמות יעד;
• הממשק עובר לגמרי מהמקלדת;
• עבודה נכונה עם קוראי מסך;
• בניגוד לנורמות;
• כל המצבים/טעויות/סטטוסים זמינים מחוץ לטווח הראייה וללא עכבר;
• לוקליזציה, RTL, הפחתת תנועה ותכונות ניידות נלקחות בחשבון.

2) אסטרטגיית בדיקה (פירמידה A11y)

1. Autotests/linters (כיסוי מהיר של עד 40-60% משיעורי הבעיה).
2. בדיקת תבניות ידנית (מקלדת, מיקוד, תוכן, היגיון).
3. הפעלות בטכנולוגיה (AT): קוראי מסך, מדדים, מסנני צבעים.
4. מבחני שדה עם משתמשים (במידת האפשר).

המטרה: לתפוס פגמים מערכתיים ברמת הרכיב/תבנית כך שלא יתרבו בתכונות.

3) רשימת המחאות בסיסיות (ריצה מהירה)

[ מקלדת ]: הכל ניתן להשגה בלשונית/חיצים; סדר המיקוד הגיוני; יש מלכודת טריק במודלים; ESC/Enter/Space עובדים.

[ ] אינדיקטור המיקוד נראה בכל נושא/רקע.

[ ] ניגוד: טקסט 4. 5:1 (רגיל), 3:1 (גדול), אייקונים/פקדים קריאים.

[ ] סמנטיקה: תגיות נכונות (”כפתור”, ”a”, ”תווית”, ”ul/li”, ”th/td”), תפקידים ו ”ariah” - ”רק במידת הצורך”.

[ ] קורא מסך: כותרים לפי היררכיה, שמות בעלי משמעות של כפתורים/קישורים, חלופות לאייקונים/תמונות.

[ צורות ]: 'תווית' מפורשת, רמזים/שגיאות קשורים ('aria-laturby'), טקסטים שגיאה הם ספציפיים.

[ ] Dynamics: Toasts/banners/chiews' מוכרזים באמצעות 'אריה-לחיות' ('מנומס '/' אסרטיבי').

[ ] אנימציות מכבדות 'מעדיף-מופחת תנועה'; בלי ”לרעוד” הממשק.

[ ] Localization/RTL: מסכי מפתח מיושרים, מספרים/תאריכים/מטבעות מעוצבים על ידי שירותים.

[ ] ניידות: מטרות מגע 44 × 44 px, זום אינו אסור, סיבוב מסך אינו לשבור תוכן.

4) תפקידים, אחריות וחפצים

מערכת עיצוב: דרישות A11y בתיאור כל רכיב.
מפתחים: בדיקות אוטומטיות, בדיקות יחידה/אינטראקציה עם A11y-asserts.
QA: תסריטים ידניים + AT Sessions; לדווח בחומרה/תדירות.
UX/Content: מיקרוקופיה של שגיאות/סטטוסים, קריאות בקול רם.
פריטים: רשימות צ 'קים, תסריטים, צווחות AT, רשימת פגמים עם הפניות WCAG, המלצות.

5) בדיקות אוטומטיות

לינטרס/אנליזרים: גרזן, תוסף אסלינט-jsx-a11y, pa11y, מגדלור.
בצינור: אנו חוסמים יחסי ציבור להפרות קריטיות (תפקיד/תווית/ניגודיות/לשונית).
תצלומי ניגוד: בדיקות ויזואליות של נושאים/מצבים.

6) בדיקה ידנית: תרחישים

6. מקלדת 1

עבור דרך הדף רק עם המקלדת (Tab/Shift + Tab/Enter/Space/Arws).
בדוק: ראות מיקוד, עדיפות, זמינות של כל הפעולות, היעדר ”מלכודות” ו ”מתים” יסודות.
במודל: התמקדות בפנים, כאשר סגור, חוזרת לאתחול.

6. 2 קוראי מסך (סט מינימלי)

שולחן עבודה: NVDA/JAWS (חלונות), ViceOver (macOS).
Mobile: Over (iOS), TalkBack (אנדרואיד).
אנו בודקים: כותרות נכונות (H-hierarchy), שמות של כפתורים/קישורים, טבלאות קריאה ('th '/' scope'), הכרזת סטטוסים, שגיאות צורה מובנות.

6. 3 תוכן ומיקרוקופיה

קראנו טקסטים קריטיים בקול רם - ללא עמימות, ללא ”טעות 400”.
שגיאה = ”מה לא בסדר + איך לתקן + אילוץ/תבנית”.

6. 4 דינמיקה ואזורים חיים

טוסט ההצלחה הוא 'אריה-לחיות = "מנומס" ", השגיאה היא" אסרטיבית ".
התקדמות/הורדה מוסברת על ידי טקסט; שלד מועדף על ספינר.

7) צורות ושגיאות (בעומק)

לכל שדה יש תווית משויכת (לא ממלא מקום).
שגיאות משויכות לשדה:' aria-invalid =” true”,' aria-tharatby =” [ id שגיאה ]”.
נוסחאות נוסחה (תאריך, מספר טלפון) מפורטות מראש; מסכות לא לשבור את הקלט/הכנסת.
תקציר כרזה של שגיאות בעת הגשת + גלילה אוטומטית והתמקדות בשגיאה הראשונה.
טקסטים שגיאה: ספציפיים, ללא ז 'רגון טכני.

8) טבלאות, רשימות, גרפים

שולחנות: כותרות 'עם' היקף = ”col/row”, חתימות, קורות חיים.
רשימות הן אמיתיות 'ul/ol/li', לא דיוות.
גרפים - טבלאות/תיאורים חלופיים; אגדות זמינות; צבעים על אות אחת.

9) מולטימדיה ואנימציות

וידאו: כתוביות/תעתיק; בקרת מקלדת; ללא ניתוח אוטומטי (או בשקט).
GIF/מיקרואנימציות: לכבות כאשר ”מעדיף-מופחת תנועה”; הימנעות התפרצויות.
תנודות/צלילים - אופציונלי ושכפול ויזואלי/טקסט.

10) נגישות ניידת

אינטראקטיבי ב-44 × 44 px, מרווחים מספיקים.
אין לאסור על צפייה במדד (meta viewport ללא ”skalable-user = no”).
טופס/מקלדת: טיפוסים נכונים (”tel”, ”mail”, ”number”), אינם מסתירים את יכולות המערכת.
בדוק נושא אפל ועם גופנים של מערכת ”יותר”.

11) לוקליזציה, מספרים ו ־ RTL

מחרוזות דרך מקשי i18n עם הקשר; שפות ארוכות (DE/TR) אינן שוברות את הפריסה.
תבניות תאריך/מטבע - תשלומים, לא מחרוזות.
מצב RTL: לשקף את סמלי הניווט, לבדוק את סדר המיקוד והכרכרה, קלט דו כיווני.

12) מפרט של זרימה קריטית (iGaming)

תשלומים/מסקנות

הוראות ברורות, הגבלות/מועדים/עמלות - בטקסט.
שגיאות ספק מוכרזות במפורש, ללא קודים; יש אלטרנטיבה לפעולה.
אישור מבצע: התמקדות בסי-טי-איי לוגי, ביטול.

CCM/אימות

טיפים צעד אחר צעד לתמונות/מסמכים; התקדמות והגעת זמן הגעה משוער.
שגיאות מטושטשות/בוהקות/מקושטות עם דוגמאות לתיקון.
נימה ניטראלית, אין הומור.

13) הערכת חומרה פגומה

חוסם: לא ניתן להשלים משימת מפתח (מקלדת/קורא מסך).
קריטי: פונקציונליות קריטית עובדת, אבל עם מחסומים רציניים.
מפריעים, יש מעקף.
מינורי: קוסמטיקה/אי-ציות למדריכים מבלי להשפיע על המשימה.

כל פגם הוא התייחסות לקריטריון WCAG והתסריט מחדש.

14) הגדרה של נעשה (A11y)

להעביר את תסריט המקלדת ללא עכבר זה 100%.
גרזן/מגדלור: אין הפרות קריטיות/גבוהות.
ניגוד AA על פני כל הנושאים/מצבים.
קריאת מסך של מסלולי מפתח (נבר, תבניות, מודלים, טוסט).
תיעוד A11y לרכיבים/מאפיינים חדשים (מודל לחיקוי, אריה, מיקוד, דוגמאות).
רגרסיה של בדיקות A11y ירוקות במודיעה.

15) תהליכים ואוטומציה

לפני הפיתוח: A11y-criteria במשימות, פריסות במצבי מיקוד/שגיאה.
בפיתוח: linters/ahe במהלך הרכבה מקומית; תמונות חזותיות של ניגוד/מיקוד.
ב CI: pa11y/גרזן-סריקה על ידי דפים קריטיים; בניית טיפה מתחת בלוקר/קריטי.
לאחר השחרור: ביקורת רבעונית, מעקב אחר תלונות המשתמשים על ידי A11y-tag.

16) אנטי דפוסים

ממלא מקום במקום תווית.
'Div' insteed של 'כפתור '/' ".
מוקד נכה מצלצל ”למען היופי”.
צבע כנושא הסטטוס היחיד.
מודלים ללא מיקוד מלכודת/ESC.
אין מגמת על נייד.
”שגיאה 400/500” ללא הסבר אנושי.

17) תבנית תסריט בדיקה

תרחיש 1 - ניווט מקלדת (דף טופס)

1. לשונית לשדה הראשון, הזן את הנתונים.
2. שינוי + לשונית חזרה - בדוק את ההזמנה הנכונה.
3. קריאה לאימות (הגשה) - מיקוד נע לשגיאה הראשונה.
4. סגור את האפנון עם מקש ESC, הפוקוס חזר לאתחול.

תרחיש 2 - קורא המסך (עמוד התשלום)

1. עבור אל כותרת העמוד (h1), הקשב לקטעים.
2. פתח את בחירת השיטה - הצהרת התפקידים/מדינות נשמעת.
3. בכוונה לבצע שגיאת סכום - ההודעה נקראת ומשויכת לשדה.
4. טוסט תשלום מוצלח הכריז ”מנומס”.

תרחיש 3 - דינמיקה

1. התחל את הפעולה עם המתנה של> 3 שניות - יש טקסט על התהליך/זמן הגעה משוער.
2. במקרה של שגיאת רשת - כרזה ”אסרטיבית”, הנגישה מהמקלדת, יש מסלול ”חזרה/עזרה”.

18) תבניות מיקרו שימושיות

תפקידים/אריה עבור טוסט

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

שגיאת קישור לשדה

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

מודלקה (תכונות סמנטיות)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) תוכנית ליישום מהיר של מנהגי A11y

1. ביקורת של רכיבים/תבניות נוכחיות (ניגוד/מיקוד/תפקיד סמנטיקה).
2. עריכת מערכת תכנון: הוסף מחיצה A11y לכל רכיב.
3. כלים: הגדר up/axe/pa11y/Lighthouse הספינות באופן מקומי ובמודיע.
4. הדרכה: מדריכים קצרים למעצבים/מפתחים/קופירייטרים.
5. טייס: לתקן 3-5 מהפגמים הנפוצים ביותר (מודלים, טפסים, טוסט).
6. תקנה: משרד ההגנה עם קריטריונים A11y; ביקורת רבעונית.

גיליון רמאות סופי

בדוק מקלדת, מיקוד, ניגודים, קורא מסך, דינמיקה.
הכרז סטטוסים באמצעות אריה-לחיות; שגיאות הקשורות לשדות.
כבוד להפחית את התנועה, לא לאסור הגדלה.
תחשוב סמנטיקה (תגיות/תפקידים), לא ”איך זה נראה”.
בדיקות אוטומטיות, אבל תמיד משלימות עם בדיקות ידניות.
תיקון פגמים עם התייחסות ל WCAG, חומרה ותסריט השמעה.