Code Monkey home page Code Monkey logo

web-operation-and-management's Introduction

step 1 :翻译Tips for Getting Started Writing for Web Accessibility的原则

编写Web可访问性

摘要

此页面介绍了一些基本注意事项,以帮助您开始编写残障人士更容易访问的Web内容。这些技巧是帮助您满足Web Content Accessibility Guidelines(WCAG)要求的良好实践。遵循相关WCAG要求的链接,“理解”文档中的详细背景,教程指南,用户案例等。

页面内容

  • 提供内容丰富,独特的页面标题
  • 使用标题传达含义和结构
  • 使链接文字有意义
  • 为图像编写有意义的文本替代
  • 创建多媒体文字记录和字幕
  • 提供明确的指示
  • 保持内容简洁明了

提供内容丰富,独特的页面标题

对于每个网页,请提供简短的标题,以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位;例如,将页面名称放在组织名称之前。对于属于多步骤过程的页面,请在页面标题中包括当前步骤。

示例:页面标题

例子1


使用标题传达含义和结构

使用短标题将相关段落分组,并清楚地描述各节。好的标题提供了内容的大纲。

示例:使用标题来组织内容

例子2


使链接文字有意义

编写链接文本,以描述链接目标的内容。避免使用歧义的链接文本,例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息,例如文档类型和大小,例如“建议文档(RTF,20MB)”。

示例:使用链接文本描述目标页面

例子3


为图像编写有意义的文本替代

对于每个图像,编写提供图像信息或功能的替代文本。对于纯装饰性图像,无需编写替代文本。

示例:使用替代文本传达重要信息

例子4


创建多媒体文字记录和字幕

对于纯音频内容(例如播客),请提供成绩单。对于音频和视频内容(例如培训视频),也提供字幕。在成绩单和字幕中包括对理解内容很重要的语音信息和声音,例如“门吱吱作响”。对于视频成绩单,还包括重要视觉内容的描述,例如“ Athan离开房间”。


提供明确的指示

确保说明,指导和错误消息清晰,易于理解,并避免不必要的技术性语言。描述输入要求,例如日期格式。

示例1:说明传达用户应提供哪些信息

例子5-1

示例2:错误指示问题所在以及可能的解决方法

例子5-2


保持内容简洁明了

根据情况,使用简单的语言和格式。

  • 撰写简短明了的句子和段落。
  • 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。
  • 首次使用时请缩写。例如,Web内容可访问性指南(WCAG)。
  • 考虑为读者可能不知道的术语提供词汇表。
  • 适当使用列表格式。
  • 考虑使用图像,插图,视频,音频和符号来帮助阐明含义。

示例:使内容易读易懂

例子6

step2 :根据WAI原则点评任意一个网站

根据WAI原则点评网站"MDN Web docs"

点评网站链接 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element


网站"MDN Web docs"具备以下原则:

  1. 使链接文字有意义
  2. 使用标题传达含义和结构
  3. 提供内容丰富,独特的页面标题
  4. 保持内容简洁明了

原则1:使链接文字有意义

分析:页面该部分使链接文字有意义,编写链接文本,以描述链接目标的内容。这里的蓝绿色文字的15个链接不单止罗列出信息,而且让有意义的文字呈现出该页面所传达给用户的需求部分。

示例1


原则2:使用标题传达含义和结构

分析:在主标题("HTML元素参与")下使用副标题("主根元素","文档元数据"……)将相关段落分组,并清楚地描述各节,良好的标题和及结构让内容大纲逻辑清晰。

示例2.


原则3:提供内容丰富,独特的页面标题

分析:页面侧边栏下半部分的"introduction to HTML"具有隐藏详情内容选项,展开后所点击的内容链接都拥有独特的页面标题。

示例3-1

示例3-2.


原则4:保持内容简洁明了

分析:页面该部分以列表形式简短明了的地撰写了元素与其描述的关系,考虑使用特殊的字体呈现方式来突出关键词帮助阐明含义。

3bb8e16545d1c376f872791657d47c52.png

web-operation-and-management's People

Contributors

zile-newmedia avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.