accessibility 相关问题

可访问性旨在使每个人都可以使用应用程序或网站,包括视力,听觉,走动或认知障碍等残疾人。

React Native中有<label>标签吗?

我正在 React Native 中制作一个表单。 在(非原生)React 中这种形式的字段将如下所示: 姓氏: 我正在 React Native 中制作一个表单。 在(非原生)React 中这种形式的字段将如下所示: <div> <label htmlFor="lastName">Last Name:</label> <input type="text" id="lastName" /> </div> 或者简单的html: <div> <label for="lastName">Last Name:</label> <input type="text" id="lastName"> </div> 我发现标签对于可访问性来说很重要。 我发现的每个教程都只使用占位符,并且我在 React Native 文档中找不到 <label> 的任何参考。 当用户开始输入时,占位符就会消失,这使得页面难以访问。 <label>标签还具有单击时将焦点定向到输入的优点。 这意味着单击 <label htmlFor="lastName">Last Name:</label> 会提示用户在字段 <input type="text" id="lastName" /> 中输入。 出于这些原因,使用 <Text> 标签作为 <label> 并不理想。 我想说,在语义和可访问性方面最接近的可能方法是: <View> <Text aria-label="Label for Username" nativeID="labelUsername">Username</Text> <TextInput aria-label="input" aria-labelledby="labelUsername" /> </View> 您可以使用 <View> 作为您的 <div> 和 <Text> 作为您的 <label>。 <input> 是 <TextInput> 然后您只需根据需要设置元素的样式即可。

回答 2 投票 0

区分鼠标和屏幕阅读器的点击事件

我构建了一个拖放组件,它的工作方式就像一个魅力,但现在我需要让屏幕阅读器用户可以访问它。 我已经完成了解决方案的实施。基本上它是一个

回答 4 投票 0

通过手机点击即可访问二维码图像

由于并非每个人都可以使用两部手机,因此如何通过从手机上粘贴来创建对二维码图像的访问? 当我外出时,我在 iPhone 上收到了来自 WhatsApp 群组的二维码图像...

回答 1 投票 0

更正标题级别以实现可访问性

我一直在努力为某些元素选择正确的标题,因为我主要使用 React 并且希望专注于可重用的代码。 因为我总是使用以下层次结构组织我的代码:

回答 1 投票 0

NVDA 自动切换到表单模式

目前我的 React 组件由几个标签和一个输入框组成。它有查看模式和编辑模式。 当我进入编辑模式时,NVDA 自动进入表单模式,因此我...

回答 2 投票 0

不允许使用 ARIA 属性 描述:通用角色上不允许使用 aria-label 属性

当我在其上使用 aria-label 时,密码类型的输入字段显示错误。 如果类型是文本或数字,则 aria-label 工作正常。 请帮忙!

回答 1 投票 0

可访问的骨架加载(加载占位符)HTML

