Question 234708 in CSS Question posted in
Some basic documentation can be found here.

Css – I'm not able to access the close button through keyboard

I’m not able to access the close image button through keyboard even I’ve added tabindex=0 in <img src= "close img link" tabindex="0" alt= "close" title="close" aria-labelledby="close" />

It is just getting Focus through keyboard but it not able to close by space and enter button on keyboard

Tags:

2

Answers


  1. 0

    Your image is just that, an image.
    To be a interactive area, you need to change it into one, e.g. a button (<button type="image">) or a link, or you need to capture the keyboard events with JavaScript

    Login or Signup to reply.
  2. 0

    I assume because you have used an aria- attribute, as well as been able to close with space, your also wanting to make accessible.

    I’m no accessibility expert here, but I believe the trick here is to place the image inside a button.

    The button is then automatically accessible, you can then add aria-label to indicate the button is a close button.

    Because the img has no meaning for accessibility, you can then also mark this with aria-hidden="true"

    Below is a working snippet, I’ve used an inline SVG, but using an IMG will be the same.

    const btn = document.querySelector('.image_button');
const frm = document.querySelector('.form');

btn.addEventListener('click', () => frm.remove());
    .image_button {
  padding: 3px;
  background: none;
  border: none;
}

.image_button svg {
  width: 1em;
  height: 1em;
  display: block;
}

.form {
  border: 1px solid black;
  padding: 1em;
}
    <div class="form">
  <p>The close button below can be closed via keyboard, and should also be screen reader friendly.  For keyboard user, press TAB to highlight and press SPACE to close.</p>

  Close me -> 
  
  <button aria-label="close" class="image_button">
    <svg 
      aria-hidden="true"
      viewPort="0 0 12 12" version="1.1"
         xmlns="http://www.w3.org/2000/svg">
        <line x1="0" y1="12" x2="12" y2="0" 
              stroke="red" stroke-width="2"/>
        <line x1="0" y1="0" x2="12" y2="12" 
              stroke="red" stroke-width="2"/>
    </svg>
  </button>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search