Ravelry and Keyboard Navigation

It is starting to become embarrassing to see yet another post on Ravelry that demonstrates quite clearly that the team really don’t understand how diverse users access content on a computer. Their latest post says that they have added a ‘skip to content’ for those who use the keyboard for navigation. There are two issues here that need to be understood.

  1. Many people use the keyboard to navigate their way round web pages, office documents or other digital content – including me. Many of them have no sight impairment and do not need to use a screen reader – also including me.  The purpose of a ‘skip to content’ option is to enable a keyboard user to go directly to the content of the page without having to tab through lots of additional links or even menu items.
  2. A person with reduced vision may need to access their computer by having the screen read out loud to them. Their needs can vary and their use of a screen reader can vary from all the time as they have little functional vision to needing it for the times when their vision needs some additional help. Screen reader users also use the keyboard for navigation.

Keyboard Navigation

There are a lot of people who prefer to use their keyboard instead of the mouse. Currently you have to press the tab key 48 times to get to the search box on the home page of Ravelry – not good.

Visual representation of the route taken to access the Ravelry search box using a keyboard only - 48 tab stops.
Ravelry tab options – 48 tabs to get the the ‘quick’ search box.

A keyboard user typically uses the Tab key to navigate through the various interactive elements on a web page—links, buttons, fields for inputting text, etc. When an item has keyboard “focus”, it can be activated or manipulated using the up and down arrows and enter. As you tab through a page, you can see that the focus is moving from one item to another.  Try it on the Ravelry page – it will work with Firefox, Chrome or an Edge Browser.

Ravelry top menu showing the focus on the patterns option.
The focus (on the patterns option) moves along as you hit the tab key.

You will see the focus move from the ravelry logo top left and along the top menu as you press the Tab key.  If you want to go back, just use Shift and Tab.  If you want to open that menu simply press Enter when the option is highlighted.  For a very good example of keyboard accessibility I recommend the New York Times site. The focus goes directly to a full menu of options that you can navigate and select with ease. If you continue to tab you will see the ‘skip to content’ option appear.

Using a Screen Reader

When Ravelry posted that they have provided a ‘skip to content’ link in the header I immediately went to test it as many sites have this option but it is not visible.  I use an open source screen reader called NVDA (Non-visual desktop Access).  On opening Ravelry site and there is no ‘skip to content’ there so I’m not so sure what they mean with this post. One of the main tenets of web accessibility is ensuring that any options that you provide can be accessed from a variety of browsers – I’m not sure why they have instructions for using Safari as the keyboard navigation is already there. If this is only visible or accessible with safari there is something seriously wrong with their code.

I didn’t go any further than this as there didn’t seem much point.  I have emailed them but so far have received no reply or anything other than an automated acknowledgement.  ‘Somebody’ needs to inform them that they are really not helping themselves here.

3 comments

  1. The button only appears when you tab *to* it. The first tab puts focus on the logo, the second tab puts the focus on the skip-to-content button and makes it appear. The third tab takes you to the next actionable element and makes the skip-to-content button disappear.

    No, it doesn’t make sense as a UX, but that’s how they did it. At least the focus *also* skips when you follow the skip-to-content link; I was worried the focus would stay in the header, but it actually goes where it’s supposed to.

    Like

  2. The ‘Skip to Content’ option appears only to work in nurav; I toggled over from my default Classic to give it a look and it seems to function the way you describe in your very informative post, and I’m not using a screen reader. I just hit Tab twice and ‘Skip to Content’ appeared where the logo was. I think a huge problem with the updates MH is posting is that she doesn’t really understand what information would actually be useful for folks who need/want this accessibility — hence the Safari reference, without context regarding other browsers that don’t need an extra step for this to work (I, forex, use Chrome). Also, I read somewhere in the forums during the chaotic first days after the rebranding reveal that the functionality Cassidy would be building into nurav would not be available for Classic. This seems to be an example of that.

    Like

Leave a Reply to nothingbutknit2 Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s