More semantic HTML for directionNav

A good indicator that a button element should be used in place of a link is when the href is set to "#". If it's not linking to another page or part of the page, then it should be a button indicating that some form of action will occur when pressing it. For accessibility, the button element also provides the value attribute, which performs as an alternate text in case the button text itself is styled away (as is usual). More about this common pitfall of using links as buttons here: http://www.karlgroves.com/2013/05/14/links-are-not-buttons-neither-are-divs-and-spans/

There is also no semantic reason why these button links should be in a list. If more containers are needed to allow for flexible styling of the buttons (although you'd think the :before and :after pseudo-elements should take care of this need), spans can be added outside the button elements.

A further improvement would be to add ARIA-attributes to these buttons.