# Web_Operations **Repository Path**: qiu33/Web_Operations ## Basic Information - **Project Name**: Web_Operations - **Description**: 用于存放关于网站运营的相关内容 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-18 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 编写Web可访问性 在入门提示中 #### 摘要 此页面介绍了一些基本注意事项，以帮助您开始编写残障人士更容易访问的Web内容。这些技巧是帮助您满足Web Content Accessibility Guidelines（WCAG）要求的良好实践。遵循相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户案例等。 #### 页面内容 * 提供有意义的，独特的页面标题 * 使用标题传达含义和结构 * 使链接文字有意义 * 为图像编写有意义的文本替代 * 创建多媒体文字记录和字幕 * 提供明确的指示 * 保持内容简洁明了 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100041_abf6b704_2228431.jpeg "summary.jpg") ### 提供有意义的，独特的页面标题 对于每个网页，提供简短的标题描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100249_746767e8_2228431.jpeg "title.jpg") ### 使用标题传达含义结构 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100310_27bf299c_2228431.jpeg "content.jpg") ### 使链接文字有意义 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100455_6d1f6de4_2228431.jpeg "link.jpg") ### 为图像编写有意义的文本替代 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100518_910aad00_2228431.jpeg "images.jpg") ### 创建多媒体文字记录和字幕 对于纯音频内容（例如播客），请提供成绩单。对于音频和视频内容（例如培训视频），也提供字幕。在成绩单和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频成绩单，还包括重要视觉内容的描述，例如“ Athan离开房间”。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100646_0f22d844_2228431.jpeg "more.jpg") ### 提供明确的指示 确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100739_27ce47f3_2228431.jpeg "instructions.jpg") ### 保持内容简洁明了 根据情况，使用简单的语言和格式。 * 撰写简短明了的句子和段落。 * 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。 * 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。 * 考虑为读者可能不知道的术语提供词汇表。 * 适当使用列表格式。 * 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100848_3dde3dd2_2228431.jpeg "clear.jpg") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0318/100900_c5b9b6d4_2228431.jpeg "Information.jpg") ## 根据WAI原则点评bilibili网站 * 提供简短有意义的标题描述页面内容，使页面标题与页面主要标题相同 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201723_54139d23_2228431.jpeg "页面标题.jpg") * 在多步骤过程页面，在页面标题中包括了当前步骤，可以让用户明确自己的动作和所在页面位置 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201743_f3a56872_2228431.jpeg "多步骤标题.jpg") * 编写链接文本，使链接文字有意义，用户可以直接点击跳转，而非使用有歧义的链接文本，同时为链接提供样式，易于识别，例如，鼠标悬停时链接文字颜色发生改变 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201754_7ea77e8d_2228431.jpeg "链接文本.jpg") * 为多媒体创建字幕，在视频中提供字幕，使用户可以看懂视频内容 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201807_66557d59_2228431.jpeg "字幕.jpg") * 提供明确的指示，指导和错误信息清晰，例如：在注册页面，提示用户密码应该输入的字符长度 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201826_af894505_2228431.jpeg "提示.jpg") * 当字符长度不符合要求或昵称有问题时，会明确指示问题所在以及可能的解决方法 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201838_f85628db_2228431.jpeg "错误提示明确.jpg") * 保持内容简单明了，将重要信息使用简短清晰的句子，并且进行加粗，避免了过多文字的出现，同时，在左侧有符合活动内容的图片展示，做到图文结合 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201847_53207722_2228431.jpeg "简单句子.jpg") * 在页面中做到图标与文字结合 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201911_a2f250d9_2228431.jpeg "图文.jpg") * 提供清晰的导航，在主页面，提供了一种以上的网站导航方法 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201926_5a806923_2228431.jpeg "导航.jpg") * 跨网站页面的导航具有一致的别名，且主要导航位置不变 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0322/201940_bb86a07e_2228431.jpeg "固定导航2.jpg")