Skip Over Long/Repetitive Elements

We can take for granted our ability to visually scan a web page and quickly look at the part of the way page that really matters — it’s easy for us to ignore navigational elements on the page in favor of the content.  

But for a user who is using a screen reader, it can be difficult to skip ahead to the content they’re looking for — and that can often mean the long process of listening to the reader walk through everything else that shows up on the page before the piece of information they’re really looking for.  

We have already talked about how good header structure can help users navigate the page. For especially long pages, it can be useful to provide skip links that will allow a user to skip right to the content that is important to them.  

This is not always easy to do in WYSIWYG editors, but it’s easy to do manually if you have a need.  The technique takes advantage of link tags — which, as you’ll recall, are actually “anchor” tags.  They’re used on both ends of this process.  

Creating a Target

To begin with, you need to create the point on the page that the user will jump to when they click on the link.  This is created by creating an anchor tag — this time without an “href” attribute, but with a “id” attribute. 

<a id="target">Target Text</a>

Creating a Link to a Target

To create a link to that target, you create a link as you normally would — with good, descriptive link text — and in the href attribute you’ll put in a pound sign (#) and the name of the target. 

<a href="#target">Jump to target</a>

It’s even possible to create a link that goes to a specific target on another page — in which case you would simply add the target “#target” to the end of the URL.  

<a href="https://wichita.edu/anotherpage.php#target">jump to target</a>

That’s all it takes. It’s a simple thing to do, and it can do a lot to make large pages much easier to use for your end users.