Web Accessibility Analyzer | HTML CSS JavaScript

Web Accessibility Analyzer with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #29

Project Overview

The Web Accessibility Analyzer is a frontend tool developed using HTML, CSS, and JavaScript that helps evaluate basic accessibility aspects of web pages. Users can analyze webpage HTML to detect common accessibility issues like images without alt text, improper heading hierarchy, and links that lack descriptive text. The tool highlights potential problems and provides feedback to help improve the accessibility and usability of websites. This project demonstrates concepts such as DOM parsing, accessibility validation, and dynamic result reporting, making it a practical project for understanding web accessibility testing.

Key Features

Analyzes HTML to detect common accessibility issues
Checks images for missing alt text attributes
Identifies incorrect heading hierarchy
Detects non-descriptive link text like “click here”
Displays accessibility warnings with clear feedback
Simple and user-friendly interface
Responsive design for desktop and mobile devices

HTML Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Accessibility Analyzer</title>
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">

<h1>Website Accessibility Checker</h1>

<input id="urlInput" placeholder="Enter Website URL">

<button onclick="openWebsite()">Open Website</button>

<textarea id="htmlInput" placeholder="Paste website HTML here"></textarea>

<button onclick="checkAccessibility()">Check Accessibility</button>

<div id="results"></div>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
padding:40px;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:700px;
max-width:95%;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

h1{
text-align:center;
margin-bottom:20px;
}

input{
width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:6px;
margin-bottom:10px;
}

textarea{
width:100%;
height:200px;
padding:10px;
border:1px solid #ddd;
border-radius:6px;
margin-bottom:15px;
}

button{
padding:10px 20px;
border:none;
background:#2563eb;
color:white;
border-radius:6px;
cursor:pointer;
margin-bottom:10px;
}

button:hover{
background:#1d4ed8;
}

#results{
margin-top:20px;
}

.issue{
background:#fee2e2;
padding:10px;
border-radius:6px;
margin-bottom:10px;
}

.success{
background:#dcfce7;
padding:10px;
border-radius:6px;
margin-bottom:10px;
}

Javascript Code

function openWebsite(){

const url = document.getElementById("urlInput").value

if(url.trim() === ""){
alert("Please enter a website URL")
return
}

window.open(url, "_blank")

}

function checkAccessibility(){

const html = document.getElementById("htmlInput").value
const results = document.getElementById("results")

results.innerHTML = ""

if(html.trim() === ""){
results.innerHTML = `<div class="issue">Please paste HTML code.</div>`
return
}

const parser = new DOMParser()
const doc = parser.parseFromString(html, "text/html")

let issues = 0

// Check images
const images = doc.querySelectorAll("img")

images.forEach(img=>{
if(!img.hasAttribute("alt") || img.alt.trim()===""){
addIssue("Image missing alt text.")
issues++
}
})

// Check headings
const headings = doc.querySelectorAll("h1,h2,h3,h4,h5,h6")
let lastLevel = 0

headings.forEach(h=>{
const level = parseInt(h.tagName[1])

if(level - lastLevel > 1){
addIssue("Heading structure skipped a level.")
issues++
}

lastLevel = level
})

// Check links
const links = doc.querySelectorAll("a")

links.forEach(link=>{
if(link.textContent.trim().toLowerCase() === "click here"){
addIssue("Link text 'Click here' is not descriptive.")
issues++
}
})

if(issues === 0){
results.innerHTML = `<div class="success">No accessibility issues found.</div>`
}

}

function addIssue(text){

const results = document.getElementById("results")

const div = document.createElement("div")

div.className = "issue"

div.innerText = text

results.appendChild(div)

}