נגישות באפליקציית React: index.html, לא useEffect

אפליקציית React שנבנית ב-Vite או ב-Create React App נשענת על index.html אחד. זה המקום ל-Negish. הזרקה מתוך useEffect נראית גמישה ונשברת בפיתוח: במצב הקפדני של React האפקט רץ, מתנקה, ורץ שוב, ופתאום יש שני כפתורים או אתחול כפול.

חשוב: הסרגל מתאים את התצוגה לגולש. הוא אינו מחליף הנגשה בקוד, בדיקה מקצועית או הצהרת נגישות, ואינו מבטיח עמידה בת״י 5568 או ב-WCAG.

הדבקה

פותחים את index.html ומדביקים את השורה מהאזור האישי לפני </body>, אחרי <div id="root">. לא מייבאים את קובץ הווידג'ט כמודול לתוך הבאנדל.

<script src="…/widget.js" data-site="המפתח-האישי" defer></script>

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

אחרי בנייה, מוודאים שכלי הבנייה לא מוחק סקריפטים לא מוכרים מה-HTML. אם יש תבנית HTML נפרדת לשרת, מדביקים גם בה. פרויקט Next.js לא משתמש בקובץ הזה כפריסה. עוברים למדריך Next.js.

מה הקומפוננטות עדיין שוברות

• כפתור שהוא div עם onClick. הסרגל לא הופך אותו לכפתור.
• חלון מודאלי בלי החזרת פוקוס לאלמנט שפתח אותו.
• ניווט צדדי ב-React Router שנעלם מהמקלדת אחרי מעבר מסלול, כי הפוקוס נשאר על צומת שהוחלף.
• תמונות עם alt="" כשהתמונה היא התוכן, לא קישוט.

אלה תיקוני קוד. הרשימה של מה הסרגל לא נוגע בו נמצאת בעמוד הגבולות.

למה לא useEffect

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

כפתור שהוא div, חלון בלי החזרת פוקוס, ותמונה עם alt ריק כשיש בה מידע, נשארים בקוד. אחרי בנייה לפרודקשן בודקים את ה-HTML שיוצא, כי יש כלים שמשכתבים את index.html. פרויקט Next לא הולך לפי הקובץ הזה.

פיתוח מול בנייה

בפיתוח, עם מצב קפדני, הזרקה מתוך קומפוננטה משקרת. סומכים על index.html. אחרי build פותחים את התיקייה שיצאה ומוודאים שהשורה בקובץ. יש כלים שמחליפים את ה-HTML. אם השורה נעלמה, מתקנים את הכלי, לא מוסיפים useEffect.

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

אחרי build

פותחים את הקובץ שיצא מהבנייה, לא רק את שרת הפיתוח. השורה צריכה להיות ב-HTML פעם אחת. אם כלי בנייה מחק אותה, מתקנים את הכלי. לא עוברים ל-useEffect כי מצב קפדני יכפיל אתכם בפיתוח. באותו יום מתקנים כפתור אחד שהוא div, כדי שההטמעה לא תהיה הדבר היחיד שנגעו בו.

שאלות נפוצות

למה לא לטעון את הסקריפט רק אחרי הסכמת עוגיות?

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

הכפתור נעלם אחרי רענון חם

סימן שהוספתם אותו מהקומפוננטה. מעבירים ל-index.html ומפעילים מחדש את שרת הפיתוח.

הרשמה וקבלת השורה.

חשוב: הסרגל מתאים את התצוגה לגולש. הוא אינו מחליף הנגשה בקוד, בדיקה מקצועית או הצהרת נגישות, ואינו מבטיח עמידה בת״י 5568 או ב-WCAG.