在这个问题中,我们将考虑 2 个示例,但请注意,这个问题是关于任意加载占位符的。 以下是加载占位符的 Bootstrap 5 示例: 在这个问题中,我们将考虑 2 个示例,但请注意,这个问题是关于 任意 加载占位符。 这是加载占位符的 Bootstrap 5 示例: <div class="card" aria-hidden="true"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title placeholder-glow"> <span class="placeholder col-6"></span> </h5> <p class="card-text placeholder-glow"> <span class="placeholder col-7"></span> <span class="placeholder col-4"></span> <span class="placeholder col-4"></span> <span class="placeholder col-6"></span> <span class="placeholder col-8"></span> </p> <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a> </div> </div> 但是仅仅aria-hidden="true"就足够了吗? 屏幕阅读器等如何理解加载过程? 尝试添加aria-label: <div class="card" aria-hidden="true" aria-label="Loading in progress. Please wait."> <!-- --> </div> 2024 年 9 月,HTML 验证器对此提出投诉: 可能滥用“aria-label”。 (如果您不同意此警告,请提交问题报告或发送电子邮件至 [email protected]。) 如果删除aria-hidden="true",则相同。 再举一个例子我想考虑一下。 <article> <div class="skeleton"> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <span>Loading</span> </div> <div aria-busy="true"> <h3><a href="[…]">Glossier Roof Party</a></h3> <img src="[…]" […] alt="[…]"> <p> Gastropub sartorial venmo hashtag […] </p> </div> </article> 未准备好显示的内容已被aria-busy="true"隐藏。但是,在加载过程中从 DOM 中unmount这部分并不难。为此,将留下下面的代码: <div class="skeleton"> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <div aria-hidden="true"></div> <span>Loading</span> </div> Loading跨度在视觉上是隐藏的,因此屏幕阅读器可以加载。但它如何理解整个 <div class="skeleton"> 是加载占位符? 使用 aria-hidden=true 可以完全隐藏屏幕阅读器的内容。因此,同时放置 aria 标签是完全没有用的,而且是矛盾的。 一般来说,将 aria-hidden=true 放在大代码块上并不是一个好习惯: 一旦内容准备好,您很容易忘记将它们全部删除,特别是如果您像在其中一个片段中那样随机地将 aria-hidden=true 放在任何地方 如果内容在 aria 隐藏内容中包含任何可聚焦元素(链接、表单元素等),那么您会遇到更大的问题:可以使用选项卡访问该元素,但不能使用文档导航访问该元素,并且可能无法读取该元素当对焦时。这是另外一件需要注意的事情,您一定不要忘记在删除 aria-hidden=true 的同时删除 tabindex=-1 属性 aria-hidden 应谨慎使用,仅在非常精确的情况下使用,当然不适用于大块代码。 事实上,对于当前正在加载的内容,更安全的是: 仅在内容准备好时才将内容放入 DOM,而不是在此之前 使用 CSS display:none 或 Visibility:hidden 隐藏当前正在加载的内容,这保证了无论使用何种方式读取页面,它都完全不可见、不可读和不可操作 现在关于如何告诉用户正在加载某些内容的第二个问题,当然,如果您将加载横幅放在 aria-hidden=true 下,则完全没有用。 您可以使用 aria-live=polite 将此类加载消息放置在实时区域中,这样每次内容更改时都会宣布该消息。 许多资源提供了此类加载横幅的示例。 注意:aria-live 用于加载消息,例如“正在加载,请稍候”,而不是用于当前正在加载的内容本身。

回答 1 投票 0

屏幕阅读器将列标题读取为行之一

屏幕阅读器始终将列标题视为行之一。假设一个表格有 3 行和 1 列标题,那么屏幕阅读器会将其读取为 4 行;这包括列标题 +...

回答 1 投票 0

如何修复 Lighthouse“链接没有可识别的名称”

我有一个错误: 链接没有可识别的名称。 错误链接没有可识别的名称 我有一个错误: 链接没有可识别的名称。 错误链接没有可识别的名称 <div id="kt-info-box_55b0dc-d7" class="wp-block-kadence-infobox"><a class="kt-blocks-info-box-link-wrap info-box-link kt-blocks-info-box-media-align-top kt-info-halign-center" href="https://albaytalraqy.com/%d8%b4%d8%b1%d9%83%d8%a9-%d9%86%d9%82%d9%84-%d8%a7%d8%ab%d8%a7%d8%ab/" aria-label="افضل شركة نقل اثاث وعفش بالرياض افضل شركة تخزين بالرياض"><div class="kt-blocks-info-box-media-container"><div class="kt-blocks-info-box-media kt-info-media-animate-none"><div class="kadence-info-box-icon-container kt-info-icon-animate-none"><div class="kadence-info-box-icon-inner-container"><span style="display:block;justify-content:center;align-items:center" class="kt-info-svg-icon kt-info-svg-icon-fe_truck"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="50" width="50" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><title>افضل خدمات نقل وتخزين الاثاث والعفش بالمملكة العربية السعودية</title><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg></span></div></div></div></div><div class="kt-infobox-textcontent"><h2 class="kt-blocks-info-box-title">نقل وتخزين الأثاث</h2></div></a></div> 我该如何解决这个问题? 这可能是误报。 您的 aria-label 提供可访问的链接文本(并且锚点本身内有文本)。 一个建议是,您可能没有在 HTML 声明中正确设置页面语言,因此它正在努力使用从右到左的语言作为 aria-label(我假设从右到左,请原谅我的无知!)。 尝试将 lang=(relevant language ISO code) 添加到 <html> 声明中,看看是否可以修复该问题(如果您尚未这样做)。 另一种可能性是,如果您有两个链接转到具有相同链接文本的同一 URL,则可能会显示此错误,请检查情况是否如此。 如果以上都不成立,那么您可以安全地忽略此警告。 在通过 Google page speed Insight 搜索时,我的网站即 https://zcodelinereversal.com/ 显示错误,如下所示。 “链接没有可识别的名称”。请建议如何解决该问题。

回答 2 投票 0

如何在iOS中配置核心RN视图的角色和特征的本地化?

目前,React Native 中每种语言都有一个 Localized.strings 文件,但是,该文件仅包含这样的注释(哈希值各不相同): // @生成的SignedSource<<

回答 1 投票 0

您可以强制屏幕阅读器将数字读取为单个数字吗?

电话号码通常都是数字,忽略括号、破折号、加号等,因此电话号码的输入字段通常是数字。 当屏幕阅读器遇到数字输入字段时,它会...

回答 3 投票 0

Flutter Webview / InAppWebview 文档中的可访问性?

我一直在使用Flutter InAppWebview 任何与 webview/inappwebview 中的可访问性相关的文档都会很好。 我需要知道可访问性在 webview/inappwebview 中是如何工作的。

回答 1 投票 0

文件选择器组件有可用的 ARIA 属性吗?

检查了 W3C 的可访问富互联网应用程序 (WAI-ARIA) 规范的角色定义以及状态和属性的定义,但似乎没有定义任何角色或状态...

回答 1 投票 0

使用“<figure>”创建按钮组是否正确并符合 WCAG?

我正在创建一个带有如下标签的按钮组: 我现在正在编写的 HTML 代码: 排序方式: 我正在创建一个带有如下标签的按钮组: 我现在正在写的HTML代码: <figure class="toggler-widget"> <figcaption class="toggler-label">Sort By:</figcaption> <ul class="button-togglers"> <li class="choice-selected"> <button type="button" title="Sort by title" aria-label="Sort by title" aria-pressed="true"></button> </li> <li> <button type="button" title="Sort by date" aria-label="Sort by date" aria-pressed="false"></button> </li> </ul> </figure> 基于MDN上的描述和示例: 通常<figure>是图像、插图、图表、代码片段等。 似乎<figure>用于仅具有描述的文本/图像/图表。 我现在很困惑,如果我正确使用它,或者是否有更好的方法来编码这个小部件? 不,根据 WCAG 的说法,这是不正确的。您引用的文档是正确的,但您误解了解释。 第一段引用如下: <figure> HTML 元素表示自包含内容,可能带有 可选标题,该标题是使用 <figcaption> 元素指定的。该图、其标题及其内容被作为一个单元引用。 接下来是这个代码示例: <figure> <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" /> <figcaption>An elephant at sunset</figcaption> </figure> 您正在做的是标记按钮,而不是为图像提供可选的标题。事实上,该图像与您的切换器完全无关。开关的主要功能是按钮,图像只是装饰。 由于您不能对 2 个按钮使用标签,因此您可以参考 aria-labelledby 或 aria-describedby。 此外,控制元素的正确列表容器是 <menu>: <span id="toggler-label">Sort By:</span> <menu class="button-togglers"> <li class="choice-selected"> <button type="button" aria-describedby="toggler-label" aria-label="Sort by title" aria-pressed="true"></button> </li> <li> <button type="button" aria-describedby="toggler-label" aria-label="Sort by date" aria-pressed="false"></button> </li> </menu>

回答 1 投票 0

画外音使用 Control+Option+箭头跳过公告,但使用 Tab 键来公告

我有一个产品卡列表,每个卡都包含在链接标签中。在 Mac 上使用画外音和 Tab 键切换时,它会在链接中宣布 aria-label 描述,在...

回答 1 投票 0

如何防止工具提示遮盖主窗口标题栏?

在 WinUI 3 应用程序中,主窗口由一个包含图像控件的网格组成,该控件占据了大部分空间。作为图像控件的一部分,有一个工具提示,其中包含...

回答 1 投票 0

在 WinUI 3 中,如何防止工具提示遮盖主窗口标题栏?

在 WinUI 3 应用程序中,主窗口由一个包含图像控件的网格组成,该控件占据了大部分空间。作为图像控件的一部分,有一个工具提示,其中包含...

回答 1 投票 0

Windows下Docker主机网络容器服务访问

如果我使用主机网络(--network主机)运行docker容器,对于容器中运行的任何服务,它们暴露的端口可以直接从主机访问,对吗? 我一直这么认为,直到我

回答 2 投票 0

语音宣布不必要的信息

使用React和NextJs,我有产品卡,每个卡都包含在一个链接中,并且在链接中添加了一个aria标签以宣布有关每个产品的信息。我只添加了产品名称和价格

回答 1 投票 0

如何修改 javascript 以使表格在页面加载时按特定列开始排序

我看过类似的其他问题,但我对javascript很不习惯,以至于我无法理解如何将他们的解决方案集成到我的代码中。我需要有人看看我的并告诉我该做什么...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.