Keyboard Accessibility

Anyone know how to maximise keyboard accessibility in RW sites? Not a topic I know anything about but as Website Accessibility is becoming more compulsory in certain sectors I thought I’d give some of my sites a proper check.

What I’m finding is it’s easy enough to scroll up and down but that’s about it. Couldn’t find a way to get to a new page or click certain buttons.

Any advice welcomed

In your web browser, you have to make sure tab navigation is enabled. I have a feeling some browsers like Safari have it ‘off’ by default. So perhaps check that first.

Then by pressing the tab key, you should be able to cycle through all the links on your webpage. They should highlight with an outline or border pr present some other subtle style change. When the desired link is outlined, pressing your return key should navigate you to that page. Then use your keyboard arrow keys to scroll up and down.

The same applies to contact form fields. Pressing the tab key should bounce you between each form element.

However your exact mileage depends on the quality of the theme or stack you are using. Some make no effort whatsoever towards accessibility, leading to rather hit-or-miss results. Others like Gator or perhaps the RWSkinz theme you will find tick all the boxes for accessibility - even within a drop down menu.

Incidently drop-downs is where accessibility issues tend to arise; hence some individuals or companies have a strict policy against them for this reason. Lots of government websites do not use drop-downs. In RWSkinz I found a method to make drop-downs more accessible with the tab key, but it typically doesn’t work for other themes with drop-downs.

Tab index is what governs the order in which you can cycle through links on a webpage. Giving a link or button a negative tab index prevents it being selected.

You can also assign frequently used links with accesskey attributes. These work like custom keyboard shortcuts.

Accessibility is quite a mine field. Ask 100 devs and you’ll get 100 different answers! It encompasses both the design and structure of your webpages. Simple website navigation can help alleviate most issues.

2 Likes

Most RapidWeaver sites don’t do very well on A11Y. That’s not saying they’re doing much worse than the rest of the web.

My old company has been doing Accessibility Audits for a some large cap financial and insurance companies lately. A11Y(shorthand for Accessibility A eleven letters and Y) has been very confusing to most developers. Here in the US larger companies are making it a higher priority due to lawsuits.

Unfortunately for the average RapidWeaver user there’s not a lot they can do. Make sure you select good color contrast and try to encourage the developers to make this a higher priority.

For the developers I’veGot a site on *Authoring Practices that will help cut through the confusion. It’s written in pretty plain English and has examples of common design patterns like Accordions, menu bars, carousels, modals, buttons, etc. And it’s from of all folks the W3C.

https://www.w3.org/TR/wai-aria-practices-1.1/

Here’s a great video from Rob Dodson for developers as well

4 Likes

I never knew that! Cool…

I have put a ton of A11Y work into Foundation 6. Form in particular was a ton of work…

1 Like

Excellent - I’ll be snapping it up!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.