Topic Overview
- Accessibility understanding of the web (WAI) of
- Please describe css weight calculation rules
- Write a get maximum array, the minimum value method
Subject to answer
Accessibility understanding of the web (WAI) of
Meaning: "Accessibility", Web in the early stages of development, used to translate it into "barrier-free" because it is the main consideration how to make it easier for people with disabilities to access Web content. Such as people with mobility impairments difficult to complete the need for precise hand movements with the mouse, the more they need to rely on the keyboard; people with visual impairment (low vision, color blindness, blindness) need to use the zoom screen magnifier (physical magnifying glass, web pages function, page set large font) or screen reader to browse the web content; hearing-impaired people to read the text to replace the need to rely on audio and video; with cognitive disabilities who need the page itself as simple as possible clear and logical. Today, access to the Web scene, equipment and people become more diverse, Accessibility is no longer limited to meet the needs of the disabled, it also covers the availability of the site in a particular scene, such as mobile devices, weak network environment, forgot mouse, touchpad broken, the elderly access, etc.
- HTML semantic Web accessibility is critical to the
Good structure and layout of the page
<article> <h2>静夜思</h2> <p>[唐] 李白</p> <div> 床前明月光，疑是地上霜。<br/> 举头望明月，低头思故乡。 </div> <ul> <li><a href="#">译文</a></li> <li><a href="#">注释</a></li> <li><a href="#">作者介绍</a></li> </ul> </article>Abbreviations and acronyms: Before, in order to look sharp, I inadvertently written directly in the text symbol "+" "/" to mean "and", "or." This undermines the accessibility of the Web, due to the use of unclear language. Above notation ( "+" "/" ">", etc.) will screen readers to read out the content is not conducive to human understanding, it should be expressed directly with the corresponding Chinese characters. In addition, "5--10 years" should be written as "5-10 years"; abbreviated first appears, it should also write the full name in HTML, such as HTML , this will help screen reader to extract other ancillary information
<abbr title="HyperText Markup Language">HTML</abbr>form form:
<label>tab allows prompt text entry box and a perfect correspondence, can expand the scope of the activation of the input box, easy to access and input<form> <div> <label for="name">姓名：</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">年龄：</label> <input type="text" id="age" name="age"> </div> <div> <label for="gender">性别：</label> <select id="gender" name="gender"> <option>男</option> <option>女</option> </select> </div> </form>Keyboard Accessibility: keyboard press the tab key allows accessing a page element receives the focus, press Return / Enter key to activate the element, form element
<select>in obtaining the focus can be switched up and down direction key options. It comes with a keyboard accessibility labels<a>,<button>,<label>and form elements. If you select the proper HTML tags, labels placed the order in the source code itself and wants the same page in the order of navigation elements, in most cases you can avoid manually set the tabindex property.Alternative text: alt attribute
<img src="dinosaur.png" alt="红色霸王龙：一种双腿恐龙，像人一样直立，有小胳膊，头部有很多锋利的牙齿。" title="The Mozilla red dinosaur">
Web Content Accessibility Guidelines
- Perceivable
- Text alternatives: Provide text alternatives to any non-text content
- Time-based media: provide an alternative to time-based media
- Adaptability: can be presented in different ways to create content (for example simpler layout) without losing information or structure
- Can be distinguished: make it easier for users to see and hear content including separating foreground and background color
- Operational
- Keyboard Accessibility: access to all functions via the keyboard
- Enough time: to provide users with enough time to read and use
- Animation properly: Do not known to cause seizures fashion design content
- Navigable: to help users navigate, find content and determine its location method
- Understandable
- Readable: make text readable and understandable
- Predictable: the web page display and run in a predictable way
- Input Help: Help users avoid and correct mistakes
- Robust sound: allows a variety of user agents (browsers, assistive technology) to reliably interpret
- Maximum compatibility with current and future user agents, including assistive technologies
- Perceivable
Please describe css weight calculation rules
Weight value calculation
Selector Case Weights !important !important Infinity Inline style style=".." 1000 ID #id 100 class .class 10 Attributes [type='text'] 10 Pseudo-classes :hover 10 label p 1 Pseudo-element ::first-line 1 Adjacent selector, descendant selectors, wildcards * > + 0 Comparison rules
- 1000> 100. That level compares one by one from left to right, just before a level equal than later.
- In the case of the same weight, the latter will overwrite the preceding pattern style.
- No weight values inherited property
- Wildcard, child selectors, adjacent selectors like. Although the weight to zero, but also priority than inherited styles.
- ie6 more than just support
important, and minimize the use of it.
Write a array of obtaining maximum, minimum square
//方法一
Array.prototype.min = function () { //最小值
var min = this[0];
var len = this.length;
for (var i = 1; i < len; i++) {
if (this[i] < min) {
min = this[i];
}
}
return min;
}
Array.prototype.max = function () { //最大值
var max = this[0];
var len = this.length;
for (var i = 1; i < len; i++) {
if (this[i] > max) {
max = this[i];
}
}
return max;
}
//方法二
Array.prototype.max = function () {
return Math.max.apply({}, this)
}
Array.prototype.min = function () {
return Math.min.apply({}, this)
}
//方法三
function getMaximin(arr, maximin) {
if (maximin == "max") {
return Math.max.apply(Math, arr);
} else if (maximin == "min") {
return Math.min.apply(Math, arr);
}
}
//方法四
var a = [1, 2, 3, 5];
alert(Math.max.apply(null, a)); //最大值
alert(Math.min.apply(null, a)); //最小值
//多维数组
var a = [1, 2, 3, [5, 6],[1, 4, 8]];
var ta = a.join(",").split(","); //转化为一维数组
alert(Math.max.apply(null, ta)); //最大值
alert(Math.min.apply(null, ta)); //最小值