איך להנגיש אתר וורדפרס? מדריך שלב אחר שלב
וורדפרס היא מערכת ניהול התוכן הפופולרית ביותר בעולם, ומריצה למעלה מ-40% מכלל אתרי האינטרנט. בישראל, אלפי עסקים קטנים ובינוניים משתמשים בוורדפרס לאתר שלהם, ורבים מהם עדיין לא ביצעו את ההנגשה הנדרשת על פי החוק הישראלי. החדשות הטובות הן שהנגשת אתר וורדפרס היא תהליך פשוט יחסית שאפשר לבצע בעצמכם, גם ללא ידע טכני מעמיק. במדריך המעשי הזה נלווה אתכם שלב אחר שלב ונסביר בדיוק מה צריך לעשות.
שלב 1: בדקו את מצב הנגישות הנוכחי של האתר
לפני שמתחילים לתקן, חשוב להבין מה המצב הנוכחי. בדיקה ראשונית תעזור לכם למפות את הבעיות ולתעדף את הפעולות הנדרשות. הנה כמה דרכים פשוטות לבדוק:
בדיקת מקלדת: נסו לגלוש באתר שלכם באמצעות מקלדת בלבד, ללא עכבר. השתמשו במקש Tab כדי לנווט בין אלמנטים, במקש Enter כדי להפעיל קישורים וכפתורים, ובמקש Escape כדי לסגור חלונות קופצים. שימו לב האם אתם מצליחים להגיע לכל המידע ולבצע את כל הפעולות. האם אתם רואים בבירור איפה הפוקוס נמצא בכל רגע? האם יש מקום שבו הפוקוס נעלם או נתקע?
בדיקת הגדלה: הגדילו את האתר ל-200% באמצעות Ctrl וסימן פלוס (במק: Command וסימן פלוס). האם כל התוכן עדיין קריא ושמיש? האם יש טקסט שנחתך או חופף? האם הניווט עדיין עובד כראוי?
כלי בדיקה אוטומטיים: התקינו בדפדפן שלכם את התוסף WAVE (Web Accessibility Evaluation Tool) או את axe DevTools. הריצו את הכלי על כל עמוד עיקרי באתר שלכם וקבלו דוח על הבעיות שזוהו. שימו לב שכלים אלו מזהים רק חלק מהבעיות, ולכן הבדיקה הידנית חשובה במיוחד.
תעדו את כל הממצאים ברשימה מסודרת. זה יעזור לכם לעקוב אחרי ההתקדמות ולוודא שלא שכחתם דבר.
שלב 2: בחרו תבנית וורדפרס נגישה
התבנית (Theme) שבה משתמש האתר שלכם משפיעה באופן ישיר על רמת הנגישות שלו. תבנית שנבנתה ללא מודעות לנגישות תגרום לבעיות שקשה לתקן מבחוץ. לעומת זאת, תבנית שנבנתה עם מודעות לנגישות תספק בסיס מצוין.
אם אתם בשלב בחירת תבנית או שוקלים להחליף תבנית, חפשו תבניות שמסומנות כ-"Accessibility Ready" במאגר התבניות של וורדפרס. תבניות אלו עברו בדיקת נגישות בסיסית על ידי צוות וורדפרס ועומדות בדרישות מינימליות. בין התבניות הנגישות הפופולריות ניתן למצוא את Flavor של Flavor, Flavor Flavor, ותבניות ברירת המחדל של וורדפרס כמו Twenty Twenty-Five.
כשאתם בוחנים תבנית, שימו לב למספר דברים חשובים: האם התפריט נגיש למקלדת? האם יש אפשרות דילוג לתוכן (skip link)? האם הפוקוס מסומן בבירור? האם הניגודיות בין הטקסט לרקע מספקת? האם התבנית תומכת ב-RTL (כתיבה מימין לשמאל) בצורה טובה?
אם אתם כבר משתמשים בתבנית קיימת ולא רוצים להחליף, אל דאגה. רוב בעיות הנגישות ניתנות לתיקון גם בלי להחליף תבנית, ותוסף נגישות כמו מנגיש מוסיף שכבת נגישות על כל תבנית.
שלב 3: התקינו תוסף נגישות לוורדפרס
הצעד היעיל ביותר שאתם יכולים לעשות להנגשת אתר וורדפרס הוא התקנת תוסף נגישות איכותי. תוסף מנגיש תוכנן במיוחד עבור אתרי וורדפרס בעברית ומספק סרגל נגישות מקיף שמכסה חלק גדול מדרישות תקן 5568.
איך להתקין את מנגיש:
- היכנסו לדף ההרשמה של מנגיש וצרו חשבון חינם.
- לאחר ההרשמה, תקבלו קוד הטמעה פשוט.
- בממשק הניהול של וורדפרס, גשו להגדרות התבנית או השתמשו בתוסף הוספת קוד כמו Insert Headers and Footers.
- הדביקו את קוד ההטמעה באזור ה-Header או ה-Footer של האתר.
- שמרו את ההגדרות, ובואלה, סרגל הנגישות מופיע באתר שלכם.
התהליך כולו לוקח כ-5 דקות ולא דורש שום ידע בתכנות. ברגע שהתוסף מותקן, המשתמשים באתר שלכם יוכלו להתאים את חווית הגלישה לצרכיהם, כולל הגדלת טקסט, שינוי ניגודיות, ניווט מקלדת מתקדם, עצירת אנימציות, שינוי גופנים ועוד.
רוצים להנגיש את האתר שלכם עכשיו?
התקינו את תוסף מנגיש בחינם - סרגל נגישות מלא בקליק אחד
התחילו בחינם ←שלב 4: הוסיפו טקסט חלופי לכל התמונות
טקסט חלופי (Alt Text) הוא אחד המרכיבים הבסיסיים ביותר של נגישות, וגם אחד הפשוטים ביותר לתיקון. טקסט חלופי הוא תיאור טקסטואלי שנלווה לכל תמונה באתר ומסביר מה מופיע בה. כשקורא מסך נתקל בתמונה, הוא קורא את הטקסט החלופי למשתמש העיוור. ללא טקסט חלופי, התמונה פשוט לא קיימת עבור משתמשים אלו.
איך להוסיף טקסט חלופי בוורדפרס:
- גשו לספריית המדיה בממשק הניהול של וורדפרס (מדיה, ספרייה).
- לחצו על כל תמונה ותמלאו את שדה "טקסט חלופי" (Alt Text).
- כתבו תיאור קצר ותיאורי של מה שמופיע בתמונה. למשל: "צוות עובדים יושב סביב שולחן ישיבות ודן בפרויקט" במקום "תמונה 1" או "IMG_2345".
- לתמונות דקורטיביות שאינן מוסיפות מידע, כמו קווים מפרידים או צורות גרפיות, השאירו את שדה הטקסט החלופי ריק.
טיפים לכתיבת טקסט חלופי טוב: היו תיאוריים אך קצרים, בדרך כלל 125 תווים מספיקים. תארו את התוכן ולא את העיצוב. אם התמונה מכילה טקסט חשוב, כללו את הטקסט בתיאור. אל תתחילו ב"תמונה של" כי קוראי המסך כבר מכריזים שמדובר בתמונה. התאימו את הרמה של הפירוט להקשר. לוגו של חברה יכול להיות "לוגו חברת אלפא", בעוד שתמונת מוצר צריכה לתאר את המוצר בצורה שתעזור למשתמש להבין מה הוא.
שלב 5: תקנו את מבנה הכותרות
מבנה כותרות נכון הוא חיוני לנגישות ולקידום אתרים כאחד. קוראי מסך מאפשרים למשתמשים לנווט באתר לפי כותרות, ולכן מבנה כותרות נכון הוא כמו תוכן עניינים שמאפשר למשתמשים לדלג ישירות לחלק שמעניין אותם.
הכללים למבנה כותרות נכון:
- כל עמוד צריך כותרת h1 אחת בלבד, שהיא הכותרת הראשית של העמוד.
- אחרי h1, השתמשו ב-h2 עבור כותרות משנה ראשיות.
- אם יש תת-סעיפים תחת h2, השתמשו ב-h3, וכן הלאה.
- אל תדלגו על רמות, למשל אל תעברו מ-h2 ישירות ל-h4.
- אל תשתמשו בכותרות רק בגלל הגודל הוויזואלי שלהן. אם אתם רוצים טקסט גדול שאינו כותרת, השתמשו ב-CSS.
בוורדפרס, אתם יכולים לבחור את רמת הכותרת בעורך הבלוקים (Gutenberg) על ידי לחיצה על בלוק הכותרת ובחירת הרמה המתאימה. בעורך הקלאסי, השתמשו בתפריט הנפתח של הפורמט לבחירת רמת הכותרת.
עברו על כל העמודים והפוסטים באתר ובדקו שהכותרות מאורגנות בצורה היררכית נכונה. זה אולי נראה כמו פרט קטן, אבל עבור משתמשי קוראי מסך זה ההבדל בין אתר שמיש לאתר בלתי שמיש.
שלב 6: הנגישו את הטפסים באתר
טפסים הם אחד האלמנטים הבעייתיים ביותר מבחינת נגישות, ורוב אתרי וורדפרס כוללים לפחות טופס יצירת קשר. הנה מה שצריך לבדוק ולתקן:
תוויות (Labels): כל שדה בטופס חייב להיות מקושר לתווית ברורה שמסבירה מה צריך למלא. ברוב תוספי הטפסים של וורדפרס, כמו Contact Form 7 או WPForms, יש אפשרות להוסיף תוויות לכל שדה. ודאו שהתוויות מוצגות ולא מוסתרות, ושהן מקושרות לשדות הנכונים.
הודעות שגיאה: כשהמשתמש עושה שגיאה בטופס, למשל שוכח למלא שדה חובה, הודעת השגיאה צריכה להיות ברורה ומדויקת. "אנא מלאו את שדה האימייל" עדיף על "שגיאה". בנוסף, הודעת השגיאה צריכה להופיע ליד השדה הבעייתי ולהיות מקושרת אליו באמצעות ARIA.
שדות חובה: שדות חובה צריכים להיות מסומנים באופן ברור, לא רק בצבע אדום או בכוכבית ויזואלית, אלא גם עם תגית aria-required="true" או required בקוד. רוב תוספי הטפסים המודרניים מטפלים בזה אוטומטית, אבל כדאי לוודא.
נגישות מקלדת: ודאו שניתן למלא את כל הטופס ולשלוח אותו באמצעות מקלדת בלבד. נסו זאת בעצמכם: התחילו בשדה הראשון ונווטו עם Tab דרך כל השדות עד לכפתור השליחה.
שלב 7: בדקו את האתר עם קורא מסך
הבדיקה האמיתית של נגישות היא שימוש בקורא מסך. קורא מסך הוא תוכנה שקוראת בקול את תוכן המסך ומאפשרת לאנשים עיוורים לגלוש באינטרנט. גם אם אתם לא מומחים בשימוש בקוראי מסך, ניסיון בסיסי יכול לחשוף בעיות שכלים אוטומטיים מפספסים.
קוראי מסך חינמיים שתוכלו לנסות:
- NVDA: קורא מסך חינמי ופופולרי ל-Windows. הורידו אותו מהאתר הרשמי והתקינו. הפעילו אותו וגלשו באתר שלכם. שימו לב האם כל התוכן נקרא, האם הניווט הגיוני, והאם אתם מצליחים להבין מה קורה באתר בלי לראות אותו.
- VoiceOver: מובנה בכל מחשב מק ומכשיר אייפון. הפעילו אותו ב-Command+F5 (במק) ונווטו באתר.
- קורא המסך של Chrome: הפעילו את תוסף ChromeVox בדפדפן Chrome לחוויית קורא מסך בסיסית.
כשאתם בודקים עם קורא מסך, שימו לב לכמה דברים: האם הכותרות נקראות ברמה הנכונה? האם התמונות מתוארות בצורה מובנת? האם הקישורים ברורים מחוץ להקשר, כלומר האם "לחצו כאן" הוא טקסט הקישור או משהו תיאורי יותר? האם הטפסים שמישים? האם תפריט הניווט עובד כמו שצריך?
שלב 8: הוסיפו הצהרת נגישות
הצהרת נגישות היא עמוד חובה בכל אתר שנדרש להיות נגיש. צרו עמוד חדש בוורדפרס וקראו לו "הצהרת נגישות". ההצהרה צריכה לכלול מספר פרטים חשובים: פירוט ההתאמות שביצעתם באתר, הצהרה על המחויבות שלכם לנגישות, ציון התקן שהאתר עומד בו, תאריך עדכון ההצהרה, ודרכי יצירת קשר לדיווח על בעיות נגישות. ניתן לראות דוגמה של הצהרת נגישות תקינה באתר שלנו.
הוסיפו קישור להצהרת הנגישות בתפריט התחתון (Footer) של האתר, כך שהיא תהיה נגישה מכל עמוד. ברוב התבניות של וורדפרס, תוכלו להוסיף את הקישור דרך מנהל התפריטים בהגדרות מראה ותפריטים.
תחזוקת נגישות שוטפת
הנגשת אתר אינה פרויקט חד-פעמי. כל פעם שאתם מוסיפים תוכן חדש לאתר, צריך לוודא שהוא נגיש. הנה רשימת בדיקה קצרה לשימוש שוטף:
- בכל פוסט חדש, ודאו שיש טקסט חלופי לכל תמונה.
- בכל עמוד חדש, ודאו שמבנה הכותרות נכון.
- בכל סרטון חדש, ודאו שיש כתוביות.
- בכל טופס חדש, ודאו שכל השדות מתויגים.
- עדכנו את תוסף הנגישות לגרסה האחרונה.
- בצעו בדיקת מקלדת פעם בחודש.
- עדכנו את הצהרת הנגישות בכל שינוי משמעותי.
תוסף מנגיש מקל על התחזוקה השוטפת כי הוא מתעדכן אוטומטית ומספק שכבת נגישות שעובדת על כל תוכן חדש. אבל האחריות הבסיסית ליצירת תוכן נגיש, כמו טקסט חלופי וכותרות נכונות, נשארת עליכם.
סיכום: הנגשת וורדפרס היא קלה יותר ממה שחשבתם
הנגשת אתר וורדפרס לא דורשת מומחיות טכנית גבוהה או תקציבים גדולים. עם השלבים שתיארנו במדריך הזה, אתם יכולים להביא את האתר שלכם לרמת נגישות טובה תוך מספר שעות עבודה. הצעד הראשון והחשוב ביותר הוא התקנת תוסף נגישות, ואחר כך טיפול בפרטים כמו טקסט חלופי ומבנה כותרות. למידע על עלויות הנגשת אתרים, קראו את המדריך המקיף שלנו.
אל תדחו את ההנגשה ליום אחר. הירשמו עכשיו לתוסף מנגיש בחינם והתחילו להנגיש את האתר שלכם עוד היום. ההתקנה לוקחת 5 דקות, ומהרגע שהתוסף פעיל, האתר שלכם כבר נגיש יותר לכל המשתמשים. שילבו את זה עם הצעדים הנוספים שתיארנו כאן ותקבלו אתר שעומד בדרישות החוק, נגיש לכולם, ואפילו מקבל דירוג טוב יותר בגוגל.