What could be the reason for the loss of default browser focus on this accordion navigation?

Why is the browser default focus being lost on this accordion navigation?

<div class="panel panel-default">
    <div class="panel-heading">
        <button aria-controls="collapseTwo" aria-selected="false" data-target="#collapseTwo" data-toggle="collapse">Display</button>
    </div>
    <div class="panel-collapse collapse" id="collapseTwo">
        <div class="panel-body">
            <ul>
                <li class="iso-btn" data-filter=".desktop">
                    <a href="#">Desktop</a>
                </li>
                <li class="iso-btn" data-filter=".mobile">
                    <a href="#">Mobile</a>
                </li>
            </ul>
        </div>
    </div>
</div>

When tabbing through the buttons in Chrome with all CSS removed, the focus is clearly shown. I have checked my CSS for any issues but there seems to be a problem - the button should have default browser focus when tabbed.

Could it be related to the HTML structure? Or perhaps something to do with Bootstrap or CSS?

https://jsfiddle.net/DTcHh/32544/

htmlcsstwitter-bootstrapaccessibility

Answer №1

When creating accordion buttons, it is important to use the aria-expanded attribute instead of aria-selected. The use of aria-selected on button roles is not valid and can be confusing for browsers, especially if not part of a selectable list. For instance, when tabbing to a single-selection control, the focus usually lands on the selected item in the list while ignoring non-selected items.

To learn more about the aria-selected state, refer to the ARIA discussion which covers user agent focus and other important details. Additionally, check out the section on accordions in the ARIA Authoring Practices document.

Remember to also include an appropriate heading tag on your panel header to improve navigation accessibility.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Unable to retrieve current location using 'Geolocation' in React

import "./App.css"; import { useState, useEffect } from "react"; function App() { const [lat, setLat] = useState(null); const [long, setLong] = useState(null); const [data, setData] = useState(null); const [error, setError] = u ...

javascripthtmlreactjsnpmopenweathermap

Converting a webpage into UTF-8 format

Can you explain the concept of encoding a webpage to me? When someone mentions that a page is encoded in UTF-8 or another format like EUC-KR, what does that signify? Does it pertain to encoding done on the server-side or client-side? Is it related to th ...

javahtmlencodingutf-8character-encoding

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

I am having difficulties invoking jQuery functions within an "asp:UpdatePanel". Despite the code provided below, my attempts to add a class to the div element ".popup-body" are unsuccessful. Interestingly, the "alert();" function works without any issues. ...

javascriptjqueryhtmlasp.net

In search of a mobile web UI framework solely built with CSS styling

Currently in search of a CSS framework that specializes in styling form elements and lists for optimal small screen use. The ideal framework must be CSS only, requiring minimal to no JavaScript. Something along the lines of Twitter Bootstrap would be per ...

htmlcssmobile

How can I showcase the selected file using jQuery's querySelector?

I have successfully implemented a file upload feature using jQuery querySelector. Now, I am looking for a way to display the selected file name in a span element after the user selects the file. Here is my HTML code: <span id="filename"></span&g ...

javascriptjqueryhtmljquery-selectors

A comprehensive guide on personalizing Bootstrap 4 tooltips to suit your specific needs

I would like to customize the tooltip in Bootstrap 4 based on the screenshot provided below: https://i.stack.imgur.com/wg4Wu.jpg <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta chars ...

javascriptjquerycssbootstrap-4

Bringing in Sequentially Arranged HTML Content using Asynchronous JavaScript Integration

I have a collection of separate HTML files with small content snippets that are loaded through AJAX and .get(). I want to display the content in an orderly fashion without relying on async: false in my AJAX call, as it is no longer recommended. With the si ...

jqueryhtmlajaxsynchronous

C# MVC - Enabling dynamic row addition in an HTML table with multiple fields consolidated into a single cell

Hello, I'm new to c# MVC and could use some guidance. Currently, I am utilizing an example from Matt Lunn (here) to dynamically add new items to a bound list within an HTML table. However, the issue is that all the new items are being added to the fir ...

c#jqueryhtmlasp.net-mvc

Refreshing a specific area on a webpage through the use of Ajax technology

I need to update a specific part of my webpage when a user clicks on the 'clear' button. I currently have some code that I borrowed from another answer I found on this site: $('.clear').click(function () { $.ajax({ url: "", ...

jqueryhtmlajaxrefresh

jQuery's outerHeight() and height functions may experience flickering or fail to update properly when the window is resized to an odd number

Two elements are placed side by side on a webpage. One element, with a fixed size of 100vh, is named .hero-half, while the other element, holding text of varying lengths, is fluid and labeled as .project-details. When the text container extends beyond the ...

javascriptjquerycssflickerouterheight

Having trouble implementing responsive image with fixed aspect ratio code

I've tried several tutorials online to make this image responsive with a fixed aspect ratio, but nothing seems to work. The image is set at 900x400px and I want it to remain fully visible on smaller screens as well. Here's the codepen link < ...

htmlcssimageresponsive-design

Ways to select the element based on a specific CSS property value in the inline style

As a novice in the world of Javascript, I am currently attempting to select an element within an array of images where the opacity is set to 1. Could someone please guide me on how to achieve this? I've tried using hasAttribute, but I'm unsure ho ...

javascriptcss

Is there a way to customize the appearance of the current slide in slick.js with jQuery?

I am looking to customize the appearance of the currently active slide by giving it an orange border. Keep in mind that the class for the active slide is : slick-active and the structure is as follows : <div class='slick-slide slick-active' ...

jquerycssslick.js

Optimizing web content for iOS Safari with min-height media queries

I'm currently working on a Bootstrap-based photo browser that needs to have a responsive 4:3 aspect ratio. To achieve this, I have implemented the following approach: #carousel { width: 320px; height: 240px; ... } Additionally, I utilize media ...

cssios

Utilizing HTML and AngularJS interpolation to enhance email form functionality

Looking for assistance with dynamically changing the email address in formspree.io contact forms using Angular1. Here's what I have so far: <form action="https://formspree.io/{{ user.email }}" method="POST"> If anyone has insights on this is ...

htmlangularjsemail

What is the best way to divide a page into four equal sections using two container divs?

I am working on a webpage layout that requires dividing it into four equal sections. The challenge is overlapping text onto two of these sections, which complicates the design process. My solution is to stack two container DIVs on top of each other, both w ...

htmlcss-floatcontainersequals

Tips for updating the hover background color of a table row with a unique class in bootstrap

Modified: Here is the table along with its corresponding CSS styling: .table-hover tbody tr:hover { background-color: #fff !important; } <html lang="en"> <head> <meta charset="utf-8" /> <meta name="v ...

cssbootstrap-5

A subtle background image with an overlay of a transparent RGBA gradient

Currently, I am working on designing the header of a website. My goal is to incorporate an image on the right side of the header, overlayed with a gradient color that has a certain level of transparency set using rgba values. Although the image and gradien ...

htmlcss

show tab focus outline only

In search of a straightforward and effective method for focusable elements to display an outline only when the tab key is pressed, without showing it when using a mouse in React applications. (looking for something similar to :focus-visible that function ...

javascriptcssreactjs

What attribute should I utilize to ensure the image always takes priority over text when using @media queries?

resolution My goal is to have the image appear on top of the text when resizing the window, but maintain the appearance shown in the attached image when using a larger resolution. Below is the CSS code I am currently using: .section4 { text-align: cen ...

htmlcss