For example, those users who need to read screen software. As a front-end, how could we bear it? I have always wanted to write such an article before, sharing how to create a page with better accessibility. Today's plan includes a combination of HTML Ta ag and WCAG standards. I recommend you write your HTML like this so that some people's lives can be easier.
What I want to share today is how to use our HTML tag to reflect the WCAG standards and semantic network goals:
In fact, this has nothing to do with WCAG, but for a page with better compatibility, especially backward compatibility, I recommend you to write it like this:
<!Doctype html>
The Internet connection can almost be said to be implemented using <a>, as the most common tag on a page. How should we treat it?
<a href= title= accesskey=M rel=hidefocus>Link</a>
It is also very important to use HTML tags correctly, which is conducive to the understanding of page structure of screen reading software users. Especially when using labels such as H1, H2, H3, etc., abuse can easily lead to structural confusion. Of course, using general tags and then using CSS to make visual contrast is also something that ordinary people can recognize. But what about the screen reading software users. Of course, here we just need to pay attention to the use of page tags, and the most important thing about abbr should be to add a title attribute to describe the abbreviation. for example:
<abbr title=Web Developer >WD</abbr>
When there are large paragraphs of quotes, use <blockquote>, while inline quotes use <cite> to make your structure easier to read:
<blockquote> I have always wanted to write such an article before, sharing how to create a page with better accessibility. Today's plan includes a combination of HTML Ta ag and WCAG standards. I recommend you write your HTML like this so that some people's lives can be easier. </blockquote><p>The most impressive sentence of A is that when you are in front, you must have love. Don't use roaring bodies on all kinds of people at any time</cite>. </p>
Writing something on paper cannot be done like writing something on a computer. You can use the undo key to press it, but what should we do when we want to emphasize that something is deleted? That is to use the <del> tag. For example:
<del>When expressing emphasis on HTML, please use the <b> tag</del>When expressing emphasis on HTML, please use the <strong> tag
The effect is like this:
When emphasizing on HTML, please use the <b> tagWhen emphasizing on HTML, please use the <strong> tag
When I was taking newcomers to do Alipay front-end blog last year, what impressed me the most was that I liked using <dl>. At that time, I was thinking that these students were pretty good and had a good understanding of semantics. We still rarely use definition lists. Instead, use the two of the general <ul> <ol>. <dl> should also be used with caution, it is best to only use certain definitive entries, such as the example of w3school, the definition of coffee and milk:
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd></dl>
List, this is very familiar to every front-end. Because the structure can be applied very flexibly, it is often used in navigation, list, tab, etc. There is no need to say much about this. But there is one thing that needs to be understood. Don't believe that <ul>/<ol> is a substitute for <table>. In our commonly used HTML tags, each tag has its own function, and no one is a substitute for anyone.
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
If it is a table, then don’t use paragraphs instead, let alone lists. Unless it is absolutely necessary, and they are convertible. In addition, there are some points to note in the table:
<table summary=sofish's blog status> <thead> <tr> <th>DATE</th> <th>IP</th> <th>PV</th> </tr> </thead> <tbody> <tr> <td>2011.3.11</td> <td>3000</td> <td>8000</td> </tr> </tbody></table>
<code> refers to computer code text, while <pre> refers to preformatted text. <pre> is a wider range and is a blocky element that may be used to format various text, especially code. There is no need to pay special attention to when using it, mainly semantically correct use, such as not using <pre> instead of general <p>.
<code>text-align:center</code><pre>{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }</pre>In modern web pages, it is very rare to use <br>. The blank space in web pages is generally implemented using CSS padding and margin. This is more accurate and easier to control. The recommended usage now is to use the general paragraph <p> to make simple line breaks instead of controlling the white space of the page.
<p>I am a paragraph. <br />Politics are always line-breaking. </p>
<hr> has very good semantic effect. But his visual effects are difficult to control. I have written such articles before about issues in various browsers. Generally, it is rarely used. If you provide a separate page specifically for screen reading software users, it may be of great use.
<h3>Title 1</h3><p>Lorem Ipsum is ...</p><hr /><h3>Title 2</h3><p>This is the entry of... </p>
In fact, the two tags <div>/<span> have semantics, and both defines a section in a document. Yes, it is actually the same as <section> in HTML5. It’s just that because of search engines, search engines think they are semantic labels, so they become semantic labels. The recommended usage is to try to use other containers as a page frame, such as layout, adding additional visual effects, rather than substitutes for paragraphs, etc.
<div id=container> <div id=content> </div> <div id=sidebar> <ul> <li><span>God</span>, oh my zsh</span></li> </ul> </div></div>
These tags can almost be said to be the most important tags in the hierarchy of a page tag. We can use the structure of a book to illustrate these tags, and when we build a page, we should also have such a thought in our mind:
Yes, of course there are also quotations <blockquote>, codes provided in technical books <pre class=code>, lists of points that need attention <ul>, tables for easy comparison, etc.
<h1>LOGO</h1><h2>Title</h2><div class=entry> <h3>Summary:</h3> <p>lorem ipsum is ...<em>emphasize</em></p></div>
<em> emphasize abbreviation. And <strong> is strong emphasize. Many students who are just starting out will not be able to use the labels of <em>, <strong>, <cite>, <i>, <b> and <b> accurately. <i> and <b> are basically abandoned, equivalent to the current ones and <strong>. Generally speaking, their order of the importance of content is as follows: strong > em ≈ cite.
<strong>Note:</strong>Don't use old tags, such as <cite>FONT, CENTER</cite>, etc., especially <em>FONT</em>.
Form items are relatively complex tags in HTML, and there are many points to pay attention to:
<form method=post action=http://sofish.de> <fieldset><legend>My Form</legend> <label for=firstname>* First name:</label> <input type=text id=firstname /> <label for=speech>Say something:</label> <textarea id=speech /> </textare> <input type=submit value=submit title=submit button /> </fieldset></form>
For pictures, blind people cannot see them. Provide alt to represent alternative text. Tell them what kind of picture this is.
<img src=http://sofish.de/favicon.ico alt=happy favorites favicon />
Try to avoid the use of <iframe> frameworks, but when you need to use them, it is best to provide a title attribute to describe them.
<iframe src=http://sofish.de title=Happy favorites/</iframe>
Media is also a relatively complex format, which is more troublesome to process. Usually we can do this:
<audio src=mozart.mp4>Mozart 39 Symphony</audio>
The page must contain the title, and each tag should be recognizable. For example, this is reflected in Alipay:
<title>Contact me--Happiness Favorites</title>
All right. That's all for now. WCAG is not just the usage of these simple HTML tags, and semantic web pages are not something that can be written in one or two articles. Take your time. Start with the most common things and develop good habits. Going back to the sentence at the beginning of the article, do you have the heart to write the page so hard to use?