Tutorial: How To Create Accessible Skip Links for Your WordPress Site Using Oxygen
In this video tutorial, we’ll create a Skip Link for your WordPress website built with Oxygen. Skip links are generally found at the very top of a website and allow keyboard users to quickly move past your website’s header and go directly to the page’s content. They can also be added to areas where you have a lot of repeated content.
To begin, we’re going to open our Main template. We’ll set the Inner Content element to use the main tag for HTML. Next, we’ll wrap the Inner Content element within a Div element and assign that Div element the ID “main”.
Then, we will add a Text Link element to the top of our Main template; this will become our Skip Link. We’ll set the description to something clear, such as “Skip to Main content” and then set the URL to “#main”.
Finally, we’ll add styles to our Skip Link to prevent it from showing when the page loads, and then have it show when a user tabs through the page’s content.
If you have access to Oxygen’s Composite Elements, we have a pre-built Skip Link element you can use to get started.
References and Tools:
- Skip Links (MDN)
- W3C Guidelines and Documentation:
- Screen Readers:
