Diferencia entre revisiones de «2526UPSA1.4.4-A-001»

De WCAG Wiki
VisualWikitexto
202526UPSA20 (discusión | contribs.)
alumnos
25 ediciones
Creación de ejemplos práctico (ACC y NOA) para el criterio 1.4.4-A Redimensionar texto - Javier Pozo (UPSA)
 
202526UPSA20 (discusión | contribs.)
alumnos
25 ediciones
Creación de ejemplos práctico (ACC y NOA) para el criterio 1.4.4-A Redimensionar texto - Javier Pozo (UPSA)
 
Línea 9: Línea 9:
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_html=<nowiki>


   <div class="contenedor-fijo">
   <div class="col-xs-12 col-md-4 contenedor-recortado">
     <h1>Lo más consultado</h1>
     <div id="center_1_2R">
    <ul>
        <div class="panel panel-default">
      <li>Información y orientación sobre trámites, servicios y recursos</li>
            <div class="panel-heading">
      <li>Asesórate. Elije entidad y pide cita</li>
                <h2 class="panel-title">Lo más consultado</h2>
      <li>Plan de empresa</li>
            </div>
      <li>Cómo obtener financiación</li>
            <div class="panel-body">
     </ul>
                <ul class="list-group">
  </div>
                    <li class="list-group-item">Información y orientación sobre trámites...</li>
                    <li class="list-group-item">Asesórate. Elije entidad y pide cita</li>
                    <li class="list-group-item">Plan de empresa</li>
                    <li class="list-group-item">Cómo obtener financiación</li>
                </ul>
            </div>
        </div>
     </div>
</div>


<style>
<style>
   .contenedor-fijo {
   .contenedor-recortado {
      background-color: #fff;
    height: 174.8px;  
      width: 500px;
    margin-left: -15px;
      height: 250px;
    overflow: hidden;  
      overflow: hidden; /* El texto que sobra se corta */
    border: 1px solid #ccc;
      border: 1px solid #ccc;
    background-color: #fff;
      padding: 20px;
   }
   }


   h1 {
   .panel-title {
     font-size: 24px;
     font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
   }
   }


   li {
   .list-group-item {
     font-size: 18px;
     font-size: 14px;
     margin-bottom: 10px;
     padding: 5px 0;
   }
   }
</style>
</style>
 
 
</nowiki>
</nowiki>
|noa_barrera_explicacion=Al usar height: 250px, el contenedor no puede expandirse hacia abajo. Cuando el usuario aplica un zoom del 200%, el tamaño de la fuente se duplica. Las cuatro líneas de texto ya no caben en 250 píxeles, provocando que el último elemento ("Cómo obtener financiación") se corte, tal como se ve en tu captura. Esto incumple el criterio 1.4.4 Redimensionar texto.
|noa_barrera_explicacion=Al usar height: 250px, el contenedor no puede expandirse hacia abajo. Cuando el usuario aplica un zoom del 200%, el tamaño de la fuente se duplica. Las cuatro líneas de texto ya no caben en 250 píxeles, provocando que el último elemento ("Cómo obtener financiación") se corte, tal como se ve en tu captura. Esto incumple el criterio 1.4.4 Redimensionar texto.
Línea 48: Línea 57:
|acc_barrera_evidencia_html=<nowiki>
|acc_barrera_evidencia_html=<nowiki>


   <header class="gov-header">
   <header class="homepage-header">
    <div class="header-top">
  <div class="govuk-width-container">
      <div class="logo">GOV.UK</div>
    <div class="homepage-header__title-container">
        <nav class="header-nav">
      <h1 class="homepage-header__title">
          <button class="menu-toggle">Menu <span>▼</span></button>
        <span class="homepage-header__intro homepage-inverse-header__intro--bold">
           <button class="search-toggle">🔍</button>
           El mejor lugar para encontrar servicios e información gubernamentales.
         </nav>
         </span>
       </div>
       </h1>
 
     </div>
  <div class="header-content">
 
     <h1>The best place to find government services and information</h1>
     <div class="homepage-header__search">
   
       <label class="govuk-label">Buscar</label>
     <div class="search-box">
       <div class="gem-c-search">
       <label for="search-input">Search</label>
         <input class="gem-c-search__input" type="search">
       <div class="input-group">
         <button class="gem-c-search__submit" type="submit">Buscar</button>
         <input type="text" id="search-input" name="q">
         <button type="submit" aria-label="Search">🔍</button>
       </div>
       </div>
     </div>
     </div>
Línea 71: Línea 78:


<style>
<style>
   .gov-header {
   .homepage-header {
     background-color: #1d70b8;
     background-color: #1d70b8;  
     color: white;
     color: #fff;
     padding: 1.5rem;
     padding: 30px 0;
     font-family: Arial, sans-serif;
     height: auto;  
     min-height: auto;  
     min-height: 200px;
    width: 100%;
   }
   }


   .header-top {
   .govuk-width-container {
     display: flex;
     max-width: 960px;
    justify-content: space-between;
     margin: 0 auto;
     align-items: center;
     padding: 0 15px;
     margin-bottom: 2rem;
   }
   }


   h1 {
   .homepage-header__title {
     font-size: 2.5rem;  
     font-size: 3rem;  
     line-height: 1.1;
     line-height: 1.25;
     margin-bottom: 1.5rem;
     margin: 0 0 30px 0;
     font-weight: bold;
     font-family: sans-serif;
    max-width: 900px;
     word-wrap: break-word;  
  }
 
  label {
     display: block;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
   }
   }


   .input-group {
   .gem-c-search {
     display: flex;
     display: flex;
     max-width: 600px;
     max-width: 600px;
   }
   }


   #search-input {
   .gem-c-search__input {
     flex-grow: 1;
     flex: 1;
     height: 3rem;
     height: 50px;
     border: none;
     border: none;
     padding: 0 10px;
     padding: 0 15px;
     font-size: 1.2rem;
     font-size: 1.2rem;
   }
   }


   .input-group button {
   .gem-c-search__submit {
     width: 3rem;
     width: 50px;
     background-color: #f3f2f1;
     background-color: #f3f2f1;
     border: none;
     border: none;
     cursor: pointer;
     cursor: pointer;
    font-size: 1.5rem;
   }
   }
</style>
</style>

Revisión actual - 18:08 18 dic 2025

Edición de la página como formulario

1. Información básica

Id del criterio: 1.4.4 - Redimensionar texto (Nivel: AA)
Título del subcriterio: 1.4.4-A
Universidad participante: UPSA
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.4-A


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://xarxaempren.gencat.cat/es/inici/index.html">https://xarxaempren.gencat.cat/es/inici/index.html</a> <a rel="nofollow" class="external free" href="https://xarxaempren.gencat.cat/es/inici/index.html">https://xarxaempren.gencat.cat/es/inici/index.html</a>]

2.1.2. Código HTML:

<div class="col-xs-12 col-md-4 contenedor-recortado"> <div id="center_1_2R"> <div class="panel panel-default"> <div class="panel-heading"> <h2 class="panel-title">Lo más consultado</h2> </div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item">Información y orientación sobre trámites...</li> <li class="list-group-item">Asesórate. Elije entidad y pide cita</li> <li class="list-group-item">Plan de empresa</li> <li class="list-group-item">Cómo obtener financiación</li> </ul> </div> </div> </div> </div> <style> .contenedor-recortado { height: 174.8px; margin-left: -15px; overflow: hidden; border: 1px solid #ccc; background-color: #fff; } .panel-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .list-group-item { font-size: 14px; padding: 5px 0; } </style>



Explicación del problema detectado:
Al usar height: 250px, el contenedor no puede expandirse hacia abajo. Cuando el usuario aplica un zoom del 200%, el tamaño de la fuente se duplica. Las cuatro líneas de texto ya no caben en 250 píxeles, provocando que el último elemento ("Cómo obtener financiación") se corte, tal como se ve en tu captura. Esto incumple el criterio 1.4.4 Redimensionar texto.

Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afectados: usuarios con baja visión (cataratas, presbicia, glaucoma) que usan ampliación de texto.

Barrera: pérdida total de información crítica, ya que el final de las frases desaparece y es imposible de leer o recuperar.

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
[<a rel="nofollow" class="external free" href="https://www.gov.uk/">https://www.gov.uk/</a> <a rel="nofollow" class="external free" href="https://www.gov.uk/">https://www.gov.uk/</a>]


2.2.2 Código HTML:

<header class="homepage-header"> <div class="govuk-width-container"> <div class="homepage-header__title-container"> <h1 class="homepage-header__title"> <span class="homepage-header__intro homepage-inverse-header__intro--bold"> El mejor lugar para encontrar servicios e información gubernamentales. </span> </h1> </div> <div class="homepage-header__search"> <label class="govuk-label">Buscar</label> <div class="gem-c-search"> <input class="gem-c-search__input" type="search"> <button class="gem-c-search__submit" type="submit">Buscar</button> </div> </div> </div> </header> <style> .homepage-header { background-color: #1d70b8; color: #fff; padding: 30px 0; height: auto; min-height: 200px; width: 100%; } .govuk-width-container { max-width: 960px; margin: 0 auto; padding: 0 15px; } .homepage-header__title { font-size: 3rem; line-height: 1.25; margin: 0 0 30px 0; font-family: sans-serif; word-wrap: break-word; } .gem-c-search { display: flex; max-width: 600px; } .gem-c-search__input { flex: 1; height: 50px; border: none; padding: 0 15px; font-size: 1.2rem; } .gem-c-search__submit { width: 50px; background-color: #f3f2f1; border: none; cursor: pointer; } </style>



Explicación de la solución aplicada:
La clave para cumplir con el criterio 1.4.4-A es el diseño flexible y el uso de unidades relativas. En lugar de imponer una altura estricta, utilizamos min-height o simplemente dejamos que la altura sea automática. Esto permite que, si el texto se duplica en tamaño al aplicar el zoom del 200%, el contenedor "respire" y se expanda verticalmente de forma fluida para albergar el nuevo volumen de información.

Además, al emplear unidades como el rem o em para la fuente y el espaciado, logramos que la interfaz se adapte correctamente sin provocar solapamientos o textos ilegibles. Como resultado, el diseño sigue siendo totalmente funcional y perceptible, permitiendo que personas con discapacidad visual accedan a la información sin depender de herramientas externas de aumento. Es, en esencia, permitir que la página se mueva y cambie de forma según las necesidades del usuario.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA1.4.4-A-001&oldid=3971»