הנגשת קוד

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

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

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

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

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

מתחילים

כאשר אלמנט המשמש ככפתור, אינו מוגדר בעזרת 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>

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

  • 113
להקת שלוה - משנה את השיח הישראלי לטובה
Profile Image

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

עיקרון שלישי - הבנה
Profile Image

עיקרון שלישי - הבנה

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

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