9257 shaares
226 private links
226 private links
It provide a good example: this semantic HTML
<button
id="navbar-toggle"
type="button"
aria-label="Toggle menu"
aria-controls="navbar-menu"
aria-expanded="true"
></button>
<ul id="navbar-menu" aria-labelledby="navbar-toggle"></ul>
should be styled as follow in CSS
/* State: closed. Click to open. */
#navbar-toggle[aria-expanded="false"] {}
/* State: open. Click to close. */
#navbar-toggle[aria-expanded="true"] {}
Just as before, it turns out that the class name was completely redundant. In fact, because we reached for a class name prematurely, we forgot to communicate the right semantics at the markup level.