נגישות

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

ליקוי בראיית הצבעים

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

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

הכרטיסייה 'נגישות' ב-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 ו-Network כדי למקם רכיבים בסדר חזותי שונה לפי הסדר שלהם ב-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. מותר גם להעביר אטימות ועמעום הדרגתי. גם אם תנועה מופחתת לא צריכה להיות אנימציה.

Voice

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

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

בעבר למדתם איך לחצני סמלים בלבד צריכים לכלול מאפיין כדי לציין את מטרת הלחצן למשתמשים ללא ראייה. זוהי רק דוגמה אחת לחשיבות של 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="/https/web.dev/offers.html">click here</a>.</p>

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

ARIA

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

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

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

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

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

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

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

בדיקת ההבנה

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