Question

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

Answer 1

BEM建议避免为CSS选择器使用id。对于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块的Element。

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

BEM。标签/ ID如何处理？

1 个答案: