מדריך להנגשת תוכן באתרי וורדפרס

הנגשת אתר וורדפרס נעשית בקוד, אבל גם התוכן שמזינים חייב להיות נגיש: כותרת H1 אחת והיררכיית H2-H3 לוגית, טקסט חלופי לכל תמונה מעבירה מסר, קישורים שמתארים את היעד, רשימות וטבלאות מובנות, ניגודיות מספקת, וסרטונים עם כתוביות. המדריך מסביר איך לעשות כל שלב בעורך הבלוקים, לפי ת״י 5568.

כל המידע המופיע בסרטון ההדרכה מופיע גם כטקסט במדריך הזה.

תקציר מנהלים להנגשת תוכן

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

• תוכן הוא באחריותכם: גם אם האתר נגיש ברמת הקוד, הזנת תוכן לא תקינה (כמו תמונות ללא תיאור או כותרות לא מסודרות) עלולה לחשוף אתכם לתביעות.
• היררכיית כותרות: השתמשו בכותרת H1 אחת בלבד לכל עמוד, והקפידו על סדר לוגי (H2, H3) כדי לאפשר ניווט נוח לקוראי מסך.
• טקסט חלופי (Alt Text): חובה להזין תיאור לכל תמונה מעבירה מסר. תמונות קישוטיות בלבד יש להשאיר ללא תיאור (Alt ריק).
• קישורים ברורים: הימנעו מניסוחים כמו "לחץ כאן". תארו בדיוק לאן הקישור מוביל.
• וידאו נגיש: כל סרטון באתר חייב לכלול כתוביות וחלופה טקסטואלית (תקציר) מתחתיו.
• בונוס SEO: הנגשה נכונה של כותרות, תמונות ותקצירי Meta עוזרת לגוגל להבין את התוכן, וזה תומך בקידום האתר.

למי המדריך הזה מיועד

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

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

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

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

מה אפשר לעשות בעצמכם

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

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

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

ההבדל בין עמודים לפוסטים

לפני שמתחילים, חשוב להבין את ההבדל בין עמוד לפוסט:

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

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

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

כותרת עמוד ותקציר מטא

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

• Page Title: חייב להיות משפט ייחודי ומפורט המסביר את מטרת העמוד (לדוגמה: "תקנון רכישה באתר WEB-A").
• Meta Description: תקציר של 2-3 שורות המתאר את תוכן העמוד. השתמשו בתוספים כמו Yoast SEO כדי להזין את המידע הזה בקלות בחלקו התחתון של עורך העמוד.

איך עושים את זה ב-Yoast: גוללים לתיבת Yoast SEO שמתחת לעורך, לוחצים על "Edit snippet" וממלאים את השדות SEO title ו-Meta description. בתצוגה המקדימה רואים איך העמוד ייראה בתוצאות החיפוש.

לא מומלץ	מומלץ
ראשי	הנגשת אתרים לפי תקן 5568 | WEB-A
מאמר חדש	איך מוסיפים טקסט חלופי לתמונה בוורדפרס | WEB-A

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

שימוש נכון בסרגל הכלים

סרגל הכלים בראש העורך אינו מיועד רק לעיצוב; הוא מגדיר את מבנה ה-HTML של האתר.

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

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

טיפ מקצועי: כשמדביקים טקסט מ-Word או מ-Google Docs, העיצוב הישן נכנס לפעמים לתוך הקוד. הדביקו טקסט נקי (Ctrl+Shift+V) ורק אחר כך הגדירו כותרות, רשימות והדגשות עם הכלים של העורך.

היררכיית כותרות וחלוקת מידע

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

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

רמה	תפקיד
H1	הכותרת הראשית. מופיעה פעם אחת בלבד בראש העמוד
H2	כותרות משנה לנושאים המרכזיים
H3	תת-נושאים בתוך פסקאות

הקפידו על סדר היררכי – לעולם אל תקפצו מ-H1 ישירות ל-H3 ללא H2 באמצע.

איך עושים את זה בעורך הבלוקים:

1. הוסיפו בלוק "כותרת" (Heading), או הקלידו ## בתחילת שורה ריקה.
2. בסרגל הבלוק בחרו את הרמה: H2 לנושא ראשי ו-H3 לתת-נושא.
3. בדקו את המבנה בחלון "סקירת מסמך" (Document Overview), בלשונית "מתאר" (Outline). וורדפרס מסמן שם רמות שדילגתם עליהן.

דוגמה למבנה נכון במאמר על מבצע קיץ: H1 "מבצעי קיץ בחנות" > H2 "מבצעים על מוצרי ילדים" > H3 "בגדי ים", H3 "כובעים" > H2 "תנאי המבצע". מבנה לא נכון: H1 > H4 "בגדי ים" (כי הוא נראה קטן ויפה), ואחריו H2 "תנאי המבצע".

