Shulou(Shulou.com)06/03 Report--

The content of this article mainly explains "what are the code optimization skills for webmasters to improve the ease of use of the site?" interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the code optimization skills for webmasters to improve the ease of use of the site?"

1. Add alternate text to logo

This has two advantages: screen readers can recognize the meaning represented by logo images, and when the images are not loaded, they can also tell non-visually impaired users that your logo is there.

Several methods:

The code is as follows:

Or, if you use the background image to implement logo, you can also add the title attribute to implement:

The code is as follows:

Of course, the link + background map is the best way, but it's best to add the title attribute as well:

The code is as follows:

Front end boundary

two。 Add basic Landmarks

ARIA Landmark is a set of website usability rules defined by W3C. Adding descriptive Landmark-- or directly called role to different modules of the website will help screen-reading software to better understand your web page, thus making visually impaired users better use your website.

The code is as follows:

Wait, wait.

3. Enhanced focus definition

In fact, many websites will do everything possible to get rid of browsers: focus style, especially for IE browsers, in fact, browsers default with: focus style is reasonable, it can indicate where the user's current mouse focus is. This is especially important for keyboard streams.

So please don't remove the focus style, and even if you think the default style is unattractive or inconsistent (IE is a dotted frame, Webkit is a highlighted solid frame, and Safari is blue, Chrome is orange), you can define a highlight color yourself:

The code is as follows:

A:focus {

Outline:1px solid red

Background:yellow

}

If your product manager or visual designer insists on removing the focus status, take the TA mouse away for a day and tell TA that you can only use Tab to switch links.

4. Define required form items

Use the aria-required attribute to define the required items in the form-well, mainly to tell the screen reader software:

The code is as follows:

5. Add an H2 to the page

The reason is simple: it is not only good for SEO, but also helpful for the usability and readability of the site as a whole. Besides, don't you have a code cleanliness fetish?

6. Define the header of the table

Usually many people are accustomed to using td tags in all forms. In fact, forms have not only hd tags, but also th, col, scope and so on.

So to put it simply, replace the header with the th tag:

The code is as follows:

Date

7. Define a table description

Don't simply add a p to the front / back of the form, the form has a dedicated caption tag available, just like an image.

The code is as follows:

Class Schedule

……

8. Avoid "Click here"

Although such a link description does not matter to ordinary people, it is quite bad for screen reading software, and it is actually a kind of interference to visually impaired users.

So use the link directly in the right place.

9. Get rid of tabindex

Once upon a time, many people used tabindex to "enhance" the user experience, but this attribute disrupts the normal reading order of the page, which is disastrous for visually impaired users and may not be friendly to ordinary users.

So never abuse the tabindex attribute.

At this point, I believe that everyone on the "webmaster to improve the ease of use of the site code optimization skills have a deeper understanding, might as well come to the actual operation of it!" Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.