הנגשת קוד

הנגשת כפתורים

הנגשת כפתורים

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

ההבדל בין קישורים לכפתורים

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

מתחילים

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

<div id="someID" onclick="somefunction()"></div>

על מנת להנגיש את הDIV ככפתור יש להוסיף לו מאפיין ROLE=BUTTON שמטרתו להגדיר את ה-DIV ככפתור עבור תוכנות קוראות מסך. בנוסף נוסיף לו TABINDEX=0  . TABINDEX=0 יאפשר לאדם המנווט עם מקלדת בלבד להגיע אל הכפתור ללא שימוש בעכבר.

<div id="someID" tabindex="0" role="button" onclick="somefunction()"></div>

על מנת שיהיה ניתן להפעיל את הכפתור בעזרת אנטר או מקש רווח יש להוסיף אץ הקוד הבא לדף הHTML או לקובץ הJS שלנו:

<script>
document.querySelector('#someID').addEventListener('keydown',function(e){
  if (e.keyCode == 13 || e.keyCode == 32){
      this.click();
  }
});
</script>

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

<script>

document.querySelector('#someID').addEventListener('click',function(e){
        var node = document.createElement("SPAN");
        node.setAttribute('role','alert');
        var textnode = document.createTextNode("התוכן החדש נטען");
        node.appendChild(textnode);
        document.querySelector("body").appendChild(node);
});

document.querySelector('#someID').addEventListener('keydown',function(e){
    if (e.keyCode == 13 || e.keyCode == 32){
        this.click();
    }
});
</script>

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

  • 724
מי חייב להנגיש את אתר האינטרנט שלו
Profile Image

מי חייב להנגיש את אתר האינטרנט שלו

עדן טהרני עם סינגל בכורה
Profile Image

עדן טהרני עם סינגל בכורה

תוסף נגישות לדפדפן - אנדי און
Profile Image

תוסף נגישות לדפדפן - אנדי און