Some indicators of excellent web front-end design

The accessibility of web pages seems to be something that can only be valued and implemented by the front end. It's quite sad that accessibility, as a part of usability, can only be controlled by technical personnel. This is what I don't want to see. But on the other hand, this adds a new responsibility to front-end development engineers, and at the same time adds an indicator for how to distinguish excellent front-end engineers. The reason for this is that I took a flight to Beijing two weeks ago and met a friend who works as a front-end developer at Baidu. For the past year, this guy has been trying to get me to join his evil company. Of course, after meeting them I couldn’t call them an evil company to their face, so I found an excuse and said that your “Baidu Blind Road” was rubbish. Of course he humbly asked me why. So I could only lie with a guilty conscience and said I would tell him the details after returning to Shanghai.
The reason for this was that I took a flight to Beijing two weeks ago and met a friend who works as a front-end developer at Baidu. For the past year, this guy has been trying to get me to join his evil company. Of course, after meeting them I couldn’t call them an evil company to their face, so I found an excuse and said that your “Baidu Blind Road” was rubbish. Of course he humbly asked me why. So I could only lie with a guilty conscience and said I would tell him the details after returning to Shanghai.
After I came back, I humbly took out an old e-book - "Dive Into Accessibility" and read it carefully.
Then I was surprised to find that:
1. Although I have not read this book, I follow most of the things it says in my daily life. Sure enough, sticking to good habits is worthy of praise.
2. The accessibility of web pages seems to be something that can only be valued and implemented by the front end. It's quite sad that accessibility, as a part of usability, can only be controlled by technical personnel. This is what I don't want to see. But on the other hand, this adds a new responsibility to front-end development engineers and adds an indicator for how to distinguish excellent front-ends.
Well, let me summarize the contents of Dive Into Accessibility and see what issues should be paid attention to for accessibility:
1. Identifying your language
This means adding the lang attribute, such as. If one of the sections is in another language, add the lang attribute to that section's tag. I didn’t do well on this one, I’ll remember it for later.
2. Constructing meaningful page titles
A few points worth mentioning:
a) When making a page, never forget to write a title. I have seen many pages with the title "Untitled Document" or "New Page". It's embarrassing.
b) Should the title come first, the “sub-title” or the “main title”? The current practice seems to be to put the "sub-title" first, such as "Audio and Video Entertainment Home Page_Sina.com". But I personally have an opinion that maybe it is better to put the big title first. In this way, when I put "Sina.com_Video and Entertainment Home Page" and "Sina.com_News Center Home Page" into my favorites, they will stay together because of the alphabetical order, instead of being scattered everywhere. Of course this is not necessarily the case, it is for reference only.
c) For English titles, be sure not to put "The" in front of the title, otherwise your web page will be ranked at the beginning of "T" in the bookmarks.
3. Providing additional navigation aids
This one says to add <link rel=”home” title=”Home” href=”http://url/of/home/page” /> I actually know this. But it seems that it is a bit difficult to add rel and rev attributes to so many links on the page.
4. Presenting your main content first
OK, this is a classic “hope for good CSS” accessibility principle. Putting <div class=”main”> in front of <div class=”side”> actually tests CSS skills. A famous question is: How to make the sidebar fixed width and the main column width adaptive, and at the same time the HTML of the main column should be in front of the sidebar. I really want to include this in my interview questions, but I think it might be too difficult. However, this question is very important anyway!
5. Skipping over navigation links
Very important! This is mentioned in the hardcore web standard tutorial "Website Reconstruction". There is just one thing I am suspicious of. If you set the skip link to display:none, aren’t you afraid that it will be ignored by the reader?
6. Using color safely
This article actually talks about several key points:
a) The color contrast should be sufficient, otherwise people with poor eyesight will have difficulty seeing the image
b) The link color is preferably blue (I prefer #09c)
c) Links should be underlined
7. Using real links
This means that even if this link is used to trigger Ajax, the URL of the Ajax code snippet should be placed in the href so that search engines, browsers, etc. can crawl it. Regarding this article, please refer to the "Digging Potatoes" section on Tudou.com's homepage.
8. Adding titles to links
Needless to say, there are two major usability focuses: the title of a and the alt of img.
Phew~ Let’s end this first round first. If you are interested in accessibility, you can read the book "Dive Into Accessibility" in detail, especially the first 5 sections. Then you can take a look at the hateful "Baidu Blind Road". I will use a special article to curse this unscrupulous and black-hearted product that deceives people with disabilities.

