Diferencia entre revisiones de «Principio 1/1.1 Texto Alternativo/1.1.1-E»

De WCAG Wiki
← Edición anteriorEdición siguiente →
VisualWikitexto
Sin resumen de edición
Línea 1: Línea 1:
== '''1.1.1-E. Alternativas para arte ASCII, emoticonos y leetspeak ''' ==
{{CriterioWCAG
<html>
|id_wcag_criterio=1.1.1
<!-- criterio 1.1.1-E -->
|id_wcag_subcriterio=1.1.1-E
<article class="wcag-card">
|wcag_titulo_criterio=1.1.1-E. Alternativas para arte ASCII, emoticonos y leetspeak
  <section class="wcag-info">
|wcag_nivel=A
    <ul>
|wcag_version=2.0
      <li><span class="label">Nivel:</span><span class="value">A</span></li>
|wcag_principio=1_Perceptible
      <li><span class="label">Versión:</span><span class="value">2.0</span></li>
|wcag_principio_url=Principio_1
      <li><span class="label">Principio:</span><span class="value">1. Perceptible</span></li>
|wcag_pauta=1.1_Textos_alternativos
      <li><span class="label">Pauta:</span><span class="value">1.1 Textos alternativos</span></li>
|wcag_pauta_url=Principio_1/1.1_Texto_Alternativo
      <li><span class="label">Categoría:</span><span class="value">Contenido</span></li>
|wcag_grupo=Contenido
      <li><span class="label">Subcategoría:</span><span class="value">No-texto</span></li>
|wcag_subgrupo=No-texto
    </ul>
  </section>
  <section class="wcag-users">
    <p>Usuarios más afectados</p>
    <ul>
      <li><img src="/images/4/4d/Sinvision.png" alt="Icono de una persona con discapacidad visual" />
      <span>Personas con discapacidad visual total - <span class="gravedad">Barrera grave</span></span></li>
        <li>
          <img src="/images/4/40/Cognitiva.png" alt="Icono discapacidad cognitiva" class="icono-discapacidad" />
          Personas con discapacidad cognitiva – <span class="gravedad">Barrera leve</span>
        </li>
    </ul>
  </section>
</article>


<!--
|wcag_discapacidades=
Análisis: 1.1.1-E
<li class="discapacidad-item">
- Discapacidad: Personas con discapacidad visual total
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
- Problema: Arte ASCII, emoticonos y leetspeak requieren alternativas textuales; sin ellas, la información se pierde.
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
- Gravedad: Grave
  <span class="gravedad gravedad-grave">Barrera grave</span>
-->
</li>
</html>
<li class="discapacidad-item">
  [[Archivo:Cognitiva.png|20px|class=icon-discapacidad|alt=Discapacidad cognitiva]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
  <span class="gravedad gravedad-leve">Barrera leve</span>
</li>


[[Categoría: Visual total]]
|wcag_lista_discapacidades=
[[Categoría: Cognitiva]]
[[Categoría:Visual total]]
[[Categoría:Cognitiva]]


[[Categoría: Contenido]]
|wcag_texto_criterioOAW=
[[Categoría: Nivel-A]]
El arte ASCII, emoticonos y texto en leetspeak deben tener una alternativa textual cercana que explique su significado para garantizar que la información sea accesible a los usuarios que no pueden interpretarlos directamente.
[[Categoría: Versión-2.0]]


|wcag_descripcion_resumida=
Cuando se emplean caracteres ASCII para crear dibujos, emoticonos o escritura no convencional como leetspeak (ej.: "H0L4"), es necesario incluir una explicación textual al lado para que los lectores de pantalla y usuarios con dificultades cognitivas puedan comprender el contenido.


=== Descripción y comprensión del criterio ===
Ejemplos de contenido:
<div class="wcag-info-criterio">
- Arte ASCII
El arte ASCII, emoticonos y leetspeak deben tener alternativas textuales cercanas que transmitan la misma información.
</div>
==== Descripción resumida ====
 
<div class="wcag-info-criterio"> Cuando uses dibujos con caracteres (arte ASCII), emoticonos o jergas como <code>leetspeak</code>, incluye un texto explicativo al lado.
 
'''Carácteres ASCII:'''
 
   @@@@   
   @@@@   
  @....@  
  @....@
  @.@@.@  
  @.@@.@
  @....@  
  @....@
   @@@@   
   @@@@   
- Emoticono: `:D` 
- Leetspeak: `H0L4`


|wcag_objetivo=
Garantizar que contenido expresado de forma no estándar mediante símbolos o caracteres especiales sea comprensible para todas las personas, incluyendo usuarios de lectores de pantalla o personas con dificultades cognitivas.


'''Emoticonos:'''
|wcag_importancia=
<code> :D </code>
Los lectores de pantalla pueden leer incorrectamente arte ASCII, emoticonos o texto leetspeak, produciendo mensajes incompletos o confusos.
 
Una explicación textual evita malentendidos y asegura acceso equitativo a la información.
'''Código leetspeak:'''
<code> ("H0L4") </code>
 
 
Así, los lectores de pantalla pueden interpretar correctamente el contenido.
 
</div>
 
==== Objetivo ====
 
<div class="wcag-info-criterio"> Garantizar que los símbolos o textos no estándar sean comprensibles por todas las personas, incluidas las que utilizan tecnología de apoyo. </div>
 
==== Importancia de cumplir el criterio ====
 
<div class="wcag-info-criterio">
Los lectores de pantalla pueden leer incorrectamente arte ASCII o caracteres especiales.  
 
Añadir una breve explicación cercana evita confusión o pérdida de información. </div>
 
==== Referencias WCAG ====
 
<div class="wcag-info-criterio">
* <span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Comprender el criterio 1.1.1 (en inglés)]</span>
* <span lang="en"> [https://www.w3.org/WAI/WCAG22/Techniques/html/H86 Comprender técnica H86 – Alternativas para arte ASCII, emoticonos y leetspeak (en inglés)]</span> </div>
 
</div>
 
==== Recursos de apoyo ====


<div class="wcag-info-criterio">  
|wcag_referencias=
* No hay
<ul>
</div>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html Understanding Success Criterion 1.1.1: Non-text Content]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/html/H86 Technique H86 – Providing text alternatives for ASCII art, emoticons, and leetspeak]</span></li>
</ul>


=== Evaluación del criterio ===
|wcag_recursos=
==== Tipo de comprobación ====
No hay


<div class="wcag-info-criterio">
|wcag_tipo_evaluacion=Manual
Comprobación <strong>Manual</strong>


Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.
|wcag_pasos_evaluacion=
</div>
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Abrir la página y activar Web Developer Toolbar.</li>
<li><span class="paso-badge">Paso 2.</span> Localizar arte ASCII, emoticonos o leetspeak.</li>
<li><span class="paso-badge">Paso 3.</span> Verificar que existe una explicación textual clara y cercana.</li>
</ol>


==== Procedimiento de evaluación ====
|wcag_resultado_evaluacion=
Los emoticonos, arte ASCII y texto leetspeak cuentan con una descripción accesible cercana que explica su significado para usuarios con lectores de pantalla o dificultades cognitivas.


<div class="wcag-info-criterio">
|wcag_ejemplo_evaluacion=
<span class="paso-badge>Paso 1.</span>
Ejemplo accesible de emoticono y leetspeak:
Usa la herramienta de ''' [https://chromewebstore.google.com/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es Web Developer Toolbar].'''
 
<span class="paso-badge>Paso 2.</span> Localizar arte ASCII, emoticonos o leetspeak.
 
<span class="paso-badge>Paso 3.</span> Verificar que se incluye una explicación textual cercana.
 
</div>
 
==== Ejemplo ====
<div class="wcag-info-criterio">
Se muestra un texto con emoticonos y leetspeak con una descripción.
 
<div class="accessibility-card">
<pre class="wcag-codigo-html">


<pre class="wcag-codigo-html">
<span role="img" aria-label="Emoticono de cara feliz, indica satisfacción">😀</span>
<span role="img" aria-label="Emoticono de cara feliz, indica satisfacción">😀</span>
<span aria-label="HOLA">H0L4</span>
<span aria-label="HOLA">H0L4</span>
</pre>


</pre>
|wcag_otras_herramientas_evaluacion=
</div>
<strong>Lector de pantalla:</strong> JAWS, NVDA, VoiceOver
</div>
Verificar que la información transmitida es comprensible.
 
==== Otras herramientas de evaluación ====
 
<div class="wcag-info-criterio">  
'''Lector de pantalla'''
 
Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a un codigo ASCII, u de otro tipo.
 
'''Inspector del navegador'''


Puedes usar la herramienta de inspección del navegador para comprobar si un codigo ASCII u de otro tipo contiene una descripción comprensible </code>.  
<strong>Inspector del navegador:</strong>
Comprobar que las descripciones alternativas están presentes y son correctas.


</div>
}}

Revisión del 11:05 4 nov 2025

1.1.1-E. Alternativas para arte ASCII, emoticonos y leetspeak

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

Enunciado del criterio (Observatorio de Accesibilidad Web)

  • El arte ASCII, emoticonos y texto en leetspeak deben tener una alternativa textual cercana que explique su significado para garantizar que la información sea accesible a los usuarios que no pueden interpretarlos directamente.

Comprensión del criterio

Descripción resumida

Cuando se emplean caracteres ASCII para crear dibujos, emoticonos o escritura no convencional como leetspeak (ej.: "H0L4"), es necesario incluir una explicación textual al lado para que los lectores de pantalla y usuarios con dificultades cognitivas puedan comprender el contenido.

Ejemplos de contenido: - Arte ASCII 

 @@@@  
@....@  
@.@@.@  
@....@  
 @@@@

- Emoticono: `:D`

- Leetspeak: `H0L4`

Objetivo

Garantizar que contenido expresado de forma no estándar mediante símbolos o caracteres especiales sea comprensible para todas las personas, incluyendo usuarios de lectores de pantalla o personas con dificultades cognitivas.

Importancia de cumplir el criterio

Los lectores de pantalla pueden leer incorrectamente arte ASCII, emoticonos o texto leetspeak, produciendo mensajes incompletos o confusos. Una explicación textual evita malentendidos y asegura acceso equitativo a la información.

Referencias WCAG

Recursos de apoyo

No hay

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Abrir la página y activar Web Developer Toolbar.
  2. Paso 2. Localizar arte ASCII, emoticonos o leetspeak.
  3. Paso 3. Verificar que existe una explicación textual clara y cercana.

Resultado esperado

Los emoticonos, arte ASCII y texto leetspeak cuentan con una descripción accesible cercana que explica su significado para usuarios con lectores de pantalla o dificultades cognitivas.

Ejemplo

Ejemplo accesible de emoticono y leetspeak: 
<span role="img" aria-label="Emoticono de cara feliz, indica satisfacción">😀</span>
<span aria-label="HOLA">H0L4</span>

Otras herramientas de evaluación

Lector de pantalla: JAWS, NVDA, VoiceOver

Verificar que la información transmitida es comprensible.

Inspector del navegador:

Comprobar que las descripciones alternativas están presentes y son correctas.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 1.1.1-E. Alternativas para arte ASCII, emoticonos y leetspeak

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.1_Texto_Alternativo/1.1.1-E&oldid=3061»