CMS: שיטות הנגישות המומלצות

11 דקות

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

שיטות מומלצות לשימוש בטקסט חלופי (alt text) ב-CMS

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

מומלץ ליצור שדה טקסט באוסף ה-CMS שלכם שישמש כטקסט חלופי עבור כל פריט מדיה. כדי לשמור על סדר באוסף, מקמו את השדה הזה ליד שדה המדיה שהוא מייצג ובחרו את השם שלו בבירור, למשל "Alt text [שם תמונה/גלריה]".

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

עבור אלמנטים של וידאו, מאפיין הטקסט החלופי נקרא Video description בחלונית החיבור של מערך הנתונים. עבור תמונות או צורות וקטוריות, השתמשו באפשרות Alt text connects to (טקסט מתחבר אל ). עבור תמונות רקע במקטעים, סטריפים, עמודות או פריטים ברפיטר (Wix Editor בלבד), השתמשו ב- Background alt text connects to.

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

לתמונות לא דקורטיביות

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

כשאתם מחברים את התמונה ב-editor למערך הנתונים (dataset), הקליקו על השדה Alt text connects to (טקסט חלופי מתחבר אל) ובחרו את שדה הטקסט החלופי שיצרתם. זה יאפשר לקוראי המסך לתאר את התמונה ואת התכלית שלה, וכך האתר שלכם יהיה מכליל יותר ונגיש לכולם.

צילום מסך של חיבור הטקסט החלופי של תמונה לשדה באוסף ה-CMS.

לתמונות דקורטיביות

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

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

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

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

שימוש בביטויים כדי ליצור טקסט חלופי דינמי:

חברו את התמונה הרלוונטית למערך הנתונים שמתחבר לאוסף שלכם.
הקליקו על התפריט הנפתח Alt text connects to (טקסט חלופי מתחבר אל) בחלונית Connect image (חיבור תמונה) ובחרו באפשרות Expression (ביטוי).

צילום מסך של חיבור התפריט הנפתח Alt text connects to לביטויים.

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

1CONCAT‎("לפרטים נוספים על",title)

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

לגלריות שמחוברות לשדות מסוג 'Image'

בגלריות שמתחברות לשדות מסוג 'Image', חשוב להוסיף טקסט חלופי לכל תמונה. איך עושים את זה? יוצרים שדה נפרד מסוג 'Text' באוסף ה-CMS, שמיועד ספציפית לטקסט החלופי של התמונות. כשמחברים את הגלריה למערך הנתונים, צריך לחבר את התפריט הנפתח Alt texts connect to (טקסטים חלופיים מתחברים אל) לשדה הטקסט החלופי המתאים ב-CMS. כך קוראי המסך יוכלו להקריא את התיאורים המילוליים של התמונות מהגלריה, והנגישות של האתר תשתפר.

לפרטים נוספים על חיבור גלריות לפריטים באוסף CMS.

לגלריות שמחוברות לשדות מסוג 'Media gallery' (גלריית מדיה)

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

לפרטים נוספים על חיבור גלריות לשדות מסוג 'Media gallery'.

שמות נגישים לכפתורים

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

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

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

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

1CONCAT("למידע נוסף על", title)‎

(רלוונטי רק ל-Studio Editor) הוספת אלמנטים למקטעים נפרדים באמצעות כפתורי 'טעינת פריטים נוספים' (Load More)

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

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

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

לפרטים נוספים על הוספת כפתור 'טעינת פריטים נוספים':

(רלוונטי רק לעמודים סטטיים) הוספת כפתורי 'הפריט הבא/הקודם' לקונטיינרים

בעמודים סטטיים, אם יש כפתורי 'הפריט הבא/הקודם' שמשנים את התוכן של אלמנטים שמחוברים ל-CMS, צריך לחבר את האלמנטים שמציגים את התוכן לקונטיינר אחד משותף. אחר כך, הגדירו את מאפייני ה-ARIA ‏(Accessible Rich Internet Applications) של הקונטיינר כדי שקוראי המסך יוכלו להודיע על התוכן החדש ברגע כשהגולשים יקליקו על הכפתורים.

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

Studio Editor

Wix Editor

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