טעויות נפוצות:

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

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

הנגשת קישורים: עשו ואל תעשו

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

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

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

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

לא נכון	נכון
לחצו [כאן] להורדת התקנון	[תקנון האתר (קובץ PDF)]
[קראו עוד]	[איך מוסיפים כתוביות לסרטון ביוטיוב]
https://www.example.co.il/page?id=123	[טופס ההרשמה לסדנה]

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

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

כפתורים וקריאות לפעולה נגישים

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

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

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

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

רשימות ממוספרות ורשימות תבליטים

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

• רשימה ממוספרת: כשיש חשיבות לסדר השלבים (לדוגמה: שלבי הרשמה או מתכון). הפריט הראשון חייב להיות מתויג בספרה 1 וכן הלאה.
• רשימת תבליטים (Bullet Points): כשהסדר אינו קריטי אך הנושאים קשורים (לדוגמה: רשימת יתרונות).

דוגמה לרשימה ממוספרת – יצירת תוכן נגיש באתר וורדפרס:

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

דוגמה לרשימת תבליטים – לצורך הנגשת תוכן באתר נבצע את הדברים הבאים:

• טיפול בכותרות.
• הוספת טקסט חלופי לתמונות.
• שימוש תקין ברשימות.

איך עושים את זה בעורך הבלוקים: מוסיפים בלוק "רשימה" (List), או מקלידים בתחילת שורה "-" ורווח לרשימת תבליטים, או "1." ורווח לרשימה ממוספרת. בסרגל הבלוק אפשר להחליף בין שני הסוגים.

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

טבלאות נגישות בעורך הבלוקים

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

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

איך עושים את זה בעורך הבלוקים:

1. הוסיפו בלוק "טבלה" (Table) וקבעו את מספר העמודות והשורות.
2. בהגדרות הבלוק בצד, הפעילו "Header section". כך השורה הראשונה מתויגת ככותרות עמודה.
3. הוסיפו כיתוב (Caption) שמסביר מה מציגה הטבלה.
4. כתבו מתחת לטבלה משפט שמסכם את עיקר המידע שבה.

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

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

הנגשת תמונות וטקסט חלופי

טקסט חלופי (Alt Text) הוא אחד האלמנטים החשובים ביותר בקידום אתרים. הוא מאפשר לגוגל "לקרוא" את התמונה ולהציג אותה בחיפוש התמונות (Google Images). מעבר לזה, כל תמונה שמטרתה להעביר מסר או מידע חייבת לכלול טקסט חלופי שמסביר במדויק, ובצורה שווה ככל האפשר, את המידע שמופיע בה.

• תמונה מעבירה מסר: תיאור של מה רואים בתמונה (לדוגמה: "אלי למבז בהרצאה על נגישות").
• תמונה דקורטיבית: אם התמונה היא לקישוט בלבד, השאירו את השדה ריק.
• תמונה שהיא קישור: התיאור חייב להסביר לאן הקישור מוביל (לדוגמה: "מעבר לחנות מוצרי הנגישות").

שתי דרכים להוסיף טקסט חלופי בוורדפרס:

1. בספריית המדיה: נכנסים ל"מדיה" > "ספרייה", לוחצים על התמונה, וממלאים את השדה "טקסט חלופי" (Alternative Text) שבצד. אפשר גם בזמן העלאת התמונה.
2. בבלוק התמונה: לוחצים על התמונה בעורך, ובהגדרות הבלוק שבצד ממלאים את השדה "טקסט חלופי".

תמונה	טקסט חלופי חלש	טקסט חלופי טוב
צילום מוצר	IMG_4521.jpg	כיסא משרדי ארגונומי בצבע שחור עם משענת רשת
גרף	גרף	גרף עמודות: מספר הפניות לשירות לקוחות עלה בכל רבעון במהלך השנה
לוגו שמוביל לדף הבית	לוגו	WEB-A – חזרה לדף הבית

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

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

בחירת פונטים, גדלים ונגישות ויזואלית

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

• גודל פונט: באתר מגדירים גודל ב-px או ב-rem ולא בנקודות. נקודת פתיחה מקובלת לטקסט רץ היא 16px (1rem). השתדלו לא להשתמש בפונט קטן יותר בטקסט שמכיל מידע, כי אנשים עם לקות ראייה, מרכיבי משקפיים ומבוגרים לא יצליחו לקרוא אותו.
• כותרות: ודאו שהכותרת תמיד גדולה יותר מהטקסט שאחריה. דוגמה מקובלת (לא דרישת תקן): H1 בגודל 2rem, H2 בגודל 1.5rem, H3 בגודל 1.25rem.
• הגדלה: WCAG 2.1 דורש שאפשר יהיה להגדיל את הטקסט עד 200% בלי לאבד תוכן. בדקו את העמוד בזום של 200% בדפדפן.
• סוג פונט: העדיפו פונטים נקיים וקריאים (Sans-Serif).
• הדגשות: השתמשו ב-Bold להדגשת מידע חשוב. אל תשתמשו בקו תחתון להדגשה (זה מטעה וגורם למשתמש לחשוב שמדובר בקישור).

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

צבעים וניגודיות בתוכן האתר

צבע לבדו לא יכול להיות הדרך היחידה להעביר מידע. אם כתבתם "השדות באדום הם חובה", אדם עיוור צבעים לא יבין מה חובה. הוסיפו תמיד מילה או סימן, כמו "(חובה)" או כוכבית עם הסבר.

WCAG 2.1 ברמת AA קובע יחס ניגודיות מינימלי:

מה בודקים	יחס מינימלי
טקסט רגיל	4.5:1
טקסט גדול (24px ומעלה, או 18.66px ומעלה מודגש)	3:1
רכיבים גרפיים וגבולות של שדות וכפתורים	3:1

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

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

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

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

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

אם הטמעתם וידאו באתר האינטרנט, ודאו שהוא כולל:

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

איך עושים את זה:

1. סרטון מ-YouTube: ב-YouTube Studio אפשר ליצור כתוביות אוטומטיות גם בעברית. חשוב לעבור עליהן ולתקן שגיאות, במיוחד בשמות, במונחים מקצועיים ובמספרים.
2. סרטון שהועלה לספריית המדיה: בבלוק "וידאו" (Video) יש אפשרות להוסיף קובץ כתוביות (Text tracks, בפורמט VTT).
3. מתחת לכל סרטון: כתבו פסקה שמסכמת את עיקרי הדברים, כמו שעשינו בראש המדריך הזה.

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

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

מסמכים וקבצי PDF באתר

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

אם חייבים להעלות קובץ:

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

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

טפסים ותפריטים: מה בודקים

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

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

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

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

תוסף נגישות מול הנגשה בקוד

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

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

הצהרת נגישות: מה חשוב לדעת

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

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

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

רשימת בדיקה לפני פרסום

עברו על הרשימה לפני כל פרסום של עמוד או פוסט:

1. לכותרת העמוד ולתקציר המטא יש ניסוח ייחודי שמתאר את התוכן.
2. בגוף אין H1, והכותרות עוברות מ-H2 ל-H3 בלי דילוגים (בדקו ב"מתאר").
3. לכל תמונה מעבירה מסר יש טקסט חלופי, ותמונות דקורטיביות נשארו עם שדה ריק.
4. כל קישור מתאר את היעד, וכל קישור לקובץ מציין את סוג הקובץ.
5. הכפתורים אומרים מה יקרה בלחיצה.
6. הרשימות והטבלאות נבנו בבלוקים המתאימים, ובטבלה מוגדרת שורת כותרת.
7. אין מידע שמועבר רק בצבע, ואין אזהרת ניגודיות בעורך.
8. לכל סרטון יש כתוביות שנבדקו ותקציר טקסטואלי.
9. הקבצים המצורפים נגישים, ואף אחד מהם אינו מסמך סרוק.
10. בדקתם את העמוד בתצוגה מקדימה, גם במובייל וגם בזום של 200%.

נגישות תוכן היא השקעה משתלמת

צריכים עזרה בהנגשת האתר שלכם? חברת WEB-A מתמחה בפתרונות נגישות דיגיטלית ופרטיות ברמה הגבוהה ביותר: בדיקה ידנית מול ת״י 5568, תיקון בקוד, הדרכת צוות התוכן והצהרת נגישות.

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

שאלות נפוצות על הנגשת תוכן

האם תוסף נגישות אוטומטי מנגיש את התוכן שהעליתי?

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

מה ההבדל בין תמונה מעבירה מסר לתמונה דקורטיבית?

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

למה גוגל אוהב אתרים נגישים?

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

האם חובה להוסיף כתוביות לכל סרטון באתר?

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

אפשר להוסיף כתוביות אוטומטיות ביוטיוב?

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

מותר לבחור כותרת לפי העיצוב שלה?

לא. בחירת כותרות צריכה להיעשות לפי חשיבות התוכן ולא לפי הגודל או העיצוב שלהן. אם אתם רוצים לשנות את הנראות של הכותרת, יש לעשות זאת דרך הגדרות ה-CSS או העיצוב של האתר, אך לשמור על תיוג היררכי נכון (H1 -> H2 -> H3) בקוד.

המדריך מספיק, או שצריך הדרכה לצוות?

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