Skip to content

Instantly share code, notes, and snippets.

@adrianRodriguez123

adrianRodriguez123/codigoWeb.html

Created September 1, 2022 07:39
Show Gist options
  • Save adrianRodriguez123/4314c649f464ae699968d3b84e83418e to your computer and use it in GitHub Desktop.
Save adrianRodriguez123/4314c649f464ae699968d3b84e83418e to your computer and use it in GitHub Desktop.
Download ZIP
Código web sobre las imágenes en el catálogo de accesibilidad
Raw
codigoWeb.html
<!--WEB-->
<!--Atributo alt-->
<div id="app">
<img src="nombreimagen" alt="Foto en el campo" width="500" height="500"/>
</div>
<!--aria-label-->
<button aria-label="Close" onclick="myDialog.close()">X</button>
<!--Atributo role-->
<div id="busqueda" role="buscar">....</div>
<div id="navbar" role="navegacion" aria-labelledby="cabecera_izquierda_navegacion">
<div role="cabecera">Noticias del dia</div>
<!--Atributo aria-labelledby-->
<input name="busqueda" type="text" aria-labelledby="boton_buscar">
<input name="searchbtn" id="boton_buscar" type="submit" value="Buscar">
<!--Atributo role con group-->
<div role="group" aria-labelledby="dni">
<span id="dni">DNI</span>
<input size="2" type="text" title="2 digitos" />
<input size="2" type="text" title="2 digitos" />
<input size="2" type="text" title="2 digitos" />
<input size="2" type="text" title="2 digitos" />
<input size="1" type="text" title="Letra" />
</div>
<!--Atributo role region-->
<div role="region" aria-label="Ejemplo">
<!-- region content -->
</div>
<!--Atributo role tooltip-->
<button aria-describedby="trash-desc">Borrar</button>
<p role="tooltip" id="trash-desc">Los objetos en la papelera se borran automáticamente al pasar 30 días.</p>
<!--¿Parpadeo?-->
<!--Título de la página-->
<title>Working with us: The Small Group: The Big Organization</title>
<!--Link propósito-->
<a href="registro.html">
¡Regístrate ya!
</a>
<a href="registro.html">
<img src="reg.gif" alt="Imagen para registrarse">
</a>
<a id="reg" href="reg.html" aria-labelledby="reg registro">Registrate</a></p>
<a href="reg.html" aria-label="Click aquí para registrarse">Registrate</a>
<!--Headings-->
<html>
<body>
<h1>Tipos de animales</h1>
...
<h3>Mamíferos</h3>
<h2>Primates</h2>
<h2>Roedores</h2>
...
...
<h3>Reptiles</h3>
...
<h3>Aves</h3>
</body>
</html>
<!--Atributo language-->
<html lang="fr">
<head>
<title>document écrit en français</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
...document écrit en français...
</body>
</html>
<!--Atributo aria-invalid-->
<script>
if (document.getElementById("email").value === '') {
$('#email').attr("aria-invalid", "true");
$("label[for='correo']").addClass('failed');
}
</script>
<label for="correo">Correo electrónico (obligatorio)</label><br>
<input type="text" name="email" id="email">
<!--Alert dialog-->
<div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1">
<div role="document" tabindex="0">
<h2 id="tituloDialogo1">Fecha incorrecta</h2>
<p id="descrDialogo1">No puedes poner una fecha antes de hoy.</p>
<button>OK</button>
</div>
</div>
<!--Aria required-->
<label for="Email">Email: </label>
<input type="text" name="email" id="email" aria-required="true"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment