כיצד להנגיש את האתר שלך?

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

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

הערה: מאמר זה אינו עוסק בתקן ספציפי. אם אתה נדרש לעמוד בתקן ספציפי, כגון WCAG 2,0 או סעיף 508 לחוק השיקום הפדרלי בארה"ב, אנא בדוק גם מה דורש תקן ספציפי זה.

חלק 1 מתוך 3: הנגשת האתר לטכנולוגיות חלופיות

לדוגמא, על הסמל להכיל את טקסט האלט "חיפוש", ולא את טקסט האלט "זכוכית מגדלת".

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

1
הוסף טקסט חלופי לכל התמונות הרלוונטיות. היוצאים מן הכלל היחידים הם תמונות שהן רק דקורטיביות, ואינן נחוצות להבנת האתר או אינטראקציה עם תוכנו. טקסט Alt הוא טקסט כאלטרנטיבה לתמונה. קוראי המסך יקראו את טקסט ה- alt במקום את התמונה.
- טקסט Alt צריך להיות פונקציונלי, ולא תיאור של התמונה. לדוגמא, על הסמל להכיל את טקסט האלט "חיפוש", ולא את טקסט האלט "זכוכית מגדלת". אם משתמשים בתמונה על כפתור, תן לה טקסט alt של מה שהלחצן עושה, למשל "הגש".
- אם יש טקסט בתמונה, למשל אם התמונה היא לוגו, יש לכלול את הטקסט בטקסט האלט.
- כלול טקסט חלופי בתמונה באמצעות altהתכונה. הוא משמש כך:
  <img src = "ZXhhbXBsZS5wbmc =" alt = "טקסט Alt שייך לכאן">
- אם התמונה דקורטיבית בלבד, הגדר את טקסט האלט כ- alt="".
2

תאר את התמונה במקום אחר אם היא מורכבת מאוד או שיש בה מידע רב. לדוגמה, אם מדובר בתרשים או בתרשים, תאר את תוכנו מעל או מתחת לתמונה. התייחס לכך שבטקסט האלט, למשל "תרשים הכנסות משקי בית חציוניים באירופה משנת 2000 עד 2017, כמתואר להלן". ניתן גם לקשר למסמך עם כל הערכים כטקסט או כטבלה.
3
שקול להשתמש ב- CSS לתמונות דקורטיביות בלבד. בדרך זו תמונות אלה נעלמות גם אם המשתמש מכבה את CSS.
- ניתן לכלול תמונות רקע באמצעות background-imageתכונת CSS. לדוגמה:
  html {תמונת רקע: url ("example.png"); }
4
השתמש בתגי סמנט html5. HTML5 הוסיף תגים סמנטיים רבים, כלומר תגים המשמשים לתיאור התוכן. תגים אלה מאפשרים לטכנולוגיות כמו קורא מסך או מצב הקורא של חלק מהדפדפנים "להבין" את התוכן ולהציגו בצורה משמעותית.
- אם אתה משתמש בטקסט מודגש ונטוי להדגשה, לא רק לעיצוב, השתמש ב- <strong>ו- <em>. זה נתמך גם בגרסאות קודמות של HTML.
- השתמש <nav>עבור קטעי ניווט. זה מאפשר לקוראי מסך וטכנולוגיות אחרות לזהות חלקים אלה ולהחליט אם להציג אותם או לא.
- השתמש <article>בתוכן הראשי של דף אינטרנט בעל משמעות בפני עצמו, ללא שאר חלקי הדף. לדוגמה, <article>בדרך כלל יש להשתמש בתג לערכי בלוג, מאמרים חדשותיים ופרסומי פורום.
5
השתמש ב- ARIA במידת הצורך. למרות שעדיף להשתמש באלמנטים המקוריים של HTML, לפעמים אין אף אחד זמין למטרה שלך. במקרה כזה, תוכלו להשתמש ב- ARIA (יישומי אינטרנט עשירים נגישים).
- שים לב שאתה לא צריך לשנות את הסמנטיקה של רכיבי ה- HTML אלא אם כן הדבר נחוץ לחלוטין. </ref> לדוגמה, זה:
  <div role = "banner"> <h1> זהו באנר עם כותרת מדרגה ראשונה </ h1> </div>
  עדיף על פני זה:
  <h1 role = "banner"> זהו באנר עם כותרת מדרגה ראשונה </ h1>
6

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

