מה WCAG 2.1 AA באמת אומר עבור סיורי Matterport

WCAG 2.1 AA הוא התקן שתקן ישראלי 5568, תקנות נגישות השירות, EN 301 549 וגם ה-ADA כולם מסתמכים עליו. בישראל זה לא עניין תיאורטי: סיור וירטואלי הפתוח לציבור שלא עומד בדרישות חושף אתכם לתביעת נגישות, והחוק מאפשר לתבוע פיצוי סטטוטורי של עד 50,000 ₪ בלי שצריך להוכיח נזק. אבל מה התקן בעצם דורש כשמיישמים אותו על סיור Matterport? הנה הפירוק המעשי, קריטריון אחר קריטריון, ומה כל אחד מהם משנה עבור החוויה התלת־ממדית שלכם.

WCAG ב-30 שניות

הנחיות הנגישות לתוכן באינטרנט (WCAG) בנויות סביב ארבעה עקרונות. כל תוכן באינטרנט צריך להיות:

1. ניתן לתפיסה המשתמשים צריכים להיות מסוגלים לקלוט את התוכן דרך לפחות אחד מהחושים.
2. ניתן לתפעול המשתמשים צריכים להיות מסוגלים לתפעל את הממשק.
3. מובן המשתמשים צריכים להבין את התוכן ואת האופן שבו הממשק עובד.
4. חסין התוכן צריך לעבוד באופן אמין על פני טכנולוגיות וכלים מסייעים שונים.

רמה AA היא הרמה האמצעית, לא המינימום ההכרחי (רמה A) ולא הרמה התובענית ביותר (רמה AAA). זו הרמה שרגולטורים בכל העולם הסכימו עליה כסטנדרט סביר לעמידה בדרישות. כל קריטריון שמופיע כאן הוא דרישה ברמה A או AA.

נתפס: האם המשתמשים יכולים לראות ולשמוע את התוכן שלכם?

1.1.1, תוכן שאינו טקסט (רמה A)

מה זה דורש: לכל רכיב שאינו טקסט צריכה להיות חלופה טקסטואלית שמשרתת את אותה מטרה.

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

1.3.1, מידע ויחסים (רמה A)

מה זה דורש: מידע וקשרים מבניים שמועברים בצורה חזותית צריכים להיות זמינים גם לתוכנה.

מה זה אומר עבור Matterport: כפתורי נקודות המידע, פאנל הכתוביות, בורר השפה ובקרות הנגישות, כולם צריכים HTML סמנטי תקין ותפקידי ARIA. משתמש שרואה מבחין בכפתור שמרחף במרחב התלת־ממדי; משתמש שמשתמש בקורא מסך צריך לשמוע "כפתור מידע: קטר" עם התפקיד והתווית הנכונים. את זה משיגים באמצעות role="button",‏ aria-label ומבנה HTML שמשקף את ההיררכיה החזותית.

1.4.3, ניגודיות (מינימום) (רמה AA)

מה זה דורש: לטקסט צריך להיות יחס ניגודיות של 4.5:1 לפחות מול הרקע. טקסט גדול (18pt או 14pt מודגש) דורש יחס של 3:1 לפחות.

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

1.4.11, ניגודיות של רכיבים שאינם טקסט (רמה AA)

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

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

1.4.4, שינוי גודל טקסט (רמה AA)

מה זה דורש: אפשר להגדיל טקסט עד 200% בלי לאבד תוכן או תפקוד.

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

ניתן לתפעול: האם המשתמשים יכולים לנווט ולקיים אינטראקציה?

2.1.1, מקלדת (רמה A)

מה זה דורש: כל פעולה צריכה להיות אפשרית גם דרך המקלדת.

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

2.1.2, ללא מלכודת מקלדת (רמה A)

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

מה זה אומר עבור Matterport: כשהמבקר פותח פאנל של נקודת מידע או את הגדרות הנגישות, לחיצה על Escape או Tab צריכה להחזיר את הפוקוס בצורה אמינה לממשק הראשי. שום רכיב לא אמור ללכוד את פוקוס המקלדת בלולאה. בשביל זה צריך ניהול פוקוס מדויק: לעקוב איפה היה הפוקוס לפני שהפאנל נפתח ולהחזיר אותו לשם כשהוא נסגר.

2.4.2, כותרת לעמוד (רמה A)

מה זה דורש: לכל עמוד צריכה להיות כותרת שמתארת אותו.

מה זה אומר עבור Matterport: תגית ה-<title> של העמוד צריכה לתאר את הסיור: "פארק וולפסון, סיור וירטואלי נגיש" במקום "Matterport Showcase" או כותרת גנרית. כשהמבקר עובר לפנורמה חדשה, הכותרת אמורה להתעדכן באופן דינמי ולשקף את המיקום הנוכחי.

2.4.3, סדר פוקוס (רמה A)

מה זה דורש: רכיבים שאפשר למקד בהם פוקוס צריכים לקבל אותו בסדר ששומר על המשמעות ועל יכולת התפעול.

מה זה אומר עבור Matterport: סדר ה-Tab צריך לעקוב אחרי סדר מרחבי הגיוני: קודם בקרות הנגישות, אחר כך בורר השפה, אחריו כפתורי נקודות המידע ברצף הגיוני, ובסוף בקרות הניווט. כשפאנל של נקודת מידע נפתח, הפוקוס עובר אליו. כשהוא נסגר, הפוקוס חוזר לכפתור שפתח אותו.

