每日思考（2020/01/13）

题目概览

• 对无障碍web（WAI）的理解
• 请描述css的权重计算规则
• 写一个获取数组的最大值、最小值的方法

题目解答

对无障碍web（WAI）的理解

• 含义：“Accessibility”，在 Web 发展的初期，习惯把它翻译成“无障碍”，因为它主要考虑如何让残障人士更容易地访问 Web 内容。诸如有行动障碍的人难以完成需要用鼠标进行的精确手部动作，他们更多的需要靠键盘；有视觉障碍的人（低视力、色盲、失明）需要使用屏幕放大镜（物理放大镜、网页的缩放功能、网页设置大字体）或屏幕阅读器来浏览网页内容；有听觉障碍的人需要靠阅读文本来替代音频和视频；有认知障碍的人需要网页本身尽可能地简单清晰、符合逻辑。如今，访问 Web 的场景、设备和人群越来越多样化，Accessibility 已不再局限于满足残疾人的需求，它也涵盖了在特定场景下的网站可用性，比如移动设备、弱网环境、忘带鼠标、触摸板坏掉了、老年人访问等等

• HTML 语义化对 Web 的可访问性至关重要

  • 良好的页面结构和布局

    <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>
    

  • 简写和缩写：之前，为了看起来清晰，我会不经意在文本里直接写符号 “+” “/” 来表示“和” “或”。这破坏了 Web 的可访问性，由于用了不清晰的语言。以上书写方式（“+” “/” “>”等）会让屏幕阅读器读出来的内容不利于人理解，应该直接用对应的汉字来表述。除此之外，“5-10年”应该写成“5到10年”；初次出现的缩写，应该在 HTML 里也写个全称，比如HTML，这会有助于屏幕阅读器提取其它辅助信息

    <abbr title="HyperText Markup Language">HTML</abbr>
    

  • form 表单：<label> 标签可以让提示文本和输入框完美的对应起来，还可以扩大激活输入框的范围，方便用户选择和输入

    <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>
    

  • 键盘可访问性：键盘可访问包括按 tab 键能让页面中的元素获得焦点、按 Return/Enter 键能激活该元素、表单元素<select>在获得焦点时按方向键可以上下切换选项。自带键盘可访问性的标签有<a>、<button>、<label>以及表单元素。如果 HTML 标签选择得当、源码里标签的放置顺序本身就和页面中想导航元素的顺序一致，大多数情况下就可以避免手动设置 tabindex 属性了。

  • 文本的替代方案：alt 属性

    <img src="dinosaur.png"
         alt="红色霸王龙：一种双腿恐龙，像人一样直立，有小胳膊，头部有很多锋利的牙齿。"
         title="The Mozilla red dinosaur">
    

• Web 内容可访问性指南

  • 可感知
    • 文本替代方案：为任何非文本内容提供文本替代方案
    • 基于时间的媒体：为基于时间的媒体提供替代方案
    • 适应性：创建可以以不同方式呈现的内容（例如更简单的布局），而不会丢失信息或结构
    • 可区分：让用户更容易看到和听到内容，包括将前景色与背景色分开
  • 可操作
    • 键盘可访问：通过键盘能访问到所有功能
    • 足够的时间：为用户提供足够的时间来阅读和使用
    • 适当地动画：不要以已知会导致癫痫发作的方式设计内容
    • 可导航：提供帮助用户导航、查找内容和确定其位置的方法
  • 可理解
    • 可读：使文本内容易读和易懂
    • 可预测：使网页以可预测的方式显示和运行
    • 输入帮助：帮助用户避免和纠正错误
    • 健壮健全：可以让各种用户代理（浏览器、辅助技术）可靠地解释
    • 最大限度地兼容当前和未来的用户代理，包括辅助技术

请描述css的权重计算规则

• 权重值计算

  选择器	案例	权重值
  !important	!important	Infinity
  内联样式	style=".."	1000
  ID	#id	100
  class	.class	10
  属性	[type='text']	10
  伪类	:hover	10
  标签	p	1
  伪元素	::first-line	1
  相邻选择器、子代选择器、通配符	* > +	0

• 比较规则

  • 1000>100。也就是说从左往右逐个等级比较，前一等级相等才往后比。
  • 在权重相同的情况下，后面的样式会覆盖掉前面的样式。
  • 继承属性没有权重值
  • 通配符、子选择器、相邻选择器等的。虽然权值为0，但是也比继承的样式优先。
  • ie6以上才支持important，并且尽量少用它。

写一个获取数组的最大值、最小值的方

//方法一
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)); //最小值