נגישות

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

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

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

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

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

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

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

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

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

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

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

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

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

מה אסור לעשות
a {
  color: red;
}
מה מותר לעשות
a {
  color: red;
  font-weight: bold;
}

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

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

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

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

מה אסור לעשות
body {
  color: black;
}
מה מותר לעשות
body {
  color: black;
  background-color: white;
}

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

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

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

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

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

הגברת הניגודיות בהעדפות המערכת.

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

תמיכה בדפדפן

  • Chrome: 96.
  • קצה: 96.
  • Firefox: 101.
  • Safari: 14.1.

מקור

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

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

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

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

היפוך צבעים בהעדפות המערכת.

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

גודל גופן

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

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

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

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

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

הצגה חזותית של סדר הכרטיסיות באמצעות הכרטיסייה 'נגישות' ב-Firefox.

תנועה מופחתת

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

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

תמיכה בדפדפן

  • Chrome: 74.
  • קצה: 79.
  • Firefox: 63.
  • Safari: 10.1.

מקור

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="/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 הוא קיצור של Accessible Rich Internet Applications. אוצר המילים שלו מאפשר לך לספק מידע סמנטי כשאין רכיב HTML מתאים זמין.

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

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

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

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

בדיקת ההבנה

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

בעזרת CSS, מפתחים יכולים להחליף העדפת משתמש, כמו גודל גופן, במקרה הגרוע ביותר?

נכון
מספיק להשתמש רק ב-body { font-size: 12px; }.
לא נכון
להעדפות המשתמש יש השפעה משמעותית, אבל הן לא מעניקות שליטה מלאה.

להשתמש באפשרות הזו כדי למנוע התנגשות בין העדפת גודל הגופן של המשתמש?

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

כל אדם בעולם משתמש בעכבר.

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

מה עושה תמונה עם מאפיין Alt ריק?

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