2.4.7, פוקוס נראה לעין (רמה AA)

מה זה דורש: פוקוס המקלדת צריך להיות נראה לעין.

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

מובן: האם המשתמשים יכולים לעקוב אחר המתרחש?

3.1.1, שפת העמוד (רמה A)

מה זה דורש: שפת ברירת המחדל של העמוד צריכה להיות מזוהה בצורה שתוכנה יכולה לקרוא.

מה זה אומר עבור Matterport: מאפיין ה-lang ב-HTML צריך להיות מוגדר נכון: lang="en" לאנגלית, lang="he" לעברית וכן הלאה. כשהמבקר מחליף שפה בשכבה, מאפיין ה-lang צריך להתעדכן בהתאם, ובשפות שנכתבות מימין לשמאל כמו עברית וערבית, מאפיין ה-dir צריך לעבור ל-rtl.

3.1.2, שפת חלקים (רמה AA)

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

מה זה אומר עבור Matterport: אם סיור בעברית כולל כותרת תצוגה באנגלית, אותה כותרת צריכה את המאפיין lang="en". בסיור רב־לשוני, כל בלוק כתוביות וכל אזור תוכן של נקודת מידע צריכים לשאת את מזהה השפה הנכון, כך שקוראי מסך יחליפו את מנוע ההגייה כמו שצריך.

3.2.1, בעת קבלת פוקוס (רמה A)

מה זה דורש: מיקוד פוקוס על רכיב לא אמור לחולל מעצמו שינוי הקשר.

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

חסין: האם זה עובד עם טכנולוגיה מסייעת?

4.1.2, שם, תפקיד, ערך (רמה A)

מה זה דורש: עבור כל רכיבי הממשק, השם, התפקיד והמצב צריכים להיות ניתנים לזיהוי על ידי תוכנה.

מה זה אומר עבור Matterport: כל רכיב מותאם בשכבה, כפתורי נקודות המידע, נגן השמע, מחוון גודל הגופן ומתג הניגודיות, צריך מאפייני ARIA מתאימים. כפתור נקודת מידע צריך role="button" ו-aria-label="מידע: קטר". נגן השמע צריך role="region" ו-aria-label="קריינות שמע". מתג הניגודיות צריך aria-pressed="true/false". בלעדיהם, טכנולוגיה מסייעת לא יכולה לומר מה הפקדים האלה ובאיזה מצב הם נמצאים.

4.1.3, הודעות מצב (רמה AA)

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

מה זה אומר עבור Matterport: כשהמבקר עובר לפנורמה חדשה והכתובית מתעדכנת, השינוי הזה צריך להישמע לקוראי מסך בלי לחטוף את הפוקוס. את זה משיגים באמצעות אזור aria-live="polite" שעוטף את תוכן הכתובית. כשטקסט הכתובית משתנה, קורא המסך מכריז אוטומטית על תיאור הפנורמה החדשה. אותו דבר עבור הודעות מצב כמו "השפה שונתה לערבית" או "ניגודיות גבוהה הופעלה."

במה סיור Matterport רגיל נכשל

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

סיור Matterport רגיל נכשל, או נכשל חלקית, ב-14 מתוך 14 קריטריוני WCAG 2.1 AA הרלוונטיים. זה כבר לא פער בעמידה בדרישות, זה היעדר מוחלט שלה.

התקנים המפנים אל WCAG

WCAG 2.1 AA הוא לא רק הנחיה, הוא התקן הטכני שרגולציות מרכזיות מפנות אליו:

• תקן ישראלי 5568 (ישראל) מאמץ את WCAG כתקן הטכני לנגישות אתרים ושירותים דיגיטליים, עם הוראות ייחודיות לתמיכה בעברית ובערבית, ומעוגן בתקנות נגישות השירות.
• EN 301 549 (אירופה) התקן האירופי המאוחד לנגישות ICT מאמץ ישירות את דרישות WCAG 2.1 AA.
• ADA (ארצות הברית) בתי המשפט בארה"ב מסתמכים על WCAG 2.1 AA כאמת מידה לנגישות דיגיטלית במסגרת ה-Americans with Disabilities Act.
• Section 508 (פדרלי, ארה"ב) התקנים המעודכנים משלבים את WCAG 2.0 AA, ורשויות מאמצות יותר ויותר את WCAG 2.1 AA עבור תוכן חדש.

עמידה ב-WCAG 2.1 AA אומרת שאתם תואמים, או קרובים מאוד להיות תואמים, לכל ארבע המסגרות הרגולטוריות האלה בבת אחת.

אתם לא חייבים לבנות את זה בעצמכם

כדי ליישם את כל הדרישות האלה על סיור Matterport צריך היכרות עמוקה עם ה-SDK של Matterport, עם עמידה ב-WCAG, עם תבניות ARIA, עם פריסה רב־לשונית (כולל כתיבה מימין לשמאל) ועם עיצוב אינטראקציה תלת־ממדית. זה צירוף מיומנויות מאוד ספציפי שלרוב צוותי הפיתוח אין בבית.

וזה בדיוק מה ש-Geemaps Accessibility עושה. כבר פתרנו כל אחת מהדרישות האלה בסביבת ייצור, ב-4 שפות ובעמידה מלאה ב-WCAG 2.1 AA, עבור פרויקט הכיכר הלבנה של עיריית תל אביב-יפו בפארק וולפסון. את אותה שכבה מוכחת אנחנו מיישמים על הסיור שלכם.