…נגישות אתר וורדפרס
בפוסט זה שעוסק ב-נגישות אתר וורדפרס, נדון בעניין שלא רבים מודעים לו ולא רבים מדברים עליו: האם ניתן בעבור אנשים את מוגבלות ראייה לשמור באתר הוורדפרס שלכם, עמוד HTML שעוצב בתוכנת וורד. הדרך החדשה שתוצע לעשות זאת – היא בשילוב AI, במקרה זה שימוש בצ'אטג'יפיטי ChatGPT.
המדריך להלן כתוב בחלקו הראשון בלשון זכר ולאחר מכן בלשון נקבה אך מיועד כמובן לכל המגדרים.
נגישות זה משהו שחשוב שתעשו כאן ועכשיו! עם מומחה נגישות לפי חוק המתמצא בנגישות אתרים ועם עורך דין העוסק בתחום זה. פעילות זאת הינה חלק חשוב בתהליכי תחזוקת אתר וורדפרס אל פחות מטיפול במהירות, קידום או אבטחת האתר.
מאוד נוח לעצב מסמך HTML, לעמוד אינטרנט בתוכנת וורד – גם לאתרי וורדפרס וגם לאתרי HTML. עם זאת הקוד שנוצר, אם תעתיקו אותו כמות שהוא לאתר וורדפרס – עשוי להיות מאוד בעייתי לתוכנות לקריאת עמודי אינטרנט של אנשים עם מוגבלות ראייה.
להלן אמנה חלק מהסיבות שאתרים מבוססים עמודי HTML שעוצבו בוורד, הרבה פעמים יהיו בעייתיים מבחינת נגישות – וכן לעיתים יהיו בעייתיים באותו הזמן גם מבחינת קידום התוכן והעמוד בגוגל:
- תגיות עודפות ומיותרות: Word כולל הרבה סגנונות מקוונים (inline styles), div-ים, span-ים ותגיות אחרות מיותרות שמעמיסות על קוד ה-HTML, מה שמקשה על קוראי המסך לנתח את המסמך כראוי.
- מבנה סמנטי לקוי: Word לא תמיד משתמש בתגיות HTML מתאימות כמו
<h1>,<h2>ו-<p>לכותרות ופסקאות. במקום זאת, הוא עשוי להשתמש בתגיות כלליות ולהסתמך על CSS מקוון לצורכי עיצוב חזותי, דבר שלא מעביר משמעות ברורה לקוראי המסך. - מאפיינים לא סטנדרטיים: קוד ה-HTML שנוצר על ידי Word עשוי לכלול מאפיינים ייחודיים או אלמנטים ספציפיים למיקרוסופט, שקוראי מסך לא תמיד יפרשו נכון.
- תכונות נגישות: קבצי Word שמורים כ-HTML לעיתים חסרים תכונות נגישות חשובות כמו תיוג נכון של טפסים, טקסט אלטרנטיבי לתמונות, או שימוש נכון בתפקידי ARIA. היעדר זה מסבך עוד יותר את הדרך שבה קוראי המסך מפרשים את התוכן.
כדי שקוראי מסך, בהם לרוב משמתשים אנשים עם מוגבלות ראייה כדי שאלו "יקריאו" להם את הטקסט והתוכן הנלווה לו באתרי אינטרנט, יעבדו בצורה יעילה, יש צורך בקוד HTML מובנה היטב עם תגיות סמנטיות ותכונות נגישות מתאימות. המרה של קובץ וורד-Word ל-HTML בדרך כלל יוצרת עומס שמקשה על חוויית המשתמש של אלו הנשענים על קוראי מסך.
שיפור הבעיות שצויינו, שאני מציע תוך שימוש ב-AI, במקרה זה ChatGPT, יוכל גם להקל מאוד את הפעילויות הנדרשות במסגרת תחזוקת אתר וורדפרס, ויקלו לבצע שינויים בטקסט שבאתר ובעמודים השונים.
את חלק מהבעיות שצויינו לעיל, ניתן לראות למשל בקוד לדוגמה הבא של ה<DIV>, המרכזי של HTML (בתוך תגית מסביבו:<BODY> ) כששמרתי עמוד וורד:
<div class=WordSection1 dir=RTL>
<p class=MsoNormal align=center dir=RTL style='text-align:center'><span
lang=HE style='font-size:24.0pt;line-height:107%;font-family:"Arial",sans-serif'>עמוד
41</span></p>
<p class=MsoNormal dir=RTL><span dir=LTR><br>
</span><span lang=HE style='font-size:16.0pt;line-height:107%;font-family:"Arial",sans-serif'>הקדמה</span></p>
<p class=MsoNormal dir=RTL style='line-height:200%'><span dir=LTR
style='font-size:12.0pt;line-height:200%'><br>
</span><span lang=HE style='font-size:12.0pt;line-height:200%;font-family:"Arial",sans-serif'>כפי
שקורה בכל שפה, גם העברית התפתחה דרך הגאות והשפל של הזמן, תוך שהיא מתאימה את
עצמה לדינמיקות והשפעות חדשות מחוויותיהם של אלו שהשתמשו בה לתקשורת יומיומית,
ובמקביל גם התנגדה לשינויים באמצעות החזרות של קריאות בעל פה של טקסטים עתיקים שנכתבו
בה.1 במחקרי חומש ישנו ויכוח האם ניתן לראות בבירור את ההתפתחות הזו או אם היא
בכלל קיימת.2 יש שטוענים, למשל, כי החלקים הפואטיים</span></p>
</div>
זה עוד מקרה טוב וקל שבו הטקסט שבתוך התגיות רציף ולא שבור ומורכב מהרבה מקטעים. ניתן לשים לב שהכותרות כאן דרך הוורד הוגדרו לפי גודל האותיות בלבד ולא כמו שהיינו רוצים ככותרות H1, H2 וכו'
אז נתתי לצ'אטג'יפיטי-ChatGPT (מודל 4o) את ההוראה הפשוטה הבאה:
Please simplify this HTML code, and organize it with headings tags etc:
והתוצאה אכן פתרה את הבעיות נגישות בטקסט והקוד הספציפי הזה לפחות:
<div dir="rtl">
<!– Centered Page Number –>
<h2 style="text-align:center;">עמוד 41</h2>
<!– Introduction Heading –>
<h3>הקדמה</h3>
<!– Main Paragraph –>
<p style="line-height:200%; font-family:'Arial', sans-serif; font-size:12pt;">
כפי שקורה בכל שפה, גם העברית התפתחה דרך הגאות והשפל של הזמן, תוך שהיא מתאימה את
עצמה לדינמיקות והשפעות חדשות מחוויותיהם של אלו שהשתמשו בה לתקשורת יומיומית,
ובמקביל גם התנגדה לשינויים באמצעות החזרות של קריאות בעל פה של טקסטים עתיקים שנכתבו
בה.1 במחקרי חומש ישנו ויכוח האם ניתן לראות בבירור את ההתפתחות הזו או אם היא
בכלל קיימת.2 יש שטוענים, למשל, כי החלקים הפואטיים…
</p>
</div>
הרבה יותר טוב!, עדיין לא מושלם. צריך לדעתי במקרה זה אולי להחליף את H2 ל H1, ולשים אותה בכותרת ולא בגוף הטקסט. אבל חוץ מבעיה קטנה זאת, הפעם לפחות צ'אטגיפיטי עשה עבודה מעולה.
כמובן שאת הDIV הזה שלמעלה היה צורך לחלץ שוב מתוך הקוד HTML שהצ'אטגי'פיטי נתן, בתוך התגית BODY.
זה לא אומר שתמיד המערתכ תיתן כאן פתרון טוב מאוד, או אפילו תקין. לא ניתן להימנע לצורך הזה מלהבין בקוד CSSו-HTML. ובכל זאת, הרבה יותר טוב ממה שהיה כאן במקור.
חשוב לציין כמובן שכמו כל נושא, גם התחום של נגישות אתר וורדפרס הינו אינסופי. תמיד אפשר לעשות יותר. הדברים שציינתי (שאולי חלקם אינו מדוייק) אינם בשום מקרה מספיקים ובוודאי לא לכל אתר ואתר – שכן כל אתר לדעתי שונה מרעהו.
והלוואי שלא תצטרכו אף פעם לגלות שמה שלא עשיתם ביחד עם מומחה/ית ועורך/כת דין (ועל איך לבחור מומחים לנושא כאלו ראיתי שמייעצים או מנסים לייעץ למשל בעמוד אליו אני מקשר למעלה בעמוד שאלות ותשובות זה של איגוד האינטרנט הישראל) אכן לא הספיק ושתבעו אתכם על נגישות…הלוואי
לצערי גם ראיתי למשל בעל אתר ששילם המון המון כסף לחברה לבניית אתרים שהבטיחה להנגיש את אתרו כחוק – ושמה לו תוסף שנחשב בעייתי ואותו בלבד – והאתר שלו ככל הנראה לכן חשוף לתביעות ללא חובת הוכחת נזק ואינו מונגש אפילו חלקית כראוי – למרות ששילם הרבה כסף וקיבל הבטחות שבסוף היו ללא כיסוי. אז המסקנה המתבקשת מכך, לפחות שלי, איננה לא לפעול – אלא לנסות לבחור את המומחה שלכן נכון! (ככל שזה ניתן). בעיני אישית התחלה טובה היא לוודא שפניתן למומחה נגישות לפי הגדרתו בחוק…
אתם מוזמנים ליצור איתי קשר לכל שאלה ובעיה העוסקת ב-תחזוקת אתר וורדפרס או השגה על פוסט זה שכאמור כל מטרתו לעורר מודעות לחלק מהדברים שאני נתקלתי בהם שאומרים על תחום זה של נגישות אתרי וורדפרס, באמצעות פניה בצור קשר או הודעת ווטסאפ למטה – אנסה לענות לשאלות ככל האפשר.
גיא שקד © 2023
לכל שאלה או עצה, שלחו לי בכיף בבקשה וואטסאפ, למספר: 052-7497628
