דפי אינטרנט משתמשים בקישורים כדי לשלוח מבקרים לתוכן חדש או נוסף. קישורים יכולים להיות טקסט ותמונות. קישורים הם כלי ניווט רבי עוצמה ועליהם להיות בעלי מבנה תקין כדי לספק את החוויה הטובה ביותר.
הקווים המנחים לנגישות תוכן אינטרנט (WCAG) הם דרישות ספציפיות מוגדרות כדי לוודא שתוכן נגיש לכולם. בהתאם לקווים המנחים של WCAG 2.2 AA, קישורים מוכרחים לציין את מטרת הקישור כך שמבקרים יוכלו להחליט אם הם רוצים ללחוץ עליהם. קישורים דורשים טקסט שניתן להבחין בו שמציין למבקרים להיכן הקישור יעביר אותם.
מה המשמעות של טקסט שניתן להבחין בו?
לקישורים יש בדרך כלל שתי פיסות מידע:
- כתובת URL: כתובת אינטרנט שבה הקישור שולח מבקרים כשהם בוחרים בו
- טקסט תצוגה: טקסט גלוי שאומר למבקרים למה עליהם לצפות למצוא אם הם בוחרים את הקישור
קח בחשבון קישור זה עבור שיטות עבודה מומלצות: שיטות עבודה מומלצות עבור קישורים. בקוד המקור של HTML, הקישור לשיטות העבודה המומלצות נראה כך:<a href="#best-practices">Best practices for links</a>
כאשר טקסט התצוגה, או הטקסט שבין תגי <a> חסר, חסר לקישור טקסט שניתן להבחין בו. טקסט שניתן להבחין בו הוא טקסט תצוגה זה המציין למבקרים את מטרת הקישור.
כאשר לקישורים אין טקסט שניתן להבחין בו, זוהי בעיה משנית. תקן בעיות משניות עבור חוויה טובה יותר. קישורים שחסר בהם טקסט או שהטקסט שלהם מעורפל יכולים להפוך את הניווט למבלבל ולהיות מקור לתסכול עבור אנשים בעלי מוגבלויות.
כיצד אנשים עם מוגבלויות משתמשים בקישורים שיוצרים קישור לחלק התחתון של דף
Ally עוזרת לך לזהות מתי חסר טקסט בקישורים ומסבירה כיצד לתקן אותם. Ally מבצעת את הבדיקות הבאות:
- האם קיים טקסט בין תגי <a> של ההיפר-קישור?
- האם הטקסט בין תגי <a> מוסתר?
- האם לתמונות המשמשות כקישורים יש תיאורים חלופיים?
אם הקישור לא עובר את הבדיקות, Ally מסמנת את הקישור כבעיה.
השתמש ב-Ally כדי למצוא קישורים עם טקסט חסר
השתמש בדוח הנגישות של Ally כדי לגלות ולפתור בעיות נגישות באתר שלך. השתמש בקישור שסופק עבור הדוח והיכנס. פתח את הדוח והסתכל על רשימת הבעיות בטבלה בעיות נגישות.
הטבלה 'בעיות נגישות' מופיעה הן בכרטיסייה 'סקירה' והן בכרטיסייה 'תחום'. התחל בכרטיסייה 'תחום' כדי לראות בעיות הספציפיות לתחום.
קישורים שחסר בהם טקסט שניתן להבחין בו מסומנים כבעיה משנית. השתמש בכרטיסייה משני בטבלה בעיות נגישות כדי להציג את הרשימה של בעיות משניות. בחר את הבעיות עם קישורים ללא טקסט שניתן להבחין בו.
אם אתה מתחיל בכרטיסייה סקירה, בחר את הבעיה ולאחר מכן את התחום עם הבעיה.
מתוך רשימת הבעיות בתחום, בחר את מחוון הניקוד לצד פריט עם הבעיה. חלון המשוב של עורך התוכן נפתח.
הצגת הטקסט החסר של קישורים בתצוגה מקדימה
לוח המשוב של Ally מציג לך תצוגה מקדימה של התוכן וכן משוב מפורט ותמיכה שיסייעו לך לפתור את בעיות הנגישות שלך. השתמש בתצוגה המקדימה כדי לראות את הטקסט החסר של הקישורים.
התצוגה המקדימה מדגישה היכן ניתן למצוא בעיות נגישות ספציפיות במסמך. הדגשות מציגות כל מופע של סוג בעיה אחד בכל פעם. לדוגמה, עבור הבעיה של קישורים שחסר בהם טקסט, התצוגה המקדימה מדגישה כל מופע שבו מופיעה בעיה ספציפית זו.
כלי תצוגה מקדימה
השתמש בכלי התצוגה המקדימה כדי לבחון את הבעיות במסמך שלך.
- דפדף בדפי התצוגה המקדימה.
- ראה כמה פעמים מופיעה בעיה ספציפית.
- עבור בין הדגשות הבעיות.
- הסתר או הצג את ההדגשות.
- הגדל או הקטן את תוכן התצוגה המקדימה.
- אם הבעיה נמצאת במסמך מצורף, הורד את הקובץ המקורי.
פעל בהתאם לשלבים המונחים של Ally כדי להוסיף טקסט קישור
Ally יוצאת מנקודת הנחה שיש לך ידע בסיסי ב-HTML ובאופן השימוש ב-Content Management System (CMS). כדי לפעול בהתאם לשלבים המונחים, עליך לדעת כיצד לערוך דף אינטרנט ב-HTML או בקוד המקור ב-CMS שלך.
ביחד עם התצוגה המקדימה, Ally מספקת לך הדרכה שלב-אחר-שלב בנוגע לאופן פתרון הבעיה. Ally מארגנת משוב זה בעץ החלטות. קרא את ההוראות והגב להנחיות. למד מהי הבעיה, מדוע היא חשובה וכיצד לתקן אותה בהתאם.
בחר כיצד לתקן טקסט קישור כדי לפעול בהתאם לשלבים המונחים.
דרכים להוספת טקסט לקישורים
יש יותר מדרך אחת לתקן טקסט קישור בדפי האינטרנט שלך.
- HTML: השלבים המונחים של Ally מדריכים אותך באופן המציאה והתיקון של טקסט קישור ב-HTML. באופן בסיסי, עליך למצוא את דף האינטרנט עם הקישור. ערוך את הדף. בקוד ה-HTML, הוסף טקסט בין תגי <a>. שמור את הדף.
- RTE: לכלי CMS מסוימים יש עורך טקסט עשיר (RTE) שעשוי לספק דרכים ידידותיות למשתמש לתיקון קישורים. מצא את הקישור בדף האינטרנט. בחר את הקישור והשתמש בכלי ה-CMS כדי להוסיף טקסט. שמור את הדף.
בקר ב-w3schools כדי לקבל מידע נוסף אודות HTML ו-CSS
שיטות עבודה מומלצות עבור קישורים
- טקסט קישור צריך להיות בעל משמעות. אמור למבקרים שלך לאן הם עוברים. תאר מה המשתמש יכול לצפות לראות כשהוא בוחר בקישור.
- הימנע משימוש בטקסט כמו "לחץ כאן" או "הצג עוד”. צירופי מילים אלה לא אומרים למבקרים למה עליהם לצפות כשהם בוחרים את הקישור. לטכנולוגיות עזר מסוימות יש כלי שמפרט את הקישורים בדף. לצירופי מילים כאלה לא תהיה משמעות כשמוציאים אותם מהקשר הדף ומציגים אותם ברשימה.
- הימנע מכתובות URL כטקסט הקישור הגלוי. ייתכן שכתובת URL לא תהיה תיאורית. קוראי מסך גם קוראים כל אות של כתובת URL בנפרד, מה שעשוי להיות מתסכל עבור מבקרים אלה.
- טקסט קישור צריך להיות ייחודי. כל קישור אמור להיות ייחודי לקישורים האחרים בדף. חזרה על טקסט קישור עשויה להיות מבלבלת כשמוציאים אותו מהקשר הדף ומציגים אותו בכלי רשימת הקישורים.
- הקישורים אמורים לבלוט באופן חזותי. העובדה שמדובר בקישור צריכה להיות ברורה. אם אינך אוהב את סגנון הקישור, ייתכן שתרצה לעדכן את התבנית.
הבדל קישורים מהטקסט המקיף באופן שלא מסתמך על צבע בלבד. WCAG 2.1 - 1.4.1
מראה הקישור מוגדר בדרך כלל במדריך הסגנון של האתר ויכולים לשקף את המיתוג. לפני שאתה מבצע שינויים, בדוק במדריך הסגנון של האתר שלך ועם מנהל האתר.
- אמור למשתמשים אם הקישור נפתח בחלון חדש. פתיחת קישורים בחלון חדש עשויה להיות מבלבלת. אמור למשתמשים שלך מתי אתה שולח אותם לחלון או לכרטיסייה חדשים.
- אל תשתמש בתמונה כדי לייצג משהו שבאפשרותך ליצור ב-HTML. לדוגמה, אל תשתמש בתמונת לחצן במקום בלחצן ממשי. אל תשתמש בתמונת טבלה במקום בטבלה שנוצרה בקוד HTML של מקור.
כיצד אנשים בעלי מוגבלויות משתמשים בקישורים
קישורים מתאימים שכוללים קישור וטקסט קישור בעל משמעות מאפשרים חוויה טובה יותר לכולם. קישורים המעוצבים בצורה תקינה הם כלי ניווט חזקים, ומאפשרים לדעת בבירור למה לצפות. עם זאת, קישורים מתאימים הם חיוניים עבור מבקרים בעלי לקויות ראייה.
קישורים בעלי טקסט ייחודי ובעל משמעות יכולים להיות ניווט מהיר עבור משתמשים רבים.
- משתמשי קורא מסך לא צריכים להאזין לדף השלם. הם יכולים לבחור להאזין לרשימת קישורים ולקיים איתה אינטראקציה במקום זאת.
- משתמשי זיהוי דיבור מקיימים אינטראקציה עם קישורים על-ידי אמירת הקישור שהם רוצים לבחור בו בקול רם.
הצגת קישורים שמעוצבים כראוי ואינטראקציה איתם עשויות להיות קלות יותר עבור משתמשים רבים.
- משתמשים של מקלדת בלבד, שייתכן שאינם יכולים להשתמש בעכבר, יכולים להשתמש במקלדת שלהם כדי לנווט אל רכיבים בדף כמו קישורים.
- משתמשים עיוורי צבעים עשויים שלא לראות גוון של צבע, אבל יכולים לראות קישור מסומן בקו תחתון.