添加此代码时屏幕阅读器无法正常工作
[英]Screen reader not working when I add this code
问题描述
//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.
我正在使用 NVDA 屏幕阅读器来测试网站上的可访问性，并且我正在使用 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.它涵盖了网站的主要部分，而不是 header 部分。
When the overlay is shown, I want to hide the member-un element.当显示覆盖时，我想隐藏 member-un 元素。 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.但是，当我使用 NVDA 屏幕阅读器时，我希望屏幕阅读器在每次按下汉堡包按钮时都显示“已展开”和“已折叠”。
As soon as I add the "memberUN.style.display = "none";"只要我添加“memberUN.style.display = “none”;” and "memberUN.style.display = "flex";"和 "memberUN.style.display = "flex";" lines, the screen reader decides not to say "Expanded" and "Collapsed" anymore.行，屏幕阅读器决定不再说“展开”和“折叠”。 Any ideas?有任何想法吗？
1 个解决方案
解决方案1
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. aria-expanded与对话框一起使用并不常见，Bootstrap 不会对其进行更新。
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)请参阅ARIA 创作实践指南 (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要隐藏导航，您可能需要查看菜单按钮或披露模式
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.