Despite adding tabindex=0 to the close image button with
<img src= "close img link" tabindex="0" alt= "close" title="close" aria-labelledby="close" />While the button does receive focus via the keyboard, it does not respond to space or enter button presses for closure.
It seems like you are striving to make your content more accessible by incorporating the appropriate attributes and elements.
Every element on a webpage plays a specific role, especially in communicating with users who utilize assistive technologies. For instance, an <img> element signifies an image, but if it is meant to act as a button, its role should be specified as such.
By utilizing a <button> element, you can ensure automatic accessibility features such as focus and response to the Space or Enter keys. Adding an aria-label attribute provides a clear and accessible name for users interacting with the button.
To enhance accessibility further, marking non-essential elements like an svg with aria-hidden="true" can help streamline the user experience.
Here is a sample code snippet showcasing how to create an accessible button with an SVG or IMG element.
update: If using an img tag, setting alt="" can also enhance accessibility, as suggested by slugolicious.
const btn = document.querySelector('.image_button');
const frm = document.querySelector('.form');
btn.addEventListener('click', () => frm.remove());.image_button {
padding: 3px;
background: none;
border: none;
}
.image_button svg {
width: 1em;
height: 1em;
display: block;
}
.form {
border: 1px solid black;
padding: 1em;
}<div class="form">
<p>The close button below can be closed via keyboard, and should also be screen reader friendly. For keyboard users, press TAB to highlight and SPACE to close.</p>
Close me ->
<button aria-label="close" class="image_button">
<svg
aria-hidden="true"
viewPort="0 0 12 12" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="12" x2="12" y2="0"
stroke="red" stroke-width="2"/>
<line x1="0" y1="0" x2="12" y2="12"
stroke="red" stroke-width="2"/>
</svg>
</button>
</div>I'm experimenting with creating a master-detail view by showcasing two CSS tables (display:table) side by side. To organize the layout, I've implemented CSS Grid. The master panel typically contains 1 to 10 rows while the detail content can exce ...
Hey everyone, I've set up a PHP MVC application with the following structure: helloworld - application - configs - controllers - models - layouts - include - library - public - .htaccess - index.php - design ...
Managing cache for my website has become quite the challenge. Some pages need to be cached during certain hours to improve navigation speed, while others must not be cached during crucial data update times. And to add to the complexity, there are pages tha ...
Is there a way to make my socket.io connection modular so that it can run once and be accessible anywhere? How can I export it? var server = require("http").Server(express); var io = require("socket.io")(server); server.listen(5000); io.on('connect ...
.parent-div { box-sizing: border-box; min-width: 0px; padding: 1rem; min-height: 1px; margin: 0; border: solid 1px; } .child-div-one { box-sizing: border-box; margin: 0; min-width: 0px; min-height: 400px; display: flex; border: sol ...
I have designed a table cell in the following way <tr> <td id = 'even'>row 8, cell 1</td> <td id = 'odd'>row 8, cell 2</td> </tr> The colors and font sizes are defined using the CSS below #even { ...
I've been struggling with adjusting the width of different instances of this line: <%= f.date_select :deadline, :order => [:month, :day, :year], class: 'date-pick', id: 'goal' %> Despite creating unique ids for select, d ...
I have a PHP associative array and I am using JQuery AJAX to retrieve the result array. My issue arises when passing the result to jQuery and attempting to loop through and extract each Sequence, Percent, and Date. I need to store this extracted data in a ...
I'm in the process of designing a website utilizing the 960 Grid system. The header consists of three parts: the logo, the navigation, and the login form. I've implemented media queries to center both the logo and the login section when the pag ...
I've set up a JSON web service in C# and I'm working on creating a custom HTML page to interact with it. http://localhost:25524/DBService.svc/json/db=TestDB/query=none When I input this URL into my browser, I expect to receive JSON formatted da ...
Issue - I am encountering a problem where I do not receive any response from Postman when trying to access localhost:9000. Instead of getting the expected user JSON data back, I am seeing the following output: <body> <noscript>You need to ...
While using ASP.Net core, I encountered an issue with loading a 3D model using the Three.js library. The error message "ERR_NAME_NOT_RESOLVED" appears when trying to load the scene. You can view the code in my VS View here. This code works perfectly in VS ...
I am currently working on a website that includes different section titles such as About, Projects, Contact, and more. To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dar ...
Is there a way to change the color of FormLabel to black instead of the primary color when the radio button group is focused? https://i.sstatic.net/h3hML.png const styles = { formLabel: { color: "#000" }, formLabelFocused: { color: "#000" ...
I currently have a code snippet that looks like the following: arr = [ { val1: a, val2: b }, { val1: a, val2: b }, { val1: a, val2: b } ] <div v-for="single in arr"> <button v-on:click="addSome"></button> </div> When I c ...
I am interested in developing an RPG using JavaScript. The game will involve a significant amount of dialog. While I have knowledge of PHP and MySQL, I am new to XML. My queries are: Would it be more efficient to store the dialog in a MySQL database and ...
Is there a way to create a column that matches the height of its parent element? I have a navbar followed by a container with three columns. The challenge is to make the last right column the same height as its parent and also scrollable. In this scenario, ...
Currently, my webpage fetches data from a MySQL database and displays it in an HTML table as soon as the page loads. Now I want to provide users with more advanced filtering options, such as filtering by name, age, etc. When a user submits their filterin ...
Looking to apply a filter on an array of objects: const myArray = [{ id: 4, filters: ["Norway", "Sweden"] }, { id: 2, filters :["Norway", "Sweden"] }, { id: 3, filters:["Denmark", "Sweden&q ...
Currently, I am faced with the challenge of executing a POST request using mongoose in NextJS. In my project structure, I have three key files: lib/dbConnect.js, models/User.js, and app/new/route.ts. As defined, app/new/route.ts is responsible for handling ...