זמינות UX וממשקים לכל

1) מדוע זה משנה

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

2) יסודות ועקרונות (POUR)

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

3) סמנטיקה, כותרים ואריות

סימון סמנטי לפני ARIA: '<כפתור>', '<nave>', '<צורה>', '<טבלה>' - בכוונה.
היררכיית כותרת: 1 '<h1> "לכל עמוד, אז מבנה לוגי" <h2> "-" <h3> ".
ציוני דרך: '<כותרת>', '<ראשי>', '<הצידה>', '<רגל>', '<nav>' - עזרה לקוראי מסך.
אריה רק כשצריך: 'תפקיד', 'אריה-תווית', 'אריה-תאר', 'אריה-מורחבת', 'אריה-תחיה'.
מצבים/שגיאות באמצעות 'אריה-לא תקפים', 'אריה-שליחות'.

4) מקלדת וניהול מיקוד

בקרת מקלדת מלאה: ”Tab/Shift + Tab” - הזמנה, ”Enter/Space” - הפעלה, ”Esc” - יציאה.
מיקוד גלוי תמיד; לא לנטרל קווי מתאר.
מלכודות מיקוד: במודלים - מיקוד מחזורי, חזרה למקור לאחר הסגירה.
אלמנטים נסתרים לא צריכים ליפול לתוך סדר הלשונית ("תצוגה: אף אחד", "אריה מוסתרת =" נכון ").
דלג על קישורים: ”עבור לתוכן ראשי” - בתחילת העמוד.

5) צבע, ניגוד וטיפוגרפיה

ניגוד טקסט: לפחות 4. 5:1 לטקסט רגיל ו-3: 1 לטקסט גדול.
אל תסתמך רק על צבע: שכפול עם סמל/תבנית/חתימה.
גודל מטרות קליק: לפחות 40-48 px, שדות מספיקים מסביב.
גופנים: גופן קריא, קו אל קו 1. 4–1. 6, קו באורך 45-90 תווים.

6) תנועה, אנימציות והבזק אפילפטוגני

כבדו את המערכת מעדיפה דגל מופחת-תנועה - הוסף אנימציות פשוטות/נטרל פרלקס.
הימנע מהבהבים> 3 פעמים/שנייה.
כל התנועות האוטומטיות חייבות לעצור ולהסתתר.

7) צורות, טעויות ואימות

לאגד במפורש תוויות ושדות: '<תווית עבור = ”id'>”.
ממלא מקום הוא לא תווית.
שגיאה בהודעות ליד השדה ובסיכום השגיאה למעלה; לקשור באמצעות 'אריה-תארים'.
הסבר את תבנית הקלט, דוגמא, מסכה; ציין יחידות ומטבע.
אל תאתחל שדות הושלמו כאשר אירעה שגיאה; תמשיך להתמקד בתחום הבעייתי.

דוגמה (שבר):

html
<label for="email">Эл. почта</label>
<input id="email" name="email" type="email" aria-describedby="email-hint email-err">
<div id="email-hint" class="hint">Мы не рассылаем спам</div>
<div id="email-err" class="error" role="alert">Укажите адрес в формате name@example.com</div>

8) רכיבים ואינטראקטיביים:

כפתורים נגד קישורים: פעולה = ”<כפתור>”, קפיצה = ””.

לשוניות/אקורדיונים: חיצי ניווט, ”אריה-בקרה”, ”אריה-נבחר”.

מודלים/דו-שיח: 'תפקיד =' דו-שיח ',' אריה-מודאל = ”אמת”, 'מלכודת מיקוד', 'Esc' נסגר.

Tooltip/Popover: נגישות מקלדת, פסקי זמן לא מפריעים לקריאה.

Grag & Drop: חלופות - להזיז למעלה/למטה כפתורים, חיצי מקלדת; אירועים לא רק עם העכבר.

9) מדיה: וידאו/שמע/גרפיקה

וידאו: כתוביות, תעתיק, תיאור אודיו אלטרנטיבי (AD) רצועה.
אודיו: תעתיק טקסט.
גרפים/דיאגרמות: סיכום טקסט (”מה שחשוב”), טבלת נתונים, תוויות תיאוריות של צירים.
אזורי מחיה: 'אריה-לחיות = ”מנומס ”/” אסרטיבי ”- להיזהר לא” לצעוק ”לעתים קרובות מדי.

10) שולחנות ורשימות

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

11) i18n, לוקלס ו RTL

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

12) זמן, מפגשים, קפטנות וחלופות

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

13) נגישות לחושים ולליקויים מוטוריים

מחוות חייבות להיות מקבילות לחיצה/מקלדת.
אל תזדקק לברזים ארוכים/כפולים ללא חלופה.
”Pointer ביטול”: הפעולה חייבת להתבצע על שחרור, לא על ”לחץ” לתת הזדמנות לבטל.

14) מדינות, הודעות והתראות

השתמש ב-role = ”סטטוס ”/” התראה ”עבור מסרים דינמיים.
אל תתמקד בכרזות דביקות.
הודעה טוסט - עם הפסקה במיקוד/ריחוף וגישה מהמקלדת.

15) תוכנית מבחן (ידני ואוטומטי)

מדריך (מינימום):

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

אוטוטסטים (במצ "ח):

קווי נגישות ברמת רכיב.
בדוק ניגודיות, טקסטים חלופיים, הזמנת כותרת, תוקף ARIA.
סמנטיקה (עץ תפקידים) למסכים קריטיים.

16) מדדי איכות זמינות

כיסוי A11y: הפרופורציה של רכיבים עם רשימות בדיקה הושלמו.
קצב מעבר מקלדת בלבד: אחוז התסריטים החוצים את המקלדת.
ניגוד Violations/1k יסודות.
זמן זרימת SR: זמן הרצת תסריט עם קורא מסך.
משוב משתמש: תלונות על זמינות, זמן תגובה ותיקונים.

17) רשימת רכיבים

[ ] תקן סמנטיקה/תפקיד ללא ARIA מיותר

[ תוויות חתומות ], "ארייה..

[ ] שליטה מלאה במקלדת, מיקוד גלוי

[ ] טקסט/סמל/חדות גבול הוא נורמלי

[ ] שגיאות ותנאים נשמעים על ידי קורא המסך

[ ] כבוד מעדיף-מופחת תנועה

[ ] גודל שטח קליק 40-48 px

[ ] Localization and RTL לא לשבור את הפריסה

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

”כפתורי DIV” ללא תפקיד/מקלדת.
מסתיר את 'המתווה: אף אחד' להתמקד בלי אלטרנטיבה.
ממלא מקום במקום תווית.
שגיאות בצבע בלבד.
מודלים ללא מיקוד מלכודת וללא ”Esc”.
גרירה בלבד ללא מקלדת.
גלילה אוטומטית/מקטע ארוך ללא אפשרות לנטרל.

19) תפקידים ותהליכים

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

20) יישום באמצעות איטרציה

איטרציה 1 - קרן (2 שבועות):

סמנטיקה/כותרות, ניגודיות, מיקוד ומקלדת, צורות ושגיאות בסיסיות.

איטרציה 2 - אינטראקטיבית (3-4 שבועות):

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

איטרציה 3 - קנה מידה ובקרה (רציף):

מבחנים אוטומטיים במודיעים, RTL/i18n, מדדים, ביקורות קבועות, אימוני צוות.

21) תבניות וקטעים

מודלקה (מפושטת):

html
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title" aria-describedby="dlg-desc">
<h2 id="dlg-title">Подтвердите действие</h2>
<p id="dlg-desc">Эта операция необратима.</p>
<button>Отмена</button>
<button>Подтвердить</button>
</div>

דלג לכפתור התוכן:

html
<a class="skip-link" href="#main">Перейти к основному содержимому</a>
<main id="main">...</main>

כבוד מעדיף-מופחת תנועה:

css
@media (prefers-reduced-motion: reduce) {
{ animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition: none!important; }
}

22) מיני ־ FAQ

אני צריך גרסה נפרדת עם לקויי ראייה?
לא, זה לא גרסה סתגלנית ונגישה לכולם עם הגדרות.

האם זה מספיק רק כדי לבדוק את הניגוד?
לא, זה לא צריך מקלדת, מיקוד, סמנטיקה, שגיאות צורה, מדיה וכו '.

אריה תפתור הכל?
אריה לא יתקן סמנטיקה שגויה. קודם תגיות נכונות, אחר כך שידורי ARIA.

תוצאות

זמינות היא דיסציפלינה מערכתית: semantics = מקלדת/מיקוד = ניגוד/צבע = צורות ax/שגיאות מדיה/לוחות זמנים = i18n/RTL ac תוכנית מבחן ומדדים. הפוך את הנגישות לחלק מתרבות משרד ההגנה והצוות - והמוצר שלך יהיה באמת רב תכליתי, אמין ונוח לכולם.

זמינות UX וממשקים לכל

תוצאות

צרו קשר

חיבור מהיר

הווידאו יעודכן בקרוב

אנחנו עמוסים מאוד בפרויקטים כרגע