# WebOperate **Repository Path**: Michael07/WebOperate ## Basic Information - **Project Name**: WebOperate - **Description**: No description available - **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**: 2021-07-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # :pencil2: 为网页可访问性而写 > ### :thought_balloon: *产品人员要意识到产品是他们本身的延伸* ### :book: WEB可访问性 ![](/images/1.png) - 这个页面介绍了一些基本的注意事项,帮助您开始编写残疾人更容易访问的web内容。 - 这些技巧都是不错的练习可以帮助你满足Web Content Accessibility Guidelines(WCAG)的要求。 - 遵循WCAG需求相关的链接,详细的背景在“理解”文档,指导教程,用户故事等等。 -------------------------------------------------- ### :star2: 1. 提供有意义、独特的页面标签 - 为每一个网页设置一个小标题去描述网页内容和将其与其他网页分开。 - 这个页面标题一般和页面的主标题是一样的。 - 把最独特、相关的信息放在第一位；例如，把页面的名字放在组织的名字之前。 - 对于多步骤的页面，在页面标题中包括当前步骤。 主页面标题 :point_down: 页面名称后跟组织名称 :point_down: 页面名称包含流程中的步骤 :point_down: ![](/images/2.png) ------------------------------------------------------ ### :small_blue_diamond: 2. 用标题去传达意义和结构 - 使用短标题将相关段落分组，并清楚标注各部分。 - 好的标题提供了内容的大纲。 ![](/images/3.png) --------------------------------------------------------------- ### :small_orange_diamond: 3. 使文本链接有意义 - 编写连接文本，以描述连接目标的内容。 - 避免使用模糊不清的连接文本，例如“单击此处”或“阅读更多”。 - 指示有关链接目标的相关信息，例如文件类型和大小，例如“建议文档”。 ![](/images/4.png) ----------------------------------------------------------------- ### :small_red_triangle: 4. 为图像编写有意义的文本替代品 - 对于每个图像，编写提供图像信息或功能的可选文本。 - 对于纯粹的装饰性图像，不需要编写替代文本。 ![](/images/5.png) ------------------------------------------------------------------ ### :small_red_triangle_down: 5. 为多媒体制作文本和标题 - 对于纯音频内容，比如播客，提供一个文本。 - 对于音频和视频内容，如培训视频，也提供标题。 - 在抄本和标题中包括对理解内容很重要的口语信息和声音，例如，“门吱吱作响”。 - 对于视频抄本，还包括对重要视频内容的描述，例如“Athan leaves the room”。 ![](/images/6.png) ---------------------------------------------------------------- ### :ledger: 6. 提供明确指示 - 确保说明、指导和错误信息清晰易懂，避免使用不必要的技术语言。 - 描述输入要求，如日期格式。 ![](/images/真7.png) ---------------------------------------------------------------- ### :books: 7. 保持内容简洁明了 - 根据上下文使用简单的语言和格式。 - 写出简短、清晰的句子和段落。 - 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。 - 首次使用时展开首字母缩略词。例如，Web内容可访问性指南（WCAG）。 - 首次使用时展开首字母缩略词。例如，Web内容可访问性指南（WCAG）。 - 根据需要使用列表格式。 - 考虑使用图像、插图、视频、音频和符号来帮助阐明含义。 ![](/images/8.png) ------------------------------------------------ # WAI手册点评广东省政府官网 > ### :thought_balloon: Design for everyone. --- ### :closed_book: 残疾人能更容易使用该网站吗？ + 在广东省人民政府网右侧边栏有无障碍按钮 + 点击后进入无障碍界面： 鼠标悬停处语音播报，无论是文字、图片、超链接 。 + 整个网站界面均为黑白色调无其他色调，避免对色盲色弱产生困扰。 + 有简体字与繁体字切换，可满足简繁字体受限制的需求 ![](/images/无障碍浏览.png) ![](/images/图标.png) ---------- ### :orange_book: 有意义、独特的网页标签 + 页面与页面之间用不同的网页标签分开 + 页面的名字放在组织之前 + 包含流程图（面包屑导航） ![](/images/页面标题与主标题.png) ![](/images/流程图面包屑导航.png) --------------- ### :bust_in_silhouette: 标题传达意义与结构 + 标题为内容大纲 + 但没有小标题对内容进行分类 ![](/images/全文无小标题.png) --------------- ### :see_no_evil: 使文本链接有意义 + 超链接表达清晰 + 但无明显超链接标志如下划线、超链接经典颜色等 ![](/images/超链接.png) --------------------- ### :see_no_evil: 为图像编写有意义的文本替代品 + 图像下方有文本解释 ![](/images/图片说明.png) -------------------- ### :see_no_evil: 提供明确指示 + 需要进一步操作的地方都有明确指示且是基于零基础使用者的同理心设计的指示 ![](/images/描述输入要求.png) ----------------------- ### :see_no_evil: 保持内容简洁明了 + 政府文件与通稿有一定专业性、权威性或与“简单的语言”相冲突 + 未能提供术语词汇表 + 使用矢量图案帮助阐明含义 ![](/images/符号阐明意义.png) ----------------------------------- ### 点击正文时偶发性弹出广告 + 政府官网弹广告削弱可信度 ![](/images/广告.png) by余宗怡、梁昊、钟振升