Skip to content
Related Articles

Related Articles

Improve Article

What is accessibility & ARIA role means in a web application ?

  • Last Updated : 16 Jul, 2021
Geek Week

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. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :