Skip Links

Position this component as far up in the body as possible. It has to be the first focusable element on the page.

There are 2 default links, but the sdx-header uses some more useful links.


                                                        
                                                        
                                                            <sdx-skip-links></sdx-skip-links>
                                                        
                                                            

 

Attribute / property (attributes are used in HTML, properties in JavaScript)

 

links = [ { target: "/", label: translate("Homepage", this.el.lang) }, { target: "#main", label: translate("Main content", this.el.lang) }, ]

{ target: string | HTMLElement; label: string; }[]

 

An array of link objects used for the links.

  • target: The target element to focus on when the link is activated.
    • string: URL or anchor link (e.g. "https://www.swisscom.ch" or "#main")
    • HTMLElement: element object; because focus() is called on it, the element must be focusable
  • label: The text label for the link, which will be displayed to the user.