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

Question

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

Answer 1

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 阻止类(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