Axe DevTools检测Chrome页面出现<ul>/<ol>子节点合规性错误求助

问题原因 #

你遇到的错误是因为BootstrapVue的<b-nav-form>直接放在<b-navbar>下时，组件会将其插入到内部的<ul class="navbar-nav">列表中，但没有用<li>正确包裹，导致<ul>直接包含了非允许的元素（表单相关DOM），违反了无障碍规范。

两种解决办法 #

办法1：用navbar的slot放置表单 #

将表单放到<b-navbar>的start/end等专用slot中，这样会渲染在导航列表（<ul>）之外，避免结构冲突：

<div>
  <b-navbar type="light" variant="light">
    <template #start>
      <b-input-group prepend="@">
        <b-form-input placeholder="Username"></b-form-input>
      </b-input-group>
    </template>
  </b-navbar>
</div>

办法2：将b-nav-form嵌套在b-nav内 #

如果需要保留导航项的样式结构，把<b-nav-form>放到<b-nav>组件里，<b-nav>会自动给它生成合规的<li class="nav-item">包裹：

<div>
  <b-navbar type="light" variant="light">
    <b-nav>
      <b-nav-form>
        <b-input-group prepend="@">
          <b-form-input placeholder="Username"></b-form-input>
        </b-input-group>
      </b-nav-form>
    </b-nav>
  </b-navbar>
</div>

验证 #

修改后重新用Axe检测，应该就不会再出现<ul>/<ol>内容违规的错误了。

内容的提问来源于stack exchange，提问作者FreeHuman jen