נגישות

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

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

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

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

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

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

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

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

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

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

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

a {
  color: red;
}

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

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

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

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

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

מומלץ תמיד להצהיר על 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 pseudo-classes יוצגו עם הסגנונות האלה בלי קשר לאמצעי הקלט שבו משתמשים – עכבר, משטח מגע או מקלדת. אפשר להשתמש ב:focus-visible pseudo-class כדי להגדיר סגנון לקישורים רק לניווט באמצעות המקלדת. אתם יכולים להבליט את הסגנונות האלה.

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

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

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

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

בחלונית Accessibility של הכלים למפתחים בדפדפן Firefox יש אפשרות Show Tabbing Order. הפעלת ההגדרה הזו תציג מספרים בשכבת-על על כל רכיב שאפשר להתמקד בו.

תנועה מופחתת

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

יש שאילתת תכונה שמציינת אם המשתמש מעדיף פחות תנועה. קוראים לזה 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="/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.

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

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

בדיקה של רמת ההבנה שלך

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