技术

纽约大学网站的可访问性

纽约大学的数字访问政策现在生效了. 所有在纽约大学法律网站上增加或实质性改变的内容, 除非是在密码保护的页面上,否则必须遵循特定的策略遵从性实践.

如果您对这个话题很陌生,请浏览全国十大赌博官网的 常见问题上可访问性. 你也可以 查看记录 (使用NYU NetID登录方法). 另外, 您可以从下面的可访问性文档开始,或者浏览许多“操作”指南 纽约大学的可访问性网站.

页面标题

  • 页面标题应该简洁、独特、清晰、描述性强.
  • 这不仅为用户提供了他们在任何特定页面上所看到的内容的上下文, 但当用户在浏览器中打开多个标签时,它也会显示为TAB标题.
  • 模糊的标题例子:“Contact Us”
  • 改进的标题示例:“联系京东招生”
  • 你可以使用显示标题字段,如果你想要你的页面标题是别的东西,而不是“标题字段. 您也可以在这里输入[notitle]来指示Drupal不显示页面标题.

标题 & 标题订单

当盲人用屏幕阅读器听网页时, 他们无法像有视力的用户快速浏览页面时那样轻易地了解页面内容的组织方式. 许多盲人用户会先打开一个标题列表, 试着了解页面上有什么以及它是如何组织的. 屏幕阅读器可以让用户收听标题,并直接进入任何标题. 欲了解更多信息,请访问纽约大学的可访问性页面 创建可访问的富文本.

  • 按层次顺序正确嵌套所有标题
  • 页面标题使用H1标题,因此在页面上创建的第一个标题应该是H2.
  • 当嵌套标题时,记住在创建子部分时不要跳过关卡. 例如,一个H2标题后面可以跟一个H3,但不能跟一个H4.
  • 确保页面上每个部分的标题都有一个标题. 不要只是把它写得粗体.
  • 不要仅仅为了美观而使用标题格式. 提出一个重要的观点, 考虑将句子加粗或应用标注文本样式,而不是错误地应用标题格式.

图像及ALT文本

在某些情况下,提供写得很糟糕的ALT文本可能与根本不提供ALT文本一样糟糕. 写得很差, 模棱两可的, 或不相关的ALT文本实际上会恶化对页面的理解,并导致混乱. Alt文本通常应该:

屏幕阅读器无法将图像转换成文字,以便用户阅读, 即使图像仅由文本组成. 作为一个结果, 这是必要的图像有短, 描述性Alt文本,让屏幕阅读器用户清楚地了解图像的内容和目的. 欲了解更多信息,请访问纽约大学的可访问性页面 创建易访问的图片.

  • 写作Alt标签:

    • 保持准确和对等 在呈现与图像相同的内容和功能时.
    • 言简意赅. 这意味着图像的正确内容和功能应该尽可能简洁地呈现. 通常不超过几个字是必要的, 虽然很少,一两句简短的句子可能是合适的.
    • 不要多余 或者在图像的上下文中提供与文本完全相同的信息.
    • 不要使用“形象? ...或者“图形的” ...来描述这张照片. 对于用户来说,它通常是一个图像. 如果图像传达的是内容, 用户通常不需要知道是图像在传递内容, 而不是文本
    • 当图像被用作链接时, 使用Alt文本来描述图像的功能,例如它链接到哪里,而不是描述图像本身的内容.
  • 如何在上传图片时添加ALT文本:

    • 每次上传图片到网站时,请确保在ALT文本框中添加ALT标签. 使用“浏览”按钮,在你的电脑中搜索你想要上传的图像文件.
    • 添加图像弹出窗口
    • 一旦您选择了要上传的图像,将出现Alternative文本字段. 它是听到你会在你的ALT文本为你新上传的图像. Also remember to; include a Name for the image, 将已发布的复选框标记为, 然后点击“保存”来保存所有的修改. 
    • 添加图像弹出窗口ALT文本字段
  • 如何检查页面上的图像是否已经有ALT文本:

    • 为了检查现有的图像是否已经有ALT标签, 导航到页面,希望你检查图像是否有ALT标签,然后点击“编辑”
    • 在WYSIWYG中,双击图像,应该会弹出一个窗口
    • Embded媒体弹出
    • 在“Embed Media”弹出框中,点击“Selected Entity”下的图像链接.这将把你带到图像页面,你将在那里点击“编辑”。
    • 编辑图片页面
    • 这里您将看到“Alternative Text”字段是否为空. 如果一个图像已经有ALT文本,它会出现在这里. 如果图片没有,请在栏中输入ALT文本,然后点击“保存”
    • 图像替代文本域

网页链接:

超文本链接是HTML中最基本的元素之一. 像这样, 使超文本链接可访问是网站可访问性最基本和最重要的方面之一,以便用户, 无论是直接还是通过使用某种辅助技术, 可以访问它们. 因为链接对于网络内容的功能来说是非常基本的, 无法访问的链接是阻碍整体访问的最严重障碍之一. 欲了解更多信息,请访问纽约大学的可访问性页面 创建可访问的富文本.

  • 使用“点击这里”或“阅读更多”链接——链接有意义的单词或短语
  • 不正确的例子: "点击这里" or "阅读更多"
  • 正确的例子: "阅读全国十大赌博官网的常见问题解答" or "...在那里你会看到一个列表 全国十大赌博官网十大赌博靠谱信誉平台" or "...全国十大赌博官网的解释 职业咨询服务"
  • 屏幕阅读器无法提供链接文本以外的上下文——这意味着一个页面上的多个“点击这里”链接看起来都是一样的.
  • 当图像被用作链接时, 使用Alt文本来描述图像的功能,例如它链接到哪里,而不是描述图像本身的内容.
  • 当创建一个新链接时,请确保该链接不会在新窗口或标签页中打开

