פיתוח אפליקציות נגישות יותר של Angular

1. לפני שמתחילים

נגישות היא חלק חיוני בפיתוח אתרים, כי היא מבטיחה שהמשתמשים יוכלו לקלוט, להבין, לנווט וליצור אינטראקציה עם אפליקציות. למעשה, לאחד מכל ארבעה מבוגרים בארה"ב יש מוגבלות שמשפיעה על הפעילויות העיקריות שלהם בחיים. כ-15% מאוכלוסיית העולם – יותר ממיליארד אנשים – סובלים מצורה כלשהי של מוגבלות, וכ-2 עד 4 אחוזים מאוכלסים בקשיים משמעותיים.

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

בקורס הזה, a11y הוא קיצור של נגישות. שימו לב שהמילה a כוללת 11 תווים ו-y.

למבוא מפורט על בעיות וטכניקות לעיצוב אפליקציות נגישות, אפשר לעיין במאמר נגישות.

מה תפַתחו

• שימוש בשיטות מומלצות ובטכניקות מובנות כדי לטפל בבעיות נפוצות של נגישות באינטרנט באפליקציית Dumpling Shop Angular
• עומדים בכל הנחיות הנגישות, WCAG 2.0 ו-ARIA 1.2, ועוברים בדיקות נגישות של גרזן ו-Lighthouse.

מה תלמדו

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

• שימוש בכלים למפתחים, ב-Lighthouse ובגרזן ב-Google Chrome כדי לבדוק את נגישות האפליקציה
• פתרון מלכודות באפליקציה בדף יחיד (SPA) בעזרת כותרות דפים ייחודיות
• פתרון בעיות של ניגודיות צבעים נמוכה למשתמשים עם ליקויי ראייה
• שימוש ב-HTML סמנטי כדי לוודא שקוראי המסך מנווטים בדף בצורה נכונה
• שימוש ב-Agular Material ובפקדים שלא בתצוגת עץ כדי להבטיח שלקוראי מסך תהיה גישה לכל הפקדים
• הוספת תמיכה ב-ARIA לקוראי מסך
• ייבוא חבילת Angular CDK a11y ושימוש בה
• שימוש ב-FocusTrap לניווט עם קורא מסך עם רכיבים מותאמים אישית
• הכרזה על התראות עם CDK Live Messages
• זיהוי משתמשים במצב ניגודיות גבוהה והטמעה של עיצוב בניגודיות גבוהה

מה צריך להכין

• ידע ב-Agular, SCSS, Typescript, git וכלים למפתחים ב-Chrome

2. להגדרה

לקבלת הקוד

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

שכפול המאגר והצגת האפליקציה

השיטה המומלצת לעבודה באמצעות ה-Codelab הזה היא VSCode או סביבת פיתוח משולבת (IDE) מקומית.

1. פותחים כרטיסייה חדשה בדפדפן ועוברים אל https://github.com/googlecodelabs/angular-accessibility.
2. פוצלו, משכפלים את המאגר ו-cd angular-accessibility/ שייכים למאגר.
3. כדאי לבדוק את הסתעפות הקוד של הסימן לתחילת פעולה git checkout get-started.
4. פותחים את הקוד ב-VSCode או בסביבת הפיתוח המשולבת (IDE) המועדפת.
5. מריצים את הפקודה npm install כדי להתקין את יחסי התלות שנדרשים להפעלת השרת.
6. מריצים את הפקודה ng serve כדי להפעיל את השרת.
7. פותחים כרטיסייה בדפדפן אל http://localhost:4200.

3. הגדירו בסיס

מה נקודת ההתחלה של העסק?

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

לצפייה בהדגמה

כדי להתחיל, מומלץ לקרוא על שלוש הפונקציות של האפליקציה:

1. בסרגל הניווט אפשר להציג את המסלולים החנות שלנו, הסיפור שלנו וחיפוש אותנו, ולראות פרטים על חברת הכיסונים.
2. אפשר לשנות את העיצוב כדי להחליף בין המצבים הבהירים והכהים.
3. מתאימים אישית את המילוי, הכמות והצבע של הכופתאות בהזמנה.
4. בוחרים באפשרות Purchase (רכישה) כדי לתעד את ההזמנה המותאמת אישית במסוף.

איך משתמשים ב-Agular כדי לטפל בבעיות נפוצות שקשורות לנגישות באינטרנט

ב-Codelab הזה מתמקדים בנגישות לתכונות הקיימות של האפליקציה הזו. בשלב הראשון צריך לזהות בעיות באפליקציה, ולאחר מכן להפוך את 🛑 ל-✅ על ידי הטמעת פתרון.

איך יודעים מה צריך לתקן?

נתחיל בכל הדוגמאות על ידי זיהוי בעיית הנגישות באמצעות שילוב של בדיקות ידניות ואוטומטיות.

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

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

בדיקה ידנית

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

מתאמנים על ידי הפעלת קורא המסך וניווט במסך.

אתם יכולים להשתמש ב-VoiceOver המובנה ב-MacOS. לוחצים על System Preferences (העדפות המערכת) > נגישות > VoiceOver > כדי להפעיל את התכונה VoiceOver, צריך להפעיל אותה. כדי להפעיל או להשבית את VoiceOver, מקישים על TouchID במהירות שלוש פעמים ולוחצים על המקש Command.

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

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

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

כלים למפתחים ב-Lighthouse וב-Chrome

1. פותחים את הכלים למפתחים ב-Chrome.
2. בוחרים בכרטיסייה Lighthouse ומסמנים את התיבה נגישות.
3. לוחצים על Create report כדי להריץ בדיקת Lighthouse a11y.

גרזן

1. מתקינים את תוסף axe DevTools. יכול להיות שתצטרכו להפעיל מחדש את הדפדפן כדי לראות את התוסף.
2. פותחים את הכלים למפתחים ב-Chrome.
3. בוחרים בכרטיסייה כלי פיתוח לציר ובוחרים באפשרות סריקת כל הדף שלי כדי להריץ סריקה של כלי פיתוח לציר.

איתור שגיאות בקוד (linting)

תוכלו להשתמש בכללים של Angular ESLint כדי לאתר שגיאות בקוד של מאפייני a11y שניתנים אוטומטית.

בeslint.json, יש להוסיף את הפרטים הבאים, הרלוונטיים לנגישות:

"@angular-eslint/template/accessibility-alt-text": 2,
"@angular-eslint/template/accessibility-elements-content": 2,
"@angular-eslint/template/accessibility-label-for": 2,
"@angular-eslint/template/no-positive-tabindex": 2,
"@angular-eslint/template/accessibility-table-scope": 2,
"@angular-eslint/template/accessibility-valid-aria": 2,
"@angular-eslint/template/click-events-have-key-events": 2,
"@angular-eslint/template/mouse-events-have-key-events": 2,
"@angular-eslint/template/no-autofocus": 2,
"@angular-eslint/template/no-distracting-elements": 2

מידע נוסף זמין בכללי ESLint האחרונים ב-GitHub.

נקודת ההתחלה שלכם

בעזרת שיטות הבדיקה החדשות, אתם יכולים לזהות את הבעיות הבאות באפליקציה באמצעות Lighthouse וביקורת צירים, ו-VoiceOver ידני:

ביקורת נגישות:

• 🛑 לכל הדפים יש כותרת זהה
• 🛑 ברכיבים צריכה להיות מספיק ניגודיות בין הצבעים
• 🛑 ל-HTML צריך להיות סדר לוגי, שם ותפקיד לוגיים
• 🛑 תיבות סימון מקוננות שלא ניתן לבחור בקוראי מסך
• 🛑 קורא המסך לא מקריא את הערכים של פס ההזזה
• 🛑 המיקוד של קורא המסך בחלונית לבחירת הצבעים יוצא מתיבת הדו-שיח
• 🛑 לא הוכרזו שינויים, שגיאות והתראות
• 🛑 מצב HighContrast לא מופעל

