Web前端：创建符合Web可访问性标准的HTML布局

　“Web 可访问性”一词定义了一组开发人员需要遵循的准则，以使Web应用程序的交互更加方便。任何网站的内容、UI/UX 设计和布局都应该是可访问的。在这篇文章中，我们研究了前端团队可以做些什么来轻松地将他们的网站提升到适合Web可访问性的标准。

　　保持标记清洁

　　无论你使用什么标记，都要正确整齐地构建它，避免跳过关卡。例如，在HTML中使用 <button> 元素而不是 <span> 或 <div>。使用 <nav> 进行导航，使用 <button> 进行页面操作。

　　将 <strong> 或 <em> 元素与 <bold> 或 <i> 区分开来。前两者用于对内容的语义强调，后两者用于视觉强调。

　　l 确保横幅中的公司徽标链接回网站的主页。

　　l 使用 <lang> 属性告诉浏览器在网站上使用哪种语言。

　　l 如果你想在视觉上和屏幕阅读器中隐藏内容，请使用 hidden 属性。

　　l 为长页面添加锚链接(跳转链接)，以便用户可以跳过他们不需要的内容并继续相关部分。

　　注意页面语义

　　用户和机器(屏幕阅读器、盲文显示器)都应该能够识别页面结构。通过使用页面上的分段(<header>、<footer>、<article>、<nav>)和标题元素来创建语义布局。这有助于定义网页的清晰层次轮廓，并区分主要(主要：<h1>、<h2>、<article>)和次要(不太重要：<h3> - <h6>、<footer>)内容。

　　当你在页面中使用标题时，不要使用格式(字体样式和大小)伪造标题属性 (<h>) 的实际标记，因为这不允许辅助技术识别这些是标题。

　　在适当的情况下在网页中使用 ARIA 地标。ARIA(可访问的富 Internet 应用程序)是一个综合技术规范，用于将可访问性信息添加到本地不可访问的元素(特别是使用 JavaScript、AJAX 和 DHTML 开发的元素)。使用 ARIA 地标，开发人员可以扩展 HTML 功能并将适当的语义(即属性)应用到 UI 和内容元素，以便辅助技术理解这些。

　　这是一个 HTML 语义元素(<header>、<nav>、<main>、<footer>)如何与 ARIA 角色属性(“banner”、“navigation”、“main”、“contentinfo”)组合的示例使用户更容易使用屏幕阅读器进行网站导航。

　　尽管大多数 ARIA 功能最近都是在 HTML5 中实现的(你绝对应该喜欢这些!)，但并非所有屏幕阅读器和浏览器(例如 IE)都足够复杂，仅依赖于 HTML 语义。适当使用 ARIA 的一些示例是分配角色来描述某些类型的小部件(“菜单”、“树项”、“滑块”)，定义描述拖放源和放置目标的拖放属性，以及添加警报以通知有关动态页面更改的辅助技术。

　　支持标签导航

　　使元素的 Tab 顺序(也称为文档对象模型或 DOM 顺序)与视觉顺序一致。从 Tab 顺序中删除不必要的元素，以免混淆使用 Tab 或辅助设备导航的用户。

　　使导航元素的焦点可见。你可以为此使用第三方插件或 <outline> 属性，该属性为在选项卡式导航(或其替代方案)时具有焦点的页面元素和链接提供视觉反馈。

　　使用 <tabindex> 属性可以使链接、按钮和表单字段等元素具有焦点，并且可以通过 Enter 键和/或空格键进行选择。即使具有 <tabindex> 属性和 0 整数值的不可聚焦元素也可以成为可聚焦元素，例如<h3 tabindex="0">一个可聚焦的标题</h3>

　　如果页面上有弹出窗口，导航优先级应该允许首先关闭它们。完成此操作后，理想情况下，焦点应该跳回到用户被打开的模式窗口打断的网页元素。为此，请将最后一个焦点元素存储在变量中。

　　为图像添加替代文本

