M

MLOG

עברית

מדריך מקיף למימוש Tooltips נגישים באמצעות מצבי ריחוף (hover) ומיקוד (focus), להבטחת שימושיות עבור כלל המשתמשים, כולל אנשים עם מוגבלויות.

מימוש Tooltips: מידע נגיש בריחוף ובמיקוד

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

מדוע נגישות חשובה עבור Tooltips

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

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

עקרונות מפתח ל-Tooltips נגישים

העקרונות הבאים חיוניים ליצירת Tooltips נגישים:

  1. ספקו גישה חלופית: ודאו שה-Tooltips נגישים גם באמצעות ריחוף (hover) וגם באמצעות מיקוד מקלדת (focus).
  2. השתמשו בתכונות ARIA: השתמשו בתכונות ARIA (Accessible Rich Internet Applications) כדי לזהות ולתאר כראוי את ה-Tooltips לטכנולוגיות מסייעות.
  3. נהלו את המיקוד: שלטו לאן עובר המיקוד כאשר Tooltip מוצג ומוסתר.
  4. ודאו ניגודיות מספקת: ספקו ניגודיות צבעים מספקת בין טקסט ה-Tooltip לרקע שלו.
  5. אפשרו זמן מספיק: תנו למשתמשים מספיק זמן לקרוא את תוכן ה-Tooltip.
  6. אפשרו לסגור אותם: ספקו דרך ברורה לסגור את ה-Tooltip.
  7. הימנעו משימוש יתר: השתמשו ב-Tooltips במשורה ורק כאשר הם נחוצים.

טכניקות מימוש

1. שימוש בריחוף ומיקוד (Hover and Focus)

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

HTML:

<a href="#" aria-describedby="tooltip-example">קישור לדוגמה</a>
<div id="tooltip-example" role="tooltip" style="display: none;">זהו Tooltip לדוגמה.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* ודאו שה-tooltip נמצא מעל הכל */
}

הסבר:

JavaScript (שליטה מתקדמת - אופציונלי):

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

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. שימוש בתכונות ARIA

תכונות ARIA חיוניות למתן מידע סמנטי לטכנולוגיות מסייעות. להלן פירוט של תכונות מפתח:

דוגמה:

<button aria-describedby="help-tooltip">שלח</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">לחץ כאן כדי לשלוח את הטופס.</div>

JavaScript (עבור aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. ניהול מיקוד (Focus)

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

עם זאת, ייתכנו מצבים שבהם *תרצו* להעביר את המיקוד ל-Tooltip, במיוחד אם הוא מכיל אלמנטים אינטראקטיביים (למשל, קישורים, כפתורים). במקרה זה, ודאו כי:

ברוב המקרים, עדיף להימנע מניהול מיקוד בתוך ה-Tooltip עצמו למען הפשטות והשימושיות.

4. הבטחת ניגודיות מספקת

ניגודיות צבעים חיונית לקריאות. ודאו שלצבע הטקסט ב-Tooltips שלכם יש ניגודיות מספקת מול צבע הרקע. הנחיות הנגישות לתוכן אינטרנט (WCAG) ממליצות על יחס ניגודיות של לפחות 4.5:1 עבור טקסט רגיל ו-3:1 עבור טקסט גדול (18pt או 14pt מודגש).

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

דוגמה (ניגודיות טובה):

.tooltip {
  background-color: #000;
  color: #fff;
}

דוגמה (ניגודיות גרועה):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. הקצאת זמן מספק

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

אם תוכן ה-Tooltip ארוך, שקלו לספק למשתמש דרך לסגור אותו ידנית (למשל, כפתור סגירה או לחיצה על מקש Escape).

6. הפיכתם לניתנים לסגירה

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

שיטות לסגירת Tooltips:

דוגמה (כפתור סגירה):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  זהו תוכן ה-Tooltip שלי.
  <button onclick="hideTooltip()">סגור</button>
</div>

דוגמה (מקש Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // החליפו בפונקציה שלכם להסתרת ה-tooltip
  }
});

7. הימנעות משימוש יתר

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

חלופות ל-Tooltips:

שיקולים מתקדמים

תוכן דינמי

אם תוכן ה-Tooltip שלכם נוצר באופן דינמי (למשל, נטען מ-API או מתעדכן על סמך קלט המשתמש), ודאו שתכונת aria-describedby ונראות ה-Tooltip מתעדכנות בהתאם. השתמשו ב-JavaScript כדי לנהל עדכונים אלה.

מיקום

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

מכשירים ניידים

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

בדיקת ה-Tooltips שלכם

בדקו את ה-Tooltips שלכם ביסודיות כדי להבטיח שהם נגישים לכל המשתמשים. השתמשו בשילוב של בדיקות ידניות וכלי בדיקת נגישות אוטומטיים.

שיטות בדיקה:

בינאום (i18n) ולוקליזציה (l10n)

כאשר מפתחים Tooltips לקהל גלובלי, יש לזכור את נושא הבינאום והלוקליזציה:

סיכום

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

מקורות