如何使用react-modal包在React应用程序的控制台中修复此警​​告:

警告:react-modal:未定义App元素.请使用Modal.setAppElement(el)或设置appElement={el}

我没有成功地弄清楚el应该是什么.

上下文:在我的App.js根组件文件中:

...
import Modal from 'react-modal';
...
class App extends Component {
  ...
  render(){
    ...  
    <Modal
      className="modal"
      overlayClassName="overlay"
      isOpen={foodModalOpen}
      onRequestClose={this.closeFoodModal}
      contentLabel="Modal"
    >
    ...
  }
}

其中...表示代码未显示.

一切正常,但是当打开模态时,我的控制台中会出现以下警告:

index.js:2177警告:react-modal:未定义App元素.请使用Modal.setAppElement(el)或设置appElement={el}.这是必需的,因此屏幕阅读器在打开模态时看不到主要内容.不建议这样做,但您可以通过设置选择退出ariaHideApp={false}.

在react-modal文档中,我可以找到以下内容:

应用程序元素应用程序元素允许您指定应隐藏的应用程序部分(通过aria-hidden),以防止屏幕阅读器等辅助技术读取模态内容之外的内容.

如果您正在进行服务器端呈现,则应使用此属性.

它可以通过以下方式指定:

一个DOMElement
Modal.setAppElement(appElement);
query selector - uses the first element found if you pass in a class.
Modal.setAppElement('#your-app-element');

不幸的是,这没有帮助!我无法弄清楚el应该代表什么.

以下是我尝试添加到我的Modal组件中的一些属性变体:

`appElement={el}`,  
`appElement="root"` where `root` is the id that my …

在我的代码中，我有一个存储在无序列表中的按钮列表。如果启用了屏幕阅读器，并且选择了任何li元素，那么大多数阅读器将从列表中的多少个元素中读出您所使用的元素（例如，“列表项目1，项目2之4”）。

我很好奇的是，有可能将两者合并，以便您在按Tab时可以按到按钮上，但同时还可以通过屏幕阅读器读取列表项信息。

下面是我当前代码的示例代码（第一个），第二个仅用于说明屏幕阅读器显示2之4的声音。

<div>
  This example shows that you tab straight to the button but don't get the list information
  <ul>
    <li><button onClick="alert('Button 1')">Button 1</button></li>
    <li><button onClick="alert('Button 2')">Button 2</button></li>
    <li><button onClick="alert('Button 3')">Button 3</button></li>
    <li><button onClick="alert('Button 4')">Button 4</button></li>
  </ul>
</div>
<div>
  This example shows that if you add tab index on a list item you get the count of items in the list
  <ul>
    <li tabindex="0"><button onClick="alert('Button 1')">Button 1</button></li>
    <li tabindex="0"><button onClick="alert('Button 2')">Button 2</button></li>
    <li tabindex="0"><button onClick="alert('Button 3')">Button 3</button></li> …

问题：对表单元素进行分组

我有一个HTML表单，在几个地方，单个控件由几个输入组成。一个示例是一组单选按钮。

我想对这些输入及其标签进行显式分组，以便屏幕阅读器（除了通过将它们对齐在一行上的视觉表示之外）还能够理解并宣布这种关系。

例如，假设我有一个像这样的控件：

<div class="control">
  <div class="control-label">Type</div>
  <div class="control-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</div>

标准解决方案问题：字段集样式问题

fieldset元素，它的孩子legend似乎正是为此而生的（在下面的示例中使用）。

问题是，fieldset和legend元素不能像正常的元素风格（一些讨论这件事），与时下除了在Firefox中这是不可能对准他们利用Flexbox的单行线，其中我的布局需要。

<fieldset class="control">
  <legend class="control-label">Type</legend>
  <div class="form-inputs">
    <input type="radio"
           name="type"
           value="a"
           id="type-a" />
    <label for="type-a">A</label>

    <input type="radio"
           name="type"
           value="b"
           id="type-b" />
    <label for="type-b">B</label>
  </div>
</fieldset>

问：是否有一些其他的方式？

这让我想知道是否有某种使用fieldset元素以外的可访问方式来将多个表单控件分组？

可能的解决方案：role="group"？

有一个“组”角色（在下面的示例中使用），可以添加到简单角色中div，看起来好像可以完成任务，但是没有明确说明它的功能等同于使用字段集。如果是的话，那我该如何标记该组中的一个元素以等效于legend？

<div …

我们有一个ASP.NET MVC 5 Web应用程序.我们使用JAWS与Internet Explorer 11(企业授权)和Chrome进行定期可访问性测试.当用户选择进入字段时,我们一直遇到JAWS无法读取与表单字段关联的验证消息的问题.我们使用FluentValidation和标准HTML帮助程序来显示表单字段和验证消息(如下所示):

@Html.LabelFor(model => model.Email)
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email, null, new { role = "alert" })

示例FluentValidation可能会在数据库中查询表单中的电子邮件地址,并在服务器端显示"已收到此电子邮件"的消息.

生成的HTML发送回浏览器是:

<label for="Email">E-mail address:</label>

<input type="text" name="Email" id="Email" ...>

<span class="..." data-valmsg-for="Email" data-valmsg-replace="true" role="alert">
    This e-mail has already been taken
</span>

没有任何内容将验证消息与表单字段相关联.我一直认为MVC框架自动建立了这种连接,但显然它没有.

根据WebAIM,我们应该利用该aria-describedby属性将表单字段与内联验证错误相关联,但是要重新使用现有的MVC5框架来完成这项任务是非常重要的.

当将焦点转移到ASP.NET MVC5生成的表单字段而不重写主要HTML帮助程序时,我们如何让屏幕阅读器宣布内联验证消息？

如果我有两个元素一起描述一个元素，是否可以在aria-describedby属性上使用两个id ？

<div id="description-1"></div>
<div id="description-2"></div>
<div aria-describedby="description-1 description-2"></div>

我的 React 应用程序中有一个链接调用onClick处理程序，如下所示：

<a onClick={handleClick}>Link</a>

但是，因为我没有使用 nativehref属性，所以当我聚焦链接时，这个处理程序不会被激活，然后按Enter。

现在，我当然可以添加一个onKeyDown处理程序，然后检查按下的键是否为Space或Enter，如果是，则调用handleClick. 但是，我担心这不足以捕捉所有可访问性的细微差别，也不足以捕捉到它的行为是否与常规链接完全一样。

因此，问题是：有没有办法表明我希望我的函数在链接后跟随任何可能的交互方法时被调用？

当前（2019/10或HTML“生活标准”中）是否存在一种“标准”方式来提醒辅助技术用户音频内容可用于给定的文章/页面？

例如，与播客成绩单相反。相反，提供音频的文字，我正在寻找一种方式来警示辅助技术是音频存在一个给定的文本。

这是东西吗？

注意：我看到WCAG检查表指出：

如果将音频或视频指定为Web内容的替代项（例如，网页的音频或手语版本），则Web内容本身将用作替代项。

也许那是我的答案？提供某些内容的“音频”版本是否暗中将其链接到所提供的文本？我理解正确吗？

由于最高审计机关的问题，我可以使用aria-label，并aria-hidden="true"在相同的元素？

我想要实现的是拥有一个<span>带有aria标签的元素（中的打开图标），但忽略其内容。

<span class="oi" data-glyph="star" aria-label="Favourite" aria-hidden="true"></span>

这种用法是正确的，还是aria-hidden试图忽略该元素与aria-label试图赋予其含义之间存在冲突？

我正在努力调整一些组件，以便它们在高对比度模式下都能正常工作并看起来不错。Edge 似乎在 IE11 未添加的所有文本下添加黑色背景。我似乎无法找到一种在 CSS 中定位此背景的方法，或任何其他方法来规范两个浏览器之间的行为。

例如，假设我有以下内容：

<div class="SelectedText">
  Text!
</div>

假设我将background-color: cyan;和分配color: black;给了.SelectedTextdiv。

在这种情况下，IE11 按预期使用具有指定颜色的 div 和文本呈现它。然而，在 Edge 中，div 背景和文本被赋予正确的颜色，但文本本身在其背后绘制了黑色背景，使其在黑色文本上无法读取。

下图说明了在具有上述基本相同标记的菜单项上下文中发生的此问题。

有什么方法可以禁用或针对 Edge 添加的这个额外背景？

我正在建立一个网站，并尝试通过使用ARIA标签，角色标签等使其尽可能地易于访问。

导航菜单项是“改变生活”。屏幕阅读器将其读出为“改变生活”的地方（如“送礼”而不是“刀子”）。

另一个导航菜单项是“关于我们”，但屏幕阅读器将其读出为“关于我们”。

我正在寻找有关如何强制屏幕阅读器发音的帮助。