Two new (and free) stacks to improve the accessibility of your site

We may not always realise, but millions of people can’t use a mouse to navigate on a site. Visitors with visual impairments usually use a screen reader in combination with a keyboard. People with motor disabilities often control their computers using a keyboard or other input devices.

Unfortunately, most sites built with RapidWeaver do not work very well for those who cannot use a mouse. The two stacks I introduce to​day can substantially improve the accessibility of your site.

Outline! Stack

Using outline on elements like links, input fields and buttons is essential for keyboard users to navigate around a web page. Unfortunately, some frameworks and themes disable the outline of focussed elements which makes a site virtually inaccessibel for keyboard users.

The Outline! Stack does its best to either restore the default outline or set a custom outline style. Optionally, you can hide the outline for mouse users, giving you the best of both worlds: optimal accessibility for keyboard users and optimal aesthetics for mouse users.

SkipToMain Stack

Besides restoring outline on all ‘tabbable’ elements on a page, you may also want to take a look at the SkipToMain Stack to further improve the accessibility of your site. With this stack, keyboard users can access the main content of a page with just two key presses, bypassing all content (menu, search box etc.) above that main content – as suggested by WebAIM.

Please read the product pages (Outline Stack, SkipToMain Stack) to learn more about making your site fully accessible, suggested reading, features of the stacks and demos.

Free

Both stacks are free , so feel free to download them on their product pages and use them to make your site accessible for those who need it.

Compatibility

I did my very best to make these stacks work with every theme and framework out there, but if they fail under certain circumstances, please let me know and I will do my best to fix it.

The last few months I’ve updated several of my stacks to make sure that their output is fully accessible for screen reader and keyboard users and that they work well with both the Outline! and SkipToMain Stack.

In most cases these stacks work also well with the stacks from other developers, but obviously I can not guarantee it.

Hope you can use them to make your site more accessible!

15 Likes

Great idea. Wish other developers were doing things like this. Thank you for all of your hard work!

5 Likes