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

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

זמן: ~45 דקות, בתוספת בדיקות ידניות רמת קושי: בינונית עובד עם: Base44 / Lovable / v0

מתי להשתמש בזה

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

לפני שמתחילים

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

הפרומפט

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

Review and improve the entire site for people with disabilities without changing its purpose or visual identity.

A screen reader is software that reads a page aloud and lets someone navigate by headings, links and controls. Make every page understandable in that order: use one clear main heading, sensible subheadings, meaningful link text, real buttons for actions, and labels that say what every form field does.

Make every menu, link, button, form, popup and close control usable with only a keyboard. Keyboard focus means the item currently selected by the keyboard: it must have a clearly visible outline and move in a sensible order. Do not trap someone inside a popup, and return focus to the right place when it closes.

Check text, button, form and error-message contrast in every normal, hover, selected and disabled state. Never use color alone to communicate success, warning, error or selection. Keep text readable when a visitor zooms to 200 percent and on a narrow phone.

Add useful alt text, which is a short description read aloud instead of an image, to images that carry information. Use [REAL DESCRIPTION OR PURPOSE] where my input is needed. Mark purely decorative images so the screen reader skips them. Do not invent details about people, products, food, places or results that are not visibly present.

Give every form field a persistent label, connect each error to the field that caused it, and move focus to a clear error summary after a failed submission. Add captions or a written transcript for [VIDEO OR AUDIO], and respect a visitor's reduced-motion setting, which is a device preference asking sites to limit movement.

Keep the style [CURRENT BRAND FEELING] with visible focus states that belong in the design. Test the main navigation and [MOST IMPORTANT USER FLOW] using only the keyboard, then give me a plain-language list of what you fixed, what I still need to describe or caption, and what requires a human test.

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

בנו את זה ב־

איך אנחנו מרוויחים

מה זה יוצר

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

בדקו שזה עבד

הדביקו את הפרומפט, המתינו לסיום הבנייה, ואז ודאו את אלה — בשפה פשוטה, בלי בדיקות טכניות:

  • החל מתחילת הדף, ניתן להגיע ולהשתמש בתפריט, בכל הפקדים הראשיים ובתהליך המלא והחשוב על ידי לחיצה על Tab, Shift+Tab, Enter ו-Space.
  • ניתן תמיד לראות איזה פריט נבחר על ידי המקלדת, ואף חלונית קופצת לא כולאת אותך.
  • בזום של 200 אחוז, הטקסט נשאר קריא והפקדים אינם מסתירים זה את זה.
  • בכיבוי המסך או בהסטת המבט, הדף עדיין הגיוני כאשר הוא נקרא על ידי קורא מסך.
  • שגיאות בטופס מציינות את הבעיה ומחזירות אותך לשדה שצריך לתקן.
  • לכל תמונה משמעותית יש תיאור מדויק, ותמונות דקורטיביות אינן מוקראות בקול.

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

השלבים הבאים

בדיקת זרימה מלאה אחת באמצעות מקלדת

לאחר בדיקת הנגישות הכללית

Test [USER FLOW, e.g. choose a service and submit a booking] from beginning to end using only the keyboard. Fix anything that cannot be reached, activated, understood or escaped. Do not use a mouse during the test. Report each step in plain language and confirm where focus moves after errors and success.

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

סקירת תיאורי תמונות איתי

כאשר באתר יש הרבה תמונות חשובות, תרשימים או תמונות מוצר

List every meaningful image on [PAGE OR SECTION] with its current alt text and the reason the image is there. Flag descriptions that are empty, generic, repetitive or that claim details not visible in the image. Do not rewrite the flagged items until I provide [THE REAL DESCRIPTION OR PURPOSE].

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

הוספת כתוביות ותמלולים

לפני פרסום דפים עם דיבור או צליל חשוב

Add synchronized captions to [VIDEO] using [CAPTION FILE OR VERIFIED TEXT], and place a readable transcript near [VIDEO OR AUDIO]. Include spoken words and important non-speech sounds without inventing anything. Make both usable on a phone and by keyboard.

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

שימו לב ל

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

הערות לפי פלטפורמה

כל שלוש הפלטפורמות המרכזיות יכולות להטמיע שינויים אלו, אך אף בונה אתרים לא יכול להוכיח נגישות רק על סמך הקוד שנוצר. סקירת האתר המפורסם של Lovable יכולה לסמן בעיות נגישות נפוצות, בעוד ש-Base44 ו-v0 יכולים ליישם תיקוני קוד ועיצוב כשמתבקשים לעשות זאת במפורש; כל פלטפורמה עדיין דורשת בדיקת מקלדת, זום וקורא מסך על ידי אדם. בדיקות אוטומטיות יכולות לזהות טקסט חלופי (alt text) חסר, אך לא יכולות לדעת אם התיאור הוא כנה או שימושי.

לחסוך בקרדיטים

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

  1. תכננו קודם בצ'אט חינמי. שרטטו את הכול ב-ChatGPT, ב-Claude או ב-Gemini — עמודים, פיצ'רים, מה כל טופס אוסף, איך זה צריך להיראות. לחשוב שם זה בחינם; לחשוב בתוך פלטפורמת בנייה זה בתשלום.
  2. התחילו מפרומפט כתוב, לא ממשפט. "תבנה לי אתר" הוא המשפט היקר ביותר בבנייה עם AI. פרומפט ראשון מלא — כמו אלה שבאתר הזה — חוסך עשרות סבבי תיקונים.
  3. אל תתעצלו בפרטים. כל פרט שתשמיטו יחזור כתיקון שתשלמו עליו. שם העסק, צבעים, כל עמוד, כל שדה בטופס, מה קורה אחרי שליחה — הכניסו הכול לפרומפט הראשון.
  4. אחר כך — שינוי אחד בכל הודעה. "תקן את הכותרת, וגם את הטופס, וגם את הצבעים" יוצר סבך שעולה יותר לפרום ממה שנחסך.
  5. נתקעתם? הפסיקו לטלאי. אם אותו תיקון נכשל בערך שלוש פעמים, אל תשלחו תיקון רביעי — תארו במקום זה את המצב הסופי הרצוי של כל המקטע בהודעה חדשה אחת.
  6. התחילו בחינם. שדרגו כשתצטרכו יותר. השתמשו במכסה החינמית כדי לבנות ולגלות את הגרסה הראשונה שלכם. שדרגו כשתצטרכו יותר שימוש או פיצ'רים בתשלום, ובדקו את העלויות של שירותים מחוברים לפני ההשקה.

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

קראו את המדריך המלא
accessibility keyboard screen-readers contrast

נבדק לאחרונה: 2026-07-27

שאלות נפוצות

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