Web CommunicationWeb TrainingResourcesAccessibility ResourcesHow to Add Skip Button

How to Add Skip Button

When using a social media feed, such as Curator.io, on your web page, provide a way for people to skip the feed when navigating the web page via keyboard or screen reader.

You need two things to perform this accessibility improvement: a button and a target. The button will be navigated via keyboard or screen reader, and when it is selected the user will be directed to the target, skipping the social media feed.

Examples of Skip Buttons before Social Media Feeds

Adding a Social Feed and Skip Button

  1. Add the Social Media feed: Place your social media feed on your page below a heading for the social media feed.
  2. Before the Social Media feed: In the space before the social media feed, insert a Button block with the following settings in the right-hand settings panel:
    • General > Button Text: Skip Social Media Feed
    • General > Clickthrough URL/Link: #skip-social-media-feed
    • Advanced > Button CSS Class(es): wsu-button--style-skip
      Note: This class will make the button transparent in the editor as well as the front end of the page.
      Document Outline tool: You may use the Document Outline tool to locate the button after it has this class.
  3. After the Social Media feed: In the space after the social media feed, insert a Spacer block with the following settings in the right-hand settings panel:
    • Settings > Height: 10
    • Advanced > HTML Anchor: skip-social-media-feed