MYDS Logo

MYDS

Beta

Skip link

Enables users to bypass repetitive navigation links and jump directly to the main content. It enhances accessibility for keyboard and screen reader users by improving navigation efficiency and is typically hidden until focused.

Where to use?

Every gov.my page should have a skip link placed immediately after <body> tab.

However if cookie banner is used, place skip links immediately after cookie banner.

If <header> is present, wrap skip links inside header. Do not wrap skip links inside <nav>.

<body>
   <!-- Cookie banner -->
   <cookie-banner />
 
   <!-- 1. Place skip links here -->
   <a href=”#main-content” class=”myds-skip-link”>
      Skip to main content
   </a>
 
   <masthead />
   <nav />
 
   <!-- 2. Main content -->
   <div id=”#main-content” class=”container”>
      <input class=”myds-search-bar” tabindex=”0”>
   </div>
 
</body>
  1. Skip link component which link to main content section ID.
  2. To add a focusable element in anywhere of the section or page just add tabindex=”0”.

How it works?

Skip link is hidden by default and only appear when user tap on TAB key on keyboard after page load. When it appears, it will be in a fixed position at the top left of the screen.

skip-link-how-it-works.pngskip-link-how-it-works.png

  1. When press TAB key on keyboard, skip links appear (instantly) in focus state. Additionally, add a Shadow/context-menu shadow to indicate that it is above other menus. Note: When click anywhere on the page, hide the skip link button.
  2. While skip link is in focus, press the ENTER key will hide the skip link button, scroll to the main content section, and focus on the first focusable element.

What if user continue to press TAB?

If the user continues to press TAB after the skip links button appears, the focus will move sequentially to the next interactive elements on the page, following the natural tab order.

skip-link-press-tab.pngskip-link-press-tab.png

  1. Focus on first focusable element (nav buttons).
  2. Focus on second focusable element and so on following natural tab order.

Demo

Press TAB → Enter

Skip to main content.

Press TAB → TAB → TAB ..

To focus on first focusable links (Usually the links in navbar).

Previous

Select

Next

Summary list

On this page

Where to use?How it works?What if user continue to press TAB?DemoPress TAB → EnterPress TAB → TAB → TAB ..