הפעילו קידוד אם עדיין לא עשיתם זאת:
1. הקליקו למעלה על Dev Mode (מצב פיתוח).
2. הקליקו על Turn on Dev Mode (הפעלת מצב פיתוח).
הפעילו את כלי המפתחים לנגישות:
1. הקליקו על Settings (הגדרות) בחלק העליון של ה-editor.
2. בחרו ב-Accessibility Wizard (אשף הנגישות).
3. הקליקו על Accessibility dev tools (כלי מפתחים לנגישות) בחלונית מימין.
4. הפעילו את המתג ליד Expose advanced accessibility settings in the Editor (חשיפת הגדרות הנגישות המתקדמות ב-Editor).
הקליקו קליק ימני על הקונטיינר שמחוברים אליו אלמנטים שמציגים תוכן מאוסף ה-CMS.
בחרו ב-Accessibility (נגישות).

צילום מסך של קליק ימני על קונטיינר ובחירה באפשרות Accessibility.

הקליקו על Add Attribute (הוספת מאפיין).
הקליקו על התפריט הנפתח Attribute (מאפיין) ובחרו באפשרות aria-live.
הקליקו על התפריט הנפתח Attribute value (ערך מאפיין) ובחרו ב-polite (מנומס).
הקליקו על Add (הוספה).
אם הכל מוכן, פרסמו את האתר כדי שהשינויים יופיעו באתר הפעיל.

הוספת טקסט של 'ספירת פריטים' לקונטיינר

אם אתם מציגים את ספירת הפריטים של מערך הנתונים באלמנט טקסט, והגולשים יכולים להקליק על אלמנט קלט כדי לשנות את ספירת הפריטים, צריך לחבר את אלמנט הטקסט לקונטיינר. לאכן מכן צריך להגדיר את מאפייני ה-RIA ‏(Accessible Rich Internet Applications) של הקונטיינר כדי שקוראי המסך יוכלו להודיע על ספירת הפריטים החדשה ברגע שהיא משתנה.

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

Studio Editor

Wix Editor

היכנסו ל-editor.
הוסיפו קונטיינר.
הקליקו וגררו את אלמנט הטקסט שמציג את ספירת הפריטים ממערך נתונים אל הקונטיינר כדי לחבר אותו אליו. אם יש לכם אלמנט טקסט נוסף שמסביר מה ספירת הפריטים מייצגת (לדוגמה "הפריטים הזמינים"), חברו גם אותו לקונטיינר.
הפעילו קידוד אם עדיין לא עשיתם זאת:
1. הקליקו למעלה על Dev Mode (מצב פיתוח).
2. הקליקו על Turn on Dev Mode (הפעלת מצב פיתוח).
הפעילו את כלי המפתחים לנגישות:
1. הקליקו על Settings (הגדרות) בחלק העליון של ה-editor.
2. בחרו ב-Accessibility Wizard (אשף הנגישות).
3. הקליקו על Accessibility dev tools (כלי מפתחים לנגישות) בחלונית מימין.
4. הפעילו את המתג ליד Expose advanced accessibility settings in the Editor (חשיפת הגדרות הנגישות המתקדמות ב-Editor).
הקליקו קליק ימני על הקונטיינר שחיברתם אליו אלמנטים של טקסט.
בחרו ב-Accessibility (נגישות).

הוסיפו את המאפיין הראשון:
1. הקליקו על Add Attribute (הוספת מאפיין).
2. הקליקו על התפריט הנפתח Attribute (מאפיין) ובחרו באפשרות aria-atomic.
3. הקליקו על התפריט הנפתח Attribute value (ערך מאפיין) ובחרו ב-true.
4. הקליקו על Add (הוספה).
הוסיפו את המאפיין השני:
1. הקליקו על Add Attribute (הוספת מאפיין).
2. הקליקו על התפריט הנפתח Attribute (מאפיין) ובחרו באפשרות aria-live.
3. הקליקו על התפריט הנפתח Attribute value (ערך מאפיין) ובחרו ב-polite (מנומס).
4. הקליקו על Add (הוספה).
אם הכל מוכן, פרסמו את האתר כדי שהשינויים יופיעו באתר הפעיל.

הנגשת אלמנטים של קלט

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

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

צילום מסך של כפתור 'Apply filters' ב-Studio Editor.

כשמציגים את ספירת הפריטים ממערך הנתונים:

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

הנגשת סרגלי מספור העמודים

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

צילום מסך של השמות הנגישים בהגדרות סרגל מספור העמודים.

טיפ:

ב-Studio Editor, אם יש לכם כפתור 'טעינת פריטים נוספים' (Load More), הקפידו למקם במקטע נפרד את סרגל המספור ואת כל מה שמוצג מתחת לרפיטר או לגלריה.

שאלות נפוצות

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

איזו כותרת כדאי לתת לשדה הטקסט החלופי ב-CMS?

מה אם התמונה של הרפיטר כוללת שילוב של תמונות דקורטיביות ותמונות לא דקורטיביות?

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