Enabling Skiplinks/ Accessibility

I have activated WP Accessibility plugin to enable some missing accessibility features to X. One of the options is the ability to turn on skiplinks. For that option, I need to enter the main content ID and main navigation ID. The main content and navigation divs don’t seem to use IDs and instead just use classes with ARIA roles.

In case you are unfamiliar with skiplinks, they allow screen readers to skip past navigation links directly to the main content. Other wise, especially on large sites, the large number of links makes getting to the actual content cumbersome.

How can I add this to the whole site without damaging the code?

Thanks for your support.

1 Like

Hello There,

Thanks for writing in!

For the navigation, you can make use of the menu-name-of-the-menu as the ID. Please make sure that you replace the ‘name-of-the-menu’ exactly the same as the way you named your menu in Appearance > Menus.

For the main content, you will have to make a custom ID for it. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

  echo '<div id="my-main-content"></div>';
}
add-action('x_after_masthead_end', 'add_custom_id');

And you can make use of the my-main-content as the ID for your content.

Hope this helps. Please let us know how it goes.

Hi thanks for the help, I tried this but after editing the functions.php file and adding the code above I keep recieving this message.

ParseError thrown

syntax error, unexpected ‘}’, expecting end of file

What am I doing Wrong?

Hi there,

Please try:

function add_custom_id() {
  echo '<div id="my-main-content"></div>';
}

add_action('x_after_masthead_end', 'add_custom_id');

Tried it, and got this:

Error thrown

Call to undefined function action()

Hi There,

Please do make sure that you have copied the code completely. Also please try replacing x_after_masthead_end with other X specific actions. See it here: https://theme.co/apex/forum/t/customizations-actions-and-filters-in-x/208 under X Specific Actions and Filters. x_after_masthead_end might not work as expected if you don’t have Slider below masthead. See this: https://screencast-o-matic.com/watch/cbXrVi2ZSy
Choose the correct action that will suit your needs.

Hope this helps.

Thanks, That did it. You guys are the best!

Glad to hear it’s sorted. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.