כשאנחנו מדברים על נגישות אתרים, חברות רבות חושבות רק על "הימנעות מקנסות" או עמידה בדרישות פורמליות מסוימות. עם זאת, המציאות היא שכל תוסף, טוויק או שינוי קטן בקוד יכולים לעשות את ההבדל. ההבדל בין מישהו שמסוגל להשתמש באתר שלך... לבין פשוט להישאר בחוץ. וזה משפיע על משתמשים אמיתיים, על העסק שלך, על ה-SEO שלך ואפילו על המוניטין שלך.
היום יש כל כך הרבה פתרונות, ווידג'טים וסרגלים צפים שקל ללכת לאיבוד. ישנם תוספי נגישות שבאמת משפרים כל אפליקציה או אתר אינטרנט.חלקם רק מסתירים את הבעיות, בעוד שאחרים עלולים להכניס אתכם לצרות משפטיות אם תסתמכו עליהם כפתרון היחיד שלכם. אנחנו הולכים לטהר את האווירה עם מדריך מקיף ומעשי המגובה בניסיון מעשי מפרויקטים רבים.
מדוע נגישות לאינטרנט אינה אופציונלית (וגם לא רק עניין של חוק)?
נגישות האינטרנט מבוססת על הנחיות WCAG 2.0 ו-2.1מאורגן לארבעה עקרונות: מורגש, ניתן לפעולה, מובן וחזק. כל עיקרון מחולק לקריטריונים להצלחה עם שלוש רמות של התאמה: A (מינימום), AA (מומלץ) ו-AAA (אופטימלי)עמידה בהם אינה רק עניין טכני, זוהי שאלה של זכויות וגם של עסקים.
בספרד, מאז 2002 חוקקו חוקים שונים בנושא נגישות דיגיטלית והוטלו עונשים משמעותיים: קנסות כמו קנס של 30.000 אירו עבור אנדסה או קנס של 90.000 אירו עבור וולינג הם מהווים אזהרה חמורה לכל ארגון. בקנה מידה עולמי, חוק הנגישות לאתרים (ADA) בארה"ב הוביל ליותר מ-4.600 תביעות משפטיות בשנה אחת הקשורות לנגישות אתרים בלבד. אם אתר האינטרנט שלך אינו נגיש, הסיכון המשפטי הוא ממשי.גם כאן וגם בחו"ל.
אבל מעבר לחוק, יש אנשים. ההערכה היא כיום ש... 1 מכל 6 אנשים ברחבי העולם חי עם מוגבלות כלשהיוכ-27% סובלים מבעיות ראייה בדרגות חומרה שונות. כאשר אתר אינו עומד בקריטריונים בסיסיים, הסטטיסטיקה הרסנית: מחקרים של למעלה ממיליון דפי בית זיהו בממוצע של 50 שגיאות נגישות לכל עמודוכ-96% אינם עומדים בתקני WCAG.
הטעויות הנפוצות ביותר הן באמת מרהיבות: ניגודיות צבעים לא מספקת (יותר מ-80% מהאתרים)תמונות ללא תיאורים אמיתיים, קישורים או כפתורים ריקים, טפסים ללא תוויות ודפים ללא תכונות שפה ב- <html>. את כל זה ניתן להימנע באמצעות שיטות עבודה מומלצות בסיסיות ושימוש חכם בתוספים וכלים.
נגישות מתוכננת היטב: מקוד ועד תוספים
באופן אידיאלי, יש לקחת בחשבון את הנגישות. מתחילת הפרויקטעיצוב, פריסה, פיתוח חזית, תוכן... אם בונים עם מבנה סמנטי, ניגודיות נאותה, ניווט במקלדת וטפסים מתויגים היטב, הרבה יותר קל להגיע לרמת AA או AAA בהמשך.
לשם כך, מומלץ לכתוב קוד נקי וניתן לתחזוקהאין לשכפל מאפיינים, יש לסגור תגיות בצורה נכונה, יש להימנע מ-HTML "ידידותי" אך לא סמנטי במיוחד, ולהאציל עיצוב ויזואלי ל-CSS. האתר חייב להיות מותאם למכשירים וטכנולוגיות מסייעות שונות. (קוראי מסך, משקפי מגדלת, קוראי קול, מקלדות חלופיות וכו').
הבעיה היא שבפועל רוב האתרים כבר קיימים, וגוררים איתם תבניות מיושנות, סגנונות בירושה, סקריפטים של צד שלישי ואוסף של "טלאים" שהצטברו. כאן תוספי נגישות הופכים לעזר רב עוצמה.הם לא יהפכו אסון לאתר מושלם, אבל הם יכולים להעלות את הרף משמעותית, לזהות שגיאות ולספק אפשרויות נוספות למבקרים באתר שלכם.
למרות זאת, יש נקודה מרכזית אחת שלא ניתן להעביר לאף תוסף: לחשוב ולסקור עם שכל ישרהיררכיית כותרות נכונה (H1 אחד לכל עמוד), טקסט חלופי שמתאר במדויק את התמונות, תוכן מסודר בצורה הגיונית, קישורים עם טקסט משמעותי וניווט מלא במקלדת. שום כפתור קסם לא יכול להחליף את זה.
מהם בדיוק תוספי נגישות (ואילו הם לא)?
תוסף נגישות הוא, בעצם, תוסף שמשתלב באתר האינטרנט שלך כדי להקל על אנשים עם מוגבלויות שונות או צרכים מיוחדים את השימוש בו.זה יכול לפעול על השכבה החזותית (גופנים, צבעים, ניגודיות), על השכבה המבנית (מעברי תוכן, תגי ARIA, ניווט במקלדת) או על שניהם.
בין הפונקציות הנפוצות ביותר אנו מוצאים תוספים המאפשרים התאמת גודל גופן, ניגודיות וריווחניתן להשבית אנימציות או רקעים מסיחים, להוסיף כתוביות או תמלולים, או אפילו להמיר טקסט לדיבור. ישנם גם כלים שסורקים את האתר לאיתור שגיאות נגישות נפוצות או מוסיפים מילוני מונחים כדי לשפר את הבנת התוכן.
עכשיו, בואו נהיה ברורים לגבי זה: אף תוסף אחד אינו מבטיח עמידה מלאה ב-WCAG או בתקנות חוקיותהם מועילים, לפעמים חזקים מאוד, אבל הם לא מחליפים ביקורת מלאה, וגם לא עיצוב מחדש שנעשה היטב כאשר בסיס הקוד בעייתי.
איך לבחור את תוסף הנגישות הטוב ביותר לאתר שלך?
לפני שאתם מתחילים להתקין תוספים באופן כושל, כדאי לעצור לרגע ו... נתח מה האתר שלך צריך באופן ספציפיאתר אינטרנט תאגידי עם הרבה טקסט אינו זהה לחנות מקוונת מלאה בתמונות מוצרים או פלטפורמת הדרכה עם סרטונים.
- זהה את הצרכים האמיתיים של האתר שלךאם יש לכם הרבה סרטונים, אתם צריכים פתרונות עבור... נגישות שמיעה (כתוביות, תמלולים). אם האתר שלכם מלא בתמונות רלוונטיות, כדאי לכם לחזק את נגישות ויזואלית (טקסט חלופי נכון, ניגודיות, גודל גופן מתכוונן).
- מחקר והשוואה של תוספיםהראשון שמופיע בתוצאות החיפוש אינו מספיק. בדקו מי מפתח אותו, באיזו תדירות הוא מתעדכן, מה אומרות ביקורות משתמשים, ועד כמה הוא תואם למערכת ניהול התוכן שלכם ולתוספים אחרים. שימו לב במיוחד האם הוא תומך בקוראי מסך ובניווט באמצעות מקלדת..
- יש לבצע בדיקה תמיד בסביבה בטוחהלפני הפעלת התוסף לסביבת ייצור, יש להתקין אותו בסביבת בדיקה או בסביבת בייצור. בדוק שזה לא פוגע בעיצוב, שזה לא מאט את הטעינה, ושהוא באמת משפר את הנגישות. באמצעות קוראי מסך כמו NVDAVoiceOver או כלים כמו Axe.
- שמרו על התוספים שלכם מעודכניםנגישות אינה סטטית. תקני WCAG משתנים, פסיקה חדשה מתפתחת, דפדפנים מתעדכנים... עיין ב הגדרות קצה לנוחות ניווט המשתמש. עדכון קבוע של תוספים הוא המפתח לשמירה על נגישות ואבטחה..
תוספי נגישות לוורדפרס שמשפרים כל אתר
לוורדפרס יש את הריכוז הגדול ביותר של תוספי נגישות בשוק. חלקם מתקנים בעיות בסיסיות, אחרים מוסיפים סרגלי כלים למשתמש, ואחרים עדיין מתמקדים בטפסים או בביקורת.בואו נבחן את הרלוונטיים ביותר ומה הם יכולים לתרום.
נגישות WP: הכלי הבסיסי והרב-תכליתי
WP Accessibility הוא אחד הקלאסיקות של מערכת האקולוגית של וורדפרס: חינמי, בשימוש נרחב, ומתמקד בתיקון בעיות נגישות נפוצות מבלי לשנות את התבנית.הוא פותח על ידי ג'ו דולסון והוא משתלב היטב כמעט עם כל תבנית.
לאחר ההתקנה, הוא מוסיף תכונות כגון קישורים לתוכן עם מטרות הניתנות להגדרה, תכונות שפה וכיוון טקסט ב- <html>, קווי מתאר גלויים בפוקוס המקלדת, ביטול התכונה user-scalable=no כדי לאפשר זום במכשירים ניידים ולהסיר tabindex בעייתי.
בנוסף, עזרה עם התמונותמזהה את אלו שאין להם מאפיין altזה מאפשר לך להשתמש בשדה "תיאור" כתיאור ארוך ומחיל תכונות חלופיות בעורך הקלאסי. זה גם מוסיף תגיות לטפסים סטנדרטיים (חיפוש, תגובות) ומשתמש בכותרת הפוסט כדי להעשיר קישורי "קרא עוד".
עבור אלו שמבינים ב-CSS, זה מציע אבחון ספציפי של בעיות בגיליונות סגנון ואפשרויות להכנסת תיקונים מותאמים אישית. בדרך זו, ניתן לכוונן פרטים כמו ניגודיות, מיקוד או מצבי ריחוף מבלי לגעת ישירות בקבצי ערכת הנושא.
נגישות בלחיצה אחת / Ally: סרגל כלים מהיר וקל
אם מה שאתה מחפש הוא סרגל כלים חזותי שהמשתמשים שלך יכולים לשלוט בו מבלי לסבך את חייכם עם הגדרות מתקדמות, One Click Accessibility (ששמה שונה ל-Ally בסביבת Elementor) היא אופציה פופולרית מאוד.
לאחר התקנה מינימלית, הוא מוסיף פאנל שממנו ניתן הגדלה או הקטנה של גודל הגופן, להפעיל ניגודיות גבוהה או ניגודיות שלילית, לבטל רוויה של צבעים, להדגיש קישורים, להסתיר אנימציות או לגשת במהירות למפת האתר. הכל מתוכנן כך שהמשתמש יוכל להתאים את התצוגה לצרכיו..
אחד היתרונות שלו הוא התאימות הרחבה שלו עם קוראי מסך וההשפעה הנמוכה יחסית שלו על הביצועים. בתמורה, זה לא מתקן בעיות קוד או בעיות מבניות עמוקותזוהי יותר שכבת שיפור חזותית ושימושיות מאשר "מתקן" גלובלי.
UserWay: סרגל כלים לנגישות המופעל על ידי בינה מלאכותית עם דגש משפטי
UserWay עשתה לעצמה שם כ- פתרון נגישות עם ווידג'ט הניתן להגדרה ובינה מלאכותיתזה זמין כתוסף עבור וורדפרס, אבל גם כסקריפט עבור CMS ופלטפורמות אחרות.
הווידג'ט שלו מאפשר לך להתאים ניגודיות, גודל טקסט, ניווט במקלדת, שפה, ביטול רוויה, הדגשת קישורים ואפקטים חזותיים אחרים. יתר על כן, הגרסה בתשלום כוללת ניתוח אוטומטי עם בינה מלאכותית שמייצרים טקסט חלופי לתמונות ללא תיאורים ובודקים את התוכן מעת לעת.
מנקודת מבט עסקית, אחד הנקודות המרכזיות שלו הוא תמיכה משפטית ודוחות תאימות WCAG ו-ADAעם זאת, עלינו להיות מציאותיים: ניסיון השוק וכמה תביעות משפטיות אחרונות מוכיחים כי שום חפיפה או שכבה עליונה לא יכולים להבטיח תאימות מוחלטת אם בסיס הקוד אינו נגיש.
לכן, UserWay הגיוני בתור שכבה משלימה בארגונים גדולים או כאלה עם חשיפה משפטית משמעותיתבתנאי שזה משולב עם פיתוח נגיש, סקירות ידניות, ובמידת הצורך, ביקורות מקצועיות.
תוספים נגישים לטפסים: WPForms ו-Formidable Forms
חלק עצום מבעיות הנגישות החמורות מרוכזות בצורות הבאות: שדות ללא תוויות, הודעות שגיאה שלא מגיעות לקורא המסך, קפצ'ות בלתי אפשריות, בוררי תאריכים בלתי נגישים...וכאן עסקים רבים לוקחים סיכון, כי טופס שבור פירושו אובדן לקוחות.
תוספים כמו Forms Formidable ו-WPForms הם התחייבו מאוד לתאימות WCAG. הם משלבים תגי ARIA, מאפשרים ניווט מלא במקלדת, מסמנים בבירור שדות חובה ומציעים מערכות CAPTCHA נגישות או מערכות אנטי-ספאם מסוג honeypot שלא חוסמים משתמשים עם לקויות ראייה.
Formidable Forms נוטה להיות חזקה יותר עבור פרויקטים מורכבים או כאלה עם דרישות מתקדמות, בעוד ש-WPForms מצטיינת בזכות... קלות שימוש למתחיליםבכל מקרה, הם בעלי ברית מצוינים כאשר העדיפות שלך היא זו כל אחד יכול למלא ולשלוח טופס ללא מכשולים.
טקסט לדיבור ותוכן מורגש: GSpeech ודומיו
עבור משתמשים עיוורים, בעלי ראייה ירודה או קשיי קריאה, חיוני שניתן יהיה להתאים את התוכן. שמעתי בבירורלמרות שקוראי מסך מכסים חלק ניכר מהצורך הזה, אתרים רבים בוחרים לשלב ישירות פתרונות TTS (טקסט לדיבור).
דוגמה לכך היא נאום Gאשר ממיר כל טקסט באתר שלך לאודיו ואף מאפשר לשחזר רק את הקטע שהמשתמש מדגיש או זה שמקליד באמצעות מקלדת. תוסף מסוג זה שימושי במיוחד בבלוגים ארוכים, אתרי אינטרנט חינוכיים או דפים מוסדיים שבהם עומס התוכן גבוה.
המפתח בבחירת אחד מהאביזרים הללו הוא לבדוק היטב את איכות קול, תמיכה רב-לשונית והשפעה על ביצועיםפתרון טקסט לדיבור משולב היטב יכול לשפר מאוד את התפיסה; פתרון מיושם בצורה גרועה רק מוסיף רעש.
התאמה אישית ויזואלית מתקדמת: שינוי סגנונות וזום
מעבר לשליטה הרגילה בגודל הגופן, ישנם תוספים המאפשרים למשתמש החלפה בין גיליונות סגנון שונים או ערכות נושא נגישות יותר. זה המצב עם הרחבות כמו WP User Stylesheet Switcher, המציעות וריאציות של צבעי רקע, שילובים בעלי ניגודיות גבוהה או גרסאות אתר עם פחות הסחות דעת חזותיות.
תוספים אלה פועלים בדרך כלל באמצעות רשימות נפתחות או אייקונים שמפעילים גיליון סגנונות כזה או אחר. בעת טעינה מחדש של הדף, האתר מוצג בסגנון שבחרת.תוך כיבוד העדפות המשתמש בעת הגלישה.
מאפיין משותף נוסף הוא ה- זום גלובלי של הממשקלא רק שהטקסט מוגדל, אלא גם תמונות ואלמנטים גרפיים מוגדלים עד 300%, תוך שמירה על מבנה העיצוב. עבור אנשים עם לקות ראייה, זה יכול להיות ההבדל בין עזיבת אתר לשימוש רגיל בו.
מילוני מונחים ותמיכה קוגניטיבית
לא כל מחסומי הנגישות קשורים לראייה או לתנועה. אנשים רבים זקוקים לכך תמיכה קוגניטיבית להבנת טקסטים מורכבים, ז'רגון טכני או מושגים ספציפייםישנם תוספים המאפשרים לך ליצור מילוני מונחים: מונחים המסומנים בקו תחתון, שכאשר לוחצים עליהם, מציגים הסבר פשוט.
פתרון מסוג זה משפר את הבנת התוכן, אחד מעמודי התווך של WCAG. זה שימושי במיוחד באתרים רפואיים, משפטיים, פיננסיים או אקדמיים.היכן ששפה יכולה להיות חומה אם היא אינה מלווה בהגדרות ברורות.
וידאו וביצועים נגישים: WP YouTube Lyte
כאשר מטמיעים סרטונים רבים בדף, מתעוררות שתי בעיות: נגישות וביצועים של השחקניםWP YouTube Lyte תוקף את שני הצדדים.
מצד אחד, זה מאפשר שימוש בנגן המדיה של יוטיוב באמצעות המקלדתזה חיוני למשתמשים שאינם יכולים להשתמש בעכבר. זה גם משתלב היטב עם תגי הנתונים המובנים של גוגל לסרטונים, מה שמועיל לקידום אתרים (SEO).
מצד שני, זה מיישם טעינה עצלנית של סרטוניםהדף טוען רק מודעה קלת משקל עד שהמשתמש לוחץ, מה שמקטין באופן דרסטי את הגודל ההתחלתי ומשפר את זמני הטעינה. אתר מהיר יותר הוא בדרך כלל אתר שמיש יותר לכולם, כולל אנשים עם חיבורים איטיים או מכשירים צנועים.
מעבר לוורדפרס: Prestashop, Shopify וסרגלי כלים מוסדיים
נגישות אינה ייחודית לוורדפרס. מערכות ניהול תוכן (CMS) אחרות הנמצאות בשימוש נרחב במסחר אלקטרוני, כגון פרסטהופ ושופיפיייש להם גם מודולים ואפליקציות ספציפיים לשיפור זה.
מודולי נגישות ב-PrestaShop
ב-Prestashop, פתרונות כמו מודול נגישות או מאפשר נגישות הם מציעים ווידג'טים דומים לאלה שבוורדפרס, עם פקדים לניגודיות, גודל גופן, קריאת מסך וניווט מקלדת.
חלק מהמודולים הללו נמכרים עם תאימות מוצהרת ל-WCAG 2.1 AAאלה כוללים כפתורי נגישות הנראים בחלק העליון של הדפדפן ומערכות לעדכונים שוטפים כדי להתעדכן בשינויים רגולטוריים. שוב, אלה עזרים חשובים, אך הם דורשים את זה ערכת הנושא ובסיס הקוד של החנות חייבים לעמוד בשיטות העבודה המומלצות המינימליות.
אפליקציות נגישות עבור Shopify
אפליקציות כמו Shopify בולטות במערכת האקולוגית נגישות, AudioEye או עוזר נגישותבדרך כלל הם כוללים ווידג'ט המאפשר למשתמש לבחור אפשרויות נגישות מותאמות אישית: ניגודיות, טקסט לדיבור, גודל טקסט, בקרת מקלדת, הדגשת קישורים או סמנים מוגדלים לנראות טובה יותר.
AudioEye, לדוגמה, משלבת סריקה אוטומטית המופעלת על ידי בינה מלאכותית, ניטור רציף והסמכת נגישות כאשר עומדים בתקנים מסוימים. אפליקציות אחרות מתמקדות יותר בחוויית המשתמש הסופי, ומציעות מצבי ניגודיות מרובים, השבתת אנימציה או קיצורי מקלדת.
עבור חנויות מקוונות, שבהן כל חיכוך בתהליך הרכישה הוא קריטי, התוספים האלה יכולים לעשות את כל ההבדל בין האם אדם עם מוגבלות יכול להשלים הזמנה ובין אם לא.
סרגל הכלים "כלי נגישות" באתרי אינטרנט מוסדיים
בתחום המנהל הציבורי, משתמשים לעתים קרובות ברכיבים ספציפיים, כגון סרגל כלים לנגישות המבוסס על WCAG 2.0 ותקנים לאומיים (לדוגמה, סעיף מס' 2/2014 בארגנטינה).
סרגל כלים זה משתלב באופן הדוק עם קוד האתר: אזורים סמנטיים ונקודות עיגון מוגדרים עבור "דלג לתוכן הראשי", "דלג לניווט" או "חזרה למעלה"גיליונות סגנון נפרדים מוכנים עבור צבע מקורי וניגודיות גבוהה, ומופעל זום גלובלי המשפיע על כל התוכן.
התהליך כולל ביקורת נגישות קודמת, עדכון HTML לתמיכה בניווט עם עזרים טכנייםהתאמות CSS כדי לאפשר החלפת פלטות צבעים ותצורות סקריפט שזוכרות העדפות ניגודיות באמצעות קובצי Cookie. מיושם היטב, סרגל זה הוא דוגמה ברורה לאופן שבו תוסף או רכיב הגיוניים רק כאשר האתר כבר עומד בתקני WCAG Level A. והוא משמש כחיזוק, לא כטלאי.
כלי בדיקה ותוספים למפתחים: קצת יותר רחוק
התוספים הגלויים למשתמש הקצה הם רק קצה הקרחון. כדי שיוכלו באמת לשפר כל אפליקציה, יש צורך להסתמך על כלי בדיקה ופיתוח המכוונים לנגישות..
ה-W3C, באמצעות ה- יוזמת נגישות האינטרנט (WAI)היא מתחזקת תיעוד, מדריכי הדרכה ואפילו ספרייה קטנה של רכיבים נגישים שניתן לעשות בהם שימוש חוזר. ברמת סביבת הפיתוח, עורכים כמו VS Code מציעים הרחבות כגון נגישות אתרים, אשר מדגישות הפרות אפשריות בקוד ומסבירות את הסיבה ואת הפתרון המוצע.
לניתוח מעמיק יותר, כלים כגון תובנות נגישות של Ax, Pa11y אוהם משולבים בדפדפן, בצינור CI/CD, או אפילו בתוך בדיקות מסגרות כמו Jestומאפשרים לך להפעיל סוללות בדיקה שמצביעות על שגיאות, מקשרות לתיעוד המתאים ומציינות איזה חלק של WCAG מופר.
ראוי לזכור כי, על פי הניסיון הכללי, רק כ-30% מבעיות הנגישות ניתנות לזיהוי אוטומטית.השאר דורשים בדיקה ידנית: ניווט באמצעות מקלדת בלבד, שימוש בקוראי מסך, הדמיית סוגים שונים של עיוורון צבעים או הפחתת תנועה בהעדפות המערכת (ראו כיצד). הגדר את Windows 11 לנגישות מפורטת יותר).
כלים כמו Chrome או Edge DevTools עוזרים לבדוק את עץ הנגישות של אלמנט, לבדוק ניגודיות, לדמות עיוורון צבעים ולסקור כיצד אנימציות מגיבות כאשר המשתמש מציין שהוא מעדיף להפחית אותן. כל זה משלים את התוספים ומאפשר התוצאה הסופית צריכה להיות שמישה באמת עבור מספר האנשים הגדול ביותר האפשרי.
אם משהו ברור כשבודקים את כל האפשרויות הללו, זה שנגישות אתרים אינה עוסקת בהתקנת תוסף פלא אחד, אלא בשילוב של שיטות עיצוב ופיתוח טובות עם כלי תמיכה, סרגלי נגישות משולבים היטב, טפסים תואמים, בקרות משתמש חזותיות ובדיקות מתמידות. בסופו של דבר, סך ההתאמות הקטנות (מקישור קפיצה פשוט ועד למערכת טקסט לדיבור מתוחכמת או מודול בעל ניגודיות גבוהה) הוא מה שהופך כל אפליקציה למרחב מכיל יותר, נוח יותר וגם תחרותי יותר מבחינת קידום אתרים, מוניטין ועמידה בתקנות. שתפו את המדריך כדי שיותר משתמשים ידעו על הנושא.