2526UFV3.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_3/3.3_Assistencia_en_los_input/3.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:
<form onsubmit="return showError()">
<p>Email</p>
<input type="text" id="email" style="border:1px solid #000;">
<p>Password</p>
<input type="password" id="password" style="border:1px solid #000;">
<p id="errorMessage" style="display:none; color:red; margin-top:10px;">
There was an error.
</p>
<button type="submit">Log in</button>
</form>
<script>
function showError() {
// Simulate an error state: highlight fields but do not describe what is wrong
document.getElementById('email').style.border = '2px solid red';
document.getElementById('password').style.border = '2px solid red';
document.getElementById('errorMessage').style.display = 'block';
return false;
}
</script>
Explicación del problema detectado:
In this example, when the form contains an error, the page does not clearly describe what went wrong or which field needs to be corrected. The feedback is generic and does not provide meaningful guidance. Users are not told what information is missing or incorrect, so they cannot easily understand how to fix the problem. This fails criterion 3.3.1-B because errors are not properly described.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Users may feel stuck because they are told that something is wrong, but they are not told what to change. This is especially difficult for users with cognitive disabilities, users who are stressed or distracted, and users who cannot easily interpret visual cues. Screen reader users may also miss the meaning of the error if it is not clearly communicated. This increases frustration, causes repeated failed attempts, and may prevent users from completing the task.
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:
<form onsubmit="return validateForm()">
<p>Email</p>
<input type="text" id="email">
<p id="emailError" style="display:none; color:red; margin:6px 0 12px 0;">
Please enter a valid email address, for example name@example.com.
</p>
<p>Password</p>
<input type="password" id="password">
<p id="passwordError" style="display:none; color:red; margin:6px 0 12px 0;">
Password is required and must contain at least 8 characters.
</p>
<p id="errorSummary" style="display:none; color:red; margin-top:10px;">
Please correct the errors below and try again.
</p>
<button type="submit">Log in</button>
</form>
<script>
function validateForm() {
var email = document.getElementById('email');
var password = document.getElementById('password');
var emailError = document.getElementById('emailError');
var passwordError = document.getElementById('passwordError');
var errorSummary = document.getElementById('errorSummary');
// Reset
emailError.style.display = 'none';
passwordError.style.display = 'none';
errorSummary.style.display = 'none';
var hasError = false;
// Simple validation
var emailValid = email.value.includes('@') && email.value.includes('.');
if (!emailValid) {
emailError.style.display = 'block';
hasError = true;
}
if (password.value.trim().length < 8) {
passwordError.style.display = 'block';
hasError = true;
}
if (hasError) {
errorSummary.style.display = 'block';
// Move attention to the first visible error message
if (emailError.style.display === 'block') {
email.focus();
} else {
password.focus();
}
return false;
}
return true;
}
</script>
Explicación de la solución aplicada:
In the accessible version, errors are described clearly and specifically. Users are told exactly what is wrong and how to correct it, using concrete guidance and examples. The messages are placed next to the relevant fields, and the interface directs the user’s attention to the first error so it can be fixed immediately. This makes the form easier to understand and complete for all users, satisfying criterion 3.3.1-B.
