Currently, I am working on enhancing the accessibility of my website by improving navigation using the tab button. I have implemented tabindex to manage this, but I have noticed that elements with tabindex display an outline both when clicked and when focused on via tab. I would like to remove the outlines when they are clicked (or dragged), while keeping them visible when tabbing through.
Is there a possible solution, perhaps utilizing CSS, to address this issue?
Currently, there is no simple method to achieve this task without the use of JavaScript to detect differences between keyboard and mouse focus. However, a new CSS pseudo-class named :focus-visible (formerly known as :focus-ring) has been introduced to address this issue. This pseudo-class allows styling of the focus indicator specifically for keyboard users without affecting mouse users.
Unfortunately, :focus-visible is not currently supported in any browser without enabling a feature flag. However, there is a polyfill available that can enable its usage.
For further information, you can watch this video tutorial: A11ycast focus-ring
This particular piece of code is designed to eliminate the outline styling effect, but only upon clicking on a button with the mouse.
In order to achieve this behavior, the mousedown event is utilized to get rid of the outline, while the mouseup event restores it.
<button onmousedown="this.style.outlineColor='transparent'" onmouseup="this.style.outlineColor='blue'" tabindex="1">try me</button><br>
<br>
<button onmousedown="this.style.outlineColor='transparent'" onmouseup="this.style.outlineColor='blue'" tabindex="2">try me 2</button><br>button:focus{
outline:none;
}
When you utilize your mouse to click on an element, both the pointing device focus and the keyboard focus are shifted.
The WCAG dictates that the keyboard focus indicator must always be visible on any keyboard operable element (regardless of how it was moved). By assigning a tabindex, you have enabled keyboard operation, so you must adhere to this requirement, even if the element was previously activated using the mouse, causing the keyboard focus to shift there.
In addition, many assistive technologies can focus on an element without utilizing the tab key (such as voice recognition software, eye tracking devices, and certain screen readers).
Check out this DEMO I created to showcase something interesting. In this demo, you will find a basic example of setting up a blueimp gallery, a navigation bar, and a button. <div class="nav">nav</div> <div class="wrapper"> <div id ...
Looking to use a large banner image on my website with dimensions of 976X450. How can I make sure that the image stretches to fit higher resolution monitors without using multiple images for different resolutions? ...
I am looking to implement a timer for the submenu within my menu. The idea is to show the submenu for 3 seconds after a mouse-over event. I have already set up a function to display and hide the submenu, but I am facing an issue where the submenu shifts to ...
I have been attempting to create this specific layout using a grid system. Unfortunately, I have not been successful in achieving the desired result with my current code snippet. Please note: The DOM Structure cannot be altered https://i.stack.imgur.com/b ...
I have a grid of items and I want to display another component that takes up the full width below the clicked item when it's selected. Here is an illustration of what I'm trying to accomplish: https://i.sstatic.net/5XIvf.png Within my button-li ...
I'm trying to use Bootstrap 5 to display items in a row, like sets of 3 or 12, and have them slide into view one set at a time. However, when I add a carousel, the items end up stacked on top of each other. Here is the code snippet: <div c ...
Is there a way to apply a translate to an element so it moves to a specific point on the page instead of relative to its starting position? For instance, in the code snippet below, the "card" elements will move 50, 100 relative to their initial position. ...
Recently, I came across a helpful jQuery demo that demonstrated how to create a popup window on my website. For those interested, the demo link can be accessed here: http://jqueryui.com/dialog/#modal-message The design of the window I am aiming to replica ...
Can someone explain how to access a second styled component using '@mui/system' in order to add a hover effect to a parent element that will modify the max-height of its child? Please keep in mind that I am referring to mui's styled compone ...
My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} https://i.sstatic.net/1AnDi.png I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="displa ...
When I click on "Products" in my main navigation, only the first 6 items are displayed from a nested ul. How can I make all of them display when the user clicks on "Products"? Is this a CSS issue or a problem with the script? Here's a screenshot for r ...
Having limited knowledge in html and css, I am using a bootstrap carousel slider with text. I am trying to change the color of the box randomly. https://i.sstatic.net/TozUP.jpg Here is the code that I am currently using: <ol class="carousel-indicato ...
I've created a script for displaying a dropdown menu on small screens with a click (or tap on mobile), but I want it to change to hover when the screen size is larger. Here's my code: $(document).ready(function() { var open = false; ...
Looking for assistance in modifying the code below to only display the image in mobile view, instead of constantly appearing. <style type="text/javascript> .icon-xyz {float: left; width: 22px;cursor: pointer;background: none;} @me ...
In my case, I have a table that displays records of school districts. My goal is to use Selenium in order to select the delete icon positioned in the eighth td for the district located on a row with a specific name. In this scenario, the name being QA__run ...
Currently leveraging Wpbakery for my website design. Seeking to apply the FadeInUp animation solely to the background image rather than the entire row. Any suggestions on accomplishing this? Is there a method to assign a class solely to the background i ...
How do I resize and align these 3 input fields in a small size within the modal window: <div class="form-group"> <label for="name" class="col-sm-2 control-label">Name</label> <div class="col-sm-10 inline-fields"> < ...
When using an absolute v-overlay inside a v-col, the grandparent v-row is covered by the overlay instead of just the parent v-col. "Absolute overlays are positioned absolutely and contained inside their parent element." -According to Vuetify&apo ...
Can you help me with an issue I'm having? When attempting to rotate the blue square using a function, it only works once. After that, the page needs to be reloaded in order for the rotation function to work again. Additionally, after rotating 120 degr ...
I utilized the insights from this post to craft multiple buttons in Streamlit: HOW TO STYLE A BUTTON IN STREAMLIT. The outcome appears as follows: enter image description here The code that I implemented is: def style_button(click_button_i, nb_buttons): ...