Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

190
Vistas
How to handle focus and define ARIA roles

In the 1001st implementation of carousel I would like to "properly" handle the focus.

A few quick questions related to UI/UX of this component:

  • the arrows and the page navigation can accept focus if the TAB key is used. Should I keep the focus on the arrow button after a click event? Is it possible to do it wo calling element.focus() method - like pure HTML/CSS solution?
  • the page navigation area is suppose to handle the arrow keys inputs - the same question for it: Should I keep the focus once a page navigation button is pressed? Is it doable wo element.focus()? What should be ARIA role for this component?
  • the design requires 4px height navigation buttons - really hard to click on mobile. In order to make them useable, a div is added as a child of a navigation button so the height of click zone is extended to +20px. Is there better way to extend the "hot zone"?
  • how can I exclude the additional divs so as not to contribute to area of focus rectangle
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Regarding focus, you ask if the focus can be kept on the buttons without using focus(). Absolutely. In fact, when you click on a button, the focus will not move unless you specifically move it or if the element you clicked on gets hidden. So if your desire is to leave the focus on the button, then you don't have to do anything.

That's the preferred behavior - leave the focus on the button. If I'm exploring the carousel slides and I'm a keyboard user, I will navigate/tab to the "next" button and press enter. I'll review the slide and if it's not what I want, I'll press enter again (assuming my focus remained on the "next" button) to see the next slide. If you force the focus to move away from the button and to the carousel content, then I have to navigate back to the "next" button before I can view the next slide. It can be annoying to have to keep navigating back to the element I just selected.

I don't understand your third or fourth questions.

Have you looked at the two W3.org references regarding carousels?

  • https://www.w3.org/TR/wai-aria-practices/#carousel
  • https://www.w3.org/WAI/tutorials/carousels/
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda