Is there an option to add a Skip Navigation Link (Skip Nav) to the top of a page?
For those that don’t know, Skip Nav’s are a fairly basic web accessibility feature that adds a link before any menu items that allows folks to skip over the navigation menus (hence the name) and get straight to the main content of the page, if they want.
I saw a different post where Evolve kind of addresses this by having the first heading on a new page automatically receive focus, but this removes the choice from people who may want to access the menu before jumping straight to the content. The way it currently works requires folks to navigate backwards to reach the menu again, which seems awkward.
Just wondering if this is in the works to add, or if I missed it in the options somewhere. Thanks!
Hi @Adam_Thiel that’s an interesting point to raise.
No, there isn’t any ‘skip navigation’ function available in Evolve. I have also seen these included in some web sites/learning content but I’m not 100% convinced of their usefulness, in part because a page that’s well set up with ‘landmarks/regions’ can be more easily navigated using the functionality available via assistive technology.
For example in VoiceOver for macOS I can press ctrl-opt-u to open a menu that lets me jump to the ‘navigation’ region of the page. The reason I think this is more useful is that you can do that easily whenever you want, no matter where you are in the page - whereas with the ‘skip navigation’ technique you have to go through that every time there’s a change of page, which quickly gets pretty repetitive.
I understand that that functionality exists when using a screen reader, and that’s awesome, but that only helps folks who actually use screen readers. Some people may just be using a keyboard and nothing else (or AT that outputs keyboard commands). Those are the users that can greatly benefit from a skip nav. Multiple modalities!
Yeah that is a fair point, though I’d still argue that the majority of the time, following a page change, you’re going to want to be diving straight into the page content so, on the rare occasion you do want to keyboard-nav into the navigation, having to hit shift-tab isn’t too onerous compared to having to hit enter on ‘skip navigation’ every time.
That said, I’m not discounting what you’re saying - I’ll have more of a think about this. And would be interested to know if anyone else has a view…?
I don’t disagree with your points either. There’s a bigger conversation to be had, for sure.
I’m coming at this from a web accessibility testing perspective, and we always check if a website has a skip nav or not. If not, then that website typically fails WCAG Success Criteria 2.4.1 Bypass Blocks. I say “typically” because skip navs have become the standard way to handle this on websites, but that doesn’t mean that they’re the only way.
I’m interested to see what other people think too. Always happy to learn something new!
@Adam_Thiel well you’re not going to believe this but I’ve just discovered there IS a ‘skip to content’ function available in Evolve!
If you go into Course Settings > Navigation > Navigation Bar and set Skip Content ARIA Label - then it does actually show one… Only problem it’s not really working very well
In part this is because I made a bunch of changes to how focus is set when navigating in Evolve that means it’ll be skipped over (because I wasn’t aware this functionality existed!) - but also because if you select it, it takes you to the first tabbable element on the page which, if I’m understanding this WCAG article correctly, is wrong - it should be sending focus to the ‘main content area’ not something within it.
The really fun challenge to make this work nicely though is to find some way to include this functionality in a way that works well for all four main methods of interacting with Evolve (mouse, touch, keyboard and screen reader). The reason this is challenging is down to Evolve being a Single Page Application - so the browser doesn’t reset focus to the top of the page when you navigate between Evolve ‘pages’ - so the Evolve code has to handle this. But if I were to tell it to set focus to that ‘skip navigation’ link then it would appear every time you navigate between pages which would obviously not be a great experience for anyone except screen reader users…
Anyway, I’ll figure something out - you’ll just have to bear with me for a while as it’s not at all straightforward!!
@Matt_Leathes I’m glad I asked my question! Yes, that’s how I interpret that WCAG SC too. Sounds great. The fact that you’re willing to look into it at all speaks volumes! Keep up the great work!
BTW the way it works now is that if you have ‘Skip Content’ enabled and you’re navigating from one page to another it will send focus to a hidden element just before the Skip Content link. This element will contain the document title (so that a screen reader has something useful to announce). Pressing tab will then take you to the Skip Content link itself - and selecting that will send focus to the ‘main content’ section of the page.
If you don’t have ‘Skip Content’ enabled then the behaviour will be as normal i.e. on page change focus will be sent to the page’s ‘heading 1’ element.
If you’re nagivating from one page to an item in another page (e.g. a component), focus will be set to that item’s title regardless of whether you have Skip Content enabled or not.
Hi Matt, I’m jumping on this older thread as I am trying to make sure our course is meeting the 2.4.1 success criteria and this thread looks very relevant. I’ve tried to follow your suggestions to enable ‘skip content’ but I might be misunderstanding how to do this… Is this where I will find this? Course Settings > Navigation > Navigation Bar and set Skip Content ARIA Label?
Actually Matt, I have one more question. Is it best practice to have any other of these fields filled in? Or is there a guide for these settings somewhere? We currently have the following
@lisa generally speaking, all the ones that are pre-filled when you create a new course are the ones that need to be completed. as for the others, that’s totally dependent on what you want to do. For example, if you add a logo to the navigation then you might also want to set Navigation Logo Alt Text*
I’d also say that when a button or link has a visible label you should not also set an ARIA label on it unless you have a really good reason to do so.
* That said, if the e-learning course is for Company XYX, I’d personally find it irritating to have ‘Company XYZ’ announced on every single page… given that I already know I work for Company XYZ!
Yes, that’s how I interpret that WCAG SC too. Sounds great. The fact that you’re willing to look into it at all speaks volumes! Keep up the great work!
