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 built using HTML, CSS, and JavaScript that helps users check basic accessibility issues in website HTML. It allows users to enter a website URL or paste HTML code and then analyzes the markup for common problems that can affect accessibility and usability.

First, the tool checks images for missing or empty alt attributes. Next, it examines the heading structure to identify skipped heading levels and checks links for non-descriptive text such as “click here.” Finally, JavaScript displays clear warnings for detected issues or a success message when no problems are found. This project demonstrates DOM parsing, accessibility validation, DOM manipulation, and dynamic result reporting.

Key Features

HTML Accessibility Analysis: Users can paste website HTML into the analyzer and check it for common accessibility problems. The tool then displays the detected issues below the input area.
Image Alt Text Check: The analyzer checks every <img> element for an alt attribute. It reports images that have missing or empty alternative text.
Heading Structure Check: JavaScript examines the heading elements from <h1> to <h6>. It identifies cases where the heading hierarchy skips one or more levels.
Link Text Validation: The project checks links for generic text such as “click here.” When it finds this type of link text, the analyzer displays an accessibility warning.
Clear Issue Reporting: Detected problems appear as separate warning boxes below the analyzer. This makes it easier for users to understand which accessibility issues need attention.
Success Message: When the analyzer does not find any of the supported issues, it displays a success message. Therefore, users receive clear feedback after every check.
Website URL Option: Users can enter a website URL and open it in a new browser tab. This provides a convenient way to access a webpage before reviewing its HTML.
Simple User Interface: The project uses a centered white container with an input field, textarea, buttons, and results area. As a result, the interface remains simple and easy to navigate.
Responsive Design: The main container uses a flexible width with a maximum width setting. This allows the analyzer to fit comfortably on both desktop and smaller screens.
Dynamic Results: JavaScript creates and inserts issue messages into the results section dynamically. This means the page does not need to reload whenever the user performs an accessibility check.

What You'll Learn

How to build an accessibility checking interface with HTML
How to use DOMParser to analyze HTML content
How to check image alt attributes with JavaScript
How to validate heading hierarchy
How to identify non-descriptive link text
How to use querySelectorAll() to find HTML elements
How to create and add result elements dynamically
How to provide accessibility feedback through JavaScript

HTML Code

The HTML creates the main structure of the Web Accessibility Analyzer. First, it adds a heading and an input field where users can enter a website URL. The Open Website button calls the openWebsite() function to open the entered URL in a new browser tab. Next, a large <textarea> allows users to paste the HTML they want to analyze. The Check Accessibility button calls the checkAccessibility() function.

Finally, the results div provides a dedicated area for displaying accessibility warnings or the success message. The JavaScript file is loaded at the end of the page so it can control these elements.

<!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

The CSS creates a clean and simple interface with a dark blue page background and a centered white container. The container uses padding, rounded corners, a maximum width, and a shadow to create a clear dashboard-style layout. Next, the input and textarea use full width, padding, borders, and rounded corners to make them comfortable to use and buttons use a blue background with a darker hover state for better interaction.

The results section uses separate .issue and .success classes. Accessibility problems appear with a warning-style background, while successful checks use a different background to clearly distinguish the two types of feedback.

*{
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

JavaScript handles the website opening, HTML parsing, accessibility checks, and result display. First, the openWebsite() function reads the entered URL and checks whether the field is empty. If a URL exists, it opens the address in a new browser tab.

Next, checkAccessibility() reads the pasted HTML and uses DOMParser to convert the HTML string into a document that JavaScript can inspect. It then checks images for missing alt text, headings for skipped levels, and links for “click here” text. Finally, the addIssue() function creates a new result element and adds it to the results area. If the analyzer finds no supported issues, JavaScript displays a success message instead.

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)

}