Accesibilidad en la aplicación web: Es una idea que la tecnología debe ser igualmente accesible para personas con y sin discapacidad y que se eliminen las barreras para acceder a la web.
¿A quién se ayuda a la hora de hacer accesibles los sitios web?
Personas con discapacidades visuales como baja visión o daltonismo, discapacidades auditivas como sordera. Las discapacidades cognitivas pueden incluir personas con discapacidades auditivas o aquellas afectadas por convulsiones. Discapacidades físicas/motoras como lesiones por estrés repetitivo, amputación, artritis. También puede mejorar varias otras experiencias, como conexiones a Internet, entornos ruidosos/ocupados.
ARIA significa Aplicaciones de Internet Enriquecidas Accesibles. Es un conjunto de atributos que define formas de hacer que el contenido web y las aplicaciones web sean más accesibles para las personas con discapacidad. Esto viene específicamente en HTML 5. Esto es de gran utilidad para aquellas personas que tienen problemas de visión o para aquellas personas con discapacidades que quieren usar Internet. Una forma de uso es a través de un lector de pantalla. Habla lo que hay en la página web. Por ejemplo, Screen Reader es una extensión gratuita de Chrome.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css" /> </head> <body> <section class="header"> <nav> <a href="/" class="logo">GeeksforGeeks</a> <div class="nav-links"> <ul> <li><a href="/who">who am i</a></li> <li><a href="/services">services</a></li> <li><a href="/contact">contact</a></li> </ul> </div> </nav> </section> <main> <div class="container"> <h1>About us</h1> <p class="subtext"> We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> <h2>Read more about our services</h2> <ul> <li> <h3>Full stack web development:</h3> <p> This course will help you to learn Full Stack Web Development using: JavaScript, Webpack, React, Redux, React-Router, Hooks etc. to build Front-end and Java, Spring / Spring Boot, JPA / Hibernate, MySQL, RESTful APIs, Micro-services & related technologies to build Back-end. </p> </li> <li> <h3>Competitive Programming:</h3 <p> Looking to be a programmer for a top company or wishing to top the charts of leading coding competitions, youve come to the right place! This live course will improve your problem- solving skills so you can write reliable and optimal codes. You will be mentored by programming experts and they will give you tips and tricks on which competitions to participate in and how to succeed in them! </p> </li> <li> <h3>System Design:</h3> <p> centric course in which the content has been designed in a manner that will prepare you for System Design interviews for companies like Google, Amazon, Adobe, Uber, etc. Industry experts having first-hand experience will be mentoring and guiding you throughout the duration of the course. </p> </li> </ul> </div> </main> </body> </html>
Código CSS:
style.css
* {
margin: 0;
padding: 0;
}
body {
background: palegreen;
}
nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
.nav-links {
flex: 1;
text-align: right;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: brown;
text-decoration: none;
font-size: 20px;
}
.header nav a {
color: brown;
text-decoration: none;
font-size: 30px;
}
.container h1 {
color: brown;
text-decoration: none;
font-size: 30px;
padding: 8px 80px;
}
.container p {
font-size: 20px;
padding: 8px 82px;
}
.container h2 {
font-size: 30px;
padding: 8px 70px;
}
.container ul li {
font-size: 20px;
padding: 8px 70px;
}
Producción:
El lector de pantalla leería el contenido de la página web.
Publicación traducida automáticamente
Artículo escrito por sabarish0088 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA