רשימת נגישות לאינטרנט

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


Contents

למה אכפת לך מ נגישות?

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

  • בשטחים רבים, כמו ארה”ב, האיחוד האירופי, בריטניה, ישראל ויפן, זו דרישה חוקית לא להפלות אנשים בגלל מוגבלותם. בארצות הברית בשנה שעברה, הוגשו 2,235 תביעות חדשות של אתר ADA בבית המשפט הפדרלי. זה אחד לשעה.
  • אתרים נגישים נוטים להיות מקודדים טוב יותר, חזקים יותר ומדרגים היטב את מנועי החיפוש.
  • אתרים נגישים נוטים להיות שמיש יותר למבקרים שאינם מוגבלים, מה שמוביל לסיפוק וגיור גדולים יותר.
  • אתרים בלתי נגישים רעים לעסקים. בשנת 2019, א סקר בבריטניה מצא כי יותר מ -4 מיליון אנשים נטשו אתר קמעונאתי בגלל מחסומי הנגישות שהם מצאו. העסק האבוד הזה, ‘הלחץ הלחץ’ ‘, היה 17.1 מיליארד ליש”ט. זה מיליארד. בבריטניה בלבד.
  • זה עסק רע לפנות מרצון לקוחות פוטנציאליים.

התקנים המשותפים והבעיות

למזלנו, ל- W3C (הגוף שמייצר רבים מהסטנדרטים עליהם מסתמך הרשת) יש תקן כיצד להנגיש אתרים. זה נקרא הנחיות בנושא נגישות לתוכן באינטרנט (WCAG). ישנן שלוש רמות התאמה (A, AA, AAA) כאשר ‘A’ היא רמת הנגישות הנמוכה ביותר. אני ממליץ לך לכוון לדרגת AA.

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

בסקר ה- Click-Away Pound נשאלו הנשאלים עם מוגבלות מהם הגושים העיקריים להשלמת הרכישות. להלן המחסומים המובילים (הותרו תשובות מרובות):

  1. דפים עמוסים עם יותר מדי תוכן – 66%
  2. בדיקות reCAPTCHA – 59%
  3. קריאות לקויה (ניגודיות, פריסת טקסט) 56%
  4. הסחת הדעת של תמונות וגרפיקה נעים – 53%
  5. מידע קישור לקוי – 59% (77% למשתמשים קוראי מסך)
  6. מילוי טפסים 56%

כיצד לשפר את נגישות האתר

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

1) יותר מדי תוכן

בקצרה: לחלק טקסט לחלקים עם כותרות ורשימות תבליטים. השתמש בשפה פשוטה.

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

הספר האחרון הכתיבה מעצבת מציע

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

