בנה Windows מודגש נגיש עם דיאלוג A11y

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

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

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

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

כברירת מחדל, דיאלוג A11y גם תומך מסכי מגע, כך הקשה יש את אותה השפעה כמו לחיצה. אתה יכול ללחוץ או להקיש בכל מקום מחוץ לחלון כדי לסגור אותו, או על המחשב להכות את המפתח ESC.

איכשהו, ספריה זו היא די קטנה, רק 1.2kb, כולל כל CSS ו- JS קוד. זה עושה את זה קל על גבי נגיש במלואו.

אתה יכול ללמוד יותר על ידי קריאת דרך GitHub ריפו ו A11y דיאלוג יש שלה דף תיעוד משלו, מדי. זה כולל קטע ב התקנה והתקנה למתחילים להשלים. יש גם קטע ארוך מכסה את DOM API להוספת לחצנים אל הדף שלך שיכול לפתוח (או לסגור) את החלון המודאלי.

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

תסתכל על הדף הראשי כדי ללמוד עוד על ההתקנה ואת תכונות בסיסיות של JavaScript. ספריה זו מגיעה הרבה יותר מאשר נגישות ARIA, אז כדאי לבדוק אם אתה רוצה להרחיב את התכונות של Windows מודאלית שלך.