נגישות

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

חוסר בראיית צבעים

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

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

הכרטיסייה 'נגישות' של Firefox כוללת תפריט נפתח בשם Simulate עם רשימת אפשרויות.

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

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

ב-Mac, עוברים אל:

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

בוחרים אחת מהאפשרויות.

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

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

ניגודיות של צבעים

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

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

• tota11y היא סימניה שניתן להוסיף לסרגל הכלים של הדפדפן.
• VisBug הוא תוסף לדפדפן שזמין לכל דפדפני המחשב הראשיים.
• אפשר לבדוק אם יש בעיות בניגודיות החזותית בכלי לבדיקת נגישות של Firefox.
• אפשר גם לגלות טקסט עם ניגודיות נמוכה ולתקן אותו באמצעות כלי הפיתוח ל-Chrome.
• בדפדפן Edge של Microsoft, אתם יכולים לבדוק את הניגודיות של צבע טקסט באמצעות בוחר הצבעים.

מומלץ תמיד להצהיר על color ו-background-color ביחד בשירות ה-CSS. אל תניחו שצבע הרקע יוגדר כברירת המחדל של הדפדפן. אנשים יכולים לשנות את הצבעים בדפדפן שלהם.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

ניגודיות גבוהה

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

ב-Mac, עוברים אל:

1. העדפות המערכת
2. נגישות
3. מסך

בוחרים באפשרות להגדלת הניגודיות.

יש תכונת מדיה שמאפשרת לזהות אם מישהו הפעיל מצב ניגודיות גבוהה. ניתן לשלוח שאילתה לגבי תכונת המדיה prefers-contrast עבור שלושה ערכים: no-preference, less ו-more. אפשר להשתמש במידע הזה כדי לשנות את לוח הצבעים של האתר.

המשתמשים יכולים גם להגדיר במערכת ההפעלה העדפה לשימוש בצבעים הפוכים.

ב-Mac, עוברים אל:

1. העדפות המערכת
2. נגישות
3. מסך

בוחרים באפשרות להיפוך הצבעים.

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

גודל הגופן

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

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

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

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

ניווט באמצעות המקלדת

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

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

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

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

כדאי להיזהר משימוש ב-CSS order. אפשר להשתמש בתכונה הזו בשילוב עם flexbox ו-Grid כדי למקם אלמנטים בסדר חזותי שונה ב-HTML. התכונה הזו חזקה, אבל היא עלולה לבלבל אנשים שמנווטים באמצעות מקלדת.

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

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

תנועה מופחתת

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

יש שאילתה של תכונה שמבהירה אם המשתמש מעדיף פחות תנועה. השם שלו הוא prefers-reduced-motion. כלול אותו בכל מקום שבו משתמשים במעברי CSS או באנימציות.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

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

קול

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

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

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

כותרות

חשוב להשתמש בכותרות כמו <h1>, <h2>, <h3> וכו' באופן הגיוני. קוראי מסך משתמשים בכותרות האלה כדי ליצור מתווה של המסמך, שניתן לנווט בו באמצעות מקשי קיצור.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

מבנה

כדי לבנות את תוכן הדף, אפשר להשתמש ברכיבים של ציוני דרך כמו <main>, <nav>, <aside>, <header> ו-<footer>. משתמשים בקורא מסך יכולים לעבור ישירות אל ציוני הדרך האלה.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

טפסים

צריך לוודא שלכל שדה בטופס יש רכיב <label> משויך. אפשר לשייך תווית לשדה טופס באמצעות המאפיין for ברכיב <label> והמאפיין id המתאים לשדה הטופס.

<span class="formlabel">Your name</span>
<input type="text">

<label for="name">Your name</label>
<input id="name" type="text">

תמונות

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

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

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

<img src="texture.png">

<img src="texture.png" alt="">

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

קישורים

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

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

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

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

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

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

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

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

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

בדיקת ההבנה

בחינת הידע שלכם בנושא נגישות