4. הגדרת כותרות ייחודיות של דפים

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

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

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

בסוף הקטע הזה, האפליקציה שלך תעבור את הביקורת הבאה:

• 🛑 לכל הדפים יש כותרת זהה

כל אחד מהשלבים האלה מופיע מתחת לתגובה: TODO: #4. Define unique page titles.

זיהוי הבעיה

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

1. מפעילים את VoiceOver.
2. אפשר להשתמש בניווט באמצעות כרטיסיות כדי לנווט בין דפים.
3. מוודאים שכותרת הדף תמיד זהה ב-Agular.

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

הוספת כותרות משמעותיות של דפים

אם דף או תצוגה משתנים, קודם צריך לנהל את כותרת הדף בצורה תקינה. כדי לפתור את הבעיה, צריך להשתמש בנכס Router.title המובנה של Angular כדי להגדיר כותרות ייחודיות לכל דף.

1. מוסיפים כותרת ייחודית לכל אחד משלושת הנתיבים המוגדרים:

src/app/app-routing.module.ts

const routes: Routes = [
  { path: 'shop', component: ShopComponent, title: 'Our Shop – a11y in Angular' },
  { path: 'about', component: AboutComponent, title: 'Our Story - a11y in Angular' },
  { path: 'locate', component: LocationComponent, title: 'Find Us - a11y in Angular' },
  { path: '',   redirectTo: '/shop', pathMatch: 'full' },
  { path: '**', component: ShopComponent },
];

הפעולה הזו תייבא באופן אוטומטי את התג Router's Title Service ותשתמש בו כדי לנהל את שינוי כותרת הדף בניווט כך שתתאים למאפיין הכותרת שהוגדר במסלולים שלנו. אפשר גם לנהל כותרות מורכבות יותר של דפים באמצעות TitleStrategy בהתאמה אישית.

אימות השינויים

מפעילים שוב את קורא המסך ומאמתים את השינויים. עכשיו הדפים צריכים לקבל כותרות ייחודיות!

ביקורת נגישות:

• ✅ לכל הדפים יש כותרות ייחודיות בדפים
• 🛑 ברכיבים צריכה להיות מספיק ניגודיות בין הצבעים
• 🛑 ל-HTML צריך להיות סדר לוגי, שם ותפקיד לוגיים
• 🛑 תיבות סימון מקוננות שלא ניתן לבחור בקוראי מסך
• 🛑 קורא המסך לא מקריא את הערכים של פס ההזזה
• 🛑 המיקוד של קורא המסך בחלונית לבחירת הצבעים יוצא מתיבת הדו-שיח
• 🛑 לא הוכרזו שינויים, שגיאות והתראות
• 🛑 מצב HighContrast לא מופעל

5. הגדרה של ניגודיות צבעים הולמת

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

בסוף הקטע הזה, האפליקציה שלך תעבור את הביקורת הבאה:

• 🛑 ברכיבים צריכה להיות מספיק ניגודיות בין הצבעים

תוכלו למצוא כל אחד מהשלבים האלה מתחת לתגובות: TODO: #5. Ensure adequate color contrast.

שימוש בכלים למפתחים ב-Chrome כדי לזהות בעיות של ניגודיות נמוכה

כדי לזהות את הבעיה, כדאי להשתמש בכלים למפתחים ב-Chrome כדי לבדוק את הרכיבים באפליקציה.

1. משתמשים בכלי הבדיקה כדי לראות את הלחצנים של סמל התפריט. אפשר לראות שהניגודיות היא 1.85, הרבה מתחת לדרישות של ארגון WCAG.

2. כדאי להריץ את בדיקת הנגישות בסריקה של Lighthouse או של גרזן כדי לראות את הבעיות האלה ביחס לניגודיות.

