דף הבית » קידוד » מבט לתוך אריה אינטרנט תקנים & HTML Apps נגישות

    מבט לתוך אריה אינטרנט תקנים & HTML Apps נגישות

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

    ARIA היא אחת מתקני נגישות רבים והנחיות שפורסמו על ידי Web Accessibility Intitiative (WAI). הוא מספק סימון נוסף שניתן להוסיף בקלות למסמכי HTML. WAI-ARIA הוא פתרון חוצה-מכשירים המכוון לפלטפורמת האינטרנט הפתוחה, ולכן לא רק לחשוב על אתרים, אלא גם על משחקים, בידור דיגיטלי, שירותי בריאות, ניידים וסוגים אחרים של יישומים.

    במאמר זה נסקור כיצד ניתן להוסיף נגישות למסמכי HTML שלך בעזרת תקני WAI-ARIA.

    מסגרת ARIA

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

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

    תפקידים לנדמרק

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

    ישנם 8 סוגים של תפקידים ARIA ציון, והם צריכים להיות מתווספים כתכונות של תגי HTML קשורים.

    תפקיד =”כרזה”

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

    תפקיד =”ראשי”

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

    תחביר או HTML5 יותר סמנטי
    . זה האחרון נוספה מפרט W3C במטרה מיפוי ראשי ARIA ציון תפקיד אלמנט HTML סמנטי.

    תפקיד =”ניווט”

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

    תפקיד =”משלימה”

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

    תפקיד =”תוכן”

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

    תפקיד =”טופס”

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

    תפקיד =”לחפש”

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

    תפקיד =”יישום”

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

    IMAGE: משאבים נגישות

    מדינות ונכסים

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

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

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

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

    .

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

    כיצד לעשות שימוש של ARIA מדינות ונכסים

    1. בניית קשרים בין אלמנטים עם תכונות היחסים

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

    אריה - מדומה - בין דברים רבים אחרים - יכול לקשור כותרות לאזורים ARIA ציון דרך הבאה:

    זה הוא כותרת

    תוכן עיקרי…

    2. לסנכרן מדינות ונכסים עם מחזור החיים של אלמנט

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

    3. התאם את חזותית ואת הממשקים נגישים

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

    W3C של WAI-ARIA תרגול הנחיות קו מנחה יכול לתת לך רעיונות גדולים אחרים על איך כראוי הרמוניה חזותית הממשקים נגישים של האתר שלך.

    לא overuse ARIA

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

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

    לדוגמה, אין צורך להשתמש טופס תפקיד מרכזי להגדיר את

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

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

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