Enable
>

Skip Links (That Work In Mobile Too!)

When keyboard users encounter components with a lot of interactive elements in them (e.g. a website's main navigation), they may want to tab (or on a mobile device, swipe) 100 times through those elements in order to get to the CTAs in the main content. Skip links fix this issue.

Traditionally, a skip link is a keyboard-only link that keyboard users can use to skip blocks of interactive elements. They are usually visible only when focused into and mouse users will never see them.

This page discusses two types of skip links: the traditional skip link that works for desktop computers, and one that also works for mobile devices (which will only be experienced by mobile screen-reader users).

Traditional Skip Link

Please review our mobile friendly solution before you decide to choose this one.

This is an variation of a traditional skip link seen on many websites today. They appear only when keyboard focus is applied to them. Note that while it works well on desktop, it fails on mobile, due to screen readers not passing focus events to the mobile browser. Screen reader users can focus into them, but partially sighted users may be initially confused when they cannot see what they are focusing into.

Unlike a lot of implementations, this example has, in my opinion, one really super helpful feature: we have two skip links pointing to each other. If a keyboard user triggers the skip link by accident, they can undo their mistakes by pressing they ENTER key again, which will return focus back to where they came from. This is useful for people who have hand tremors. This feature was thought up by my colleague Alison Hall during an accessibility hackathon.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Vivamus pretium eu metus ut dignissim. Maecenas venenatis id tortor id commodo. In consectetur tempor congue. Nam justo urna, rhoncus id turpis eu, rutrum consequat nunc. Sed iaculis, ante ac auctor auctor, risus nisi convallis ligula, vel venenatis est sem eget lorem. Sed consectetur ullamcorper mattis. Maecenas eget hendrerit enim. Fusce sit amet mauris dapibus, mollis nisl imperdiet, placerat urna. Nam eu blandit orci. Morbi mollis quam quis augue molestie, et porttitor nisi blandit. Pellentesque maximus ac lectus eget tempor. Donec aliquam magna id purus congue pharetra. Vivamus rutrum est mauris, et tempor lorem faucibus ac.

Integer urna turpis, imperdiet non pellentesque in, facilisis id ex. Duis at pellentesque augue. Suspendisse eleifend erat ac feugiat congue. Pellentesque bibendum odio mi, quis ullamcorper turpis pulvinar non. Proin in lacus odio. Sed iaculis mi nec fermentum elementum. Sed eget facilisis neque. Suspendisse vitae porttitor neque. Integer mattis est neque, a porttitor tortor imperdiet sed. Proin pulvinar efficitur sem, sit amet aliquam neque sollicitudin sed. Donec sagittis sapien lectus, ac tempor risus rhoncus vel.

Suspendisse nibh nisi, tincidunt eget sem non, consequat placerat lacus. Nam odio massa, lobortis eu purus non, ultricies convallis elit. Cras ex lacus, commodo eu mi rhoncus, lobortis consequat magna. Donec nec vehicula lacus, in consectetur nunc. Mauris mollis magna augue, imperdiet scelerisque lacus tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus ac diam fermentum, consectetur consectetur enim facilisis. Mauris auctor condimentum ante, quis luctus sapien pulvinar vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec libero in enim convallis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Vivamus pretium eu metus ut dignissim. Maecenas venenatis id tortor id commodo. In consectetur tempor congue. Nam justo urna, rhoncus id turpis eu, rutrum consequat nunc. Sed iaculis, ante ac auctor auctor, risus nisi convallis ligula, vel venenatis est sem eget lorem. Sed consectetur ullamcorper mattis. Maecenas eget hendrerit enim. Fusce sit amet mauris dapibus, mollis nisl imperdiet, placerat urna. Nam eu blandit orci. Morbi mollis quam quis augue molestie, et porttitor nisi blandit. Pellentesque maximus ac lectus eget tempor. Donec aliquam magna id purus congue pharetra. Vivamus rutrum est mauris, et tempor lorem faucibus ac.

Integer urna turpis, imperdiet non pellentesque in, facilisis id ex. Duis at pellentesque augue. Suspendisse eleifend erat ac feugiat congue. Pellentesque bibendum odio mi, quis ullamcorper turpis pulvinar non. Proin in lacus odio. Sed iaculis mi nec fermentum elementum. Sed eget facilisis neque. Suspendisse vitae porttitor neque. Integer mattis est neque, a porttitor tortor imperdiet sed. Proin pulvinar efficitur sem, sit amet aliquam neque sollicitudin sed. Donec sagittis sapien lectus, ac tempor risus rhoncus vel.

Suspendisse nibh nisi, tincidunt eget sem non, consequat placerat lacus. Nam odio massa, lobortis eu purus non, ultricies convallis elit. Cras ex lacus, commodo eu mi rhoncus, lobortis consequat magna. Donec nec vehicula lacus, in consectetur nunc. Mauris mollis magna augue, imperdiet scelerisque lacus tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus ac diam fermentum, consectetur consectetur enim facilisis. Mauris auctor condimentum ante, quis luctus sapien pulvinar vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec libero in enim convallis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Vivamus pretium eu metus ut dignissim. Maecenas venenatis id tortor id commodo. In consectetur tempor congue. Nam justo urna, rhoncus id turpis eu, rutrum consequat nunc. Sed iaculis, ante ac auctor auctor, risus nisi convallis ligula, vel venenatis est sem eget lorem. Sed consectetur ullamcorper mattis. Maecenas eget hendrerit enim. Fusce sit amet mauris dapibus, mollis nisl imperdiet, placerat urna. Nam eu blandit orci. Morbi mollis quam quis augue molestie, et porttitor nisi blandit. Pellentesque maximus ac lectus eget tempor. Donec aliquam magna id purus congue pharetra. Vivamus rutrum est mauris, et tempor lorem faucibus ac.

Integer urna turpis, imperdiet non pellentesque in, facilisis id ex. Duis at pellentesque augue. Suspendisse eleifend erat ac feugiat congue. Pellentesque bibendum odio mi, quis ullamcorper turpis pulvinar non. Proin in lacus odio. Sed iaculis mi nec fermentum elementum. Sed eget facilisis neque. Suspendisse vitae porttitor neque. Integer mattis est neque, a porttitor tortor imperdiet sed. Proin pulvinar efficitur sem, sit amet aliquam neque sollicitudin sed. Donec sagittis sapien lectus, ac tempor risus rhoncus vel.

Suspendisse nibh nisi, tincidunt eget sem non, consequat placerat lacus. Nam odio massa, lobortis eu purus non, ultricies convallis elit. Cras ex lacus, commodo eu mi rhoncus, lobortis consequat magna. Donec nec vehicula lacus, in consectetur nunc. Mauris mollis magna augue, imperdiet scelerisque lacus tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus ac diam fermentum, consectetur consectetur enim facilisis. Mauris auctor condimentum ante, quis luctus sapien pulvinar vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec libero in enim convallis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Vivamus pretium eu metus ut dignissim. Maecenas venenatis id tortor id commodo. In consectetur tempor congue. Nam justo urna, rhoncus id turpis eu, rutrum consequat nunc. Sed iaculis, ante ac auctor auctor, risus nisi convallis ligula, vel venenatis est sem eget lorem. Sed consectetur ullamcorper mattis. Maecenas eget hendrerit enim. Fusce sit amet mauris dapibus, mollis nisl imperdiet, placerat urna. Nam eu blandit orci. Morbi mollis quam quis augue molestie, et porttitor nisi blandit. Pellentesque maximus ac lectus eget tempor. Donec aliquam magna id purus congue pharetra. Vivamus rutrum est mauris, et tempor lorem faucibus ac.

Integer urna turpis, imperdiet non pellentesque in, facilisis id ex. Duis at pellentesque augue. Suspendisse eleifend erat ac feugiat congue. Pellentesque bibendum odio mi, quis ullamcorper turpis pulvinar non. Proin in lacus odio. Sed iaculis mi nec fermentum elementum. Sed eget facilisis neque. Suspendisse vitae porttitor neque. Integer mattis est neque, a porttitor tortor imperdiet sed. Proin pulvinar efficitur sem, sit amet aliquam neque sollicitudin sed. Donec sagittis sapien lectus, ac tempor risus rhoncus vel.

Suspendisse nibh nisi, tincidunt eget sem non, consequat placerat lacus. Nam odio massa, lobortis eu purus non, ultricies convallis elit. Cras ex lacus, commodo eu mi rhoncus, lobortis consequat magna. Donec nec vehicula lacus, in consectetur nunc. Mauris mollis magna augue, imperdiet scelerisque lacus tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus ac diam fermentum, consectetur consectetur enim facilisis. Mauris auctor condimentum ante, quis luctus sapien pulvinar vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec libero in enim convallis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Mobile Friendly Skip Links

This solution is suggested for both new and existing websites.
If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.
This solution described below is available as an NPM module. (Module installation instructions)

These skip links work on a different principle than the ones above. They use a little bit of JavaScript to work, and work really well for mobile screen reader users. Due to technical limitations, once focused on, the skip links will remain visible unless they are clicked. This seems like a reasonable tradeoff (and can arguably be better for accessibility).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Vivamus pretium eu metus ut dignissim. Maecenas venenatis id tortor id commodo. In consectetur tempor congue. Nam justo urna, rhoncus id turpis eu, rutrum consequat nunc. Sed iaculis, ante ac auctor auctor, risus nisi convallis ligula, vel venenatis est sem eget lorem. Sed consectetur ullamcorper mattis. Maecenas eget hendrerit enim. Fusce sit amet mauris dapibus, mollis nisl imperdiet, placerat urna. Nam eu blandit orci. Morbi mollis quam quis augue molestie, et porttitor nisi blandit. Pellentesque maximus ac lectus eget tempor. Donec aliquam magna id purus congue pharetra. Vivamus rutrum est mauris, et tempor lorem faucibus ac.

Integer urna turpis, imperdiet non pellentesque in, facilisis id ex. Duis at pellentesque augue. Suspendisse eleifend erat ac feugiat congue. Pellentesque bibendum odio mi, quis ullamcorper turpis pulvinar non. Proin in lacus odio. Sed iaculis mi nec fermentum elementum. Sed eget facilisis neque. Suspendisse vitae porttitor neque. Integer mattis est neque, a porttitor tortor imperdiet sed. Proin pulvinar efficitur sem, sit amet aliquam neque sollicitudin sed. Donec sagittis sapien lectus, ac tempor risus rhoncus vel.

Suspendisse nibh nisi, tincidunt eget sem non, consequat placerat lacus. Nam odio massa, lobortis eu purus non, ultricies convallis elit. Cras ex lacus, commodo eu mi rhoncus, lobortis consequat magna. Donec nec vehicula lacus, in consectetur nunc. Mauris mollis magna augue, imperdiet scelerisque lacus tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus ac diam fermentum, consectetur consectetur enim facilisis. Mauris auctor condimentum ante, quis luctus sapien pulvinar vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec libero in enim convallis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Vivamus pretium eu metus ut dignissim. Maecenas venenatis id tortor id commodo. In consectetur tempor congue. Nam justo urna, rhoncus id turpis eu, rutrum consequat nunc. Sed iaculis, ante ac auctor auctor, risus nisi convallis ligula, vel venenatis est sem eget lorem. Sed consectetur ullamcorper mattis. Maecenas eget hendrerit enim. Fusce sit amet mauris dapibus, mollis nisl imperdiet, placerat urna. Nam eu blandit orci. Morbi mollis quam quis augue molestie, et porttitor nisi blandit. Pellentesque maximus ac lectus eget tempor. Donec aliquam magna id purus congue pharetra. Vivamus rutrum est mauris, et tempor lorem faucibus ac.

Integer urna turpis, imperdiet non pellentesque in, facilisis id ex. Duis at pellentesque augue. Suspendisse eleifend erat ac feugiat congue. Pellentesque bibendum odio mi, quis ullamcorper turpis pulvinar non. Proin in lacus odio. Sed iaculis mi nec fermentum elementum. Sed eget facilisis neque. Suspendisse vitae porttitor neque. Integer mattis est neque, a porttitor tortor imperdiet sed. Proin pulvinar efficitur sem, sit amet aliquam neque sollicitudin sed. Donec sagittis sapien lectus, ac tempor risus rhoncus vel.

Suspendisse nibh nisi, tincidunt eget sem non, consequat placerat lacus. Nam odio massa, lobortis eu purus non, ultricies convallis elit. Cras ex lacus, commodo eu mi rhoncus, lobortis consequat magna. Donec nec vehicula lacus, in consectetur nunc. Mauris mollis magna augue, imperdiet scelerisque lacus tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus ac diam fermentum, consectetur consectetur enim facilisis. Mauris auctor condimentum ante, quis luctus sapien pulvinar vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec libero in enim convallis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Vivamus pretium eu metus ut dignissim. Maecenas venenatis id tortor id commodo. In consectetur tempor congue. Nam justo urna, rhoncus id turpis eu, rutrum consequat nunc. Sed iaculis, ante ac auctor auctor, risus nisi convallis ligula, vel venenatis est sem eget lorem. Sed consectetur ullamcorper mattis. Maecenas eget hendrerit enim. Fusce sit amet mauris dapibus, mollis nisl imperdiet, placerat urna. Nam eu blandit orci. Morbi mollis quam quis augue molestie, et porttitor nisi blandit. Pellentesque maximus ac lectus eget tempor. Donec aliquam magna id purus congue pharetra. Vivamus rutrum est mauris, et tempor lorem faucibus ac.

Integer urna turpis, imperdiet non pellentesque in, facilisis id ex. Duis at pellentesque augue. Suspendisse eleifend erat ac feugiat congue. Pellentesque bibendum odio mi, quis ullamcorper turpis pulvinar non. Proin in lacus odio. Sed iaculis mi nec fermentum elementum. Sed eget facilisis neque. Suspendisse vitae porttitor neque. Integer mattis est neque, a porttitor tortor imperdiet sed. Proin pulvinar efficitur sem, sit amet aliquam neque sollicitudin sed. Donec sagittis sapien lectus, ac tempor risus rhoncus vel.

Suspendisse nibh nisi, tincidunt eget sem non, consequat placerat lacus. Nam odio massa, lobortis eu purus non, ultricies convallis elit. Cras ex lacus, commodo eu mi rhoncus, lobortis consequat magna. Donec nec vehicula lacus, in consectetur nunc. Mauris mollis magna augue, imperdiet scelerisque lacus tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus ac diam fermentum, consectetur consectetur enim facilisis. Mauris auctor condimentum ante, quis luctus sapien pulvinar vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec libero in enim convallis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Vivamus pretium eu metus ut dignissim. Maecenas venenatis id tortor id commodo. In consectetur tempor congue. Nam justo urna, rhoncus id turpis eu, rutrum consequat nunc. Sed iaculis, ante ac auctor auctor, risus nisi convallis ligula, vel venenatis est sem eget lorem. Sed consectetur ullamcorper mattis. Maecenas eget hendrerit enim. Fusce sit amet mauris dapibus, mollis nisl imperdiet, placerat urna. Nam eu blandit orci. Morbi mollis quam quis augue molestie, et porttitor nisi blandit. Pellentesque maximus ac lectus eget tempor. Donec aliquam magna id purus congue pharetra. Vivamus rutrum est mauris, et tempor lorem faucibus ac.

Integer urna turpis, imperdiet non pellentesque in, facilisis id ex. Duis at pellentesque augue. Suspendisse eleifend erat ac feugiat congue. Pellentesque bibendum odio mi, quis ullamcorper turpis pulvinar non. Proin in lacus odio. Sed iaculis mi nec fermentum elementum. Sed eget facilisis neque. Suspendisse vitae porttitor neque. Integer mattis est neque, a porttitor tortor imperdiet sed. Proin pulvinar efficitur sem, sit amet aliquam neque sollicitudin sed. Donec sagittis sapien lectus, ac tempor risus rhoncus vel.

Suspendisse nibh nisi, tincidunt eget sem non, consequat placerat lacus. Nam odio massa, lobortis eu purus non, ultricies convallis elit. Cras ex lacus, commodo eu mi rhoncus, lobortis consequat magna. Donec nec vehicula lacus, in consectetur nunc. Mauris mollis magna augue, imperdiet scelerisque lacus tempor id. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi semper tellus ac diam fermentum, consectetur consectetur enim facilisis. Mauris auctor condimentum ante, quis luctus sapien pulvinar vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam nec libero in enim convallis ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat neque sed urna vestibulum, ac bibendum elit rutrum. Pellentesque mollis nulla enim, euismod dignissim tortor porttitor sed. Donec malesuada feugiat pulvinar. Aliquam molestie viverra elit, ac consectetur velit maximus ut. Aenean quis justo feugiat, lobortis mi et, tincidunt lacus. Maecenas in urna ac felis molestie consequat. Curabitur dapibus lorem quis elit finibus elementum.

Curabitur tincidunt pellentesque orci id condimentum. Maecenas vitae egestas metus, eu suscipit ante. Mauris aliquam orci nec mi ullamcorper, vitae pellentesque purus semper. Donec vitae facilisis nisl. Quisque vulputate imperdiet sem, a porta nunc iaculis in. Cras elit lacus, dapibus nec iaculis eu, porttitor dapibus eros. Ut a interdum augue, sed pretium tellus. Sed vel mi leo. Ut lacus diam, luctus sed turpis id, porttitor molestie ante. Morbi ornare, nulla sit amet venenatis consectetur, lorem neque lobortis ante, ut laoreet lectus ante nec tortor. Morbi viverra ac urna in commodo. Donec eu neque vel risus laoreet condimentum. Aliquam accumsan odio diam, ut porttitor justo mattis in.

Code Walkthrough of the Above Example

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

Installation Instructions

You can load this JavaScript library into your application in serveral ways:

If you haven't done so already, choosing which you should use is obviously a major architectural decision. Here are a few articles that will help you decide:

Important Note On The CSS Classes Used In This Module:

This module requires specific CSS class names to be used in order it to work correctly. These CSS classes begin with enable-mobile-visible-on-focus__. Please see the documentation above to see where these CSS classes are inserted.

Using NPM/Webpack to load ES6 Modules:

  1. Install the enable-a11y NPM project.
  2. Edit your webpack.config.json file to resolve the ~ modifier by adding the following:
    ☜ Scroll to read full source ☞
    module.exports = { ... resolve: { extensions: ['.js', '.jsx', '.scss', '.css', '*.html'], modules: [ path.resolve('./src/js'), path.resolve('./node_modules') ], alias: { '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y') }, ... }, ... }
  3. You can use the module like this:
    ☜ Scroll to read full source ☞
    // import the JS module import enableVisibleOnFocus from '~enable-a11y/js/modules/enable-visible-on-focus'; // import the CSS for the module import '~enable-a11y/css/enable-visible-on-focus'; // How to initialize the enableVisibleOnFocus library enableVisibleOnFocus.init();
  4. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
    ☜ Scroll to read full source ☞
    @import '~enable-a11y/css/enable-visible-on-focus';
    (If you are using it in your CSS, you will have to add the .css suffix)

