בדיקת נגישות אתר אינטרנט שלנו מוודאת שכל התמונות, האייקונים והאלמנטים הוויזואליים מסומנים ומוגדרים נכון, כך שטכנולוגיות מסייעות כמו קוראי מסך יוכלו לזהות ולהציג את המידע בצורה ברורה ומדויקת.
מה נבדק
כל גרפיקת SVG ורכיבי אייקונים נבדקים כדי לוודא שהם כוללים תיאורי נגישות מתאימים, כמו ARIA labels או טקסט חלופי. אייקונים דקורטיביים מוגדרים כ-role="presentation" או aria-hidden="true", בעוד אייקונים משמעותיים מקבלים שם נגיש באמצעות aria-label, aria-labelledby או title - לצורכי נגישות.
למה זה חשוב
קוראי מסך מסתמכים על תיאורי נגישות כדי להסביר אייקונים ואלמנטים חזותיים. ללא התיאורים האלה, משתמשים עלולים לפספס פרטים חשובים בממשק או פעולות מרכזיות. בדיקה זו מבטיחה שהמידע נגיש ומובן לכל משתמש, כולל משתמשים עם מוגבלויות ראייה.
מה נבדק
לכל תגית <img> חייב להיות מאפיין alt. תמונות פונקציונליות צריכות טקסט אלטרנטיבי משמעותי, בעוד תמונות דקורטיביות צריכות ערך ריק (alt="") כדי שלא יוצגו לקוראי מסך.
למה זה חשוב
טקסט אלטרנטיבי מאפשר לטכנולוגיות מסייעות לתאר תמונות בצורה מדויקת. כאשר הוא חסר או לא נכון, משתמשים לא יכולים להבין את התוכן החזותי - ופיסת מידע חשובה הולכת לאיבוד אצל משתמשים עם מוגבלויות ראייה.
מה נבדק
כאשר תמונת רקע מעבירה מידע, היא צריכה לכלול שם נגיש באמצעות aria-label, aria-labelledby או title, ולעיתים גם שימוש ב-role="img" בהתאם לצורך.
למה זה חשוב
קוראי מסך מתעלמים מתמונות רקע שלא תויגו בצורה נכונה, מה שעלול למנוע ממשתמשים להבין אלמנטים חשובים בממשק. תיוג נכון מבטיח שגם תוכן ויזואלי משמעותי יהיה נגיש לכל המשתמשים.
מה נבדק
אלמנטים כמו <canvas> ו-<object> המציגים גרפיקה או מדיה צריכים לכלול תיאור נגיש באמצעות aria-label, aria-labelledby או title, וכן תפקיד מתאים כמו role="img" או role="graphics-symbol" בהתאם לתוכן.
למה זה חשוב
ללא תיוג נגיש, טכנולוגיות מסייעות לא יכולות לתאר את התוכן המוצג בתוך האלמנט, ומשתמשים נותרים ללא מידע או הקשר. בדיקה זו היא חלק מרכזי בתהליך בדיקת נגישות אתר אינטרנט אצלנו.
מה נבדק
גם לתמונה הראשית וגם לכל אזור לחיץ במפת תמונה צריך להיות טקסט אלטרנטיבי שמתאר את הפעולה או היעד שלו.
למה זה חשוב
קוראי מסך מסתמכים על התיאורים האלה כדי להסביר את האזורים האינטראקטיביים. ללא טקסט מתאים, מפת תמונה עלולה להפוך מבלבלת או לא שמישה למשתמשים.
מה נבדק
העמודים נבדקים כדי לוודא שמשתמשים יכולים להגדיל את התצוגה עד 200% ללא אובדן פונקציות או תוכן, ושהגדרות ה-viewport וה-CSS לא מגבילות את ההגדלה.
למה זה חשוב
הגדלת תצוגה חיונית למשתמשים עם לקויות ראייה. מגבלה על זום יוצרת חסמי נגישות ועלולה למנוע עמידה בדרישות נגישות באתר.
מה נבדק
לכל שדה בטופס צריכה להיות תווית ברורה שמופיעה על המסך, ולא רק Placeholder שנעלם בזמן ההקלדה.
למה זה חשוב
תווית גלויה מאפשרת למשתמשים להבין מה צריך למלא בכל שדה, במיוחד עבור אנשים שמתמודדים עם קושי בזיכרון או בעיבוד מידע.
מה נבדק
קישורים שנפתחים בחלון או כרטיסייה חדשה צריכים לכלול סימון ברור לפני הלחיצה - באמצעות טקסט, אייקון או מאפיין ARIA - כדי ליידע את המשתמש.
למה זה חשוב
פתיחה לא צפויה של חלון חדש יכולה לבלבל משתמשים, במיוחד אנשים עם מגבלות קוגניטיביות או ראייה. סימון מתאים שומר על ניווט צפוי ועוזר לעמוד בדרישות נגישות באתר.
בדיקת נגישות אתר שלנו מוודאת שכל חלקי האתר ניתנים להגעה ושימוש באמצעות מקלדת בלבד. זה כולל ניהול פוקוס תקין, סימון פוקוס ברור במסך וניווט הגיוני בין האלמנטים באתר.
מה נבדק
לכל קישור חייב להיות טקסט תיאורי או תווית ARIA שמסבירה בצורה ברורה לאן הוא מוביל או מה מטרתו.
למה זה חשוב
משתמשים שנעזרים בקוראי מסך מסתמכים על שמות קישורים ברורים כדי להבין לאן כל קישור מפנה. תיאורים עמומים או חסרים עלולים ליצור בלבול ולמנוע ניווט יעיל באתר.
מה נבדק
בעת ניווט באמצעות מקלדת, אלמנטים אינטראקטיביים חייבים להציג סימון פוקוס ברור - כמו קו מסגרת, הדגשה או שינוי צבע.
למה זה חשוב
סימון פוקוס גלוי מאפשר למשתמשים לראות בדיוק היכן הם נמצאים בעמוד. ללא סימון כזה, מי שנשען על ניווט מקלדת עלול לאבד כיוון ולהיתקל בחסמי נגישות ובתסכול במהלך השימוש באתר.
מה נבדק
לכל אלמנט אינטראקטיבי (כמו כפתורים, קישורים ורכיבי שליטה) חייב להיות שם נגיש - באמצעות טקסט גלוי, aria-label, aria-labelledby או מאפיין title.
למה זה חשוב
קוראי מסך משתמשים בתיאורים האלה כדי להכריז על מטרת האלמנט. ללא שם ברור, משתמשים לא יוכלו להבין מה האלמנט עושה או כיצד להשתמש בו, מה שיוצר חסמי נגישות.
מה נבדק
העמודים צריכים לכלול קישורי דילוג המאפשרים למשתמשי מקלדת לעקוף תוכן חוזר כמו כותרות ותפריטים, ולעבור ישירות לחלק המרכזי של הדף.
למה זה חשוב
קישורי דילוג משפרים את היעילות עבור משתמשים שנעזרים במקלדת או בקוראי מסך, ומאפשרים ניווט מהיר יותר לתוכן העיקרי ללא מעבר ארוך ומעייף בין פריטים.
מה נבדק
אלמנטים מוסתרים או כאלה שנמצאים מחוץ למסך צריכים להשתמש ב־tabindex="-1" או aria-hidden="true" כדי להסיר אותם מסדר הניווט במקלדת.
למה זה חשוב
אלמנטים שלא נראים למשתמשים לא צריכים לקבל פוקוס. אם הם כן מקבלים, זה עלול לבלבל משתמשים שנעזרים בקוראי מסך ולפגוע בניווט הגיוני באתר.
מה נבדק
לכל רכיב בטופס חייב להיות שם נגיש המשויך אליו באופן תכנותי, באמצעות תווית ברורה או מאפיין ARIA, כך שטכנולוגיות מסייעות יוכלו להכריז על מטרתו.
למה זה חשוב
ללא קשר ברור בין התווית לשדה, משתמשים לא יודעים איזה מידע צריך להזין. בדיקת נגישות אתר מוודאת שהקישור הזה מוגדר בצורה תקינה.
מה נבדק
כאשר נפתח דיאלוג או חלון קופץ, הפוקוס במקלדת חייב להישאר בתוכו עד לסגירתו, כדי למנוע אינטראקציה עם הרקע שמאחוריו.
למה זה חשוב
שמירה על הפוקוס מונעת ממשתמשים לעבור בטעות לאזורים מוסתרים או לא רלוונטיים. זה חיוני לנגישות של מודלים וחלונות חופפים.
מה נבדק
כל דיאלוג או חלון קופץ חייב לכלול אפשרות יציאה ברורה ונגישה באמצעות מקלדת - כמו לחיצה על Escape או כפתור סגירה גלוי שניתן להגיע אליו עם מקלדת.
למה זה חשוב
משתמשים שנעזרים בניווט מקלדת חייבים יכולת לסגור חלונות קופצים בלי להשתמש בעכבר. היעדר אפשרות יציאה עלול לכלוא אותם בתוך הדיאלוג ולפגוע בנגישות.
מה נבדק
הפוקוס צריך לזוז רק כאשר המשתמש מבצע פעולה. אלמנטים אינטראקטיביים לא אמורים לשנות פוקוס באופן אוטומטי.
למה זה חשוב
תזוזת פוקוס בלתי צפויה עלולה לבלבל משתמשים שנעזרים בקוראי מסך או בעלי קשיים קוגניטיביים. בדיקת נגישות אתר מוודאת שהניווט זורם בצורה ברורה וצפויה.
הבדיקה שלנו מוודאת שמבנה האתר בנוי בצורה סמנטית וברורה, כך שטכנולוגיות מסייעות יוכלו להבין את התוכן ולהציג אותו נכון. זה כולל כותרות מסודרות, היררכיה לוגית וניווט עקבי - חלק חשוב בכל בדיקת נגישות אתר.
מה נבדק
אלמנטים שנראים כמו כותרות אך אינם מקודדים ככותרות אמיתיות חייבים לכלול role="heading" ורמת aria מוגדרת, למשל aria-level="2".
למה זה חשוב
טכנולוגיות מסייעות מסתמכות על תגיות כותרת כדי לנווט בעמוד בצורה יעילה. כותרות חסרות או מוגדרות בצורה שגויה מקשות על המשתמשים להבין את ההיררכיה של התוכן ואת הזרימה בעמוד.
מה נבדק
כל שדה בטופס צריך להיות מקושר לתווית בצורה תכנותית באמצעות <label>, aria-label או aria-labelledby, כדי לאפשר זיהוי ברור.
למה זה חשוב
כאשר התווית לא מחוברת כראוי, קוראי מסך לא יכולים להכריז על מטרת השדה, מה שמקשה על המשתמשים למלא טפסים בצורה עצמאית וברורה.
מה נבדק
לכל עמוד באתר חייבת להיות תגית <title> תיאורית שמשקפת בצורה ברורה את מטרת העמוד וההקשר שלו.
למה זה חשוב
קוראי מסך מקריאים את כותרת העמוד קודם, וללא כותרת ברורה או ייחודית משתמשים עלולים להתבלבל או לא להבין באיזה עמוד הם נמצאים.
מה נבדק
קישורים צריכים לכלול שם נגיש שמציג בבירור לאן הם מובילים או איזו פעולה יתבצע, באמצעות טקסט גלוי, aria-label או מאפיין title.
למה זה חשוב
תיאור ברור של קישור מאפשר למשתמשים להבין את היעד לפני לחיצה, ומשפר את הניווט ואת תחושת הביטחון באתר.
מה נבדק
שדות חיפוש צריכים לכלול role="search" באלמנט העוטף שלהם, כדי להגדיר אזור ARIA ייעודי.
למה זה חשוב
משתמשים עם קוראי מסך יכולים לדלג ישירות לאזור החיפוש באמצעות קיצורי מקלדת, מה שמפשט את הניווט ומשפר את הגישה למידע.
מה נבדק
אלמנט <html> חייב לכלול מאפיין lang שמגדיר את שפת התוכן הראשית בעמוד.
למה זה חשוב
קוראי מסך משתמשים בהגדרה זו כדי להגות מילים בצורה נכונה. ללא ציון שפה, התוכן עלול להיות מוקרא במבטא או בשפה שגויה, מה שמקשה על ההבנה.
מה נבדק
טקסט שנכתב בשפה שונה משפת ברירת המחדל של העמוד צריך לכלול מאפיין lang שמציין את השפה המתאימה.
למה זה חשוב
סימון שפה נכון מאפשר לטכנולוגיות מסייעות להגות ולתרגם את התוכן בצורה מדויקת. הדבר נבדק כחלק מתהליך הסקירה שלנו.
מה נבדק
אלמנטים שמתפקדים כמו כפתורים, קישורים או תפריטים אך אינם משתמשים בתגיות HTML סמנטיות חייבים לכלול תפקידי ARIA מתאימים.
למה זה חשוב
ללא תפקיד מוגדר, קוראי מסך עשויים לא לזהות את האפשרות לבצע פעולה, מה שעלול לפגוע בשימושיות עבור מי שנעזרים בטכנולוגיות מסייעות.
מה נבדק
אלמנטים אינטראקטיביים כמו קישורים או כפתורים לא אמורים להיות מקוננים זה בתוך זה, אלא אם מדובר בתבנית HTML תקנית ומותרת.
למה זה חשוב
קינון לא תקין עלול לבלבל טכנולוגיות מסייעות ולפגוע בהתנהגות הצפויה של ניווט במקלדת, מה שהופך את התוכן לקשה לשימוש.
מה נבדק
אלמנטים אינטראקטיביים כמו כפתורים או קישורים חייבים לכלול טקסט גלוי או שם נגיש מוגדר באמצעות aria-label, aria-labelledby או title.
למה זה חשוב
ללא שם או טקסט, המשתמשים לא יכולים להבין מה פעולת הכפתור או הקישור, מה שמקשה על שימוש תקין באתר.
מה נבדק
אלמנטים אינטראקטיביים שמוסתרים חזותית ולא מיועדים לשימוש צריכים לכלול aria-hidden="true" כדי שלא ייקלטו על ידי קוראי מסך.
למה זה חשוב
כאשר טכנולוגיות מסייעות מציגות למשתמש אלמנטים דקורטיביים או לא פעילים, זה עלול ליצור בלבול ולהפריע לניווט. הסתרה נכונה שומרת על חוויית שימוש ברורה וממוקדת.
