Screen reader not working when I add this code
Question
//Getting the height of the header let headerHeight = document.querySelector('header'); let height = headerHeight.offsetHeight; //Adjusting the #navbarNav's top margin to accommadate the header let nn = document.getElementById("navbarNav"); nn.style.top = height.toString() + "px"; let hamburger = document.getElementById("hamMenuButton"); let shown = false; hamburger.addEventListener("click", function () { if (shown) { //if #navbarNav is showing hideNN(); } else { //if not showNN(); } }); let i = document.getElementById("ham-img"); let memberUN = document.getElementById("member-un"); function showNN() { //********************This is causing the problem******************** memberUN.style.display = "none"; //memberUN.style.visibility = "hidden"; //memberUN.hidden = true; shown = true; } function hideNN() { //********************This is causing the problem******************** memberUN.style.display = "flex"; //memberUN.style.visibility = "visible"; //memberUN.hidden = false; shown = false; }
header { display: flex; } #hamMenuButton:focus { border: 1px solid black; }.navbar-toggler { outline: none;important: box-shadow; none:important; border. none:important, }.navbar-toggler:active: ;navbar-toggler:focus { outline; none:important; box-shadow: none;important: border; 1px solid black:important; } #navbarNav { /*display: none;*/ position: fixed; width: 100%; height: 100%; left: 0; right: 0; bottom: 0; background-color: blue; z-index: 2; cursor: pointer; }
<,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <title>SOF</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min:js" ></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min:js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="https.//code.jquery.com/jquery-3.4.1.slim.min:js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min:js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min,js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </head> <body> <header> <section class="dropdown my-1" id="member-un"> <p>Hello, John Smith</p> </section> <nav class="navbar" id="hamburger-menu"> <button class="navbar-toggler" id="hamMenuButton" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-expanded="false" aria-controls="navbarNav"> Menu </button> </nav> </header> <section class="collapse py-5" id="navbarNav"> <p>Hello, John Smith</p> </section> <main> <!--Rest of the code--> </main> </body> </html>
I'm working with NVDA screen reader to test for accessibility on a site and I'm using Bootstrap. I'm trying to add an overlay menu that toggles between shown and hidden when the user hits a hamburger button. It covers the main and not the header portion of the site.
When the overlay is shown, I want to hide the member-un element. The code works fine. However, when I use the NVDA screen reader, I want the screen reader to say "Expanded" and "Collapsed" every time the hamburger button is hit.
As soon as I add the "memberUN.style.display = "none";" and "memberUN.style.display = "flex";" lines, the screen reader decides not to say "Expanded" and "Collapsed" anymore. Any ideas?
1 answers
solution1
0 2022-09-01 15:56:03
It's not common to use aria-expanded together with a dialog, and Bootstrap will not update it.
The reason is that an element inside the dialog is focussed as soon as the dialog opens. The status of the button therefore would not be announced anyway.
Focus is then trapped inside the dialog, so the button cannot be announced.
When the dialog closes, the button is focussed again, but then it's already obvious that focus left the dialog.
See the Dialog Pattern on the ARIA Authoring Practices Guide (APG)
Don't use a dialog to open a navigation
You are hiding an element that is outside the dialog, while it is open. This doesn't do anything for a screen reader user, since they are trapped inside the dialog.
The same counts for other users. The whole point of a modal dialog is to force the user's attention on it's content. Usually a backdrop is applied as well. So I don't see the point in hiding something in the main page while a dialog is open.
The current code refers to a nav bar and a burger. Usage of a modal dialog to display a navigation seems very weird, which is probably the reason why things don't work as you'd expect.
To hide a navigation you might want to look at a Menu Button or the Disclosure Pattern
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.