Home > Article > Web Front-end > HTML Tutorial: Creating a Super Connection

HTML Tutorial: Creating a Super Connection

黄舟Original: 2016-12-26 15:22:331519browse

tabbing browsing

Users who do not or cannot use pointing devices can use the shortcut tab key to open the connection, and they must also have a logical tab order. Although HTML is linear, the tabindex attribute allows you to define the order of its shortcut keys, and these logical tabs should automatically fall into their positions.

Shortcut keys

Shortcut keys allow for easier navigation via specific keys on the keyboard (to gain focus when holding down the Alt key or Ctrl key). For those who don't have a pointing device, it's faster and more convenient than using the tab key to connect.

It is not necessary to set shortcut keys for every connection, but it is a good idea to set them for the main navigation connections.

Some page

Note

The trouble with shortcut keys is that users often have no way of knowing where they are and what exactly are the keys (unless looking at the source code). Although JAWS, a screen reader that can read shortcuts aloud, to get the most out of it, you still have to make the shortcuts more straightforward.
You can use linking techniques like "skip navigation" (detailed below), or choose a separate page to illustrate these usability-related features of your site, including shortcut keys. An increasingly popular method is to underline a letter that corresponds to the shortcut key, similar to the method in Windows program menus.

Title of the link

It is a good idea to add the title attribute to the link. This will give the user a description of the link to which they are pointing, so it can improve navigation.

If this connection is executing Javascript, it is also helpful to explain to users who do not use Javascript functionality what will (or will not) happen.

Pop-ups

Speaking of Javascript pop-ups, if you want to insist on using them, or if many people (your users) tell you to use them, you can use onkeypress and onclick to make the page easier to use. Moreover, a pop-up window that returns false is functionally defined, including a link with an href attribute pointing to a normal page. For a user who does not use the Javascript function, this page can be loaded in a normal way.

For example:

...
Monster

Adjacent connections

Links should be separated by at least one space to make them legible to screen readers.
This can also be done with characters, either between connections (e.g. vertical bar |── connection | connection), or surrounding connections (e.g. brackets []── [connection] [connection]). It's also a good idea to put connections inside lists. The display can then be styled with CSS, even in parallel lists (using display: in-line).

Skip navigation

You should give users using screen readers an opportunity to skip navigation and go directly to the content. This is because, assuming your connection is fixed (as it should be), users don't have to go through the same information on every page, especially if there's a lot of it. You can set up a link that skips navigation and jumps directly to the content.

Looks like this:

The Heading

Skip navigation

Obviously, you don’t have to show it in the visual browser, so you can hide it using CSS.

Note

Although this is just a small CSS trick, it is a special medicine for "skipping navigation". This involves methods of hiding connections.
The most common approach is probably to use display: none, but some browsers see but don't understand this link, and the "skip navigation" link must be displayed.
However, there is no need to display it - there is no reason to display it to prominent users. So instead of sticking to styles that include display: none, you might as well set the element width and height to zero (width: 0; height: 0; overflow: hidden;), which has the same visual effect but is easier for screen readers to understand.

The above is the HTML tutorial: establishing a super connection. For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML Basics: Learn to master HTML standard attributesNext article：HTML Basics: Learn to master HTML standard attributes

See more

HTML Tutorial: Creating a Super Connection

Related articles