¿Qué es el atributo aria-labeledby?

El atributo aria-labelledby es un atributo inherente en el lenguaje de marcado de hipertexto que suele producir relaciones entre los objetos y sus etiquetas. Una vez que cualquier componente que contenga cada uno de los atributos aria-labeledby y aria-label, la alta prioridad de los navegadores será aria-labeledby sin ninguna duda. Este atributo aria-labelledby se puede utilizar con cualquier elemento de tipo de lenguaje de marcado de hipertexto típico. No se limita a los componentes, sin embargo, siempre debemos tener cuidado con el atributo aria-label, ya que no funciona con todos los elementos HTML.

Sintaxis:

<element aria-labelledby =""> Content </element>

Parámetros: una lista separada por espacios de todos los ID de elementos.

Los siguientes son algunos de la lista de todos los usos populares del atributo aria-labelledby:

Múltiples Etiquetas: Aquí cada elemento es un campo con ambas etiquetas, las etiquetas individuales y las etiquetas de grupo.

Ejemplo:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div id="myBillingId"><h4>Billing of the Course</h4></div> 
    <br> 
    <div> 
        <div id="myNameId">Student_ID: 
            <input type="text"
                aria-labelledby="myBillingId myNameId" /> 
        </div> 
    </div> 
    <div> 
        <div id="myCourseId">Course: 
            <input type="text"
                aria-labelledby="myBillingId myCourseId" /> 
        </div> 
    </div> 
</body> 
  
</html>

Producción:

Asociación de encabezados con regiones: en este ejemplo, el elemento de encabezado está vinculado con el div de encabezado de grupo, lo que establece la relación entre el encabezado de grupo y el elemento de encabezado.

Ejemplo:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
  
    <div role="main" aria-labelledby="geeks"> 
        <h1>GeeksforGeeks</h1> 
        <h4 id="geeks">A Computer Science Portal for Geeks</h4> 
    The articles are reviewed by reviewers and then published. 
  
    </div> 
</body> 
  
</html>

Producción:

Grupos de radio : en este ejemplo, el grupo de radio de un botón está en relación con el encabezado del contenedor.

Ejemplo:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div id="radio_label">My radio labels</div> 
    <ul role="radiogroup" aria-labelledby="radio_label"> 
        <li role="radio"> 
            <input type="radio">Geeks</li> 
        <li role="radio"> 
            <input type="radio">For</li> 
        <li role="radio"> 
            <input type="radio">Geeks</li> 
    </ul> 
</body> 
  
</html>

Producción:

Etiqueta de diálogo: En este ejemplo se establece la relación entre el diálogo y el elemento de cabecera.
Ejemplo:

<div role="dialog" aria-labelledby="dialogheader">

<dialog id="dialogheader">Choose a File</dialog>

A Computer Science Portal

</div>

Producción:

Definición en línea: en el siguiente ejemplo, la definición de un término que se describe en el flujo natural de la narración se asocia con el término en sí mediante el atributo aria-labeledby.

Ejemplo:

<p>
    The articles are reviewed by reviewers and then 
    <dfn id="placebo">placebo</dfn>, published. 
      
    <span role="definition" aria-labelledby="placebo"> 
        The reviewers basically check for
        correctness and basic plagiarism.
    </span> 
</p>

Producción:

Listas de definiciones: en el siguiente ejemplo, las definiciones en una lista de definiciones formal están asociadas con los términos que definen utilizando el atributo aria-labelledby.

Ejemplo:

<dl> 
    <dt id="Geeks">Geeks</dt> 
    <dd role="definition" aria-labelledby="Geeks"> 
        The articles are reviewed by reviewers
        and then published. 
    </dd>
      
    <dd role="definition" aria-labelledby="Geeks"> 
        The reviewers basically check for
        correctness and basic plagiarism. 
    </dd> 
  
    <dt id="GFG">GfG</dt> 
    <dd role="definition" aria-labelledby="GFG"> 
        The articles are reviewed by reviewers
        and then published. 
    </dd>
      
    <dd role="definition" aria-labelledby="GFG"> 
        The reviewers basically check for
        correctness and basic plagiarism. 
    </dd> 
</dl>

Producción:

Menús: en el ejemplo a continuación, un menú emergente está asociado con su etiqueta usando el atributo aria-labelledby

Ejemplo:

<div role="menubar"> 
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div> 
    <div role="menu" aria-labelledby="fileMenu"> 
        <div role="menuitem">GeeksforGeeks</div> 
        <div role="menuitem">Courses</div> 
    </div> 
</div> 

Producción:

Publicación traducida automáticamente

Artículo escrito por go4krishanu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta