# Web_operation **Repository Path**: coco022/Web_operation ## Basic Information - **Project Name**: Web_operation - **Description**: 网站运营相关学习笔记与心得 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-22 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 为Web可用性编写 ### 在入门提示中 #### 摘要 - 本页介绍一些基本的注意事项，帮助您开始编写更易于残疾人访问的web内容。这些技巧是帮助您满足Web内容可访问性指导原则（WCAG）要求的良好实践。遵循相关WCAG需求的链接、“理解”文档中的详细背景、教程中的指导、用户故事等。 #### 页面内容 - [提供内容丰富，独特的页面标题](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) ### 提供内容丰富，独特的页面标题 - 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 ###### 示例：页面标题 1.主页标题 ![Home page title.png](https://images.gitee.com/uploads/images/2020/0323/230514_17f0ed85_2228511.png) 2.页面名称后跟组织名称 ![Page name followed by organization name.png](https://images.gitee.com/uploads/images/2020/0323/230513_39d50b44_2228511.png) 3.页面名称中包括流程步骤 ![Page name including step in a process.png](https://images.gitee.com/uploads/images/2020/0323/230513_4875cf5d_2228511.png) ###### 更多信息 - WCAG - [标题为2.4.2的页面](https://www.w3.org/WAI/WCAG21/quickref/#page-titled)[（了解2.4.2）](https://www.w3.org/WAI/WCAG21/Understanding/page-titled) ### 使用标题传达含义和结构 - 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 ###### 示例：使用标题来组织内容 a.标题不足 ![ Lack of headings](https://www.w3.org/WAI/tips/img/headings-poor.png) b.标题和副标题 ![ Using headings and subheadings](https://images.gitee.com/uploads/images/2020/0323/230515_861d5e01_2228511.png) ###### 更多信息 - WCAG - [标题和标签2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels)[（理解2.4.6）](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) - [本节标题2.4.10]()[（了解2.4.10）]() - [信息和关系1.3.1]()[（了解1.3.1)]() - 用户的故事 - 屏幕读者如何使用标题导航 ### 使链接文字有意义 - 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 ###### 示例：使用链接文本描述目标页面 - 无信息 有关设备独立性的更多信息，[请单击此处]()。 - 有意义的信息 [阅读有关设备独立性的更多信息]()。 ###### 更多信息 - WCGA - [链接目的（在上下文中）2.4.4](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context)[（理解2.4.4）](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context) - [链接目的（仅链接）2.4.9](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-link-only)[（理解2.4.9）](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only) ### 为图像编写有意义的文本替代 - 对于每个图像，编写替代文本，提供图像的信息或功能。对于纯装饰性的图像，没有必要编写替代文本。 例如:使用替代文本来传达重要信息 ###### 不提供信息的 充电的手机 ![image](https://images.gitee.com/uploads/images/2020/0323/230517_fc3ed4df_2228511.png) ###### 信息丰富的 将电缆插入手机底部边缘。 ![image](https://images.gitee.com/uploads/images/2020/0323/230517_fc3ed4df_2228511.png) *替代文本通常是不可见的;它包含在这个示例中，这样您就可以看到它是什么。* ###### 更多资料 - WCAG - [非文本内容1.1.1](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content)[(可理解1.1.1)](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) - 教程 - [图片](https://www.w3.org/WAI/tutorials/images/) - 用户故事 - [描述文本替代方案对盲用户的价值](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) ### 为多媒体创建文本和标题 - 对于只提供音频的内容，如播客，提供文字记录。对于音频和视频内容，如培训视频，也提供字幕。在文字记录和说明中包含对理解内容很重要的口头信息和声音，例如，“门吱嘎声”。对于视频记录，还包括对重要视觉内容的描述，例如“Athan 离开房间”。 ###### 更多资料 - WCGA - [标题(预先录制)1.2.2](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded)([理解1.2.2](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded)) - [音频描述或媒体选择(预先录制)1.2.3](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded)[(理解1.2.3)](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded) - 用户故事 - [描述字幕如何帮助聋哑学生](https://www.w3.org/WAI/people-use-web/user-stories/#onlinestudent) ### 提供明确的指示 ###### 确保指令、指导和错误消息清晰、容易理解，并避免使用不必要的技术语言。描述输入要求，例如日期格式。 - 例如：指令传达用户应该提供什么信息 - 密码至少应该是6个字符和至少一个数字(0-9)。 - 示例：错误指示问题是什么，以及如何修复它 - 用户名“superbear”已经在使用了。 - 密码至少需要包含一个数字。 ###### 更多资料 - WCAG（web内容可访问性指南） - [标签或指令3.3.2](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions)[（可理解3.3.2）](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions) - 用户故事 - [描述简单指令帮助某些学习上有困难的人](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant) ### 保持内容清晰简洁 ##### 根据上下文使用简单的语言和格式。 - 写简短、清晰的句子和段落。 - 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供一个术语表。 - 扩大首字母缩略词的使用范围。例如，Web内容可访问性指南(WCAG)。 - 考虑为读者可能不知道的术语提供一个术语表。 - 使用适当的列表格式。 - 考虑使用图像、插图、视频、音频和符号来帮助阐明含义。 ##### 举个例子:使内容可读和可理解 ###### 不必要的复杂 CPP:一旦发生车辆碰撞，公司指派的代表将设法查明所有相关方的财产损失的程度和原因。一旦我们的代表获得信息，使我们能够理解因果关系，我们可以或不可以分配适当的金钱补偿。最终的决定会引起以下选项之一:索赔是不批准并分配一个拒绝状态,说法模棱两可的状态,将需要额外的信息进行进一步的处理之前,索赔部分批准和减少支付分配和发行,或声称完全批准和总索赔付款分配和发行。 ###### 更容易理解 索赔处理程序(CPP):如果你发生了交通事故，我们的代理将进行调查。调查结果将决定任何索赔付款。这可能导致: 批准索赔-全额付款 部分批准索赔-减少付款 待定索赔-需要更多的信息 拒绝索赔-无付款 ![交通事故案例分析图](https://www.w3.org/WAI/tips/img/clear_text_diagram.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) ### 了解更多有关于网站可访问性 ###### 这些提示是你需要考虑的网页可访问性的一些事情。下面的资源可以帮助您了解为什么可访问性很重要，以及如何使web更容易被残疾人访问。 - [可访问性介绍](https://www.w3.org/WAI/fundamentals/accessibility-intro/)——介绍易访问性并提供许多有用资源的链接 - [可访问性原则](https://www.w3.org/WAI/fundamentals/accessibility-intro/)——对WCAG（Web内容无障碍指南）的要求介绍 - 残疾人士[如何使用网络](https://www.w3.org/WAI/people-use-web/)-现实生活中的例子显示可访问性对残疾人士的重要性 - [如何满足WCAG(快速参考)](https://www.w3.org/WAI/WCAG21/quickref/)-所有WCAG（Web内容无障碍指南）要求和技术的可定制参考 ## 根据WAI原则评价简书网站 #### 简书网站的优势 ###### 内容简短的标题页，有层级关系，高度概括了网页的内容，有比较高的辨识度 ![标题截图.png](https://images.gitee.com/uploads/images/2020/0323/230555_fc75bc7a_2228511.png) ###### 网站banner栏各式图标设计精简，有很强的指示性，特别突出了简书主要发表文章的功能，在新建文章处放置了羽毛笔的图标 ![banner.png](https://images.gitee.com/uploads/images/2020/0323/230555_c0e32e94_2228511.png) ###### 以数据流的形式，展示文章标题与摘要，字句简介，配以适当的图片，方便用户抓取关键信息 ![内容呈现.png](https://images.gitee.com/uploads/images/2020/0323/230553_2fc32247_2228511.png) ###### 在寻找感兴趣作者的页面，用颜色突出关键作用，引导用户关注喜欢的作者 ![颜色突出.png](https://i.loli.net/2020/03/23/PmAuOZdRY4gpJrX.png) ###### 个人主页设计简单，但涵盖了所有作者感兴趣的数据，个人主页与首页各大内容位置相近，各类功能容易符合用户的已有思维 ![主页.png](https://images.gitee.com/uploads/images/2020/0323/230557_e7cbb36b_2228511.png)