השתמש באלמנטים טופסיים לטפסים. לדוגמא, כדי לבצע כפתור, שימוש buttonאו input, לא aאו divאלמנטים. שני האחרונים מסתמכים על CSS ו- JavaScript כדי להתנהג כמו כפתור, שלא תמיד זמין. כמו כן, עליכם לבצע עבודה נוספת בכדי לגרום למיקוד נכון וליידע את הדפדפן שהוא כפתור. אז קל ונגיש יותר פשוט להשתמש באלמנט buttonאו input.
8
תייג טפסים כהלכה. כדי לשייך תווית לפקד טופס, השתמש <label>. קורא מסך יקרא את התווית הזו כשהמשתמש ינווט לבקרת הטופס, ואילו בדרך כלל מדלגים על טקסט שאינו תווית. דוגמה לתיוג נכון תהיה:
```
<form action = "/ example_action.php"> <input type = "תיבת סימון" id = "agree"> <label for = "agree"> אני מסכים לתנאים ולהגבלות. </ label> <br> <סוג קלט = "submit" value = "Submit"> </form> 
```

קרא גם: איך להגיע לאנשי קשר בגוגל?

חלק 2 מתוך 3: הפיכת האתר לקריא

1
אפשר למשתמשים לשנות סגנון. הדבר חשוב ביותר מכיוון שמשתמשים שונים מעדיפים או זקוקים להתאמות שונות. לדוגמא, אנשים עם ליקויי ראייה מסוימים זקוקים לניגודיות גבוהה כדי לקרוא את הטקסט, בעוד שאנשים עם מוגבלות קוגניטיבית זקוקים לניגודיות נמוכה בכדי לקרוא אותו. זה כולל גודל גופן, ערכת צבעים, ניגודיות, סגנון גופן, ריווח קו ושוליים.
- כבה את כל גליונות הסגנונות ונסה לנווט באתר. זה עדיין צריך להיות קריא ושמיש.
- ספק אפשרויות באתר שלך לשנות את הסגנון, למשל כפתור לשינוי גודל הטקסט או תפריט לבחירת ערכת הצבעים.
2
הגדר מרווח מספיק. הקפד להפוך אותו ליחס לגודל הגופן, כך שאם גודל הגופן ישתנה, הטקסט עדיין קריא.
- גובה השורה (ריווח השורות) צריך להיות לפחות פי 1.5 מגודל הגופן. ב- CSS זה נעשה באופן הבא:
  קו גובה: 1.5;
- המרווח בין הפסקאות צריך להיות לפחות פי 2 מגודל הגופן. ניתן לעשות זאת על ידי הגדרת השוליים התחתונים של הפסקאות:
  שוליים תחתונים: 2em;
- באפשרותך להתאים את ריווח המילים באמצעות word-spacingתכונת CSS וריווח אותיות עם letter-spacing. יותר מדי מכך גם מקשה על קריאת הטקסט, אז השתמשו בשיקול הדעת שלכם. עם זאת, וודא שאם הגודל של ריווח האותיות הוא 0,12em, והמילה מרווחת ל- 0,16em, הטקסט עדיין קריא.
3
יש ניגודיות גבוהה מספיק. יש אנשים שלא יכולים לקרוא את הטקסט אם הניגודיות נמוכה מדי. ישנם כלים אוטומטיים רבים לבדיקת הניגודיות. אתה יכול גם לכבות צבע ולהסתכל באתר בעצמך.
- ספק גם אפשרות ליצור ניגודיות נמוכה, מכיוון שאף אנשים מסוימים קשה לקרוא גם ניגודיות גבוהה מדי.
4

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

בחר גופן מספיק גדול. קירוב טוב הוא להשתמש לפחות ב -12 פיקסלים, ובאופטימלי 16 פיקסלים ואפילו 18 פיקסלים.
6

הימנע מתורים ארוכים. אלה יכולים להקשות על מעקב אחר זרימת הטקסט. השתמש במקסימום 80 תווים (מקסימום 40 אם הטקסט בסינית, יפנית או קוריאנית).
7

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

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

מדריך זה ייתן לך דרכים בהן תוכל לעזור להנגיש את האתר שלך לאחרים.

חלק 3 מתוך 3: הפיכת התוכן שלך לשימוש

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

1

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

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

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

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

כיצד להנגיש את האתר שלך?

צעדים

חלק 1 מתוך 3: הנגשת האתר לטכנולוגיות חלופיות

חלק 2 מתוך 3: הפיכת האתר לקריא

חלק 3 מתוך 3: הפיכת התוכן שלך לשימוש

קרא גם: