What is web standards, availability, accessibility

Article Description: on web standards, usability, accessibility.

Foreword: It is not difficult to find, as long as the recruitment of ued related positions, such as front-end development engineers, interaction designers, user researchers and even visual designers, generally on the web standards, availability and accessibility of the understanding of the requirements. So what is web standards, usability, accessibility?

First, web standards

To put it simply, HTML, CSS, and JavaScript are the three separate. Web standards are not a standard, but a collection of standards. The Web page consists mainly of three parts: structure (Structure), performance (presentation) and behavior (Behavior). The corresponding standard is divided into three aspects: the structured standard language mainly includes XHTML and XML, the performance standard language mainly includes the CSS, the behavior standard mainly includes the object model (such as the ECMAScript), and so on.

Advantages of Web standards:

• the efficiency of the code: Use the most streamlined code in the HTML file, and include the style and page layout information in the CSS file. The smaller the file on the server, the less time it takes to download the file.
• easy to maintain: page style and layout information is kept in a separate CSS file, and if you want to change the appearance of the site, you only need to make changes in a separate CSS file. The whole station unifies the CSS to be able to bring the huge convenience.
• Accessibility : people who are visually impaired on the Internet use keyboard commands to read the contents of a Web page to their users through a screen reader. A Web page file written in semantically HTML (structured and expressive HTML) makes it easier for such users to navigate, and important information in the Web page files is more likely to be found by these users.
• device Compatibility: pure HTML, no additional styling information, can be reformatted for devices that have different characteristics, such as screen size, and only need to reference a set of additional stylesheets. At the same time, CSS itself allows you to specify different stylesheets for different presentation and media types (such as reading pages on the screen, printing Web pages, reading pages on mobile devices, and so on).
• Web crawler/Search engine: search engines use "reptiles" to parse your Web pages. Semantic HTML can be more accurately and quickly parsed to know what is important, and your page's ranking in search results will be greatly affected.

Second, availability, accessibility

Accessibility is to treat all people equally, regardless of whether they are handicapped or not.

User type of Web site:

• Good health users;
• Blind or severely visually impaired, they use screen readers to listen to websites, or to perceive Web pages through a Braille display;
• Myopic person, need to enlarge the font size to 200%;
• Has the athletic disability, therefore cannot use the hand to operate the mouse, but uses the click Stick to operate the keyboard, or through the line of sight clicks to operate the website user;
• Use mobile devices such as commonly used mobile phones, or use tracking balls and other uncommon computer control devices for users.

Ways to achieve availability and accessibility

• Step up your site's functionality and test your support. Use the "progressive enhancement" and "Smooth degradation" principles to develop Web sites.
• Allows the user to turn off problematic enhancements.
• Provides alternate versions of the same content or functionality.
• Advise your customers on the technologies that the client needs to support, and give examples of which companies ' products support these technologies.

Features of good accessibility Web pages

• HTML semantic and structured: The HTML semantic structure provides the overall framework of the Web page, prompts them where they are located in the file hierarchy, how they interact with various page elements, and emphasizes the text content where appropriate, to help users get a lot of important information. Examples of navigation menus:

  <ul>
  	<li>menu Item 1</li>
  	<li>menu Item 2</li>
  	<li>menu Item 3</ Li>
  </ul>
  

  Description: By constructing a navigation menu as a list, it's easy to let people who use screen readers and can't see a list know that this is a list. Because their screen readers will tell them that this is a list. If you don't use list tags, screen readers will not be able to know that this is a list, so you can't tell the user.

• Overrides : Text can be used as a generic alternative to the content of the page, such as an IMG tag's ALT attribute value, a label's title property value.

   <a href= "http://www.alimama.com" title= "Taobao Alliance Big Promotion" >  </a> 

  Description: Text content can be easily read aloud by screen readers, can be enlarged or reduced, can easily change its contrast, or do many other deformation operations. The ALT attribute contains a short description of the picture so that you cannot see exactly what the user (or search engine) of the picture is using, and the Title property is responsible for a detailed textual description of the link address.

• HTML Definition Basic Interaction : Implementing the Tab TAB search function

  <form action= "search.html" method= "get" >
  	<fieldset>
  		<legend>search within:</legend >
  		 <ul>
  			<li><label for= "Dogs" >dogs</label><input id= "Dogs" type= "Radio" name= "Animal" value= "dog" checked></li> <li><label for= "Cats" >cats</label><input id=
  			" Cats "type=" Radio "name=" Animal "value=" cat "></li>
  			<li><label for=" Fish ">fish</label ><input id= "Fish" type= "Radio" name= "Animal" value= "fish" ></li>
  		</ul>
  	</fieldset >
  	<input type= "text" id= "Searchfield" name= "search"/> <input type= "
  	submit" value= "Search"/>
  </form>
  

  Note: You can simplify the tab search by thinking about basic interactions (instead of just loading the visual effects). Now we can do all the searches with just one form, while still implementing the Tab tab effect (although this requires a bit of style and script). Using AJAX to insert page content, users who disable JavaScript will not be able to use it.

Four accessibility standards (WCAG 2.0):

• perceptible: people can learn about the content of a Web page by being fit for their own media. For example, the blind should be allowed to listen to page content. For example, an image should have a text counterpart.
• Operable : people can interact with Web applications or content. For example, a user should be able to interact with a Web site without a mouse and be able to navigate through a screen reader.
• understandable: users can understand page content and user interface. For example, the body should not be more complex than it needs, and the site should be run in a predictable manner.
• Robustness: All services provided should not be limited by platform or operating system. This prevents people from offering less sophisticated services that can be used by most people because of hardware/software constraints. For example, browsers on different devices can use the site together, and the navigation should be consistent.

Description: The site does not have to meet all of these requirements, depending on the type of site users, but in order to achieve accessibility, the site should ensure that its pages can be read with the general screen reading technology.

Summarize:

Accessibility is a measure of the quality of Web site development. If you take care of your users when you develop your site (and before you start developing), you can create usability, accessibility, web-standard pages, and enjoy all the benefits it brings.

Reference page:
Opera Web Standard Course
Baidu Encyclopedia Web Standard

Reprint, please indicate the transfer from: http://www.heiniuhaha.cn/blog/?p=1378