לכן:

  • שיהיה רק ​​אחד

    על דף.

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

    , וודא שקודם לו מקדם

    .

  • השתמש ברשימות תבליטים (כמו זה!) המסומנות כראוי ב- HTML כ-
      ,

    • . קוראי המסכים יודיעו “רשימה של 10 פריטים” (ויאפשרו למשתמש לקפוץ מעליהם).

    השתמש באנגלית רגילה

    בנקים של מונזו מדריך “נימת הקול שלנו” מסביר את חשיבות השפה הפשוטה:

    בשנת 2010 ערך עורך הדין האמריקני שון פלמר ניסוי. הוא ביקש מ- 800 שופטי בתי משפט מעגליים להתמודד עם טיעון “משפטי” מסורתי, או טיעון במה שכינה “אנגלית רגילה”..

    השופטים העדיפו באופן גורף את הגרסה האנגלית הפשוטה (66% עד 34%), והעדפה זו לא הייתה חשובה לגילם או לרקעם.

    הערות Flammer (PDF) של הגרסה האנגלית הפשוטה:

    זה קצר יותר כמעט בעמוד, ולכן ברור שהוא מבטל משפטים ומילים מיותרים. משפטים בממוצע הם 17.8 מילים, לעומת 25.2 מילים.

    הוא מסכם:

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

    2) ReCAPTCHA

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

    המשיבים דיברו לרוב על זקן גרסת ReCAPTCHA:

    גרסאות reCAPTCHA עם טקסט מתנדנד שעליך להקליד מחדש

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

    סגנון האותיות הנדנדה של reCAPTCHA מופעל כעת. הרבה יותר נפוץ לראות גלגול חדש יותר שנקרא “No CAPTCHA reCAPTCHA” (הידוע גם בשם “אני לא רובוט “תיבת הצ’ק) המחייב את המשתמש לסמן תיבה המאשרת שהוא לא רובוט ואשר משתמש בוודו סודי כדי להבקיע את המשתמש. אם הם עוברים, לא נדרשת אינטראקציה נוספת. עם זאת, אם הם נכשלים, יוצג אתגר נוסף:

    צילום מסך חלקי של קופצ'ה הדורש מהמשתמש לחץ על כל המשבצות המציגות תפוזים

    זכור כי סוג ה- CAPTCHA הדורש ממשתמש ללחוץ על כל המשבצות עם (נגיד) שלט רחוב אינו בהכרח בינלאומי. כמו שכותב טרנס עדן, CAPTCHAs לא מוכיחים שאתה אנושי – הם מוכיחים שאתה אמריקאי.

    הצורה הנגישה ביותר של reCAPTCHA היא reCAPTCHA v3 שאינה מצריכה אינטראקציה עם משתמשים, אך זקוקה לך לעשות יותר עבודה כדי להתמודד עם ביקורים שנכשלים במבחן:

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

    3) קריאות לקויה

    בקצרה: ודא שלטקסט יש ניגודיות נאותה, קריא ואינו מוצדק.

    • הבטיחו ניגודיות נאותה. אחד חוסמי הגישה הנפוצים באינטרנט הוא ניגוד לקוי בין טקסט לרקע. ההנחיות W3C דורשות יחס ניגודיות של 4.5: 1 לפחות, למעט טקסט בקנה מידה גדול ותמונות של טקסט בקנה מידה גדול שאמורות להיות בעלות ניגודיות של לפחות 3: 1 (סמלי לוגו וטקסט ‘מקרי’ פטורים). ישנם כלים רבים שיכולים למדוד יחסי ניגודיות עבורך; החביב האישי שלי הוא המצוין של עדה רוז יישומון ניגודיות, המהווה סימנייה של דפדפן שימושית המדגישה אזורים של ניגודיות לא מספקים בדף שלך.
    • אין לך כותרות של הון מלא. ישנן עדויות שקשה יותר לקרוא אותן כיוון שאותיות גדולות בגובה זהה, ולכן איננו יכולים לזהות את הצורה של מילים נפוצות. בנוסף, חלק מקוראי המסכים יתוארו קבוצות אותיות גדולות כאילו היו קיצורים (כמו BBC, DOJ וכו ‘). אם אתה חייב להיות בעל כל כותרות ההון, כתוב אותן במקרה רגיל ב- HTML שלך והפוך אותן באמצעות CSS שינוי טקסט: אותיות גדולות.
    • יישור טקסט שמאלי. (עבור דפים בשפות מימין לשמאל כמו ערבית או עברית, יישור טקסט לימין.) אל תצדיק זאת, מכיוון שהדבר מקשה על אנשים עם דיסלקציה לקרוא. ה מדריך הסגנון של איגוד הדיסלקסיה הבריטי מציע גם

      השתמש בגופנים של sans serif, כמו Arial ו- Comic Sans, מכיוון שהאותיות עשויות להראות פחות צפופות. אלטרנטיבות כוללות ורדנה, טהומה, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) הסחת תמונות וגרפיקה

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

    משיב אחד לסקר Click-Away פאונד כתב,

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

    הרמה הבסיסית ביותר של WCAG דורשת “לכל מידע שזז, מצמוץ או גלילה ש (1) יתחיל אוטומטית, (2) נמשך יותר מחמש שניות, ו- (3) מוצג במקביל לתוכן אחר, יש מנגנון עבור המשתמש להשהות, לעצור או להסתיר אותו אלא אם התנועה, המהבהב או הגלילה הם חלק מפעילות שבה היא חיונית “..

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

    כבד את בחירת המשתמש להנפשות

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

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

    @media (מעדיף תנועה מופחתת: אין עדיפות) {
    כפתור {
    / * מסגרות מפתח 'רוטט' מוגדרות במקום אחר * /
    אנימציה: רטט 0.3 ש 'לינארי אינסופי שניהם;
    }
    }

    אם אתה מחפש להוסיף אתר חדש הכולל כללי אנימציה רבים, הדברים הבאים עשויים להופיע עצור את כל הנפשות CSS שהוכרזו בעבר:

    @media (מעדיף תנועה מופחתת: להפחית) {
    *,
    *::לפני,
    *::לאחר {
    משך האנימציה: 0.001 ש! חשוב;
    משך מעבר: 0.001 ש '! חשוב;
    }
    }

    בנושא כיבוד העדפות מערכת ההפעלה של המשתמש, מומלץ לשקול עיצוב האתר שלך למצב חשוך.

    5) מידע על קישור לקוי

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

    אחד הגורמים העיקריים לקישורים לקויים הוא לרוב קופירייטינג לקוי. מרבית קוראי המסכים מאפשרים למשתמש לראות במהירות רשימת קישורים בעמוד (בקורא המסך המסחרי הנפוץ ביותר, JAWS, קיצור המקשים הוא Ins + F7; קורא מסך NVDA בחינם, אותו קיצור מקשים מציג רשימת אלמנטים המפרטת קישורי עמודים, כותרות וציוני דרך).

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

    הנה דוגמא טובה מה- אתר ג’ומלה:

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

    טקסט הקישור הגלוי הוא פשוט “קרא עוד”, אך ג’ומלה משתמשת תווית אריה תכונות שהופכות כל אחת לייחודית לטכנולוגיה מסייעת:

    קרא עוד
    
    קרא עוד

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

    פתק: עצה רעה שעוד אני רואה באתרים ישנים היא להוסיף טקסט מסביר על קישורים המשתמשים ב- כותרת תכונה:

    קרא עוד>

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

    קישורים צריכים להיראות כמו קישורים

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

    א: רחף, א: פוקוס {קישוט טקסט: קו תחתון;}

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

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

    ספר לאנשים אם קישור פותח כרטיסייה / דף חדש

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

    ספר לאנשים אם הקישור לקובץ

    אם קישור לקובץ (לדוגמה, PDF או וידאו), ספר למשתמש בטקסט הקישור. אל תסתיר את זה בפנים תווית אריה, מכיוון שהדבר יכול להועיל למשתמשים רבים רואים (מכשירים ניידים מסוימים לא יכולים לפתוח קובץ .docx, למשל). אם מדובר בקובץ גדול, שקול להתריע בפני המשתמש בגודל המשוער; יתכן שהם לא ירצו להוריד קובץ וידאו גדול מעל 3G.

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

    דוח שנתי (PDF, 240 מגהבייט)

    6) שגיאת עיצוב נוספת: הסרת טבעת המיקוד

    בקצרה: וודא שמשתמש במקלדת יוכל תמיד לראות היכן הם ממוקדים.

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

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

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

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

    כפתור: מיקוד {/ * כמה סגנונות מיקוד כפתורים מרגשים * /}
    כפתור: מיקוד: לא (: גלוי מיקוד) {
    / * בטל את כל סגנונות הכפתורים הממוקדים לעיל
    אם הכפתור ממוקד, אך הדפדפן לא היה רגיל
    הצג סגנונות פוקוס ברירת מחדל * /
    }
    כפתור: גלוי מיקוד {/ * כמה אפילו * יותר * סגנונות מיקוד כפתורים מרגשים * /}

    7) מילוי טפסים

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

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

    מילוי אוטומטי הוא החבר שלך

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

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

    תן שדות טופס להראות כמו שדות טופס

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

    קלט בעיצוב חומרי ישן, עם קו אופקי ולא קופסא מלבנית

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

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

    אם אתה שוקל לאמץ את ספריית ממשק המשתמש המלאי של Google לעיצוב חומרים, קרא הפסק להשתמש בשדות טקסט בעיצוב חומרים! מאת מטסוקו פרידלנד כדי לראות אם הוא עונה על צרכיך.

    תייג את כל שדות הטופס

    יש לתייג את כל שדות הטופס (כניסות טקסט, תיבות סימון, לחצני רדיו, סליידרים וכו ‘). הדרך הטובה ביותר לעשות זאת היא להשתמש ב- HTML ; כפי שאומר WCAG, “פקדי HTML סטנדרטיים כבר עומדים בקריטריון הצלחה זה כאשר משתמשים בהם לפי המפרט”..

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

    השוואה בין תווית מזויפת לעומת אמיתית

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

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

    
    

    הסתרת תוויות

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

    שדה קלט, עם כפתור שכותרתו 'חיפוש' לאחר מכן

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

    
    

    היינו יכולים להשתמש תווית אריה (שפגשנו קודם כשדיברנו על קישורים):


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

    השגיאות הנפוצות ביותר במיליוני דפי הבית הראשונים

    בדקנו את המחסומים המובילים באתרי מסחר אלקטרוני כפי שדיווחו על ידי משתמשים עם סוג כלשהו של ליקוי. כעת נסתכל על מערך אתרים הרבה יותר רחב – דפי הבית של 1,000,000 אתרי האינטרנט המובילים, נותח באופן אוטומטי על ידי WebAIM באוגוסט 2019. 98% מהדפים שניתחו עברו לפחות שגיאה אחת. השגיאות הנפוצות ביותר הן

    1. טקסט בעל ניגודיות נמוכה (86.1%)
    2. חסר טקסט חלופי לתמונות (67.9%)
    3. קישורים ריקים (58.9%)
    4. תוויות קלט לטופס חסרות (53.2%)
    5. שפת מסמך חסרה (30.5%)

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

    8) ספק חלופות טקסט לכל התמונות, הווידיאו והשמע

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

    כל חייב להיות בעל טקסט חלופי (“טקסט alt”) שיכול להיות מועבר למבקרים עם לקויות ראייה או כאלה עם תוכניות נתונים ברוחב פס / יקר נמוכים אשר כיבו תמונות בדפדפיהם. זה כולל תמונות טקסט.

    להלן הכללים הבסיסיים:

    • אם התמונה דקורטיבית גרידא, עליו להיות בעל טקסט alt ריק: alt = "". (אבל תמונות דקורטיביות גרידא צריכות להיות ב- CSS, בכל מקרה.)
    • אם תמונה מתוארת בטקסט גוף, עליה להיות בטקסט alt ריק (alt = ""), כדי למנוע חזרה. אבל היזהר אם זה ב
      – ראה איך אתה מגלה? לעוד.
    • אם תמונה היא התוכן היחיד של קישור (לדוגמה, ניתן ללחוץ על הלוגו של הארגון שלך כדי לעבור לדף הבית) הטקסט החלופי אמור לתאר את יעד הקישור. לדוגמה, alt = "דף הבית".
    • אל תשתמש בגופנים של אייקונים; הם יכולים להיות ממש רעים עבור אנשים דיסלקטים. אם אתה כן משתמש בהם, המר אותם ל- SVG.

    טקסט חלופי של וידאו ואודיו

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

    9) הוסף שפת מסמך תקינה

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

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

    קל לפתור זאת על ידי הוספת מאפיין lang לרכיב ה- HTML שלך:

    ה- “en” אומר לקורא המסך (או תוכנת התרגום) כי דף זה באנגלית. “Es” הוא ספרדי, “fr” הוא צרפתי וכן הלאה. ברוב השפות, תגית השפה די קלה לקביעה. ל- W3C יש מדריך ל בחירת תג שפה.

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

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

    10) עזור למבקרים להתמצא בתוכן שלך

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

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

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

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

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

      ב סקר משתמשי קוראי מסך, WebAIM מצא כי 26% ממשתמשי קוראי המסכים לעתים קרובות או תמיד משתמשים בציוני דרך אלה בעת ניווט בדף.

      בנוסף, גלישת חלקי תוכן נפרדים ב-

      עוזר ל- WatchOS של אפל להציג תוכן בצורה אופטימלית. ראה את המאמר שלי הערך המעשי של HTML סמנטי לקבלת מידע נוסף על זה.

      11) השתמש כהלכה ב- HTML

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

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

      עדיף על

      מכיוון שהוא מאפשר למשתמשים בקוראי מסך לקפוץ היישר לתוכן החשוב תוך שהם לא פולשניים לחלוטין לאלה שאינם משתמשים בקורא מסך..

      דוגמא נוספת היא שימוש ב-

Adblock
detector