　　屏幕阅读器几乎可以访问页面上的所有内容——图形信息除外。所以不要忘记为图像和其他图形添加替代文本(<img> alt 属性)。这不仅可以帮助使用辅助技术“阅读”屏幕的人，还可以帮助互联网连接不佳的用户。你的网站也将使用图像替代文本进行 SEO 优化。在Web前端培训中，不仅有理论知识的课程，也会有实操项目的训练，让你深入浅出地学习前端技术，弥补项目经验的空缺。

　　图像替代文本应该精确、简洁，并反映添加图像的主要目的。根据上下文，相同的图像可能有不同的替代文本，例如如果将公司徽标放在标题中并将用户返回到主页，则其准确的替代文本可能是`<img alt="Company X logo - Home page.">`

　　l 在替代文本中，避免使用多余的“图像”或“图像”——无论哪种方式，辅助技术都会警告用户有图像。

　　l 以句点结束替代文本。这将使屏幕阅读器在 alt 文本中的最后一个单词之后暂停一点，从而为用户提供更愉快的体验。

　　l 具有多个可点击区域的图像(例如图像地图)的替代文本应提供这些链接的完整描述。此外，每个可点击区域都应该有相应的替代文本来描述其目的或目的地。

　　l 避免使用文字图片;如果你不能没有它们，替代文本应该包含与图像中相同的单词。

　　l 如果你有多个图像传达一条信息，则组中第一张图像的替代文本应包含整个组的信息。

　　l 要熟悉替代文本的普遍接受标准，你可以随时查看此替代文本决策树。

　　虽然必须为所有对理解内容很重要的图像添加替代文本，但对于与内容没有直接关系的菜单图标或装饰性图像(如封面)则无需这样做。对于这样的图像，只需使用一个空的 <img alt> 属性。

　　最后技巧

　　尽管这些提示肯定会增加你网站的包容性，但最好不要将 Web可访问性视为一套正式的指南。首先，它是一项全面的策略，可以关心所有用户并使你的网站内容可供他们使用——无论他们使用何种浏览器、互联网提供商或辅助设备。

歌Chrome浏览器的市占率继续保持霸主地位，占据浏览器市场半壁江山，最近更是达到了惊人的57.94%，如果你也在用，送你这些快捷键用，不谢~

