在屏幕阅读器中强制分隔元素
基础概念
屏幕阅读器是一种辅助技术，用于帮助视障用户通过语音或文本输出来理解计算机屏幕上的内容。为了提高屏幕阅读器的可访问性，开发者需要确保网页内容能够被正确地解析和传达。强制分隔元素是指在HTML中使用特定的标签或属性来明确地告诉屏幕阅读器如何处理和分隔页面上的不同部分。
相关优势
- 提高可访问性：确保视障用户能够准确理解页面内容的结构和层次。
- 更好的用户体验：即使对于非视障用户，明确的分隔也能提高页面的可读性和用户体验。
- 符合标准：遵循无障碍设计标准，如WCAG（Web Content Accessibility Guidelines），有助于提升网站的整体质量。
类型
- 语义化标签：使用如
<header>,<nav>,<main>,<section>,<article>,<aside>,<footer>等HTML5语义化标签来明确页面结构。 - ARIA属性：使用Accessible Rich Internet Applications (ARIA) 属性来增强可访问性，例如
aria-label,aria-describedby,aria-controls等。 - CSS样式：通过CSS来控制元素的视觉呈现，如使用
display: block;或display: inline-block;来明确元素的布局。
应用场景
- 导航菜单：使用
<nav>标签来包裹导航链接。 - 主要内容区域：使用
<main>标签来标识页面的主要内容。 - 侧边栏：使用
<aside>标签来标识侧边栏内容。 - 页眉和页脚：使用
<header>和<footer>标签来标识页面的顶部和底部区域。
遇到的问题及解决方法
问题：屏幕阅读器无法正确识别页面结构
原因：可能是由于使用了不恰当的HTML标签或没有正确使用ARIA属性。
解决方法：
- 检查HTML结构：确保使用了正确的语义化标签。
- 添加ARIA属性：为需要额外说明的元素添加ARIA属性。
- 测试和调试：使用屏幕阅读器工具（如JAWS, NVDA, VoiceOver等）进行测试，确保内容被正确读取。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Page</title>
<style>
header, footer {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
aside {
background-color: #ddd;
padding: 10px;
width: 200px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Home</h2>
<p>Welcome to our home page.</p>
</section>
<section id="about">
<h2>About</h2>
<p>Learn more about us.</p>
</section>
</main>
<aside>
<h2>Quick Links</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</aside>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>参考链接
通过以上方法，可以有效提高网页的可访问性，确保屏幕阅读器能够正确解析和传达页面内容。
相关·内容
2回答
在屏幕阅读器中强制分隔元素
、、、、
www.google.co.uk" aria-label="View cooie policy (opens in a new tab)">View cooie policy</a>
</div> 当我在页面上使用上面的内容，并通过屏幕阅读器(在本例中为NVDA)访问它时，它将始终读取p标记中的文本，紧跟其后的是a标记的描述和文本。我希望它们被单独读取，更具体地说，我希望用户在读取之前需要导航到a
浏览 22提问于2021-11-23得票数 2
回答已采纳
2回答
我有一个元素(在引导程序中位于div中)，它包含一个cookie语句(在我居住的地方强制，它说‘我们使用cookie按ok')。有什么方法可以告诉屏幕阅读器:下一个section/div/element是'cookie语句？所以，就像：我不知道屏幕阅读器</
浏览 4提问于2015-07-21得票数 0
回答已采纳
1回答
region" aria-labelledby="question-3" </li>在元素2和元素3之间，有一个分隔符块，其中包含与列表上下文无关的交互式内容(可以想象列表元素之间带有“调用到操作”按钮的广告)。问题
屏幕阅读器</
浏览 7提问于2022-11-07得票数 0
1回答
NVDA自动切换到表单模式
、、、、
当我进入编辑模式时，NVDA会自动进入表单模式，由于表单模式，我不能在输入框中输入任何文本，也不能使用箭头键浏览标签。
浏览 3提问于2018-05-21得票数 2
1回答
我有一个已经建立的类的div，我不能删除这个类，但是我需要让视觉阅读器和屏幕阅读器都能够“读取”内容。据我所知，sr-only只供屏幕阅读器阅读，如何为屏幕阅读器和视觉阅读器开发此功能？
浏览 3提问于2020-08-17得票数 2
回答已采纳
有没有办法在iText的文本元素中添加alt文本？我已经看到有一种方法可以为图像做这件事。基本上，我希望屏幕阅读器能够读取正在显示的实际文本之外的内容。在我的文档中有两种情况，我需要这样做。一种是，当屏幕阅读器正在阅读一个缩略语时，我希望alt-text强制屏幕阅读器阅读每个字母，而不是试图阅读一个单词。在文档中，它目前只是一个数字，这对残疾用户来说有点令人困惑。
浏览 9提问于2018-02-13得票数 0
2回答
切换唱段-当公告结束时直播？
、、、、
我目前正在做一个交互式的pdf阅读器项目，以使它更容易访问。我创建了一个在屏幕上不可见的<p>元素，并为其赋予了aria-live属性。每当我想宣布一些事情时，比如打开一个抽屉，我都会设置<p>元素的文本。但是，如果用户希望整个页面都是公告的( Voice Over的关键是VO + a )，<p>元素也会被读取，但我希望防止这种情况发生。
有人能建议这是否是宣布变化的正确方式？如果是，那么如果用户希望读取整个页面，我如何防止<p>元
浏览 1提问于2018-05-29得票数 1
我需要知道是否可以使用opacity: 0.01在视觉上隐藏我的内容。我需要淡入内容滚动，但如果我添加opacity: 0，我不知道这如何影响屏幕阅读器和搜索引擎优化。动画工作良好，以0.01为值。
浏览 0提问于2019-01-07得票数 0
回答已采纳
在那里，当盲人输入邮政编码后，在那个档案注册编辑文本框中，就像45987。它的读数是40 5,987。
但是，我想读一个四五九八七。4 5 9 8 7.注意:当我在TexView中尝试同样的方法时，它的读数也是正确的。唯一的问题是EditText。
浏览 51提问于2018-09-07得票数 0
1回答
alt和alt=一样“”吗？
、、、、
我正在添加alt属性到我的所有图像，以提高搜索引擎优化/屏幕阅读器的性能。
根据最佳实践，纯美学的图像应该有一个空的alt属性alt=""，因此屏幕阅读器跳过了它们。我在WordPress中，注意到它确实将alt添加到这些没有描述的美学图像中，但没有添加alt=""。alt是否通过屏幕阅读器和搜索引擎爬虫读取与alt=""相同，或者我是否应该进入并通过编程强
浏览 2提问于2017-06-26得票数 9
回答已采纳
1回答
我正在重构一个web应用程序，这样屏幕阅读器就可以访问它了。我正在开发的网络应用程序是用荷兰语编写的。咏叹调-标签也是荷兰语，正在表演，正如我所期望的。尽管如此，当屏幕阅读器在页面中标出时，屏幕阅读器会说：“导航，列出4个项目”。是否有可能将此(默认读取EN中的元素)更改为荷兰语？我将HTML属性设置为荷兰<html lang="nl">
但是屏幕阅读器(用荷兰语&#
浏览 6提问于2017-04-06得票数 0
回答已采纳
1回答
有时，在我的可访问性审核中，我会遇到一个没有任何内容的<p>标记。屏幕阅读器将读出“空”，浪费我的时间和任何残疾人的时间浏览网站。
在传递<hr>标记时，也会读取诸如“分隔符”之类的冗余元素。标准中甚至考虑过这个问题吗？
浏览 6提问于2021-07-07得票数 1
回答已采纳
我一直在试图弄清楚如何将屏幕阅读器的焦点包含在特定的区域内。当我说屏幕阅读器焦点时，我指的不是默认的浏览器焦点，用户可以使用that键/shift-that键移动。除了切换到不同的可聚焦元素外，您还可以按住cmd + opt并按左右键来将屏幕阅读器焦点从一个元素移动到另一个元素，而不管是否可以使用tab键切换到元素。这就是我试图控制的焦点。当焦点在我想要聚焦的最后一个元素
浏览 29提问于2019-10-17得票数 3
有一个来自Twitter引导的Modal.js代码： <div class="modal-dialog"> <d
浏览 2提问于2014-05-22得票数 0
回答已采纳
1回答
在按钮中使用的角色是正确的，因此屏幕阅读器使用aria-label属性。> </span>所以我用谷歌的字体材料符号，没有咏叹号标签+角色的“等级”就会读给屏幕阅读器的用户。在这种情况下，哪个角色是合适的？
浏览 6提问于2022-08-18得票数 -2
回答已采纳
我有一个WPF应用程序，需要支持屏幕阅读器(特别是JAWS)。问题是，当列表视图项发生更改(添加、删除)时，JAWS不会发布任何消息。盲人用户完全不知道发生了什么。当试图在列表视图控件中添加/删除项目时，有没有办法强制屏幕阅读器声明一些文本？我该怎么做呢？
浏览 5提问于2013-07-09得票数 7
1回答
最近，我一直在尝试让内置的Windows7讲述人/屏幕阅读器与我的WPF应用程序兼容。我遇到的问题是，UI包含一个进度条，当当前进度值发生变化时，屏幕阅读器会定期将其读出。在这种情况下，读出进度是不可取的，但我找不到一种方法来关闭它。我想也许我可以通过访问与元素关联的AutomationPeer来设置它，但情况似乎并非如此(我可以强制引发事件，但我不能让它忽略事件)。
有谁知道这样做的方法吗？
浏览 0提问于2011-09-08得票数 3
回答已采纳
根据，我们可以使用aria-live属性告诉屏幕阅读器在HTML元素发生更改时读取该元素的文本内容。然而，在我的例子中，我不会更新任何文本，只是希望屏幕阅读器在某些条件下(即，通过使用<span>的.show()函数)变为可见时通知jQuery的内容。<script></script
浏览 23提问于2017-06-21得票数 3
回答已采纳
我在我的web应用程序中添加了aria-隐藏在搜索按钮上，但是ui中没有任何变化，因为我将它更改为false。什么是咏叹调-隐藏实际上意味着。
浏览 3提问于2015-01-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
