What is accessibility & ARIA role means in a web application ?
Accessibility in the web application: It is an idea that the technology must be equally accessible for people with and without disabilities and any barriers to accessing the web are removed.
Who is being helped when making the websites accessible?
People with visual disabilities such as low vision or color blindness, auditory disabilities such as deafness. Cognitive disabilities can include people with hearing disabilities or those affected by seizures. Physical/Motor disabilities such as repetitive stress injuries, Amputation, Arthritis. It can also enhance various other experiences like internet connections, loud/busy environments.
ARIA means Accessible Rich Internet Applications. It is a set of attributes that defines ways to make web content and web applications more accessible to people with disabilities. This specifically comes in HTML 5. This is of great use for those people who are visually impaired or for those people with disabilities and want to use the internet. One way of using is through a screen reader. It speaks out what is there on the webpage. For example, Screen Reader is a free chrome extension.
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> |
CSS code:
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;} |
Output:
The screen reader would read the content on the webpage.
Please Login to comment...