הסיפור של קו תחתון לקישורים

תקציר

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

זיהוי קישורים בקריאה דיגיטלית

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

באשר לאנשים עם לקות ראייה

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

מה עושים כשצוותי ממשק משתמש ומפתחים לא מוכנים לקו תחתון לקישורים?

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

הפתרונות של WCAG

מסמך הנחיות WCAG בנספחיו על טכניקות מספקות מציע את הפתרונות הבאים:

עיצוב שונה לגופן המשמש בקישורים

בטכניקה ‏G182: Ensuring that additional visual cues are available when text color differences are used to convey information  הפתרון המוצע הוא להגדיר שטקסט קישור יהיה מעוצב בפונט ומאפייני עיצוב שונים. כתוב: Check that any text where color is used to convey information is also styled or uses a font that makes it visually distinct from other text around it.

ניגוד ביחס של 1:3 בין צבע טקסט הקישור לצבע הטקסט שאינו קישור הסמוך לטקסט הקישור

בטכניקה G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them  מוצע פתרון של יחס ניגוד כך:

• בכדי לעמוד בקריטריון 1.4.1 – שימוש בצבע (A) WCAG 2.0 SC 1.4.1 Use of Color צריך שיתקיים יחס ניגוד של 1:3 בין צבע טקסט הקישור לצבע הטקסט הסמוך ו.
• תחת הכותרת Examples יש דוגמאות לסט צבעים שעומד ביחס ניגוד של 1:3 בין צבע טקסט הקישור לצבע הרקע של הטקסט הסמוך לו.
• מובהר גם כי במידה ודפדפנים וטכנולוגיות מסייעות יתמכו בקו תחתון לקישורים, ניתן יהיה להשתמש ביכולותיהם המובנות. אני גם מניחה שניתן להגדיר סקריפט כלשהו בדפדפן שיגדיר קו תחתון לקישורים לפי בחירת המשתמש, ובלבד שהמנגנון יהיה ברור. כתוב: If assistive technology or Web browsers at some point all provide an option to underline all links on Web pages for users, this could be used instead of an author-provided link highlighting mechanism.

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

עוד קריטריונים להצלחה להבחנה בין קישורים:

בנוסף לעמידה בקריטריון קריטריון 1.4.1 – שימוש בצבע (A) WCAG 2.0 SC 1.4.1 Use of Color נדרש לעמוד גם בקריטריונים אלו – הנוגעים לעניין הבחנה בקישורים:

• צריך לקיים יחס ניגוד מינימום בין צבע טקסט הקישור לצבע הרקע בהתאם לקריטריון 1.4.3 – ניגוד (מינימום) WCAG 2.0 SC 1.4.3 Contrast (Minimum] (AA) – כלומר יחס של 1:4.5 לטקסט רגיל ו 1:3 לטקסט מודגש 14 נקודות ומעלה או 18 נקודות לא מודגש.
• עוד נדרש לעמוד ב קריטריון 2.4.7 – אפשרות לראות את מוקד המקלדת WCAG 2.0 SC 2.4.7 Focus Visible (AA). כך, כאשר אדם עם מוגבלות מוטורית ינווט עם מקש ה TAB הוא יוכל לראות את מוקד המקלדת באלמנטים אינטראקטיביים.

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

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

דפדפנים וטכנולוגיות מסייעות הקשיבו !

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