Usability, accessibility of web standards and websites

The process of learning the front-end is rife with web standards, usability, accessibility, what exactly are they referring to?

First, what is the Web Standard

Simply put, web standards are the set of HTML, CSS, and JavaScript that we touch most in the learning front. The Web page is divided into three parts: structure (Structure), Performance (Presentation), Behavior (Behavior). The corresponding standards are also divided into three aspects: structured standard language---XHTML and XML, Performance standard language---CSS, behavior standard---object Model DOM and ECMAScript, etc.

Why should these standards be developed and what are the advantages of these standards?

1. Improve code efficiency

Web standards advocate structure and performance separation, that is, HTML is only used to form the structure of the Web page, and the layout of the Web page, the presentation is done with CSS, thus effectively streamlining the HTML code. When the browser sends an HTML file request to the server, the time to download the file is reduced.

2. Easy Maintenance

Save the style and layout information of the page in a different file. Strong and maintenance of the Web page, when you need to upgrade the style of the Web page, do not need to change the HTML file, only in the CSS file changes the style of the element.

3. Accessibility

There are some visually impaired people in the Internet users who need a screen reader to read the contents of the Web page. A Web page written in a semantic HTML tag can make a screen reader aware of the structure of the page and the approximate functions of each part, such as the <nav> tag means that the navigation,<aside> label represents the sidebar, and so on, which makes it easier for users to interact with the Web page and capture the main content of the page faster.

4. Device Compatibility

This is the most popular responsive design, the pursuit of page design and development should be based on user behavior and equipment environment (System platform, screen size, screen orientation, etc.) to respond and adjust accordingly. This is also the convenience of HTML and CSS separation, the same HTML file, through the CSS3 media query press queries, you can adjust the size of the screen according to the CSS style, so that the page content can be more clearly displayed.

5. Search engine (web crawler)

Semantic HTML files are more easily parsed by web crawlers, which can accurately get your pages in search results and affect the ranking of pages.

Second, usability, accessibility

As mentioned earlier, accessibility means whether or not the user is healthy, and if some of the physical defects are able to access the site normally, understand the content of the site. For example, visually impaired users need screen readers to browse the Web, users who do not have a mouse to interact with the Web page by keyboard, and users who use mobile devices to access pages.

Web pages with good accessibility have the following characteristics:

1. HTML semantic, structured

2. Alternative content available

3. Defining basic interactions with HTML

To achieve the accessibility of Web pages, Web developers need to use the "progressive enhancement", "Smooth degradation" principle.

"Progressive enhancement" is the use of some additional information to wrap the original data, to achieve this requires a "three-step strategy." The first step: to use the correct, semantic HTML tag to represent the content. The second step: the HTML is separated from the CSS, using CSS to wrap the style of the content, in time to remove the presentation layer, the content of the document is still accessible (just lack of color). Step three: Separate JavaScript, separating the behavior of the Web page from its structure and performance, so that it can access the main content of the Web page even after the browser's JavaScript function is closed.

Most Web pages that have achieved "progressive enhancement" conform to the principle of "smooth degradation". "Smooth degradation" simply means that you can still access a webpage without JavaScript.

Iii. Summary

Understanding Web standards is conducive to developing a good habit of web development, and make a highly accessible site, so that more users see your results.

Usability, accessibility of web standards and websites