שינוי צבע העיצוב של Material

ערכת הצבעים של הרכיב שלך מוגדרת בעיצוב המותאם אישית שלך ב-Material. אתם מעדכנים את ערך העיצוב כך שיעמוד בהנחיות לגבי יחס ניגודיות צבעים.

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

src/styles.scss

$light-primary: mat.define-palette(mat.$pink-palette, $default: A100, $lighter: 100, $text: 900);

אפשר גם להשתמש בכלי הנגישות המובנים ב-Chrome למפתחים כדי למצוא צבע שעומד בתקנים או לעדכן ערכי צבעים ספציפיים ב-Sass.

אימות השינויים

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

בדיקת נגישות

• ✅ לכל הדפים יש כותרות ייחודיות בדפים
• ✅ יחס הניגודיות של הצבעים מספיק מספק
• 🛑 ל-HTML צריך להיות סדר לוגי, שם ותפקיד לוגיים
• 🛑 תיבות סימון מקוננות שלא ניתן לבחור בקוראי מסך
• 🛑 קורא המסך לא מקריא את הערכים של פס ההזזה
• 🛑 המיקוד של קורא המסך בחלונית לבחירת הצבעים יוצא מתיבת הדו-שיח
• 🛑 לא הוכרזו שינויים, שגיאות והתראות
• 🛑 מצב HighContrast לא מופעל

6. שימוש ב-HTML סמנטי

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

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

בסוף הקטע הזה, האפליקציה שלך תעבור את הביקורת הבאה:

• 🛑 ל-HTML צריך להיות סדר לוגי, שם ותפקיד לוגיים

תוכלו למצוא כל אחד מהשלבים האלה מתחת לתגובות: TODO: #6. Use Semantic HTML.

זיהוי הבעיה

1. מפעילים את VoiceOver.
2. משתמשים בכרטיסיות כדי לעבור לכרטיסייה הסיפור שלנו.
3. שימו לב שסדר הכרטיסיות הוא לא רציף.
4. לוחצים על רכישות.
5. שימו לב שהלחצן לא מזוהה כלחצן.

שינוי <div> אל <button>

החלפת התג <div> בהתאמה אישית באמצעות לחצן Material:

src/app/shop/shop.component.html

<button mat-flat-button 
  color="primary" 
  class="purchase-button"
  (click)="fauxPurchase()">
  Purchase
</button>

שימוש ברכיבי כותרת ברצף

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

src/app/about/about.component.html

<h2>Who are we?</h2>
<p class="mat-subheading-2">Have you ever thought, "wow, I love dumplings"?</p>
<p class="right mat-subheading-1">Who hasn't.</p>
<p class="center mat-subheading-1">We took it one step further and created Dumpling Dumpling,</p> 
<p class="center mat-subheading-1">double the dumpling, double the fun.</p>
<div class="spacer"></div>
<h2>How are we different?</h2>
<p class="mat-subheading-2">Handmade in San Francisco, California, we craft fully customizable dumplings. Glitter? Rainbows? Vegan? We do it all.</p>
<p class="right mat-subheading-2">This shop is concept only.</p>

אימות השינויים

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

ביקורת נגישות:

• ✅ לכל הדפים יש כותרות ייחודיות בדפים
• ✅ יחס הניגודיות של הצבעים מספיק מספק
• ✅ HTML סמנטי מבטיח אינטראקציה לוגית
• 🛑 תיבות סימון מקוננות שלא ניתן לבחור בקוראי מסך
• 🛑 קורא המסך לא מקריא את הערכים של פס ההזזה
• 🛑 המיקוד של קורא המסך בחלונית לבחירת הצבעים יוצא מתיבת הדו-שיח
• 🛑 לא הוכרזו שינויים, שגיאות והתראות
• 🛑 מצב HighContrast לא מופעל

