A Deep Dive on Skipping to Content-CSS Tutorial-php.cn

A Deep Dive on Skipping to Content

Many computer users use their mouse to browse web pages, but many people rely on keyboard operations. In theory, using the keyboard to browse web pages is no problem - press the TAB key to move between the focused elements, and then press the ENTER key to activate it, it is simple and easy to do! However, many (if not most) sites have a link menu at the top, and sometimes multiple key presses are required to reach the target content. For example, one of Switzerland’s largest news sites, 20min’s homepage, may require nearly 40 key presses to read headlines – this is not the best user experience.

So, in order for keyboard users to really use your website instead of getting bored and leaving, you need to do some work behind the scenes to make it faster and easier to jump straight to the main content. You can find a variety of tricks that are scattered across the web (including in CSS-Tricks), but most ignore some tricks, and many recommend using outdated or deprecated code. So, in this article, I'll dive into skip content and cover everything in a 2021 friendly way.

Two types of keyboard users

Although people use various types of keyboards or equivalent switchgears for navigation, from a coding perspective, we only need to consider two sets of users:

Users who use a keyboard to read screen content in conjunction with a screen reader such as NVDA or JAWS on PC, or VoiceOver on Mac. These devices are usually used by people with severe visual impairment.
All other keyboard users.

Our skip content technology needs to meet the needs of both groups of users at the same time without hindering mouse users. We will use two complementary techniques to get the best results: landmarks and skip links .

Check out a basic example

I created a sample website called Style Magic to illustrate the technology we are going to cover. We will start with a good working condition for the mouse user, but it's a bit of a hassle for the user who uses the keyboard. You can find the basic websites on CodePen as well as versions of each technology, and since testing keyboard navigation on CodePen is a bit tricky, you can find the standalone version here as well.

Try navigating this example using the TAB key. (Easier on standalone pages; the TAB key moves between links, the SHIFT TAB key moves backwards.) You will find it's not bad, but it's just because there aren't many menu items.

If you have time and are using a Windows system, I also recommend you download a free copy of NVDA screen reader and try all the examples with it and refer to the overview of WebAIM for how to use it. Most Mac users already have access to VoiceOver screen reader, and WebAIM has a great introduction to how to use it.

Add a landmark

One thing screen reading software can do is display a list of landmarks they find on a web page. Landmarks represent important areas on the page, and users can call up the list and jump directly to one of the landmarks.

If you are using NVDA with a full keyboard, press INS F7 to bring up the "Element List" and press ALT d to display the landmark. (You can find a similar list on VoiceOver using the web project rotor.) However, if you do this on the sample site, you will only see a useless empty list.

Let's solve this problem first.

Adding landmarks is very easy , if you are using HTML5, you may have used them on your website without realizing that because they are directly linked to HTML5 semantic elements (<h1></h1> arrive<h6></h6> ,<main></main> ,etc).

The following is an example of the modification before and after HTML used to generate the site title section:

<div>
  <div>
    <div><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Style Magic</a></div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a>

      </div>
  </div>
</div>

Copy after login

Become

<header>
 <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Style Magic</a><nav aria-label="Main menu"> <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a>

    </nav></header>

Copy after login

The class used remains the same, so we don't need to make any changes to the CSS.

Here is a complete list of changes we need to make in the sample site:

