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

This article introduces you what are the indicators of excellent web front-end design, the content is very detailed, interested friends can refer to, hope to be helpful to you.

It seems that the accessibility of web pages can only be valued and realized by the front end. It's sad that accessibility, as part of usability, can only be controlled by technicians, which I don't want to see. But this, in turn, adds a new responsibility to front-end developers and an indicator of how to distinguish between good front ends. The reason for the matter is that two weeks ago, I played a "flying" to play in Beijing and met a friend who was at the front end of Baidu. For the past year, this guy has been encouraging me to go to their evil company. Of course, after the meeting, we can no longer call people evil companies to their faces, so I found a reason to say that your "Baidu Blind Road" is too rubbish. Of course, he humbly asked me why. So I can only fool a few words with guilt and tell him in detail when I go back to Shanghai.

The reason for the matter is that two weeks ago, I played a "flying" to play in Beijing and met a friend who was at the front end of Baidu. For the past year, this guy has been encouraging me to go to their evil company. Of course, after the meeting, we can no longer call people evil companies to their faces, so I found a reason to say that your "Baidu Blind Road" is too rubbish. Of course, he humbly asked me why. So I can only fool a few words with guilt and tell him in detail when I go back to Shanghai.

After coming back, I immediately turned up an old e-book, "Dive Into Accessibility", and read it seriously.

Then I was surprised to find:

1. Although I have not read this book, I abide by most of what is said in it. Sure enough, adhering to good habits is commendable.

two。 It seems that the accessibility of web pages can only be valued and realized by the front end. It's sad that accessibility, as part of usability, can only be controlled by technicians, which I don't want to see. But in turn, this adds a new responsibility to front-end development engineers and an indicator of how to distinguish between good front ends.

All right, let me make a summary of the contents of this Dive Into Accessibility to see what you should pay attention to when it comes to accessibility:

1. Markup language (Identifying your language)

This one means to add the lang attribute, such as. If one of the paragraphs is in another language, add the lang attribute to the tag of that paragraph. I'm not good at this one. I'll remember it later.

two。 Build a meaningful page title (Constructing meaningful page titles)

There are several points worth mentioning:

A) when making a page, don't forget to write title. I have seen many pages whose title is "Untitled Document" or "new page". It's humiliating.

B) should title be preceded by "subheadings" or "headlines"? Now the usual practice seems to be "subtitle" in front, such as "audio-visual entertainment home page _ Sina". But I do have a personal view, maybe the headline is better in front. In this way, when I put "Sina net _ Audio Entertainment Home" and "Sina Network _ News Center Home" into my favorites, they will stay together because of their phonetic order instead of scattered everywhere. Of course, this is not necessarily, just for reference.

C) for English titles, be careful not to put The in front of title, or your page will be listed at the beginning of T in your favorites.

3. Provide additional navigation assistance (Providing additional navigation aids)

This one means to add this. Actually, I know that. But it seems a bit difficult to add rel and rev attributes to so many links on the page.

4. Present the main content first (Presenting your main content first)

Well, this is a typical accessibility principle of "expect good CSS". Putting it in front of it is actually quite a test of CSS technology. A famous topic is: how to make the sidebar fixed width, the width of the main column adaptive, and the HTML of the main column in front of the sidebar. I'd like to put it in my interview question, but I don't think it's too difficult. But, in any case, this topic is very important!

5. Link to skip the navigation bar (Skipping over navigation links)

It's important! This is mentioned in the urn-level web standards tutorial website refactoring. It's just that I doubt that if you set skip link to display:none, aren't you afraid of being ignored by the reader?

6. Safe use of colors (Using color safely)

This one actually talks about several main points:

A) Color contrast should be enough, otherwise people with bad eyes will look difficult.

B) the color of the link, preferably blue (like I prefer to use # 09c)

C) links are preferably underlined

7. Use "true link" (Using real links)

Even if the link is used to trigger Ajax, put the URL of the Ajax snippet in the href so that search engines, readers, and so on can climb to it. For this article, please refer to the "digging potatoes" section on the home page of Tudou.

8. Add a "title" attribute (Adding titles to links) to the link

Needless to say, there are two key points of usability: a's title and img's alt.

Whoo-hoo. Let's finish the first round. If you are interested in usability, you can read this Dive Into Accessibility in detail, especially in the first five verses. Then you can take a look at that abominable "Baidu Blind Road". Next, I will use a special article to curse this unscrupulous and unscrupulous product that deceives people with disabilities.

It seems that the accessibility of web pages can only be valued and realized by the front end. It's sad that accessibility, as part of usability, can only be controlled by technicians, which I don't want to see. But this, in turn, adds a new responsibility to front-end developers and an indicator of how to distinguish between good front ends.

9. Define keyboard shortcuts (Defining keyboard shortcuts)

