Skip to content

Add ARIA landmarks, live regions, and semantic HTML for screen reader accessibility #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from
Draft

Add ARIA landmarks, live regions, and semantic HTML for screen reader accessibility #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4396e80
Initial plan
Copilot Nov 5, 2025
c0bffeb
Initial exploration complete
Copilot Nov 5, 2025
eb1de3f
Add comprehensive accessibility improvements for screen readers and d…
Copilot Nov 5, 2025
0553007
Fix XSS vulnerabilities in accessibility attributes
Copilot Nov 5, 2025
d5bdb27
Fix JavaScript syntax error in layout.ejs
Copilot Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,016 changes: 1,016 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

27 changes: 16 additions & 11 deletions views/bought_products.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,34 @@
<% layout('content') %>

<% if (products.length == 0) { %>
<h3 style="color: red;">You haven't purchased any product yet.</h3>
<div role="status" aria-live="polite" class="alert alert-info">
<h1>No purchases yet</h1>
<p>You haven't purchased any products yet. Browse our <a href="/">product catalog</a> to get started.</p>
</div>
<% } else {%>

<h2>Your purchased products:</h2>
<h1>Your purchased products</h1>
<p role="status" aria-live="polite">You have <%- products.length %> purchased product<%= products.length !== 1 ? 's' : '' %></p>

<div class="table-responsive">
<table class="table">
<table class="table table-striped" role="table" aria-label="Purchased products">
<caption class="sr-only">List of your purchased products</caption>
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Contact mail</th>
<th>Contact phone</th>
<th>Shipping date</th>
<th>Shipping address</th>
<th>Price</th>
<th scope="col">Product ID</th>
<th scope="col">Product Name</th>
<th scope="col">Contact email</th>
<th scope="col">Contact phone</th>
<th scope="col">Shipping date</th>
<th scope="col">Shipping address</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>

<% for( var i=0; i < products.length; i++) {%>
<tr>
<td><%- products[i].product_id %></td>
<th scope="row"><%- products[i].product_id %></th>
<td><%- products[i].product_name %></td>
<td><%- products[i].mail %></td>
<td><%- products[i].phone %></td>
Expand Down
17 changes: 9 additions & 8 deletions views/content.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
<% layout('layout') %>

<!-- Navigation -->
<nav class="navbar navbar navbar-fixed-top navbar-inverse" role="navigation">
<nav class="navbar navbar navbar-fixed-top navbar-inverse" role="navigation" aria-label="Main navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" aria-controls="bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div style="margin-left: 50px;">
<img class="pull-left" width="50px" src="/images/logo.png" alt="logo">
<img class="pull-left" width="50px" src="/images/logo.png" alt="NodeVulnerable logo">
<a style="margin-left: 5px;" class="navbar-brand" href="/"> NodeVulnerable</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<form class="form-inline" style="padding-top: 8px;" method="GET" action="/products/search">
<form class="form-inline" style="padding-top: 8px;" method="GET" action="/products/search" role="search" aria-label="Product search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" name="q" placeholder="Search in products...">
<span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-search"></span></span>
<label for="product-search" class="sr-only">Search products</label>
<input type="text" class="form-control" id="product-search" name="q" placeholder="Search in products..." aria-label="Search in products">
<span class="input-group-addon" id="search-button-label"><span class="glyphicon glyphicon-search" aria-hidden="true"></span><span class="sr-only">Search</span></span>
</div>
</div>
</form>
Expand All @@ -46,9 +47,9 @@
</nav>

<!-- Page Content -->
<div class="container">
<main id="main-content" class="container" role="main" aria-label="Main content">

<!-- /.row -->
<%-body%>
</div>
</main>
<!-- /.container -->
60 changes: 51 additions & 9 deletions views/layout.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="description" content="NodeVulnerable - Demo E-commerce Application">
<meta name="author" content="">

<title>Bare - Start Bootstrap Template</title>
<title>NodeVulnerable - Demo E-commerce Store</title>

<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
Expand All @@ -21,6 +21,19 @@
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
</style>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
Expand All @@ -34,6 +47,8 @@

<body>

<a href="#main-content" class="skip-link">Skip to main content</a>

<%-body%>

<!-- jQuery Version 1.11.1 -->
Expand All @@ -59,12 +74,16 @@
wall.container.find('.thumbnail').find('img').load(function() {
wall.fitWidth();
}).each(function () {
wall.fitWidth();d
wall.fitWidth();
});

$(document).ready(function () {
$("#buy_button").click(function () {
$("#buy-screen").modal();
$("#buy-screen").modal("show");
// Focus on the first input field when modal opens
$("#buy-screen").on('shown.bs.modal', function () {
$("#mail").focus();
});
})

$("#buy-form").submit(function (event) {
Expand All @@ -77,12 +96,35 @@
data: $("#buy-form").serialize()
}).done(function(data) {
$("#buy-screen").modal("hide");
$('<div class="modal fade in" tabindex="-1" role="dialog" style="display: block;"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">' + data.message + '</h4></div><div class="modal-footer"><button type="button" class="btn btn-success" data-dismiss="modal">Ok</button></div></div></div></div>').modal();

window.location = "/products/purchased";
// Create accessible success modal with ARIA attributes
var successModal = $('<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="success-modal-title" aria-live="polite">' +
'<div class="modal-dialog" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>' +
'<h2 class="modal-title" id="success-modal-title">' + data.message + '</h2>' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-success" data-dismiss="modal">Ok</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>');

successModal.modal("show");
// Announce to screen readers
successModal.on('shown.bs.modal', function () {
$(this).find('.btn-success').focus();
});

successModal.on('hidden.bs.modal', function () {
window.location = "/products/purchased";
});
}).fail(function (data) {
$("#buy-screen").html(data.message);
$("#buy-screen").show();
var errorElement = $("#error");
errorElement.text(data.responseJSON ? data.responseJSON.message : "An error occurred");
errorElement.removeClass("hidden");
errorElement.attr("aria-live", "assertive");
});
})
})
Expand Down
20 changes: 11 additions & 9 deletions views/login.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,28 @@

<div class="col-md-12">

<form class="form-signin" method="post" action="/login/auth" enctype="application/x-www-form-urlencoded">
<h2 class="form-signin-heading">Please sign in</h2>
<form class="form-signin" method="post" action="/login/auth" enctype="application/x-www-form-urlencoded" aria-label="Sign in form">
<h1 class="form-signin-heading">Please sign in</h1>

<label for="username" class="sr-only">Email address</label>
<input type="text" id="username" name="username" class="form-control" placeholder="User name..." required autofocus>
<label for="username" class="sr-only">User name</label>
<input type="text" id="username" name="username" class="form-control" placeholder="User name..." required autofocus aria-required="true">

<label for="password" class="sr-only">Password</label>
<input type="password" id="password" name="password" class="form-control" placeholder="Password..." required>
<input type="password" id="password" name="password" class="form-control" placeholder="Password..." required aria-required="true">

<input type="hidden" id="returnurl" class="form-control" name="returnurl" value="<%-returnurl%>">

<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

<% if (auth_error != undefined) { %>
<span class="label label-danger"><%-auth_error%></span>
<div role="alert" aria-live="polite" class="label label-danger"><%-auth_error%></div>
<% } %>
<hr />
<p><b>Users:</b></p>
<p class="text-left">admin : admin</p>
<p class="text-left">roberto : asdfpiuw981</p>
<section aria-label="Demo credentials">
<p><strong>Demo Users:</strong></p>
<p class="text-left">admin : admin</p>
<p class="text-left">roberto : asdfpiuw981</p>
</section>
</form>
</div>
</div>
63 changes: 25 additions & 38 deletions views/product_detail.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,65 @@
<% layout('content') %>

<div class="row">
<article class="row">

<div class="col-md-12">

<div class="thumbnail">
<img class="img-responsive" src="/images/<%- product.image %>" alt="">
<img class="img-responsive" src="/images/<%- product.image %>" alt="<%= product.name %> product image">
<div class="caption-full">
<h4 class="pull-right"><%- product.price %> €</h4>
<h4><a href="#"><%-product.name%> </a></h4>
<p><%-product.description%> </p>
<p class="pull-right" aria-label="Price"><strong><%- product.price %> €</strong></p>
<h1><%-product.name%></h1>
<p><%-product.description%></p>
</div>
</div>
<a id="buy_button" class="btn btn-success pull-right" href="#">Buy <i class="glyphicon glyphicon-shopping-cart"></i></a>
<a class="btn btn-danger pull-left" href="/">&larr; Go Back</a>
<button id="buy_button" class="btn btn-success pull-right" type="button" aria-label="Buy <%= product.name %>">Buy <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></button>
<a class="btn btn-danger pull-left" href="/"><span aria-hidden="true">&larr;</span> Go Back</a>
</div>

</div>
</article>

<div id="buy-screen" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div id="buy-screen" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="buy-modal-title" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Confirm product & details</h4>
<h2 class="modal-title" id="buy-modal-title">Confirm product & details</h2>
</div>
<form id="buy-form" enctype="application/x-www-form-urlencoded">
<form id="buy-form" enctype="application/x-www-form-urlencoded" aria-label="Purchase form">
<div class="modal-body">
<div class="form-group">
<label for="mail">Contact mail</label>
<input type="email" class="form-control" name="mail" id="mail" placeholder="Email" required>
<label for="mail">Contact email</label>
<input type="email" class="form-control" name="mail" id="mail" placeholder="Email" required aria-required="true" aria-describedby="mail-help">
<span id="mail-help" class="sr-only">Enter your contact email address</span>
</div>
<div class="form-group">
<label for="address">Shipping Address</label>
<input type="text" class="form-control" name="address" id="address" placeholder="Shipping address..." required>
<label for="address">Shipping address</label>
<input type="text" class="form-control" name="address" id="address" placeholder="Shipping address..." required aria-required="true" aria-describedby="address-help">
<span id="address-help" class="sr-only">Enter your shipping address</span>
</div>
<div class="form-group">
<label for="ship_date">Shipping date</label>
<input type="date" class="form-control" name="ship_date" id="ship_date" placeholder="Shipping date..." required>
<input type="date" class="form-control" name="ship_date" id="ship_date" placeholder="Shipping date..." required aria-required="true" aria-describedby="date-help">
<span id="date-help" class="sr-only">Select preferred shipping date</span>
</div>
<div class="form-group">
<label for="phone">Contact phone</label>
<input type="tel" class="form-control" name="phone" id="phone" placeholder="Contact phone..." required>
<input type="tel" class="form-control" name="phone" id="phone" placeholder="Contact phone..." required aria-required="true" aria-describedby="phone-help">
<span id="phone-help" class="sr-only">Enter your contact phone number</span>
</div>
<div class="form-group">
<label for="price">Product price</label>
<input type="text" class="form-control" name="price" id="price" value="<%- product.price %>€" readonly>
<input type="text" class="form-control" name="price" id="price" value="<%- product.price %>€" readonly aria-readonly="true">
</div>
<input type="hidden" class="form-control" name="product_id" id="product_id" value="<%- product.id %>">
<input type="hidden" class="form-control" name="product_name" id="product_name" value="<%- product.name %>">
</div>
<div class="modal-footer">
<span id="error" class="label label-danger pull-left hidden"></span>
<div id="error" class="label label-danger pull-left hidden" role="alert" aria-live="assertive"></div>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Buy <i class="glyphicon glyphicon-shopping-cart"></i></button>
<button type="submit" class="btn btn-success">Buy <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->




<div id="buy-screen" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Ok</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
26 changes: 13 additions & 13 deletions views/products.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
<% layout('content') %>

<div class="jumbotron">
<h1>Hello, to NodeVulnerable!</h1>
<p>The application to test the vulnerability code analyzers. This app try to simulta a shop</p>
<p>Bellow the product list</p>
</div>
<header class="jumbotron">
<h1>Welcome to NodeVulnerable!</h1>
<p>The application to test the vulnerability code analyzers. This app simulates an online shop.</p>
<p>Browse our product list below</p>
</header>


<div id="grid">
<section id="grid" aria-label="Product listing">
<% for( var i=0; i < products.length; i++) {
var product = products[i];;
%>
<div class="item">
<article class="item">
<div class="thumbnail">
<a href="/products/detail?id=<%-product.id%>"><img src="/images/<%-product.image%>" alt=""></a>
<a href="/products/detail?id=<%-product.id%>" aria-label="View details for <%=product.name%>"><img src="/images/<%-product.image%>" alt="<%=product.name%> product image"></a>
<div class="caption">
<h4 class="pull-right"><%-product.price%>€</h4>
<h4><a href="/products/detail?id=<%-product.id%>"><%-product.name%></a>
</h4>
<p class="pull-right" aria-label="Price"><strong><%-product.price%>€</strong></p>
<h2><a href="/products/detail?id=<%-product.id%>"><%-product.name%></a>
</h2>
<p><%-product.description%></p>
</div>
</div>
</div>
</article>
<% }%>
</div>
</section>
Loading