7. יצירת פקדים לבחירה עם חומר זוויתי

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

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

בסוף הקטע הזה, האפליקציה שלך תעבור את הביקורת הבאה:

• 🛑 תיבות סימון מקוננות שלא ניתן לבחור בקוראי מסך

תוכלו למצוא כל אחד מהשלבים האלה מתחת לתגובות: TODO: #7. Create selectable controls with Angular Material.

זיהוי הבעיה

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

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

A11y בחומר זוויתי

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

החלפת תיבות סימון בתיבות סימון 'חומרות'

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

src/app/shop/shop.component.ts

@Component(...)
export class ShopComponent implements OnInit {
  fillings: string[] = ['Bok Choy & Chili Crunch', 'Tofu & Mushroom', 'Chicken & Ginger', 'Impossible Meat & Spinach'];
  selectedFillings: string[] = [];

  fauxPurchase(): void {
    let flavor = '';
    this.selectedFillings.forEach(filling => {
      flavor = flavor + " " + filling
    })
  }
}

2. מוסיפים <mat-selection-list> כדי להחליף את הקיבוץ הלא תקין הזה של תיבות סימון HTML:

src/app/shop/shop.component.html

<mat-selection-list [(ngModel)]="selectedFillings" 
  aria-label="Dumpling fillings">
  <mat-list-option *ngFor="let flavor of fillings" 
    [value]="flavor" 
    color="primary">
    {{ flavor }}
  </mat-list-option>
</mat-selection-list>

התגובות שלך ב-TODO מראות גם איפה אפשר להסיר את ה-Sass שלא נמצאים בשימוש ב-src/app/shop/shop.component.scss כדי לנקות את העיצוב.

אימות השינויים

מפעילים שוב את קורא המסך ומאמתים את השינויים. עכשיו אפשר לבחור את תיבות הסימון ולנווט בהן בצורה אינטואיטיבית יותר באמצעות קורא מסך!

ביקורת נגישות:

• ✅ לכל הדפים יש כותרות ייחודיות בדפים
• ✅ יחס הניגודיות של הצבעים מספיק מספק
• ✅ HTML סמנטי מבטיח אינטראקציה לוגית
• ✅ אפשר לגשת לכל אמצעי הבקרה באמצעות קוראי מסך
• 🛑 קורא המסך לא מקריא את הערכים של פס ההזזה
• 🛑 המיקוד של קורא המסך בחלונית לבחירת הצבעים יוצא מתיבת הדו-שיח
• 🛑 לא הוכרזו שינויים, שגיאות והתראות
• 🛑 מצב HighContrast לא מופעל

8. איך מספקים תוויות בקרה באמצעות ARIA

שיניתם את הרכיבים הסמנטיים של ה-HTML וה-Material של אפליקציית Angular, אבל יש רכיבים שדרושים לניווט מלא במאפיינים ספציפיים בקוראי מסך.

המפרט Accessible Rich Internet Applications של Web Accessibility Initiative (WAI-ARIA או ARIA) עוזר לכם לגשר על בעיות שלא ניתן לנהל באמצעות HTML מקורי. הוא מאפשר לציין מאפיינים שישנו את האופן שבו רכיב מתורגם לעץ הנגישות.

בסוף הקטע הזה, האפליקציה שלך תעבור את הביקורת הבאה:

• 🛑 קורא המסך לא מקריא את הערכים של פס ההזזה

תוכלו למצוא כל אחד מהשלבים האלה מתחת לתגובות: TODO: #8. Provide control labels with ARIA.

זיהוי הבעיה

כדי לזהות את הבעיה, מפעילים את קורא המסך ומזיזים את פס ההזזה:

1. מפעילים את VoiceOver.
2. מנווטים אל פס ההזזה של הכמות ומשנים את הערך.
3. שימו לב שחסרה תווית ערך.

שימוש במאפייני ARIA

פקד התווית באמצעות aria-label עד <mat-slider>:

src/app/shop/shop.component.html

<mat-slider
  aria-label="Dumpling order quantity slider"
  id="quantity"
  name="quantity"
  color="primary"
  class="quantity-slider"
  [max]="13"
  [min]="1"
  [step]="1"
  [tickInterval]="1"
  thumbLabel
  [(ngModel)]="quantity">
</mat-slider>

אימות השינויים

מפעילים שוב את קורא המסך ומאמתים את השינויים. עכשיו אפשר להזיז את פס ההזזה.

ביקורת נגישות:

• ✅ לכל הדפים יש כותרות ייחודיות בדפים
• ✅ יחס הניגודיות של הצבעים מספיק מספק
• ✅ HTML סמנטי מבטיח אינטראקציה לוגית
• ✅ אפשר לגשת לכל אמצעי הבקרה באמצעות קוראי מסך
• ✅ פס ההזזה משתמש במאפייני ARIA כדי לספק תווית
• 🛑 מיקוד קורא המסך באמצעות בוחר הצבעים יוצא מתיבת הדו-שיח
• 🛑 לא הוכרזו שינויים, שגיאות והתראות
• 🛑 מצב HighContrast לא מופעל

9. כאן מוסיפים את העוצמה של @angular/cdk/a11y

עד עכשיו הסתמכתם על כלים מובנים של Angular כדי לפתור בעיות נפוצות ב-A11y. עכשיו נבחן את מודול a11y של CDK ונראה איך הוא יכול לעזור לנו לפתור בעיות מורכבות יותר וספציפיות ל-Agular.

עד סוף החלק הזה, תמשיכו את הקורס הזה עם כלים של Angular a11y.

השלבים האלה יופיעו מתחת לתגובה: TODO: #9. Add the power of @angular/cdk/a11y.

ייבוא המודול

מוסיפים את המודול לאפליקציה:

src/app/app.module.ts

import { A11yModule } from '@angular/cdk/a11y';

@NgModule({
  declarations: [...],
  imports: [
    A11yModule
  ],
  providers: [...],
  bootstrap: [...]
})

מה '@angular/cdk/a11y' עושה?

מודול a11y מספק כמה כלים לשיפור הנגישות והוא שימושי במיוחד למחברי רכיבים.

בקטעים הבאים מוסיפים שלושה שירותים נפוצים: FocusTrap, LiveUpdater ו-HighContrast.

למידע נוסף על כל השירותים האחרים שמסופקים על ידי @angular/cdk/a11y, ראו נגישות.

10. שליטה בפוקוס באמצעות FocusTrap

כשתיבת דו-שיח או חלון מודאלי פתוחים, המשתמש מקיים אינטראקציה רק בתוכם. אם מאפשרים למיקוד, מחוץ לתיבת הדו-שיח, המערכת משלבת הקשרים ויוצרת מצב שבו המשתמש לא יודע איפה הוא נמצא בדף.

ב-Agular, ההוראה cdkTrapFocus לוכדת את מוקד tab- בתוך רכיב. התכונה הזו נועדה לשמש ליצירת חוויה נגישה לרכיבים כמו תיבות דו-שיח מודאליות, שבהן המיקוד חייב להיות מוגבל.

בסוף הקטע הזה, האפליקציה שלך תעבור את הביקורת הבאה:

• 🛑 המיקוד של קורא המסך בחלונית לבחירת הצבעים יוצא מתיבת הדו-שיח

השלבים האלה מופיעים מתחת לתגובות: TODO: #10. Control focus with FocusTrap.

זיהוי הבעיה

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

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

הוספת FocusTrap

אפשר להשתמש ב-cdkFocusTrap כדי לתעד את סדר המיקוד ולשלוט בו ברכיבים מותאמים אישית. השימוש ב-mat-dialog-content מספיק כדי לפתור את רוב הבעיות על ידי לכידת המיקוד בתיבת דו-שיח. מוסיפים את המאפיין cdkFocusInitial כדי להגדיר את אזור המיקוד הראשוני בצבע ה-wrapper של הכופתאות <mat-selection-list> בתיבת הדו-שיח של בוחר הצבעים.

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.html