It means to define the accesskey attribute. That's easy to say. The key is how to use it in the browser. IE is "alt+", and just shift the focus to the past, to click, you need to press enter;Firefox is "shift+alt+", and then directly trigger the click event. Opera and Chrome and Safari, I did not try out, if you have any information, please let me know.

Thank you aoao for providing: Safari 4/mac control+alt+key | / win alt+key

Opera Shift+Esc chooses key

Chrome 3 alt+key

Besides accesskey, there is actually one more important thing: tabindex. Sometimes you need to change the default tabindex order to get a more convenient experience. For example, a landing box in the following format:

User name

Remember me

Password

Forget the password.

In the default order, press the tab key, and the focus will pass through "user name", "remember me", and "password" in turn. But it seems more convenient to put "remember me" after "password". After all, not all people need to use the "remember me" button, especially those who use this landing box many times, who obviously don't like "remember me". So you should specify the following order with tabindex: "user name", "password", "remember me".

10. Do not open a new window (Not opening new windows)

What this means is that this will destroy the browser's "history" record, thus invalidating the browser's "back key". Finally know why foreign websites rarely have new windows, and finally know why the XHTML standard cancels the target attribute of the a tag. But this doesn't seem to be in line with the habits of Chinese users, and it's worth discussing. However, there are some workarounds to consider:

A) give a check box on the page, and then automatically remove the target attribute from the a tag so that all links are opened on this page.

B) the new window does not go to "_ blank", but to a window with a specified name, such as "new". In this way, all new pages will be opened in the same window, at least in this window, you can still use the browser's "back button". (to mention, Tudou videos are all like this, open to the same new window).

11. Define an acronym (Defining acronyms)

Just to be clear, the author has an incorrect understanding of the word acronym here. Acronym means that the initials of a word are combined to form a new readable word. The word may not be capitalized, such as Nato. So HTML or CSS is not acronym, and

DOS and BASIC are the ones that count. Things like HTML or CSS should be called abbreviation, and the corresponding tag is the tag, but unfortunately, this tag IE6 is not valid.

twelve。 Giving your calendar a real caption your calendar

13. Use a real header (Using real table headers)

14. Provide a summary for the form (Providing a summary for tables)

To put these three together is to use the form correctly. In fact, the use of forms is far more than these three, it is recommended that you carefully read the authoritative guide to HTML.

It seems that the accessibility of web pages can only be valued and realized by the front end. It's sad that accessibility, as part of usability, can only be controlled by technicians, which I don't want to see. But this, in turn, adds a new responsibility to front-end developers and an indicator of how to distinguish between good front ends.

15. Ignore blank pictures (Ignoring spacer images)

Be sure to add the alt attribute to the picture, even if it is empty. The reason is that if you don't write alt, some readers will read its file name or URL directly.

This reminds me of reading when I was a child, saying that before the number 0 was invented, people were represented by empty spaces. This is very inconvenient. So alt= "" is the equivalent of the great invention of the number 0.

16. Use real lists (or camouflage them correctly)

This one actually says that if you want to use a picture as the icon in front of the list, you'd better use CSS. But there is no mention of why. In fact, this is what I have been struggling with: at present, it seems that there is no better reason to use or, except for the fundamentalist belief of "label semantics". I hope those who know will let me know.

17. Provide alternate text for the picture (Providing text equivalents for images)

18. Provide alternate text (Providing text equivalents for image maps) for picture mapping

These two articles are the same as 15.

Here I just want to say two digressions:

A) in this day and age, are labels still useful? It also reminds me of the label.

B) in addition to alt, there are two properties: lowsrc and longdesc. I will come to see how current browsers support these two properties sometime.

19. Use a real horizontal split line (Using real horizontal rules)

It says that it is better to use it than to use a decorative picture. (P.S. It turns out that hr is the abbreviation of horizontal rule, hoho), but it doesn't seem to be better.

20. Use relative font size (Using relative font sizes)

I really want to follow this rule, but the abominable Microsoft made Song style in addition to 12px, the smaller font size can not be read. But now that all browsers have zoom, the relative font size may not be as urgent as it used to be. Anyway, it's IE's fault!

21. Use real headings (Using real headers)

In addition to SEO, it is mentioned that there are browsers that can specifically extract the title of the text to provide convenient intra-text navigation. This function is similar to the method of automatically generating directories in word.

However, it is worth noting that the use of tags. It actually refers to the text that best summarizes the content of the page, not the text that appears to be in the title (such as the LOGO at the top of the site). I have been making a mistake before, which is to use the LOGO of the website as H1. In fact, for example, the search results page, it is obvious that "search XXX, a total of XXX results" should be used as H2 headings.

twenty-two。 Add label tags (labeling form elements) to form elements

There is only one thing I want to discuss with you: do you use id and for to connect, or do you just use label tags to frame form elements and text? What are your habits?

23. Make all content searchable (Making everything searchable)

This is a relatively broad issue at the product level, so I won't discuss it here.

24. Establish an accessibility declaration (Creating an accessibility statement)

On the excellent web front-end design indicators shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.