2526UFV1.3.1-B-001
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.3_Adaptable/1.3.1-B
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<!-- NOA: Fake headings (visual styling only) -->
<div style="font-size:34px; font-weight:bold; margin-bottom:10px;">
Scholarships and Financial Aid
</div>
<div style="font-size:22px; font-weight:bold; margin-top:18px;">
Eligibility requirements
</div>
<div>
To apply, you must be enrolled as a full-time student and submit the required documents before the deadline.
</div>
<div style="font-size:22px; font-weight:bold; margin-top:18px;">
Required documents
</div>
<div>
ID card, academic transcript, and proof of income.
</div>
Explicación del problema detectado:
In this example, the page visually appears to be structured using titles and sections, but these elements are created only through visual styling such as larger text and bold formatting. The structure and hierarchy of the content are not properly defined in a way that can be interpreted by assistive technologies. As a result, the relationships between the different sections of the page are communicated only visually, which does not meet the requirements of criterion 1.3.1-B.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Users who rely on assistive technologies, such as screen readers, are unable to recognize the section titles as real headings. This makes it difficult to understand the organization of the page or to navigate directly to specific sections. Users may need to read the entire content sequentially to find the information they need, increasing effort, time, and the risk of missing important details. This negatively affects accessibility, especially for users with visual or cognitive disabilities.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<!-- ACC: Real headings that define structure programmatically -->
<h1>Scholarships and Financial Aid</h1>
<h2>Eligibility requirements</h2>
<p>
To apply, you must be enrolled as a full-time student and submit the required documents before the deadline.
</p>
<h2>Required documents</h2>
<p>
ID card, academic transcript, and proof of income.
</p>
Explicación de la solución aplicada:
In the accessible version, the page uses proper structural elements to represent titles and sections, ensuring that the hierarchy and relationships between different parts of the content are clearly defined. This allows assistive technologies to correctly identify headings and provide efficient navigation through the page. As a result, all users can understand the structure of the content and move between sections easily, satisfying the requirements of criterion 1.3.1-B.
