# 网站运营与管理 **Repository Path**: lixintao/Web_Operations ## Basic Information - **Project Name**: 网站运营与管理 - **Description**: 用于记录网站运营与管理的学习记录 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-19 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # **STEP1** # WAI guidelines WAI的指导方针 **简介**：自制版WAI指导中文翻译。 ![首图](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/01.png "") # 编写Web可访问性 [ **提示入口** ](https://www.w3.org/WAI/tips/) ![摘要](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/02.png "在这里输入图片标题") # 摘要 > 本页介绍了一些基本注意事项，可帮助您开始编写残障人士更容易访问的Web内容。这些提示是帮助您满足Web内容可访问性指南（WCAG）要求的良好实践。点击相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户案例等。 ![目录](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/03.png "在这里输入图片标题") ## 目录 * [ **提供内容丰富，独特的页面标题** ](https://www.w3.org/WAI/tips/writing/#provide-informative-unique-page-titles) * [ **使用标题传达含义和结构** ](https://www.w3.org/WAI/tips/writing/#use-headings-to-convey-meaning-and-structure) * [ **使链接文字有意义** ](https://www.w3.org/WAI/tips/writing/#make-link-text-meaningful) * [ **为图像编写有意义的文本替代** ](https://www.w3.org/WAI/tips/writing/#write-meaningful-text-alternatives-for-images) * [ **创建多媒体文字记录和字幕** ](https://www.w3.org/WAI/tips/writing/#create-transcripts-and-captions-for-multimedia) * [ **提供明确的指示** ](https://www.w3.org/WAI/tips/writing/#provide-clear-instructions) * [ **保持内容简洁明了** ](https://www.w3.org/WAI/tips/writing/#keep-content-clear-and-concise) # 提供信息丰富，独特的页面标题 > 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 ![标题](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/04.png "在这里输入图片标题") ## 示例：页面标题 * 主页标题 ![主页标题](https://images.gitee.com/uploads/images/2019/0304/105803_1040787e_1648200.png "屏幕截图.png") * 页面名称后跟组织名称 ![页面名称后跟组织名称](https://images.gitee.com/uploads/images/2019/0304/105848_cafe1976_1648200.png "屏幕截图.png") * 页面名称包括进程中的步骤 ![页面名称包括进程中的步骤](https://images.gitee.com/uploads/images/2019/0304/105927_6651ff79_1648200.png "屏幕截图.png") ## 更多信息 ![dianji](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/05.png "在这里输入图片标题") * WCAG > [页面标题为2.4.2（了解2.4.2）](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) ## 使用标题传达含义和结构 > 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 ![意义和结构](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/06.png "在这里输入图片标题") > 使用简短标题对相关段落进行分组，并清楚地描述各个部分。好的标题提供了内容的概述。 ## 示例：使用标题来组织内容 ## X缺乏标题 > HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 > > 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 > > 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 > > 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。 > > 相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。 > > 这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档> 中进行调整。 > > 改编自宾夕法尼亚州的标题和小标题 ## √使用标题和小标题 >> HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 >> 示例：标题的目的 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 >> 示例：标题级别 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 >> 示例：含义与格式 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。 >> 相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。 >> 这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档中进行调整。 >> 改编自宾夕法尼亚州的标题和小标题 ![gengduoxinxi](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/07.png "在这里输入图片标题") #### 更多信息 - **WCAG** - [标题和标签2.4.6（理解2.4.6)](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels) - [本节标题2.4.10（了解2.4.10）](https://www.w3.org/WAI/WCAG21/quickref/#section-headings) - [信息和关系1.3.1（了解1.3.1）](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships) - **用户的故事** - [用户通过屏幕阅读器如何使用标题导航）](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) ## 使链接文字有意义 > 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/08.png "在这里输入图片标题") ## 示例：使用链接文本描述目标页面 | **无信息** | **有意义的信息** | |:-----------|-----------:| |有关设备独立性的更多信息，请[单击此处](http://)。|阅读[有关设备独立性](http://)的更多[信息](http://)。| ![gen](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/09.png "在这里输入图片标题") ## 更多信息 - **WCAG** - [链接目的（在上下文中）2.4.4（理解2.4.4）](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) - [链接目的（仅链接）2.4.9（理解2.4.9）](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-link-only) ## 为图像编写有意义的文本替代 > 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/10.png "在这里输入图片标题") ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/19.png "在这里输入图片标题") ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/11.png "在这里输入图片标题") ## 更多信息 - **WCAG** - [非文本内容1.1.1（理解1.1.1）](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) - **讲解** - [图片](https://www.w3.org/WAI/tutorials/images/) - **用户的故事** - [向盲人用户介绍替代文本的价值](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) ## 创建多媒体文字记录和字幕 > 对于纯音频内容（例如播客），请提供成绩单。对于音频和视频内容（例如培训视频），也提供字幕。在成绩单和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频成绩单，还包括重要视觉内容的描述，例如“ Athan离开房间”。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/12.png "在这里输入图片标题") ##更多信息 - **WCAG** - [字幕（预先录制）1.2.2（理解1.2.2）](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded) - [音频描述或媒体替代（预先录制）1.2.3（了解1.2.3）](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded) - **用户的故事** - [描述字幕如何帮助聋哑学生](https://www.w3.org/WAI/people-use-web/user-stories/#onlinestudent) ## 提供明确的指示 > 确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/13.png ) ### 示例： #### 说明传达用户应提供的信息 密码至少应为六个字符，且至少有一个数字（0-9）。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/14.png "在这里输入图片标题") ### 示例： #### 错误表示问题是什么，可能还有如何解决问题 1. 用户名'superbear'已在使用中。 2. 密码至少需要包含一个数字。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/15.png "在这里输入图片标题") #### 更多信息 - WCAG - [标签或说明3.3.2（了解3.3.2）](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) - 用户故事 - [描述简单的说明可以帮助有学习困难的人](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant) ## 保持内容简洁明了 根据情况，使用简单的语言和格式。 - 撰写简短明了的句子和段落。 - 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。 - 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。 - 考虑为读者可能不知道的术语提供词汇表。 - 适当使用列表格式。 - 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/16.png "在这里输入图片标题") #### 示例：使内容可读且易于理解 ##### :x: 不必要的复杂 CPP：如果发生车辆碰撞，指定代表的公司将寻求确定属于所有相关方财产的损害程度和原因。一旦我们的代表获得允许我们理解因果关系的信息，我们可能会或可能不会分配适当的货币补偿。由此产生的决定可能会出现以下选项之一：索赔未获批准并被指定为拒绝状态，索赔状态不明确，并且在进一步处理之前需要其他信息，索赔部分批准并减少付款是已分配和签发，或索赔已完全批准，并且已分配和发放索赔总额。 ##### :heavy_check_mark: 更容易理解 索赔处理程序（CPP）：如果您发生车祸，我们的代理人将进行调查。调查结果将确定任何索赔付款。这可能导致： - 批准的索赔 - 全额付款 - 部分批准的索赔 - 减少付款 - 未确定的声明 - 需要更多信息 - 被拒绝的索赔 - 没有付款 *** ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/17.png "在这里输入图片标题") #### 更多信息 ##### WCAG - [阅读水平3.1.5](https://www.w3.org/WAI/WCAG21/quickref/#reading-level)[（理解3.1.5）](https://www.w3.org/WAI/WCAG21/Understanding/reading-level) - [不寻常的话3.1.3](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words)[（理解3.1.3）](https://www.w3.org/WAI/WCAG21/Understanding/unusual-words) - [缩写3.1.4](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations)[（理解3.1.4）](https://www.w3.org/WAI/WCAG21/Understanding/abbreviations) ##### 用户故事 - [阅读障碍的用户可以从易于阅读的文本中受益](https://www.w3.org/WAI/people-use-web/user-stories/#classroomstudent) ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/18.png "在这里输入图片标题") ## 了解有关辅助功能的更多信息 这些技巧是您需要进行Web访问的一些注意事项。以下资源可帮助您了解为什么可访问性很重要，以及有关使残障人士更易访问网络的准则。 - [辅助功能简介](https://www.w3.org/WAI/fundamentals/accessibility-intro/) —介绍辅助功能并提供许多有用资源的链接 - [易访问性原则](https://www.w3.org/WAI/fundamentals/accessibility-intro/) -一个介绍WCAG要求 - [残疾人如何使用网络](https://www.w3.org/WAI/people-use-web/) -现实生活中的例子表明了残疾人无障碍获取的重要性 - [如何满足WCAG（快速参考）](https://www.w3.org/WAI/WCAG21/quickref/) -所有WCAG要求和技术的可定制参考 # STEP2 ## 根据WAI原则点评任意一个网站 ## 非文本内容 一个替代文本 > 控件，输入：如果非文本内容是控件或接受用户输入，则其名称描述其用途。 > 用户输入的控件和内容的其他要求。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/%E9%9D%9E%E6%96%87%E6%9C%AC%E5%86%85%E5%AE%B9.png "在这里输入图片标题") ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/%E9%9D%9E%E6%96%87%E6%9C%AC%E5%86%85%E5%AE%B902.png "在这里输入图片标题") 选择机票时会提示用户输入出发和目的地的城市名，如果用户不小心把两个城市的地址弄反了，还能一键交换；提示输入出发日期； 选择酒店时会提示用户输入目的地城市，和入住时间段。（默认显示今明两天的日期） ### 1.3.2有意义的序列A级 > 用户输入的控件和内容的其他要求。当呈现内容的顺序影响其含义时，可以通过编程确定正确的阅读顺序。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/03.png "在这里输入图片标题") ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/03%E5%AF%B9%E6%AF%94.png "在这里输入图片标题") 当我输入4g手机，（4g手机是一个有歧义的词），会优先显示支持4g网络的手机，（5g的手机也支持4g网络，但是不会优先显示） 当我输入4g的手机，优先显示的还是支持4g网络的手机，直到第五个商品才符合我想法（4g运存的手机）。 ### 1.3.3感官特征A级 > 用户输入的控件和内容的其他要求。提供的用于理解和操作内容的说明并不仅仅依赖于组件的感官特性，例如形状，颜色，大小，视觉位置，方向或声音。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/%E4%BA%AC%E4%B8%9C02.png "在这里输入图片标题") 不同颜色和图案的图标代表不同的功能，整体界面的图片从中间到右侧依次变小（推荐内容，品牌活动放在最显眼的位置，带有目的性的内容放到最右侧。） ## 准则1.4 –可区别 ### 1.4.1颜色的使用-A级 > 用户输入的控件和内容的其他要求。颜色不用作传达信息，指示操作，提示响应或区分视觉元素的唯一视觉手段。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/1.41.png "在这里输入图片标题") 通过用使用红色突出提示推荐功能和用户精彩使用的功能。 ### 1.4.2音频控制A级 > 用户输入的控件和内容的其他要求。如果网页上的任何音频自动播放超过3秒钟，则可以使用一种机制来暂停或停止音频，或者可以使用一种机制来独立于整体系统音量控制音量。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/1.4.2.png "在这里输入图片标题") 一些商品会通过短视频更好地介绍给用户，京东网站则提供了可暂停的机制。 ### 1.4.9文本图像（无例外）AAA级 > 用户输入的控件和内容的其他要求。文字图像仅用于纯装饰或特定的文字表示形式对于所传达的信息至关重要。 > 用户输入的控件和内容的其他要求。注1：徽标（徽标或商标名称中的文字）被认为是必不可少的。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/%E5%95%86%E6%A0%87.png "在这里输入图片标题") 京东网站包含徽标和文字 ### 1.4.13悬停或焦点内容AA级 （在2.1中添加） > 用户输入的控件和内容的其他要求。在接收然后移去指针悬停或键盘焦点触发其他内容变为可见然后隐藏的情况下，则满足以下条件： ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/%E4%BA%AC%E4%B8%9C06.png "在这里输入图片标题") 当鼠标悬停在商品图片上，鼠标处会变成商品的全称，并且图片下方会出现找相似的功能，方便用户触发搜索相似商品的功能。 ## 准则2.1 –键盘可访问 > 通过键盘提供所有功能。 ### 2.1.1键盘A级 > 用户输入的控件和内容的其他要求。内容的所有功能都可以通过键盘界面进行操作，而无需为各个按键输入特定的时间，除非基础功能需要的输入取决于用户移动的路径而不仅仅是端点。 京东网站支持键盘输入，且支持tab健换行，回车键确认……功能 ### 准则2.4 –可导航 > 用户输入的控件和内容的其他要求。提供帮助用户导航，查找内容并确定其位置的方法。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0321/220015_5bf71c9b_2230782.png "03.png") 当我搜索4g手机时，搜索结果会出现手机品牌、手机类型、屏幕尺寸、屏幕分辨率等选项，让用户找到能尽量满足自身需求的商品。 ### 2.4.2标题页A级 > 用户输入的控件和内容的其他要求。网页具有描述主题或目的的标题 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/%E6%89%B9%E6%B3%A8%202020-03-21%20213545.png "在这里输入图片标题") 主搜索栏会轮流播放热搜商品词，引导用户搜索。 ### 准则3.3 –输入协助 > 用户输入的控件和内容的其他要求。帮助用户避免并纠正错误。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/step2/%E6%9C%80%E5%90%8E.png "在这里输入图片标题") 当我故意输入错字，搜索结果会出现相似结果的提示。