pdf及档案连结:

  • 链接文件时,将标题、文件类型和大小作为链接文本的一部分.

  • 你可以通过右键点击你的PDF文件,然后点击“获取信息”来找到文件大小等信息.”

表:

在页面上集成适当的结构可以让人们更容易地使用屏幕阅读器. 不要在其预期用途之外使用结构元素. 例如, 使用表格元素布局来创建列会让依赖屏幕阅读软件的用户感到困惑. 屏幕阅读器将宣布表的结构, 用户可能认为自己在浏览表格数据,其实不然. 欲了解更多信息,请访问纽约大学的可访问性页面 创建可访问表.

  • 表标题/名称:

    • 数据表的名称/标题应该准确地描述该表的唯一标识或用途, 有意义的, 而简洁地. 每个数据表在同一页面上的其他表的上下文中应该是唯一的
    • 当用户导航到表时,屏幕阅读器读取表的标题或名称, 让用户了解表格是关于什么的.
    • 例子:
           
         
            
               
                  
                  
                  
               
            
            
               
                  
                  
                  
               
            
           
      1st Quarter Results
       GoalActual
      January$200,000$150,000
  • 表头:

    • The only way that screen readers can know if a table cell is a header is by marking it with . 如果标题单元格在第一行, 屏幕阅读器将假设它们应用于下面的列(有一个隐式作用域="col").
    • scope属性在表标题单元格与其相应的数据单元格之间建立了显式的关联. 对于简单的关联, 列标题的选项是scope="col", 而scope="row"用于行标题.
    • 如果标题单元格中的文本是模糊的(例如, 命名为“第二列”), 或者它是否包含无关的信息(如链接), 按钮或不是列名的额外描述), 这可能会让屏幕阅读器用户感到困惑. 最好保持标题文本的准确和简单.
    • 例子:
           
         
            
               

                  

                  

                  

                  

               

            

            
               
                  
                  
                  
                  
               
           
      Greensprings Running Club Personal Bests
      Name1 mile5 km10 km
      Mary8:3228:041:01:16
  • 如何检查一个表是否有标题和标题:

    • 检查现有表是否已经有表标题/名称和标题, 导航到你想要检查的表格页面,然后点击“编辑”
    • 在WISYWIG, 右键点击表格,然后点击“表格属性”或点击工具栏中的表格图标
    • 该弹出窗口有一个“标题”字段. 如果一个表已经有标题文本,它将出现在这里. 如果图像没有,则在字段中输入Caption文本
    • 如果你的表已经有标题, 标题下拉菜单将显示“第一行”,”“第一列,”或两.
    • 更改完成后,单击“确定”
    • 表标题和属性
  • 先进的表:

文件(pdf、Word文档等.):

颜色对比:

对于大多数网站用户来说,一个关键的可用性帮助是确保文本颜色和背景颜色之间有一个高对比度. 这对于那些有视觉障碍的人来说尤其重要,因为他们会影响视力或颜色感知. 当文本与背景之间的对比不够时, 有些人会发现它很难或不可能阅读.

  • 为了测试你的对比度,使用 颜色对比检查 输入前景色和背景色.
  • 对于大小文本,如果它们确实有足够的对比度,您应该会在WCAG AA下看到一个绿色的“通过”气泡.

网络写作——内容、语言和可读性:

内容应该以简单的语言和清晰的格式组合在一起,以适应当前的环境. 要做到这一点,有些方法是确保句子和段落简短明了, 应该避免使用不必要的复杂语言. 欲了解更多信息,请访问纽约大学的可访问性页面 为网络写作.

  • 使用辅助技术的用户能够更好地浏览不杂乱的网站.
  • 清晰易用的网站会吸引更多的浏览者. 他们通过呈现简洁、易于导航的内容来做到这一点,同时避免页面显得凌乱.
  • 用户喜欢能够快速找到他们感兴趣的内容,而不需要花时间搜索. 设计一个定义良好的网站,提供易于查找的信息,这证明对用户和网站所有者都是有用的.

媒体/视频字幕:

想象一下看一部没有音频的电影, or listening to dialogue without watching the screen; it would be difficult to understand the full context of the movie. 如果您的页面包含视频内容, 提供标题是必要的, 成绩单, 和/或音频描述,以确保所有用户能够理解您的视频的信息. 欲了解更多信息,请访问纽约大学的可访问性页面 媒体和视频字幕.

  • 视频内容必须标题,以确保所有用户能够理解您的视频的信息. 音频内容必须有文字记录.

电子邮件 & 可访问性:

就像网站的可访问性, 电子邮件的可访问性是非常重要的,它与许多应用于网站的概念是相同的. 如果可能的话, 确保遵守培训和本文档中指出的可访问性提示, 进入你自己的邮件群发中,比如正确的标题 & 标题订单, 包括图像的Alt文本, 正确使用描述性超链接, 足够的颜色对比, 最后, 用简单的语言和清晰的格式编写适合手边环境的网页.

欲了解更多信息,请访问Mailchimp的页面 电子邮件营销中的可访问性.