ctrl + shift + t　　重新打开已经关闭的页面，连续使用打开所有已经关闭的历史页面；
ctrl + w 关闭当前浏览页（这其实是windows快捷键，适用所有windows应用程序窗口关闭）；
ctrl + click link ctrl + 鼠标单击某链接，在新标签页内打开指定链接；
ctrl + +/-/0　　+放大页面， -缩小页面，0恢复页面为原始大小；
ctrl + number(1~8) 切换标签栏对应页面；
space(空格键）向下翻页；
ctrl + l 焦点跳转到URL地址栏；
ctrl + enter 输入网址时，自动添加域名的前辍www和后辍com,并自动回车访问; （很有用~~）
ctrl + k 切换URL地址栏为搜索引擎搜索框；
ctrl + shift + o 打开书签管理器
ctrl + shift + d 保存所有打开页面到收藏夹
shift + escape 打开浏览器进程管理器
ctrl + shift + delete 清除浏览数据（保护隐私，从这开始~）
ctrl + shift + c 开发者模式，程序员调试工具；
ctrl + 9 切换至最后一个标签页面
ctrl + shift + q 退出chrome浏览器

别拖延，现在就记住3个，然后收藏明天继续记！

ntroduction

HTML 是一种描述网页语言，指的是超文本标记语言 (Hyper Text Markup Language)。其中，超文本指的是网页上可以包含图片，视频，连接信息。标记也叫做标签，所以标签书写的是<内容>。语言就是一种交流工具，HTML 是用户与浏览器之间交互工具。

简单说，HTML 是由浏览器解析执行的，它不会将 HTML 标签展示出来，而是会解析 HTML 标签，以特定效果展示出来。

Syntax

HTML 可以直接使用文本编辑器来编写
HTML 文件它的后缀名是 .htm 或 .html
<html> 标签它代表当前页面是一个 HTML
<head> 标签中可以声明 HTML 页面的相关信息
<body> 标签中它主要是用于显示页面信息
标签要有开始，有结束。开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭 <br/>。
大多数标签它具有属性，属性值要使用引号引起来。
HTML 本身是不区分大小写的。

<html>
    <head>HEAD</head>
    <body>BODY</body>
</html>

Tools

可以使用 JetBrains WebStorm 或者 VS Code 进行开发。

HTML Tags

文件标签

<html> 代表当前书写的是一个 HTML 文档

<head> 存储的本页面的一些重要的信息，它不会显示

标签下有一个子标签 <title> 它是用于定义页面的标题的

<body> 书写的内容会显示出来，属性：1. text 用于设置文字颜色；2. bgcolor 用于设置页面的背景色；3. background 用于设置页面的背景图片

排版标签

HTML 注释

<br/> 标签

br 标签就是一个换行功能标签

<p> 标签

在 p 标签中的内容会在开始与结束之间产生一个空白行并且它会自动换行

常用属性 align 的作用是设置段落中的内容对齐方式，可取值有 left right center

<hr> 标签

hr 标签会在页面上产生一个水平线

常用属性：

align：可取值有 left right center 代表水平线位置

size：代表水平线高度（厚度）

width：代表水平线宽度

color：水平线的颜色

关于 HTML 中标签属性

两种方式:

直接设置值，默认单位是 px （像素） <HR WIDTH="200">
可以设置百分比 <HR WIDTH="35%">

<div> 标签

Div 是一个块标签

Div 与 CSS 结合，会更好对页面进行排版

<span> 标签

Span 标签也是一个块标签Div 与 span 区别：Div 会自动换行，我们也叫这样的标签为行级元素Span 标签它不会自动换行，我们也叫它为行内元素

字体标签

<font> 标签

Font 标签可以设置字体，字的大小及颜色

常用属性：

Face：用于设置字体，例如宋体隶书楷体

Size：用于设置字的大小

Color：用于设置字的颜色

我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。每一种颜色的饱和度和透明度都是可以变化的，用 0～255 的数值来表示。如纯红色表示为 (255，0，0)，十六进制表示为 #FF0000。按这种表达方式，理论上我们可以得到 256 * 256 *256=16777216 种颜色。

使用十六进制方式，取值范围 #000000 ~ #FFFFFF （黑色到白色）。当颜色值为 #cc3300 时，也可以使用 #c30 这种简化的方式来表示。
RGB 颜色表示法：RGB(x,y,z)，x、y、z 是 0 ～ 255 之间的整数。
在线颜色选择器：http://www.86y.org/code/colorpicker/color.html

标题标记

<h1> 最大 <h6> 最小，它们代表的是标题，可以使用 <b> <i> 对文字设置加粗或倾斜

注意：在 HTML 中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

清单标记（列表标记）

有序清单：

<!-- 有序列表 I II III-->
<ol type="I" start="3">
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ol>
<!-- 无序列表 -->
<ul type="square">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ul>

图形标签

<img> 可以让我们在网页引入一张图片

常用属性

src 代表的图片的路径
width 图片的宽度
height 图片的高度
border 用于设置图片的边框
alt 如果图片不可以显示时，默认显示的文本信息
align 图片附件文字的对齐方式，取值有：left right middle top bottom

超连接标签

<a> 标签可以实现跳转到其它页面操作。超链接内容不仅可以是文本，也可以是图片等信息

常用属性

href 代表的要跳转的路径
name 属性可以在本页面设置一个锚点
target 这个属性规定在何处打开这个链接文档，可取值：_blank _self _parent _top framename

表格标签

<!-- 学习表格标签 -->
<table border="2" align="center" width="400px">
    <caption>学生成绩单</caption>
    <tr>
        <th>姓名</th>
        <th>语文成绩</th>
        <th>数学成绩</th>
        <td colspan="2" align="center"><b>操作</b></td>
    </tr>
    <tr align="center">
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>修改</td>
        <td>删除</td>
    </tr>
    <tr align="center">
        <td>李四</td>
        <td>90</td>
        <td>66</td>
        <td>修改</td>
        <td>删除</td>
    </tr>
</table>

表单标签

通过表单可以将要提交的数据提交到指定的位置

<!-- 表单：用户注册案例 -->
<form name="form1" action="user/login" method="POST">
    <table border="1" width="64%" align="center">
        <tr>
            <td>用户名：</td>
            <td>
                <input type="text" name="username">
            </td>
        </tr>
        <tr>
            <td>密码：</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex" >女
            </td>
        </tr>
        <tr>
            <td>地址：</td>
            <td>
                <select name="province">
                    <option value="0">--请选择省--</option>
                    <option value="10001">广东</option>
                    <option value="10002">上海</option>
                    <option value="10003">山东</option>
                </select> 省
                <select name="city">
                    <option>--请选择市--</option>
                    <option value="1000301">广州市</option>
                    <option>深圳市</option>
                    <option>东莞市</option>
                </select> 市
            </td>
        </tr>
        <tr>
            <td>编程语言：</td>
            <td>
                <input type="checkbox" name="language" checked="checked">Java
                <input type="checkbox" name="language">Python
                <input type="checkbox" name="language">Go
            </td>
        </tr>
        <tr>
            <td>照片：</td>
            <td>
                <input type="file" name="image">
            </td>
        </tr>
        <tr>
            <td>自我介绍：</td>
            <td>
                <textarea name="remark" rows="5" cols="100"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="注册"> 
                <input type="reset" value="取消"> 
            </td>
        </tr>
    </table>
</form>

框架标签

通过框架标签可以定制 HTML 页面布局

在 HTML 页面上去描述框架信息时，不可以将 <frameset> 写在 <body> 标签中

framesetTest.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML 框架标签</title>
    </head>
    <!-- rows 定义了三行：第一行 100 像素，第三行：100 像素；第二行：剩下的像素 -->
    <frameset rows="100, * , 100"> 
        <frame name="topModule" src="./top.html"></frame>
        <frameset cols="100, * ">
            <frame name="menuModule" src="./menu.html"></frame>
            <frame name="contentModule" src="./content.html"></frame>
        </frameset>
        <frame name="footModule" src="./foot.html"></frame>
    </frameset>
</html>

top.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>top</title>
    </head>
    <body>
        <div>头部信息</div>
    </body>
</html>

foot.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>footL</title>
    </head>
    <body>
        <div>底部信息</div>
    </body>
</html>

menu.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>menu</title>
    </head>
    <body>
        <div>菜单信息</div>
    </body>
</html>

content.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>content</title>
    </head>
    <body>
        <div>内容显示区</div>
    </body>
</html>

其它标签与特殊字符

<meta> 标签

它可以对页面进行描述及热词设置，可以方便搜索引擎查找页面
通过 meta 标签设置 http 响应信息
通过 meta 标签可以设置页面的编码，<meta http-equiv="Content-Type" content="text/html; charset=gbk">
通过 meta 标签来设置页面加载后在指定的时间后跳转到指定的页面，<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

<link>标签

使用 link 标签来导入 CSS

特殊字符

详情查看菜鸟教程：https://www.runoob.com/charsets/ref-html-ascii.html

?HTML DOM

Introduction

DOM, Document Object Model -- 文档对象模型，是 HTML 和 XML 文档的编程接口，以树结构表达 HTML 文档。

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准。

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

DOM Node

DOM 是被视为节点树的 HTML。

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

HTML DOM 将 HTML 文档视作树结构，这种结构被称为节点树。

节点树中的节点彼此拥有层级关系。常用父（parent）、子（child）和同胞（sibling）等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。

DOM 方法 & 属性

HTML DOM 方法是可以在节点（HTML 元素）上执行的动作。

HTML DOM 属性是可以在节点（HTML 元素）设置和修改的值。

可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。方法是能够执行的动作（比如添加或修改元素）。属性是能够获取或设置的值（比如节点的名称或内容）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM</title>
    </head>
    <body>
        <div id="div1">
            <p id="p1">Hello</p>
            <p id="p2">Hello</p>
        </div>
        <script>
            // 先获取 P 元素
            var element=document.getElementById("p1")
            // 直接修改 p 元素的内容
            element.innerHTML="此时已是修改后的内容"

            // 修改 p2 标签的样式
            var ele=document.getElementById("p2")
            ele.style.color="blue"
            ele.style.fontFamily="宋体"
            ele.style.fontSize="larger"

            // 添加元素
            // 创建一个p元素
            var elementP=document.createElement("p")
            // 创建一个内容
            var nodeText=document.createTextNode("新加的 P 元素")
            // 把文字内容添加到p元素中
            elementP.appendChild(nodeText)
            // 把新创建的p元素添加div1元素中
            var div1=document.getElementById("div1")
            div1.appendChild(elementP)

            // 插入添加新的元素
            // 创建一个新的元素
            var eleP=document.createElement("p")
            // 创建一个内容
            var noText=document.createTextNode("在 P1 元素前添加的新元素")
            // 把文字内容添加到 p 元素中
            eleP.appendChild(noText)
            // 把新创建的 p 元素添加 div 1 元素中
            var parentDiv1=document.getElementById("div1")
            // 获取指定被添加的元素
            var p1=document.getElementById("p1")
            // 在元素前添加；参数说明：1.要添加的元素；2.在那个元素之前添加（指定一个元素）
            parentDiv1.insertBefore(eleP, p1)

            // 删除元素
            // 获取父元素
            var pdiv1=document.getElementById("div1")
            var removep1=document.getElementById("p1")
            // 使用父元素删除该元素
            pdiv1.removeChild(removep1)
        </script>
    </body>
</html>

DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。当事件发生时，可以执行 JavaScript，比如发生用户点击一个 HTML 元素的事件。

如需在用户点击某个元素时执行代码，可以把 JavaScript 代码添加到 HTML 事件属性中：onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM 事件</title>
        <!-- JavaScript 代码必须写在 script 中 -->
        <script>
            function onLoadFun(){
                alert("已载入...");
            }
            // 文本框失去焦点事件
            function onBlurFun(){
                alert("此方法是文本框失去焦点事件，用来校验此文本框输入数据的")
            }
            // 表单被提交时执行事件
            function onSubmitFun(){
                alert("此表单已提交，这个方法也可以来作为数据校验的");
            }
            // 元素被改变时触发事件
            function onChangeFun(){
                alert("文本框元素已输入新的数据")
            }
            // 当鼠标悬停在某一个元素上时执行的方法
            function onMouseOverFun(element){
                element.innerHTML="鼠标已停在H1元素上了"
            }
            // 当鼠标离开某一个元素时执行事件
            function onMouseOutFun(element){
                element.innerHTML="鼠标已离开H1元素上了..."
            }
        </script>
    </head>
    <!-- 需求：当页面被载入时，执行一个代码，弹框提示已载入 -->
    <body onload="onLoadFun()">
        <!-- 需求：在一个表单中有用户名录入的文本框，当输入完文本框的时候进行名称校验，提交的时候弹框显示 -->
        <form onsubmit="onSubmitFun()">
            用户名：<input id="username" name="username" onchange="onChangeFun()" >
            <br/>
            <button type="submit">提交</button>
        </form>
        <!-- 需求：有一个 H1 标签元素，当鼠标移动到 H1 元素上时，修改文字，当鼠标移出元素时执行事件 -->
        <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一个标题</h1>
    </body>
</html>

想了解更多，欢迎关注我的微信公众号：Renda_Zhang

在线咨询

上一篇：利用markdown记录笔记&通过g
下一篇：CSS - 不规则图形进度条

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商