twitter-bootstrap - only - media component bootstrap

¿Por qué las pestañas de Bootstrap tienen rol="presentación"?

Question

Estoy trabajando en un sistema de diseño que se extiende desde el marco de Bootstrap. Uno de los objetivos clave es la accesibilidad. Al implementar pestañas de Bootstrap, veo que aplican el role="presentation" a los elementos de la lista en su lista de navegación.

Así que armé un poco de HTML de prueba de la plantilla de Bootstrap:

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

La especificación ARIA dice que la presentación es un rol para el cual:

El uso previsto es cuando un elemento se utiliza para cambiar el aspecto de la página pero no tiene toda la relevancia funcional, interactiva o estructural que implica el tipo de elemento.

Me parece que los elementos <li> tienen una relevancia estructural para alguien que usa un dispositivo de accesibilidad, ya que te dicen cuántas pestañas están presentes. Si tuviera que descubrir, por ejemplo, que la tercera pestaña contenía la información que le interesaba, navegar a la lista y saber que hay tres pestañas le permitiría llegar a lo que desea con mayor rapidez.

Además, al acceder a ese HTML de prueba con ChromeVox, las listas se anuncian de manera idéntica. Así que parece que el role no tiene ningún efecto práctico.

He buscado en Google esta pregunta, pero no he encontrado ninguna discusión al respecto. Entonces, ¿alguien sabe por qué esto es parte del marco de Bootstrap?

Answer 1

Es principalmente para fines de accesibilidad. http://john.foliot.ca/aria-hidden/ . Puedes eliminar o cambiar el "rol"

Answer 2

Vea el artículo sobre las pestañas accesibles de Marco en https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/

Su implementación tiene role="presentation" en el li para indicar "que el lector de pantalla debe ignorar los elementos de la lista" y luego agrega el rol de "pestaña" en los enlaces "que asigna los roles al tipo de elemento reconocible del lector de pantalla deseado. "

Un punto que se mencionó en un problema en el proyecto de accesibilidad bootstrap ( https://github.com/paypal/bootstrap-accessibility-plugin/issues/59 ) es que las pestañas (correctas o incorrectas) se usan con bastante frecuencia como navegación, por lo que Sería inapropiado incluir siempre los roles tablista y tabulador. Como señala el artículo de Marco: "Hay muchas circunstancias en las que las pestañas no son la semántica apropiada".

Por cierto, nuestro trabajo no se hace más fácil por el hecho de que las combinaciones individuales de lectores de pantalla y navegadores no lo admiten de la misma manera. (Consulte este artículo para un informe sobre eso: http://john.foliot.ca/aria-hidden/ )