边界元法。如何处理标签 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__control 类的 form 块的元素。

此外，您不能使用没有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