<mat-selection-list #colors aria-label="Dumpling wrapper color" multiple="false" cdkFocusInitial>
  ...
</mat-selection-list>

אימות השינויים

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

ביקורת נגישות:

• ✅ לכל הדפים יש כותרות ייחודיות בדפים
• ✅ יחס הניגודיות של הצבעים מספיק מספק
• ✅ HTML סמנטי מבטיח אינטראקציה לוגית
• ✅ אפשר לגשת לכל אמצעי הבקרה באמצעות קוראי מסך
• ✅ פס ההזזה משתמש במאפייני ARIA כדי לספק תווית
• ✅ במרכז לבחירת צבעים יש מלכודת מיקוד נכונה
• 🛑 לא הוכרזו שינויים, שגיאות והתראות
• 🛑 מצב HighContrast לא מופעל

11. הכרזה על שינויים באמצעות Live Messages

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

המטרה של Live Messages היא להכריז על הודעות למשתמשים בקורא מסך שמשתמשים באזור בשידור חי (ARIA), כדי לוודא שקוראי המסך מקבלים התראות על התראות ושינויים בדפים בזמן אמת. מידע נוסף על אזורים שקיימת בהם ARIA זמין ב-WAI-ARIA של W3C. ב-Agular, קריאה ל-LiveUpdater כשירות הוא פתרון שניתן לבדיקה יותר מאשר מאפיינים של aria-live.

בסוף הקטע הזה, האפליקציה שלך תעבור את הביקורת הבאה:

• 🛑 לא הוכרזו שינויים, שגיאות והתראות

השלבים האלה מופיעים מתחת לתגובות: TODO: #11. Announce changes with LiveAnnouncer.

זיהוי הבעיה

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

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

הוספת Live Messages לקוד שלכם

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

1. הוספת הודעה כשבוחרים צבע:

src/app/shop/color-picker/color-picker-dialog/color-picker-dialog.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ColorPickerDialogComponent implements OnInit {
  constructor(
    public dialogRef: MatDialogRef<ColorPickerDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ColorDialogData,
    private liveAnnouncer: LiveAnnouncer) { }

  public changeColor(color: string): void {
    this.liveAnnouncer.announce(`Select color: ${color}`);
    this.dialogRef.close();
  }
}

2. הוספת הודעה כשמבוצעת רכישה מזויפת:

src/app/shop/shop.component.ts

import { LiveAnnouncer } from '@angular/cdk/a11y';

@Component(...)
export class ShopComponent implements OnInit {

  constructor(private liveAnnouncer: LiveAnnouncer) { }

  fauxPurchase(): void {
    let flavor = '...';
    const fakePurchase = `Purchase ${this.quantity} ${flavor}dumplings in the color ${this.color}!`;

    this.liveAnnouncer.announce(fakePurchase);
  }
}

אימות השינויים

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

ביקורת נגישות:

• ✅ לכל הדפים יש כותרות ייחודיות בדפים
• ✅ יחס הניגודיות של הצבעים מספיק מספק
• ✅ HTML סמנטי מבטיח אינטראקציה לוגית
• ✅ אפשר לגשת לכל אמצעי הבקרה באמצעות קוראי מסך
• ✅ פס ההזזה משתמש במאפייני ARIA כדי לספק תווית
• ✅ במרכז לבחירת צבעים יש מלכודת מיקוד נכונה
• ✅ הוכרזו שינויים, שגיאות והתראות
• 🛑 מצב HighContrast לא מופעל

12. הפעלת מצב ניגודיות גבוהה