The title is indicated at the top of the page<div> Now it's a<code><header></header> element.
Brand-inclusive<div> Now it's a<code><header></header> element.
Two menus<div> Has been<code><nav></nav> Element replacement.
Two new ones<nav></nav> Elements have obtained an aria-label attribute that describes them: the menu at the top of the page is "Main Menu" and the menu at the bottom of the page is "Utilities Menu".
Contains the main content of the page Now it's a<main></main> element.
Represents the footer at the bottom of the page<div> Now it's a<code><footer></footer> element. You can view the full updated HTML on CodePen. Let's try again the landmark list trick in NVDA ( INS F7 and then ALT d - this is a link to the standalone page that you can test yourself): marvelous! We now have the banner landmark (map to<header></header> Element), main menu; navigation (map to top<nav></nav> element and display our aria-label ), main content (map to<main></main> ) and content information (map to<footer></footer> ). In this dialog I can use the TAB key and the cursor key to select the main landmark and jump directly to the content of the page, or better yet, I can press D key while browsing the page to jump directly from one landmark character to the next. It is easier for users of JAWS screen readers - they simply press the Q key while browsing to jump directly to the main landmark. As an added benefit, using semantic elements can also help search engines better understand and index your content. This is a nice plus for making the website more accessible. Add a skip link I hope you are sitting there at this moment thinking “the work is done.” Well, I'm afraid there's always a "but" to consider. Back in 2011, Google conducted a study on searching on web pages using CTRL f and found that an astonishing 90% of people either didn’t know it existed or had never used it. When it comes to landmarks, users who use screen readers behave roughly the same—a large percentage of them don’t use this feature at all, even if it’s very useful. Therefore, we will add a skip link to our website to help both groups of users and all keyboard users who do not use screen readers. The basic requirements for a good link skip are: It should be visible to all keyboard users, including screen reader users, when needed. It should provide the keyboard user with enough information to explain its role. It should run on the widest possible current browser. It should not interfere with the browsing of the mouse user. Step 1: Improve the keyboard focus appearance First, we will improve the visibility of keyboard focus throughout the website. You can think of keyboard focus as an equivalent of the cursor position when editing text in a word processor. When you use the TAB key to navigate, the keyboard focus moves between links (or form controls). The latest web browsers do a pretty good job of showing where the keyboard focus is, but can still benefit from help. There are many creative ways to style the focus ring, although our goal is to make it stand out more than anything. We can use :focus pseudo-class for style setting (and it is better to apply the same style to :hover as well, which we have done on the sample site - CodePen, live site). This is what we can at least do, although it will usually go a step further and reverse the link color on :focus on the entire page. Here are some CSS for our :focus state (a copy of the code we have provided for :hover ): a:focus { /* General rules for the entire page*/ border-bottom-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; } .menu-right a:focus, .branding a:focus { /* Reverse the color of the link in the title and footer*/ background-color: white; color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; } Copy after login Step 2: Add HTML and CSS The final change is to add the skipped link itself to HTML and CSS. It consists of two parts: a trigger (link) and a target (landmark). This is the HTML I recommend for triggers, it's at the beginning of the page<header></header> Inside the element: <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target" class="text-assistive display-at-top-on-focus">Skip to main content.</a> Copy after login This is the HTML of the target, which is placed directly in<main></main> Before the beginning of the content: <a id="skip-link-target" class="text-assistive" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target">Start of main content.</a> <main></main> Copy after login Here is how HTML works: The skip link contactor uses a standard page fragment (href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target") to the skip link target, which references the target (<a></a> ) id attribute. Following the link will move the keyboard focus from the trigger to the target. We link to an anchor (<a></a> ) element, not directly to<main></main> There are two reasons why an element adds an id attribute. First, it avoids any problem that the keyboard focus cannot move correctly (which may be an issue in some browsers); second, it means we can provide clear feedback to the user to indicate that the link skipping has been successful. The text of the two links is descriptive in order to clearly explain what is happening to the user. We now have a functional skip link, but there is a problem: everyone can see it. We will use CSS to hide it by default, which can make it not hinder the mouse user and then it will only appear when it receives keyboard focus. There are many ways to do this, most of them do, but there are some wrong ways you should avoid: Should: use clip-path to make the link invisible, or use transform: translate or position: absolute to position it off-screen. Should not: Use display: none , visibility: hidden , hidden attributes, or set the width or height of the skipped link to zero. All of this will make your skip link unavailable to one or both types of keyboard users. Should not: use clip because it is deprecated. Here is the code I recommend to hide these two links. -webkit- version of using clip-path and its prefix can cover 96.84% of users at the time of writing, which (in my opinion) is OK for most websites and use cases. There are many other technologies available if your use case requires it, which are detailed on WebAIM. .text-assistive { -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0); clip-path: polygon(0 0, 0 0, 0 0, 0 0); box-sizing: border-box; position: absolute; margin: 0; padding: 0; } Copy after login To display links when they get focus, I recommend using the version, color and size of this CSS to match your brand: .text-assistive.display-at-top-on-focus { top: 0; left: 0; width: 100%; } .text-assistive.display-at-top-on-focus:focus { -webkit-clip-path: none; clip-path: none; z-index: 999; height: 80px; line-height: 80px; background: white; font-size: 1.2rem; text-decoration: none; color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b1295e6; text-align: center; } https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bskip-link-target:focus { background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b084367; color: white; } Copy after login This provides a very visible display of triggers and targets at the top of the page, where the user expects to see the keyboard focus directly after the page is loaded. When you follow the link, the color is also changed to provide clear feedback that something has happened. You can modify the code yourself on CodePen (as shown below) and test it with NVDA on standalone pages. Further improvements Skip links are not just for Christmas your main menu, they are useful whenever your page contains a long list of links. In fact, this CodePen demonstrates a good way to use skip links in page content (here is a standalone page), using transform: translateY() in CSS to hide and display triggers and targets. If you are in a "lucky" position that needs to support older browsers, here is a tip for this (independent page here). Let's check it out! Finally, here are some short video demonstrations of how skip links work for our two categories of keyboard users. Here is how skip links are done when using NVDA screen reader: (Videos should be embedded here) Here is what happens when you use the keyboard to browse again without the need for a screen reader: (Videos should be embedded here) We just looked at the modern approach I think to access the skip link in 2021. We borrowed some ideas from past examples while updating them to suit better CSS practices, improving the UI of keyboard users, and improving the experience of users using screen readers (thanks to the updated HTML approach).