The accessibility of web pages seems to be something that can only be valued and implemented by the front end. It's quite sad that accessibility, as a part of usability, can only be controlled by technical personnel. This is what I don't want to see. But in turn, this adds a new responsibility to front-end development engineers and adds an indicator for how to distinguish excellent front-ends.
9. Defining keyboard shortcuts
This means defining the accesskey attribute. That’s easy. The key is how to use it in the browser. In IE, it is "alt+", and it only moves the focus. If you want to click, you need to press enter; in Firefox, it is "shift+alt+", and the click event is directly triggered after pressing. I haven't tried Opera, Chrome or Safari, so if anyone knows, please let me know.
Thanks to aoao for providing: Safari 4/mac control+alt+key | /win alt+key
Opera Shift+Esc selection key
Chrome 3 alt+key
In addition to accesskey, there is actually a more important one: tabindex. Sometimes you need to change the default tabindex order in order to get a more convenient experience. For example, the login box is as follows:
username
Remember my password
Forgot your password? In the default order, press the tab key and the focus will pass through "Username", "Remember me", and "Password" in turn. But it seems more convenient to put "Remember me" after "Password". After all, not everyone needs to use the "Remember me" button, especially those who use this login box many times. They obviously don't like "Remember me". So the following order should be specified using tabindex: "Username", "Password", "Remember me".
10. Not opening new windows
What the text means is that this will destroy the browser's "history" record, making the browser's "back key" invalid. I finally understand why foreign websites rarely open new windows, and I finally understand why the XHTML standard cancels the target attribute of the a tag. But this does not seem to conform to the habits of Chinese users and is worth discussing. However, there are some workarounds that can be considered:
a) Provide a checkbox on the page. After selecting it, the target attribute in the a tag will be automatically removed, so that all links will be opened on this page.
b) The newly opened window does not go to "_blank", but to a window with a specified name, such as "new". In this way, all newly opened pages will be opened in the same window. At least in this window, you can still use the browser's "back key". (By the way, all videos on Tudou.com are like this, opened in the same new window).
11. Defining acronyms
Let me first explain that the author's understanding of the word acronym here is incorrect. An acronym is a word whose first letters are combined to form a new, readable word, which may not necessarily have all letters capitalized, such as Nato (North Atlantic Treaty Organization). So HTML or CSS is not an acronym, but
Only DOS and BASIC count. Like HTML or CSS, this should be called abbreviation, and the corresponding tag is the <abbr> tag, but unfortunately, this tag is invalid on IE6.
12. Giving your calendar a real caption
13. Using real table headers
14. Providing a summary for tables
Putting these three points together means using tables correctly. In fact, there are far more uses for tables than these three. It is recommended that you read the HTML Authoritative Guide carefully.

The accessibility of web pages seems to be something that can only be valued and implemented by the front end. It's quite sad that accessibility, as a part of usability, can only be controlled by technical personnel. This is what I don't want to see. But in turn, this adds a new responsibility to front-end development engineers and adds an indicator for how to distinguish excellent front-ends.
15. Ignoring spacer images
Always remember to add an alt attribute to your images, even if it’s empty. The reason is that if alt is not written, some readers will directly read out its file name or URL.
This reminds me of something I read when I was a kid, which said that before the number 0 was invented, people used empty spaces to represent numbers. This is very inconvenient. So alt="" is equivalent to the great invention of the number 0.
16. Use real lists (or disguise them correctly)
This article actually also means that if you want to use an image as an icon before a list, it is best to use CSS. But there is no mention of why <ul> is used. In fact, this is also a problem that I have been struggling with: at present, it seems that there is no better reason to use <ul> or <ol> except for the fundamentalist belief in "tag semantics". Hope those who know the situation can let me know.
17. Providing text equivalents for images
18. Providing text equivalents for image maps
These two items are the same as 15.
I just want to say two off-topic remarks here:
a) Is the <map> tag still useful in this day and age? The same thing reminds me of the <applet> tag.
b) In addition to alt, there are two more attributes: lowsrc and longdesc. When I have time, I will take a look at the current browser support for these two properties.
19. Using real horizontal rules
It says that using <hr> is better than using a decorative image. (PS It turns out hr is the abbreviation of horizontal rule, hoho) But it seems better not to use <hr>.
20. Using relative font sizes
I really want to follow this rule, but the damn Microsoft made Songti font unreadable at font sizes smaller than 12px. However, now all browsers have zoom function, so the relative font size may not be as urgent as before. Anyway, blame IE!
21. Using real headers
In addition to SEO, the article mentions that some browsers can specifically capture the titles in the article to provide convenient in-text navigation. This function is similar to the method of automatically generating a table of contents in Word.
But one thing is worth noting, the use of the <h1> tag. It actually refers to the text that best summarizes the content of the page, rather than the text that appears to be in the title position (such as the LOGO at the top of the website). I always made a mistake before, which was to use the website's logo as H1. In fact, for example, on the search results page, it is obvious that "Search XXX, a total of XXX results" should be used as the h1 title.
22. Labeling form elements
There is only one thing I want to discuss with you: should we use id and for to connect, or directly use label tags to frame the form elements and text? What are your habits?
23. Making everything searchable
This is a relatively broad product-level issue and will not be discussed here.
24. Creating an accessibility statement
This is pretty good, but I recommend reading the original text for details. I'll do it when I have time.

<<: Text mode in IE! Introduction to the role of DOCTYPE

>>: New settings for text and fonts in CSS3

Some indicators of excellent web front-end design

How to implement vue page jump

Markup Language - Title

Pure CSS to hide the scroll bar but still have the scrolling effect (mobile and PC)

Forty-nine JavaScript tips and tricks

A brief analysis of Vue's asynchronous update of DOM

Ubuntu Server 18.04.5 LTS Server Edition Installation and Configuration Graphic Tutorial

Detailed explanation of the initial use of Promise in JavaScript asynchronous programming

JavaScript basics for loop and array

Example of using JS to determine whether an element is an array

Detailed explanation of redis persistence, master-slave synchronization and sentinel under Linux

Recommend

MySQL 8.0.26 installation and simplified tutorial (the most complete on the Internet)

WeChat applet realizes left-right linkage

How to parse the attribute interface of adding file system in Linux or Android

How to set static IP in CentOS7 on VirtualBox6 and what to note

Steps to install RocketMQ instance on Linux

Linux Operation and Maintenance Basic System Disk Management Tutorial

Detailed explanation of Vue router routing

10 very good CSS skills collection and sharing

Example of Html shielding right-click menu and left-click typing function

JS Easy to understand Function and Constructor

mysql5.7.17.msi installation graphic tutorial

Share the problem of Ubuntu 19 not being able to install docker source

Vue local component data sharing Vue.observable() usage

Detailed introduction to the MySQL installation tutorial under Windows

Scary Halloween Linux Commands