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

Question

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

Answer 1

BEM 建议避免 id 用于 css 选择器。对于 A11y 和可用性，使用 id 是完全有效的。

<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 class.

此外，如果没有 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-describedby_attribute

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

BEM. How to deal with label for/id?

label

accessibility

input

bem