Using NPM/Webpack to Load Modules Using CommonJS Syntax

  1. Install the enable-a11y NPM project.
  2. You can import the module using require like this:
    ☜ Scroll to read full source ☞
    var enableVisibleOnFocus = require('enable-a11y/enable-visible-on-focus').default; ... enableVisibleOnFocus.init();
  3. You will have to include the CSS as well in your project's CSS using:
    ☜ Scroll to read full source ☞
    @import '~enable-a11y/css/enable-visible-on-focus';

Using ES6 modules natively.

This is the method that this page you are reading now loads the scripts.

  1. Grab the source by either using NPM, grabbing a ZIP file or cloning the enable source code from github.
  2. If you want to load the module as a native ES6 module, copy js/modules/enable-visible-on-focus.js , and css/enable-visible-on-focus.css from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory).
  3. Load the CSS in the head of you document:
    ☜ Scroll to read full source ☞
    <html> <head> ... <link rel="stylesheet" href="path-to/css/enable-visible-on-focus.css" > ... </head> <body> ... </body> </html>
  4. Load your scripts using the follwing code (NOTE: you must use <script type="module">):
    ☜ Scroll to read full source ☞
    <script type="module"> import enableVisibleOnFocus from "path-to/enable-visible-on-focus.js" enableVisibleOnFocus.init(); </script>

Using ES4

Just do the same as the ES6 method, except you should get the JavaScript files from the js/modules/es4 directory instead of the js/modules/:
☜ Scroll to read full source ☞
<script src="path-to/es4/enable-visible-on-focus.js"></script>