accessibility 相关问题

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

使用自定义 ButtonStyle 破坏了accessibilityShowButtonShapes 覆盖

我使用自定义 ButtonStyle 来更改按下状态下按钮的颜色 按钮(动作:动作){ 身体视图 } .buttonStyle(ListCellButtonStyle()) 私有结构ListCellButtonStyle:ButtonStyle { ...

回答 1 投票 0

在打开 VoiceOver 的情况下从 NavigationLink 中删除按钮读数

我按照本指南在 SwiftUI 中以编程方式创建导航。 现在的问题是,当 VoiceOver 打开时,VoiceOver 会将 NavigationLink 读出为按钮,尽管它完全是

回答 1 投票 0

如何使 MUI 对话框标题成为 H1 元素,以便可以访问模式

我正在努力让我的应用程序更易于访问,并且正在努力使用 MUI 对话框组件。我正在使用 DialogTitle 组件,它创建一个 H2 元素,但遇到了“页面...

回答 3 投票 0

ARC Toolkit 选项卡未在 Chrome Devtools 中显示

我无法在 chrome devtools 中看到几天前显示的 ARC Toolkit(辅助工具)。我使用的是 Mac OS Chrome 版本 117.0.5938.149。 我还尝试使用类似

回答 1 投票 0

为什么按下 Tab 时 onKeyDown 会在 onBlur 之后触发?

我有一个奇怪的问题。我想让页面易于访问,键盘友好。我想通过 Tab 按钮在项目之间切换,然后按空格键或 Enter 键。但是当我为 Materia 添加 onKeyDown 事件时...

回答 1 投票 0

在任何聚焦元素的按键上触发单击事件

是否有默认方法可以在焦点元素上按下 Enter 时触发单击事件? 我所指的是在专注于 时按 Enter 与 pr... 的区别 是否有默认方法可以在焦点元素上按下 Enter 时触发单击事件? 我所指的是在关注 <button> 时按 Enter 与在关注 <div> <li> <span> 时按 Enter 的区别,等等。 <button> 按键 enter 按预期触发。但是,按 <div> enter 不会执行任何操作。我相信您必须专门为该按键写入事件。 $('li').click(function() { //toggles something }); $("li").keydown(function(e){ if(e.which === 13){ $(this).click(); } }); 是否有默认方法可以在焦点元素上按下 Enter 时触发单击事件? 没有javascript就没有解决方案。 尽管 onclick 具有特殊行为,如 W3C 提到的 虽然“onclick”听起来像是与鼠标绑定在一起,但onclick 事件实际上映射到链接或按钮的默认操作。 这不适用于链接和按钮之外的其他元素。 您可能会想将 role="button" 添加到带有 div 的 tabindex="0" 中。 这不起作用。 Mozilla 文档明确表示您必须定义处理程序,即使具有 button 角色。 这很容易理解,因为这是浏览器功能。当您在元素上定义 role=link 时,您无法右键单击它,希望它会打开浏览器上下文菜单。出于同样的原因,定义 role=button 属性不会影响默认行为。 来自此讨论: ARIA 只是传达可访问性语义 作者的意图被传达给辅助技术。 也不要忘记处理space键。 阅读 Karl Groves 的文章和有关该主题的示例。 如果页面上的元素已经有单击事件,并且处于 Tab 键顺序,并且您只想让 Enter 键触发单击具有焦点的可访问性元素,请尝试以下操作: <head> <script>​ function handleEnter(e){​ var keycode = (e.keyCode ? e.keyCode : e.which);​ if (keycode == '13') {​ document.activeElement.click();​ }​ }​ </script>​ </head>​ ​ <body onkeypress="handleEnter(event)"> 这对于添加播放/暂停以及在使用 Google Web Designer 制作的横幅广告中访问其他基于图像的控件特别有用。 某些 HTML 元素(例如 span, li, div)并没有真正的聚焦状态,因此焦点不会触发。为了给元素一个可能的焦点状态,可以做的是添加一个 tabindex 并且它将起作用,例如: <div tabindex="0"></div> 当我监听列表上的键盘事件时,我将处理程序放在 <ul> 而不是 <li> 上,效果很好。它可能也适用于 <li>,但上面的示例听起来好像不起作用。 我相信您可以只使用onSubmit手柄。 <button onSubmit={() => doStuff()}> Focus and Enter </button> 这可能是 React 的一些特殊魔力:耸肩:

回答 5 投票 0

Angular cdkFocus在对话框背景上触发初始焦点

我们在对话框内的一些输入元素上使用 cdkFocusInitial 来覆盖默认焦点,例如: 我们在对话框内的一些输入元素上使用 cdkFocusInitial 来覆盖默认焦点,例如: <mat-form-field class="address-field" *ngIf="!createNewAddress"> <mat-select #deliveryAddress placeholder="{{ 'order.dialog.create.details.label.delivery-address' | translate:locale.language }}" [attr.cdkFocusInitial]="filteredAddresses.length > 1 ? true : null" (focus)="expandDeliveryAddress($event)" (selectionChange)="handleAddressChangesInSelectList($event)" formControlName="deliveryAddress" tabindex="0"> <mat-option class="address-option" *ngFor="let address of filteredAddresses; let i = index" [value]="address"> <div class="address-option-div"> <div class="address-text"><h5>{{ address.firstName }} {{ address?.secondName }} {{ address?.thirdName }} </h5></div> <div class="addresses"><h6>{{ address.street }}, {{ address.streetNumber }}, {{ address.zipCode }}, {{ address.city }}, {{ address.country.name }}</h6></div> </div> </mat-option> </mat-select> </mat-form-field> 扩展送货地址功能: expandDeliveryAddress(): void { if (this.addresses.length > 1) { this.deliveryAddress.open(); } } 这按预期工作。当有多个可用地址时,下拉列表会展开,如果只有一个可用地址,则会自动选择(此处未显示)。 但是当点击背景时也会调用expandDeliveryAddress。更好地说 (focus) 是因为这也发生在正常的 mat-input 字段上。 我不知道如何防止这种情况。我检查了事件对象发送,但没有任何东西可以帮助我查找该事件是否是背景单击。 希望有人能帮助我。 如果您想防止单击背景时触发 expandDeliveryAddress,您可以使用 Event 属性和标志的组合来跟踪背景是否被单击。具体方法如下: export class YourComponent { private backdropClicked = false; expandDeliveryAddress(event: MouseEvent): void { if (!this.backdropClicked && this.addresses.length > 1) { this.deliveryAddress.open(); } this.backdropClicked = false; // Reset flag after use } backdropClickHandler(): void { this.backdropClicked = true; } } 在模板中,您应该向背景元素添加一个 (click) 事件监听器: <mat-dialog-container (click)="backdropClickHandler()"> <!-- Your dialog content --> </mat-dialog-container>

回答 1 投票 0

如何使屏幕阅读器可以访问基于用户选择出现和消失的网站内容

在 HTML 中,我有一个 select 元素,用户可以从中选择选项。根据他们的选择,不同的内容会出现在页面的其他位置。用伪代码(因为我不希望问题是

回答 1 投票 0

UIBarButtonItem 如何禁用辅助功能(iOS)

所以, 我正在尝试禁用已添加到 UINavigationController 的 leftBarButtonItems 中的 UIBarButtonItem 的 VoiceOver 可访问性。虽然我可以禁用它的按钮没有...

回答 1 投票 0

有没有办法在 ReactJS 中的屏幕阅读器公告中添加延迟?

我是辅助功能的新手,我面临的问题是屏幕上有多个错误,但屏幕阅读器仅宣布最后一个错误消息。但后来我意识到读者正在阅读这两个错误......

回答 1 投票 0

Voice Over Mac OSX 忽略 lang 属性

我遇到了一个无法解决的问题。我在荷兰语页面上有一个简单的英语链接。 …… 阅读更多...

回答 1 投票 0

如何避免 TalkBack 读取已关闭的片段

我正在开发一个由活动和片段构成的简单应用程序,要求之一是使其易于访问,因此我完成了所有内容描述、导航操作、焦点等。 而且它...

回答 2 投票 0

FullCalendar v6.1 在使用 SiteImprove 免费 chrome 扩展的 GridCalender 视图上存在“表标题单元格缺少标题角色”ADA 问题

问题 我不知道如何解决日历页面问题,表标题单元格缺少标题角色。如图所示, 问题 我不知道如何解决日历页面问题,Table header cell is missing a header role。 <th role="presentation> 标签似乎存在问题,如下图所示。 我尝试过的事情 到目前为止,我已经尝试添加 scope="col"、scope="row"、role="columnheader" 以及 role="rowheader",但这些似乎都没有使该错误消失。这是向 FullCalendar 提交的错误报告吗?如果我需要将其报告为错误,我还应该做什么来修复它? 您对日历生成的 HTML 有多少控制权?该代码中指定了太多咏叹调。其中很多都是多余的,有些甚至是完全错误的。我认为有几个问题导致 siteimprove 标记错误。 首先,如果您对表使用本机语义 HTML,则大多数 role 属性都是不必要的。例如,<tr>不需要role="row",因为默认情况下会得到它。与 <th> 相同,如果您使用 role="columnheader",您将获得默认的 scope="col"。删除这些角色。 其次,语义表元素具有内置角色,如上所述,因此您不应该使用role="presentation"覆盖这些角色。这会删除该元素的语义值。例如,您有 <tr role="presentation">、<th role="presentation"> 和 <thead role="presentation">。删除所有role="presentation"。 主桌上还有<table role="grid">。如果您计划实现箭头键导航以在行和列之间移动(类似于在电子表格中导航),那么网格角色就可以。我尝试了一个简单的 FullCalendar 演示 ,但箭头键 无法 工作,所以 role="grid" 应该 not 被使用。日历中的日期是 tab 可聚焦的,这很好,但这只是一个常规表格,而不是网格。 由于生成的表代码存在很多问题,因此很难说是什么导致了 siteimprove 错误,但如果您可以控制的话,请先清理所有角色。如果您没有这种程度的控制权,我将不会使用该日历,因为它无法访问。

回答 1 投票 0

Tabindex 不关注下一个元素

我正在尝试使用 React/TypeScript 在不同的单选按钮输入之间进行切换。我可以让第一个单选按钮聚焦,但是当我单击选项卡时,它聚焦在单选按钮之外。我尝试使用

回答 1 投票 0

MacOS 上的辅助功能提示问题

我正在MacOS上构建一个Python应用程序。 它需要访问系统事件,因此我使用 AXIsProcessTrustedWithOptions 来提示可访问性对话框。 导入对象 如果 sys.platform == '达尔文': 一个...

回答 1 投票 0

用于显示从表单输入的值的静态 DIV 的标签

我有一个确认屏幕,其中先前输入的表单输入字段显示为静态 DIV。 HTML 如下。 DIV 虽然是静态的,但可以通过 TAB 进行聚焦,从而允许用户点击它们......

回答 2 投票 0

macOS Accessibility API - 查询 Books.app 时 kAXErrorAttributeUnsupported

我想递归查询 Books.app 的子元素以获取所有可点击的元素。 但是,我注意到我似乎无法从 ...

回答 2 投票 0

允许辅助功能屏幕阅读器使用语义将数字字符串一一读取为数字 [flutter]

我正在使用语义来调整我的应用程序以实现可访问性,并且想要一对一地读取电话号码(例如:文本(“950874123”))而不是“百万,千......”。有什么办法吗...

回答 2 投票 0

屏幕阅读器无法正确读取 Aria 扩展值

我用javascript生成了一些可折叠的div。我希望屏幕阅读器指示 div 是否折叠。我正在尝试使用 https://techservicesillinois.git 中的模板...

回答 1 投票 0

Appium 和 Compose NoSuchMethodError 崩溃

升级到最新版本的 compose,然后突然我在应用程序上崩溃了。不确定这是由 Appium 还是应用程序本身引起的: java.lang.NoSuchMethodError:没有超级方法

回答 1 投票 0

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