Microsoft Windows תומך בתכונת נגישות בשם 'מצב ניגודיות גבוהה'. המצב הזה משנה את המראה של כל האפליקציות, כולל אפליקציות אינטרנט, כדי להגביר באופן משמעותי את הניגודיות. ב-Agular, אתם רוצים לכבד את ההעדפות של המשתמשים באפליקציה שלכם.

באמצעות HighContrastModeDetector אפשר לקבוע אם הדפדפן נמצא כרגע בסביבה של מצב ניגודיות גבוהה.

Internet Explorer, Microsoft Edge ו-Firefox תומכים במצב הזה. Google Chrome אינו תומך במצב ניגודיות גבוהה של Windows. השירות הזה לא מזהה מצב של ניגודיות גבוהה שנוסף על ידי תוסף הדפדפן Chrome עם ניגודיות גבוהה.

בסוף הקטע הזה, האפליקציה שלך תעבור את הביקורת הבאה:

• 🛑 מצב HighContrast לא מופעל

השלבים האלה מופיעים מתחת לתגובות: TODO: #12. Enable HighContrast mode.

זיהוי הבעיה

כדי לזהות את הבעיה, פותחים את האפליקציה ב-Internet Explorer, ב-Microsoft Edge או ב-Firefox, מפעילים את מצב הניגודיות הגבוהה ובודקים אם חלו שינויים:

1. פותחים את האפליקציה ב-Internet Explorer , Microsoft Edge או Firefox.
2. מפעילים את מצב הניגודיות הגבוהה.
3. שימו לב שהאפליקציה לא השתנתה.

הוספת תמיכה במצב ניגודיות גבוהה

ב-styles.scss, אפשר להשתמש במיקסין של cdk-high-contrast שסופק ב-@angular/cdk/a11y כדי להוסיף קווי מתאר ללחצנים במצב 'ניגודיות גבוהה':

src/app/shop/shop.component.scss

@use '@angular/cdk';

.purchase-button {
    border-radius: 5px;
    background-color: mat.get-color-from-palette(mat.$pink-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$pink-palette, 50);
    }
}

:host-context(.dark-theme) {
  .purchase-button {
    background-color: mat.get-color-from-palette(mat.$light-green-palette, A100);

    @include cdk-high-contrast {
      outline: solid 1px;
      background-color: mat.get-color-from-palette(mat.$light-green-palette, 50);
    }
  }
}

אימות השינויים

מרעננים את האפליקציה ומאמתים את השינויים. הוספת קו מתאר ללחצן במצב 'ניגודיות גבוהה'!

ביקורת נגישות:

• ✅ לכל הדפים יש כותרות ייחודיות בדפים
• ✅ יחס הניגודיות של הצבעים מספיק מספק
• ✅ HTML סמנטי מבטיח אינטראקציה לוגית
• ✅ אפשר לגשת לכל אמצעי הבקרה באמצעות קוראי מסך
• ✅ פס ההזזה משתמש במאפייני ARIA כדי לספק תווית
• ✅ במרכז לבחירת צבעים יש מלכודת מיקוד נכונה
• ✅ הוכרזו שינויים, שגיאות והתראות
• ✅ מצב ניגודיות גבוהה מופעל

13. מעולה!

כל הכבוד, פתרת בעיות נפוצות של נגישות באינטרנט באפליקציית Angular! 🎉

כדי לראות את כל הפתרונות, כדאי לבדוק את ההסתעפות main.

עכשיו אתם יודעים מהם השלבים העיקריים שנדרשים כדי לפתור שמונה מלכודות נפוצות של A11y באפליקציית Angular.

מידע נוסף

כדאי לנסות את ה-Codelabs הבאים:

• יצירת אפליקציית אינטרנט באמצעות Angular ו-Firebase
• גילוי ותיקון טקסט עם ניגודיות נמוכה באמצעות כלי הפיתוח ל-Chrome

מומלץ לקרוא את החומרים הבאים:

• Angular.io
• חומר אנגלי A11y
• יסודות הנגישות
• https://web.dev/accessible/