Keeping your website accessible is not as daunting a task as it may seem! Here are a few simple tips you should have in mind while you are coding:
Alternative Text: The alternative text serves two main purposes:
- Provide users with visual impairments a description of what that image represents.
- If an image is not loading due to slow internet or other issues, users can use that description to know what is missing from the page.
<!DOCTYPE HTML> <html>
<head>
<meta charset="UTF-8">
<title>Alt Text</title>
</head>
<body>
<img src=
"gfg.jpg" alt="puppy image" class="image">
</body>
</html>
|
Output:
Title Tag: The <title> tag in HTML is used to define the title of HTML document. It sets the title in the browser toolbar. It provides the title for the web page when it is added to favorites. It displays the title for the page in search engine results.
<!DOCTYPE html> <html>
<head>
<title>Accessibility in HTML | Home Page</title>
</head>
<body>
<h1>Home Page</h1>
</body>
</html>
|
Output:
Headings: If you are using a heading because you like the font size, stop being lazy and use CSS. Headings play an important role in keeping your website structure accessible. Users that rely on a screen reader to navigate the web can go through a website’s content each heading at a time. The screen reader will go through the headings in order and if you use them correctly, you can make your website more organized and easier to navigate.
- The h1 tag should only be used for the title of the page.
- The h2 tag is used for the sub-categories. Example: If you are creating a website discussing each character on the TV show Friends, you should use h1 for the title “Friends” and h2 for each character (Rachel, Monica, Phoebe, Chandler, Joey, and Ross).
- Do not overuse headings. If you need more than h3 you’re probably using it too much and your website could be difficult to navigate.
Labels: You should use labels to indicate the purpose of certain items on your page.
- If you have a button or a form on your page, you should use a label that indicates label of the button or form element. Again, it is very helpful for users who rely on screen readers
- ARIA labels are the best way to add accessible labels and descriptions. It overrides any other native labeling mechanism, such as the HTML label element.
<!DOCTYPE HTML> <html>
<head>
<meta charset="UTF-8">
<title>Labels</title>
</head>
<body>
<form aria-label="Go to geeks for geeks home page" target=”_blank”>
<input type="submit" value="Go to GeeksForGeeks" />
</form>
</body>
</html>
|
Output:
Menus: For a drop-down menu to be accessible, the drop-down items need to stay on the screen. Otherwise, if the user accidentally hovers outside of the drop-down menu, they won’t be able to listen to the items anymore. Use on-click instead of hover to make sure the menu stays on the screen.
<!DOCTYPE html> <html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
<style>
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
z-index: 1;
}
.dropdown-items a {
display: block;
}
.show {
display: block;
}
</style>
<script>
function myFunction() {
document.getElementById("dropdown-menu")
.classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.
getElementsByClassName("dropdown-items");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">
Dropdown
</button>
<div id="dropdown-menu" class="dropdown-items">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
</body>
</html>
|
Output:
TAB key:
- If you want to make sure your website can be easily navigated but you don’t want to test your code with a screen reader with every change you make, use the TAB key on your keyboard!
- The screen reader will go through your website content in the same order the TAB key does.