时间戳

首页 > 解决方案 > 边界元法。如何处理标签 for/id？

input - 边界元法。如何处理标签 for/id？

问题描述

据我所知，BEM 根本不使用元素 id。但是在这种情况下如何处理结合输入的标签 for/id 呢？如果我不使用 id，使用屏幕阅读器的人不会知道这个标签是针对那个输入的。我对吗？

标签： inputlabelaccessibilitybem

解决方案

BEM 建议避免id使用 css 选择器。它完全适用id于 A11y 和可用性。

<form class="form" method="post" action="">
    <label for="email" class="form__label">Email</label>
    <input type="email" id="email" class="form__control"/>
</form>

在上面的示例中，我们将输入设置为form带有类的块的元素form__control。

id如果没有指向描述性元素的指针，您也不能使用 aria 属性。

<div role="application" aria-labelledby="calendar" aria-describedby="info">
    <h1 id="calendar">Calendar</h1>
    <p id="info">
        This calendar shows the game schedule for the Boston Red Sox.
    </p>
    <div role="grid">
        ...
    </div>
</div>

示例取自：https ://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria- describeby_attribute

推荐阅读