When it comes to front-end web development, 'ivory towered idealism' is a particular bugbear of mine. While we should always endeavor try to do things 'the right way', pragmatism must always win out. Let me give you an example (the finished code is example_10-02). Suppose we have a button to style that opens an off-canvas menu. Our natural inclination might be to mark it up something like this:

<button class="menu-toggle js-activate-off-canvas-menu">
    <span aria-label="site navigation">&#9776;</span> menu
</button>

Nice and simple. It's a button so we have used the button element. We have used two different HTML classes on the button, one will be a hook for CSS styling (menu-toggle), and the other as a JavaScript hook (js-activate-off-canvas-menu). In addition, we are using the aria-label attribute (ARIA is covered in more detail in Chapter 4, HTML5 for Responsive Web Designs) to communicate to screen readers the meaning of the character...