בפוסט הזה אנחנו נצלול ליצירת הלינק המושלם מבלי להסתבך יותר מדי (או שכן, לא מבטיח).
את הפוסט תרגמתי וליקטתי מפרי כתיבתה של ריאן רייטבילד מאתר a11y-collective.
כאן ניתן לקרוא את הפוסט המקורי באנגלית
בפוסט אני משתמש בדוגמאות של כתובת אימייל carrots@gmail.com ומספר פלאפון 050-1234567 שאין להם קשר אלי, אלא רק לצורך הדגמה.
תכל'ס, מה זה לינק בכלל?
אנחנו משתמשים בלינקים בכמה דרכים. לדוגמה:
- במשפט: "בוקר טוב עולם! מה שלום כולם?"
- בתפריט: " ראשי | אודותינו | יצירת קשר "
- מוטמע בקריאה לפעולה: "הירשמו לניוזלטר שלי"
- תחת רשימה, כמו לדוגמה רשימת מקורות לקריאה נוספת בסוף הפוסט
- להורדת קובץ
- לינק "mailto", שיכול לפתוח למשתמש קצה את אאוטלוק או תוכנת מיילים אחרת עם המייל שכתבנו
- לינק למספר פלאפון "tel"
ועוד.
מכנה משותף לכל הדרכים הללו, הוא כאשר אנחנו לוחצים עליהם, הם מביאים אותנו למקום אחר.
מה שאומר, שלינק יכול:
- לקחת את המשתמש
- למקום אחר בתוך אותו העמוד (קישור עוגן)
- לעמוד אינטרנט אחר באותו האתר
- לעמוד אינטרנט אחר באתר אחר
- להוריד קובץ
- לפתוח תוכנת אי-מייל
- לחייג למספר פלאפון
פתיחה בעמוד חדש או בטאב חדש?
הנושא החם: האם לינק צריך להיפתח בעמוד/טאב חדש או שלא?
מה יותר טוב? אנשי מרקטינג, אנשי SEO ומומחי נגישות מתווכחים על זה שנים.
מנקודת מבט של נגישות, הדבר הכי טוב יהיה לתת למשתמשי קצה את השליטה להחליט מראש מאשר להחליט בשבילם. התנהגות ברירת מחדל של דפדפן היא תמיד מה שהכי צפוי על ידי משתמש קצה.
למרות זאת, זה בסדר גמור לפתוח לינק בעמוד או טאב חדש, כל עוד אתם נותנים את המידע מה הולך לקרות למשתמש קצה לפני שהוא ילחץ על הלינק.
לדוגמה: אתם יכולים להוסיף "נפתח בחלונית חדשה" לטקסט של הלינק.
אישית, משתמש באייקון ???? שמוטמע על כל לינק שנפתח בחלונית חדשה
למעוניינים, קוד CSS פשוט:
a[target=_blank]:after {
content: "????"!important;
white-space: nowrap;
}
כתיבת לינקים
כתיבת לינקים בגוף טקסט, ידוע בתור "אנקור לינק" או "לינק עוגן", זה היסוד לחוויית משתמש טובה באתר אינטרנט.
כלל זהב וקו מנחה יהיה ליצור לינקים בעלי משמעות שמובנים בהיותם עצמם.
לחצו כאן
אתם כנראה יודעים את זה, אבל הטקסט בלינק "לחצו כאן" זה הלינק הכי גרוע שקיים גם מבחינת חוויית משתמש וגם מבחינת נגישות.
נשווה בין שתי דוגמאות:
- לחצו כאן בשביל ללמוד עוד על איך ליצור כתוביות לסרטונים
- לקריאה מעמיקה והסבר איך למנוע ספאם בטפסי וורדפרס
הלינק הראשון הינו פשוט חסר משמעות, צריך לקרוא את כל המשפט בשביל להבין על מה צריך ללחוץ. הלינק השני נותן את התשובה ישירות.
מבקרים באתר יכולים לסרוק את עמודי האינטרנט על סמך מה שהם מחפשים. לינקים מושכים יותר תשומת לב מאשר טקסט, לכן צריך לתת חשיבות לטקסט ולאן הוא מוביל.
דוגמאות שכיחות לעוד לינקים חסרי משמעות: "הורדה", "המשך" וכמובן "כאן".
לינק בטקסט צריך להוות מאין טיזר וקצת "קליקבייט" למשתמש שסורק את הדף.
לינקים לכתובת אי-מייל או למספר פלאפון
לחיצה על "אימייל לינק", דפדפן האינטרנט שלכם יפתח את תוכנת האימייל שבה תוכלו לשלוח ישירות אימייל עם שדה האימייל ממולא מראש. אותו דבר ללינק של מספר פלאפון: לחיצה עליו במכשיר טלפון, תפתח את אפליקציית השיחות לחיוג מהיר למספר פלאפון שעל הלינק.
איך לעשות את זה? בשביל כתובת אימייל, במקום להוסיף לינק לכתובת אינטרנט, נשתמש ב- "mailto:hello@alikz.co.il".
בשביל מספר פלאפון נשתמש ב- "tel:972501234567"
הבעיה מתחילה כשלא כולם רוצים לשלוח מייל או להתקשר ישירות, בשביל שיפור חוויית הגלישה, מומלץ להראות את כתובת המייל או את מספר הטלפון.
בואו נשווה בין שני הדרכים לכתיבת לינק:
- "צרו איתנו קשר באימייל או דרך הטלפון שלנו"
- "צרו איתנו קשר על ידי שליחת אימייל ל:carrots@gmail.com או התקשרו למספר שלנו: 050-1234567"
בדוגמה הראשונה האימייל ומספר הפלאפון מוסתרים. זה מהווה בעיה אם הגולש ירצה ליצור קשר דרך מכשיר אחר שהם משתמשים בו ולא אותו המכשיר שמשתמש לגלישה (דוגמה מהעולם שלנו: אנשים עם טלפון או אינטרנט כשר).
אם נראה את כתובת האימייל ואת מספר הפלאפון, נאפשר למשתמש להעתיק את המספר או המייל על מנת שהם יוכלו ליצור עם איתנו קשר במועד מאוחר יותר שמתאים להם.
לינק לקובץ
איך אתם כותבים לינק לקובץ שנועד להורדה כמו PDF – תפריט למסעדה או דו"ח אקסל?
בואו נשווה בין שני הדרכים לכתיבת לינק לקובץ:
- WebAIM Quick Reference: Web Accessibility Principles.
- WebAIM Quick Reference: Web Accessibility Principles (PDF, 327 Kb).
הלינק הראשון נראה כמו לינק רגיל, אך לחיצה עליו תחיל הורדה של קובץ.
הלינק השני נותן לגולש את המידע שלחיצה על הלינק תחיל הורדה של קובץ ומציין את גודל הקובץ.
לדוגמה: אם הגולש נמצא ברכבת, הוא כנראה ירצה לחכות עם הורדת הקובץ כשהאינטרנט יהיה מהיר יותר.
לינק אמור להוות הבטחה ולא הפתעה.
הטמעת תמונה בתוך לינק
מהי הדרך הטובה ביותר להטמיע תמונה בתוך לינק? בואו נחשוב על השאלות הבאות:
- האם יש טקסט בתוך התמונה?
- האם הטקסט בתוך התמונה קריא גם כאשר עמוד האינטרנט נמצא במצב זום-אין?
- האם זה ברור לאן הלינק מוביל?
- מה אמור להיות הטקסט האלטרנטיבי של התמונה?
במצב רגיל, הטקסט האלטרנטיבי מתאר את מה שהתמונה מראה. למשתמשים כבדי ראייה או עיוורים, קורא המסך יכול להקריא את הטקסט שכתוב על התמונה.
לתמונה שתפקידה היא גם לינק, לעומת זאת, קורא המסך יקרא את הטקסט האלטרנטיבי בתמונה. כנראה שזה לא יהווה הגיון לגולש כבד ראייה.
בואו ניקח דוגמה לתמונת "פריחת עץ הדובדבנים"
בשימוש רגיל, הטקסט האלטרנטיבי לתמונה כזו יהיה: "פריחת עץ הדובדבנים".
אני מבין שזה קצת מסובך, אבל שימו את עצמכם מנקודת מוצא של מי שמקשיב לקורא מסך שמקריא את עמוד האינטרנט.
עיצוב לינקים
מתי נוסיף קו תחתון ללינק?
השאלה מובילה לכמה דיונים, מתי צריך להוסיף ללינק קו תחתון?
מבקר באתר אינטרנט צריך להבדיל בין לינק בטקסט בפסקה לשאר הטקסט בפסקה. שימוש אך ורק בצבעים שונים יכול להוות בעיה למי שעיוור צבעים או בעלי כבדות ראייה. אם התוצאה הסופית היא פספוס קריאה לפעולה, בעל האתר יכול לפספס המרה.
כמובן, שגולש יכול להתאכזב ולנטוש את הדף מכיוון שהוא לא מוצא פתרון לבעיה שהוא מחפש.
הוספת קו תחתון ללינק, זוהי דרך אוניברסלית להציג לינק בתוך טקסט. משתמשים יכולים לזהות את זה ישירות ומומלץ להשתמש בזה בתור קו מנחה ראשון (ראיתם מה עשיתי פה?)
לינקים שמובן שהם לינקים, כמו ניווט בתפריט, לא חייבים להיות עם קו תחתון.
טיפים לעיצוב לינקים
השתמשו בידע של הגולש לשימושכם ותנו תחושה שלינק הוא באמת נראה כמו לינק.
תנו ללינק להיבלט.
אל תנסו להמציא את הגלגל, גם אם זה מה שמגרד לכם בתור מעצבים.
ניסיתם פעם ללחוץ על כפתור הסגירה הנורא קטן להחריד של מודעות משחקים בתוך משחקים בפלאפון? ובמקום זה לחצתם על המודעה והוציא אתכם מחוץ למשחק?
לינק קטן מאוד שגם למי שיש ראיית 6-6 לא יצליח ללחוץ עליו בפעם הראשונה..
דמיינו לכם מה קורה לגולש שיש לו רעד בידיים..
תנו ללינקים שלכם מרווח נשימה בין שאר הלינקים או אלמנטים לחיצים אחרים בעמוד האינטרנט, על מנת שהלינקים יהיו לחיצים בקלות לכולם.
ניגודיות צבעים בטקסט לבין הרקע הינה גורם חשוב. כמו כן בין לינק לטקסט רגיל.
לאור חוקי הנגישות הקיימים בישראל, חובה לתת ניגודיות צבעים בין הטקסט לרקע של 4.5:1, וללינק ניגודיות של לפחות 3:1.
חיפוש בגוגל על ניגודיות צבעים או color contrast analyser ייתן כלים נוחים וחינמיים (ביניהם תוספים לכרום) לחישוב זריז של ניגודיות צבעים.
עיצוב מצב Hover & Focus
המון גולשים באינטרנט, ולא רק כאלו עם מוגבלויות, משתמשים במקלדת לניווט באתרי אינטרנט. עם מקש ה-Tab ניתן לנווט בין אלמנט בעל פוקוס לאלמנט אחר שגם הוא בעל פוקוס, כמו לדוגמה לינקים, כפתורים, שדות למילוי טפסים.
שיטת בדקו זאת בעצמכם יכולה להיות כיפית, ובדיקת ניווט באמצעות מקלדת היא פעולה פשוטה
חשוב לבדוק היכן המקלדת מקבלת פוקוס. דפדפנים בברירת מחדל מוסיפים border מסביב לאלמנטים שיש להם מצב פוקוס. חשוב מאוד לא להסיר את ה- border הזה!
עם זאת, אתם חופשיים לעצב את מצב הפוקוס שמתאים לעיצוב האתר. אתם יכולים להפריד את העיצוב בין מצב פוקוס ומצב הובר. העיצוב יכול להיות אותו דבר כמובן, הכל תלוי בעיצוב שלכם.
Code Links
הסמנטיקה חשובה
על מנת לוודא שהלינק אכן עובד בכל המכשירים, צריך להשתמש באלמנט <a> עם href שמכיל קישור. בדרך הזו כל המכשירים ידעו איך להתייחס ללינק. אינטראקציות עם מקלדות, הובר & פוקוס אפקט, התראות, עיצוב ברירת מחדל ותגובתיות, כל זה עובד בברירת מחדל.
שימו לב:
- הסרת השיוך של
hrefמלינק מסיר את האופציה לקבל פוקוס מהמקלדת על הלינק. - אלמנט
<div>עםon-click eventלא יעבוד כמו שאתה מצפים לו לעבוד עם שימוש במקלדת
נסו את זה ב-codepen או על אתרכם..
לתת שם ללינק
שימוש בתמונה או באייקון בשביל לינק זה נושא שכיח. לינקים לסושיאל מדיה כמעט תמיד הם רק הלוגואים של אותם ערוצי סושיאל, כמו לדוגמה הלוגו של לינקדאין. אם אתם רואים אותו, אתם מבינים ישירות מה הכוונה של הלוגו.
כאשר אתם תלויים בקורא מסך, אתם חייבים שהאייקונים הללו יוקראו לכם בצורה ברורה. קוראי מסך קוראים את עמוד האינטרנט, אז חייב שיהיה בעמוד תוכן שהמסך יוכל לקרוא, בתצורת טקסט: "שם נגיש"
ישנם מספר דרכים להנגיש טקסטים כמו למשל להוסיף "לינקדאין" ללינק. לדוגמה:
- השתמשו בתמונה או אייקון והוסיפו את המילה "לינקדאין" ללינק. זוהי דרך נהדרת גם להראות מה האייקון אומר לאנשים שלא מכירים את פלטפורמת לינקדאין.
- הטמיעו את התמונה בתוך הלינק, לדוגמת הלוגו של לינקדאין, ותתנו לתמונה טקסט אלטרנטיבי של "לינקדאין".
- השתמשו באייקון ותנו ללינק את הטקסט הנגיש בעזרת
aria-label="LinkedIn". ה-aria-labelמחליף את התוכן (או החוסר תוכן) של קורא המסך לגבי אותו אייקון.
בקוד נוכל לראות את זה ככה:
<a href="link-to-linkedin">
<span class="fab fa-linkedin"></span> LinkedIn
</a><a href="link-to-linkedin">
<img src="linkedin-image.svg" alt="LinkedIn">
</a><a href="link-to-linkedin" aria-label="linkedin">
<span class="fab fa-linkedin"></span>
</a>כל האופציות בקוד יוקראו על ידי קורא המסך בתור "לינק לינקדאין".
קישורים פנימיים
קישורים פנימיים (יכולים להיקרא גם קישורים בתוך העמוד או קישורי עוגן) קופצים למקומות שונים בתוך אותו העמוד אינטרנט או בתוך אותו האתר. זה נוח למשתמש, שיכול לעבור בין אזורים שונים בעמוד ולעבור ישירות לאזור או דף שמעניין אותו.
דוגמה קלאסית: תוכן עניינים. (לינק לפוסט שכתבתי על יצירת תוכן עניינים דינמי, רספונסיבי שמותאם למובייל)
הנה קוד לדוגמה:
Link : <a href="#address">הכתובת שלנו</a>
Destination: <h2 id="address">כתובת</h2>ה-href מכוון אל ה-ID אלמנט (שחייב להיות ייחודי לאותו עמוד).
הערה: לא רק בצורה ויזואלית, אך גם המקלדת צריכה להעביר את הפוקוס שלה מהלינק אל האלמנט החדש ביעד החדש. דפדפנים מודרניים עושים את זה בברירת מחדל. דפדפנים ישנים מצריכים שימוש ב-tabindex="-1" באלמנט החדש על מנת לקבל פוקוס מהמקלדת. הדרך הכי טובה לבדוק יעילות שזה אכן עובד היא עם מקלדת אמיתית.
סיכום
לינקים הינם האלמנט החשוב ביותר באתר אינטרנט. וודאו שכל הגולשים באתר יצליחו לזהות בקלות ולהשתמש בכל הלינקים, עם הידיעה לאן כל לינק ייקח אותם ולמה לצפות במידה ויקליקו על הלינק.
מקורות קריאה נוספים:
- מה זה קישור עוגן? SEO למתחילים (כתוב באנגלית) – Yoast
- למה לא כדאי לכם להשתמש ב"לחצו כאן" (כתוב באנגלית) – Smashing Magazine
- בלוג הנגישות של A11y-collective (כתוב באנגלית) והקורסים שלהם!
