Hovering Navigation Arrows

Question

Is there any modern and accessible approach to implementing "hovering navigation arrows"?

I was given a website layout to implement which features "hovering navigation arrows" to navigate to the previous/next articles.

I'm talking about the kind of arrows that would show when the mouse hovers over the first quarter of the screen for the previous article, for example, and the last quarter for the next article. The kind of navigation you usually find in a slider/carousel.

Note that the screenshot above is not a slideshow, there is more content if you would scroll down. The footer is fixed.

I have never implemented such a feature and, although I find it quite useful to navigate to the previous/next articles (the arrows are quite big and fit nicely in the design), I can foresee a few potential drawbacks; the navigation would break in touch devices, would block most of the elements in smaller devices, could potentially interfere with other elements in the page, etc.

I sense that this technique is quite old-fashioned but I was wondering if there is any modern and accessible way to implement it.

Thank you.

Answer 1

The simple way to implement these is to remember that the visual representation is for sighted users only.

As long as your HTML has all of the elements needed to navigate the site with CSS turned off you can do what you like to build the visual representation without needing to consider whether your work is accessible to those just browsing the HTML.

Remember that there are two layers, HTML, which marks up the actual document and CSS which provides a visual skin on the site.

A good example of doing this wrong would be putting content in a ::before psuedo-selector that would only appear on hover. As this would only be in the CSS it would not be rendered to someone just accessing the HTML. However, in this case, as you're going to be linking, you'll need an <a> in the HTML anyway. Just don't do anything crazy with hover, DOM manipulation and Javascript and you've just about won.

A simple test is to switch CSS off on the site (just rename the file) and check that you can still consume all of the content easily. A more robust test is to get some visually impaired users or some screen reading technology and test with that.

Having said this, I'd advise against having nothing visible in the design to suggest hover. Just having an area of the screen that triggers the arrow isn't as easy to use as having a marker to say 'interact with me to navigate'. Fancy effects can then be applied to the hover state.

If you did this, you'd have something touch screen users could see and click as well.

Finally, blocking and interference on smaller screens is an implementation thing, so not really a question for here.