מבקר נגישות HTML
הדבק HTML גולמי וקבל ביקורת נגישות אמיתית של WCAG: הליכון DOM בנוי בעבודת יד בודק תמונות, תוויות טפסים, סדר כותרות וטקסט קישורים, בתוספת מחשבון אמיתי של יחס ניגודיות בהירות יחסית שקיבל ניקוד מול ספי AA/AAA האמיתיים - ללא ספרייה חיצונית, שום דבר לא נשלח לשום מקום.
תוצאה
רוב בדיקות הנגישות המהירות הן סריקת מילות מפתח שטחית או ספרייה כבדה שעליכם לסמוך עליה כקופסה שחורה. הכלי הזה לוקח נתיב שלישי: הוא מנתח כל HTML שתדביק באמצעות ה-DOMParser המובנה של הדפדפן עצמו - ללא ליבת גרזן, ללא ספריית נגישות חיצונית, שום דבר לא הורדה - ואז עובר על עץ ה-DOM שנוצר עם קבוצה של בדיקות בכתב יד המשקפות דפוסי כשל נפוצים ואמיתיים של WCAG 2.1. זה אומר שהלוגיקה ניתנת לבדיקה מלאה והביקורת פועלת כולה בתוך הדפדפן שלך: הסימון שאתה מדביק, וכל זוג צבעים שאתה בודק, לעולם לא מועלים או נשלחים לשום מקום.
הבדיקות מכסות את הכשלים המופיעים לרוב בדפים אמיתיים: <img> אלמנטים ללא תכונת alt כלל (כשל WCAG אמיתי, להבדיל מה-alt="" הריק במכוון המשמש לתמונות דקורטיביות, אשר נותר ללא סימון נכון), יוצרים פקדים ללא שום דרך לטכנולוגיה מסייעת לדעת למה הם מיועדים (מסומן מול כל התאמה - נתיב אמיתי לתווית) <label>, או תכונה aria-label/aria-labeledby), רמות כותרות שקופצות ללא אזהרה (<h1> ישר ל-<h3>, או מסמך ללא <h1> בכלל, או יותר מאחד), קישורים ללא href או עם טקסט מעורפל, מחוץ להקשר כמו "לחץ כאן" או "קרא עוד", וכן כאשר חסר רק קטע HTML מלא.
היצירה הבולטת היא מתמטיקה ניגודיות אמיתית, לא היוריסטיקה שטחית של 'נראה קריא'. עבור כל אלמנט הנושא צבע מוטבע וצבע רקע, הכלי קורא את שני הערכים, פותר אותם למספרי RGB אמיתיים באמצעות מנוע ה-CSS של הדפדפן עצמו (לכן hex, rgb(), hsl() וצבעים בעלי שם כמו 'עגבנייה' פועלים כולם באופן זהה), ומחשב את הבהירות היחסית WCAG המדויקת עבור כל אחד מהם - L = 7×15+120. 0.0722×B, כאשר כל ערוץ מתוקן בגמא תחילה באמצעות עקומת ההעברה האמיתית של sRGB - לפני שילובם לתוך הנוסחה הרשמית של יחס הניגודיות, (בהיר יותר L + 0.05) / (כהה יותר L + 0.05). גודל הגופן ומשקל הגופן של הרכיב עצמו מחליטים אם הספים המחמירים יותר של 'טקסט רגיל' או ספי 'טקסט גדול' המקילים יותר (18pt+, או 14pt+ bold) חלים, והתוצאה נבדקת מול כל ארבעת מספרי ה-WCAG האמיתיים בו-זמנית: 4.5:1 ו-3:1 עבור AA1 ו-AA,47 לעולם לא ל-A1 ו-AA,47. פסק דין מזויף יחיד טוב/רע.
זוהי תת-קבוצה כנה ופרגמטית במכוון של ביקורת נגישות מלאה, לא כלי הסמכה: היא לא מעריכה אינטראקטיביות מונעת JavaScript, דפוסי ווידג'טים של ARIA מעבר לתיוג בסיסי, סדר מיקוד במקלדת או כל דבר שדורש עיבוד והרצה של הדף בפועל. התייחסו אליו כאל מעבר ראשון מהיר שתופס כמה מהכשלים הנפוצים והתוצאתיים ביותר של WCAG - טקסט חלופי חסר, שדות לא מתויגים, היררכיית כותרות שבור, טקסט בעל ניגודיות נמוכה וקישורים מעורפלים - לפני שליחת דף, לצד (לא במקום) סקירה ידנית מלאה או כלי ביקורת ייעודי לכל דבר שנשלח לייצור.
הקבצים והקלטות שלך לעולם לא עוזבים את המכשיר הזה. העיבוד פועל באופן לא מקוון לחלוטין. 100% מאובטח.
פורמטים וכללים מקובלים
- הולך על DOM אמיתי שמנתח עם ה-DOMParser המקורי של הדפדפן: דגלים <img> חסרים תכונה alt (תוך התייחסות נכונה ל-alt="" כסמן דקורטיבי מכוון ותואם), ו-<input>/<select>/<textarea> ללא <label for>, ללא גלישת <label>, וללא ariabelllabel.
- בודק את מבנה הכותרת עבור <h1> חסר או משוכפל וכן עבור רמות שדילגו עליהן (<h1> ואחריו ישירות <h3> ללא <h2> ביניהם) באמצעות סדר הכותרת בפועל במסמך.
- מחשב יחסי ניגודיות אמיתיים של WCAG עבור כל אלמנט עם סגנון צבע מוטבע + צבע רקע, קורא את גודל הגופן/משקל הגופן שלו כדי להחיל את הסף הנכון של 'טקסט גדול', ומנקה את התוצאה מול כל ארבעת הספים האמיתיים: 4.5:1 (AA רגיל), 3:1 (AA גדול), 7:1 (AAA רגיל) ו-AAA גדול:1).
- כולל בודק זוג צבעים בחזית/רקע עצמאי (כל צבע CSS חוקי: hex, rgb(), hsl(), צבעים בשם), כך שתוכל לבדוק שילוב צבעים ישירות מבלי להדביק שום סימון, בתוספת קישור ובדיקות <html lang>.
יתרונות מרכזיים
מקרי שימוש
- • הדבק קטע עמוד לפני שליחתו כדי לתפוס <img alt> חסר, <input> ללא תווית, או רמת כותרת שקופצת מ-h1 ישר ל-h3.
- • הדבק את הצבע המוטבע ואת סגנון צבע הרקע של אלמנט כדי לקבל את יחס הניגודיות האמיתי של WCAG ולראות בדיוק איזה מבין ספי AA/AAA, טקסט רגיל/גדול הוא עובר או נכשל.
- • השתמש בבודק צבעי חזית/רקע העצמאי כדי לבדוק זוג צבעי מותג מול WCAG 4.5:1 (AA) ו-7:1 (AAA) לפני נעילתו למערכת עיצוב.
דרג כלי זה
