技术

纽约大学网站的可访问性

NYU's digital accessibility policy is now in effect. All content added to or substantially changed on any public NYU 法律 website—meaning, 除非是在有密码保护的页面上,否则必须遵循特定的策略遵循实践.

If this topic is new to you, please review our 无障碍的常见问题. 你也可以 查看录音 of one of our earlier trainings (use the NYU NetID sign-in method). 另外, 你可以从下面的易访问性文档开始,或者浏览许多“如何”指南 纽约大学无障碍网站.

页面标题

  • Page titles should be concise, unique, clear and descriptive.
  • 这不仅为用户提供了他们在任何特定页面上正在查看的内容的上下文, but it also appears as the tab title when a user has multiple tabs open in a browser.
  • 模糊标题示例:“乐鱼app下载”
  • Improved Title 例子: “Contact JD招生”
  • 你可以使用Display Title字段,如果你想让你的页面标题是'Title字段以外的东西. 你也可以 type [notitle] here to instruct Drupal not to display a page title.

标题 & 标题订单

When people who are blind listen to web pages with their screen readers, 他们无法像视力正常的用户快速浏览一样,轻松地感知页面上内容的组织方式. Many blind users will pull up a list of headings first, to try to get a sense of what is on the page and how it is organized. 屏幕阅读器允许用户听标题并直接转到任何标题. For more information visit NYU's 可访问性 page on 创建可访问的富文本.

  • Properly nest all headings in hierarchical order
  • 页面标题使用H1标题,因此在页面上创建的第一个标题应该是H2.
  • When nesting headings, remember not to skip levels when creating sub-sections. 例如, an H2 heading can be followed by an H3 but not an H4.
  • Make sure each section heading on the page uses a heading. 不要只是加粗.
  • Don’t use the heading format solely for aesthetic purposes. 指出重要的一点, 考虑将该句子加粗或应用标注文本样式,而不是错误地应用标题格式.

图片和ALT文本

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

屏幕阅读器无法将图像翻译成文字供用户阅读, 即使图像仅由文本组成. 结果是, 图像有必要简短, 描述性Alt文本,以便屏幕阅读器用户清楚地了解图像的内容和目的. For more information visit NYU's 可访问性 page on 创建可访问映像.

  • 书写Alt标签:

    • 准确和等效 in presenting the same content and function as presented by the image.
    • 言简意赅. 这意味着图像的正确内容和功能应该尽可能简洁地呈现. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
    • 不要冗余 or provide the exact same information as text within the context of the image.
    • 不要使用“image of ? ...或“图形的。 ...来描述图像. It’s usually apparent to the user that it is an image. 以及图像是否在传达内容, 通常情况下,用户不需要知道它是传达内容的图像, 与文本不同
    • 当使用图像作为链接时, 使用Alt文本来描述图像的功能,例如它链接到哪里,而不是描述图像本身的内容.
  • How to add ALT text when uploading an image:

    • 每次图片上传到网站时,请确保在ALT文本框中添加ALT标签. Using the "Browse" button, search your computer for the image file you wish to upload.
    • 添加图像弹出窗口
    • Once you have selected your image for upload, the Alternative text field will appear. It is hear where you would type in your ALT text for your newly uploaded image. Also remember to; include a Name for the image, 将复选框标记为Published, and to click "Save" to retain all of your changes. 
    • 添加图像弹出窗口ALT文本字段
  • How to check if an image on a page already has ALT text:

    • In order to check if an existing image already has an ALT Tag or not, navigate to the page wish you to check if images have ALT tags and click “Edit”
    • In the WYSIWYG, double click the image and a window should pop-up
    • 嵌入式媒体弹出
    • In the “Embed Media” pop-up, click the link of the image under “Selected Entity.” This will take you to the images page where you will click “Edit”
    • 编辑图片页面
    • Here you will see if the “Alternative Text” field is empty or not. If an image already has ALT text it would appear here. If an image doesn’t, enter the ALT text into the field and click “Save”
    • 图像可选文本字段

网页链接:

Hypertext links are one of the most basic elements of HTML. 像这样, 使超文本链接可访问是web可访问性的最基本和最重要的方面之一,以便用户, whether directly or through the use of some sort of assistive technology, 可以访问它们. Because links are so basic to the functionality of web content, inaccessible links are one of the most severe barriers to overall accessibility. For more information visit NYU's 可访问性 page on 创建可访问的富文本.

  • use “click here” or “read more” for links -- link meaningful words or phrases
  • 不正确的例子: "点击这里" or "阅读更多"
  • 正确的例子: "阅读乐鱼app下载的常见问题" or "...在那里您将看到一个列表 乐鱼app下载即将举办的活动" or "...乐鱼app下载的解释 职业咨询服务"
  • 屏幕阅读器无法提供链接文本之外的上下文,这意味着页面上的多个“点击这里”链接看起来都是一样的.
  • 当使用图像作为链接时, 使用Alt文本来描述图像的功能,例如它链接到哪里,而不是描述图像本身的内容.
  • When creating a new link, make sure the link DOES NOT open in a new window or tab

pdf及档案的连结:

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

  • 诸如PDF文件大小之类的信息可以通过右键单击PDF,然后单击“获取信息”来查找.”

表:

在页面上集成适当的结构可以让人们更容易使用屏幕阅读器. Do not use structural elements outside of their intended purpose. 例如, 使用表格元素布局创建列会使依赖屏幕阅读软件的人感到困惑. The screen reader will announce the structure of a table, and users may believe they are navigating through tabular data when they are not. For more information visit NYU's 可访问性 page on 创建可访问表.

  • 表标题/名称:

    • 数据表的名称/标题应该准确地描述该表的唯一标识或用途, 有意义的, 而简洁地. Each data table SHOULD be unique within the context of other tables on the same page
    • 当用户导航到表时,屏幕阅读器读取表的标题或名称, giving users a sense of what the table is about.
    • 例子:
           
         
            
               
                  
                  
                  
               
            
            
               
                  
                  
                  
               
            
           
      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 . 如果标题单元格在第一行, 屏幕阅读器会假设它们适用于下面的列(有一个隐式的scope="col").
    • scope属性在表标题单元格与其对应的数据单元格之间建立了显式关联. 对于简单的关联, the options are scope="col" for column headers, 对于行标题,scope="row".
    • If the text in the header cell is vague (for example, 命名为“列2”), or if it contains extraneous information (like links, buttons or extra descriptions that aren't the name of the column), it can be confusing for screen reader users. It's best to keep the header text accurate and simple.
    • 例子:
           
         
            
               

                  

                  

                  

                  

               

            

            
               
                  
                  
                  
                  
               
           
      Greensprings Running Club Personal Bests
      Name1 mile5 km10 km
      Mary8:3228:041:01:16
  • How to check to see if a table has Headers and Captions:

    • To check if an existing table already has a Table Captions/Name and Headers, navigate to the page with the table you wish to check and click “Edit”
    • 在WISYWIG里, 右键单击表格并单击“表格属性”或单击工具栏中的表格图标
    • 弹出窗口有一个“标题”字段. If a table already has caption text it would appear here. If an image doesn’t, enter the Caption text into the field
    • 如果您的表已经有标题, the Headers dropdown will show either “First Row,"第一栏,或两者皆有.
    • 修改完成后,点击“确定”
    • 表标题和属性
  • 先进的表:

    • For larger more complex tables, please reach out to 法律.web@topstoreyapps.com with your request and someone will assist you with building out your advanced table.

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

颜色对比:

对于大多数网站用户来说,一个关键的可用性帮助是确保文本颜色和背景颜色之间有高度的对比. 这对于有视力障碍、影响视力或颜色感知的人来说尤其重要. When there is insufficient contrast between text and its background, some people will find it difficult or impossible to read.

  • 为了测试对比度,请使用 颜色对比检查器 to input the foreground color and background color.
  • 如果它们的对比度确实足够大,那么在WCAG AA下,你应该看到一个绿色的“Pass”气泡.

Writing for the Web - Content, Language, and Readability:

内容应该使用简单的语言和适合当前上下文的清晰格式组合在一起. 做到这一点的一些方法是确保句子和段落简短清晰, and unnecessary complex language should be avoided. For more information visit NYU's 可访问性 page on 为网络写作.

  • 使用辅助技术的用户能够更好地浏览一个不杂乱的网站.
  • Websites that are clear and easy to navigate get more viewers. 他们通过呈现简洁、易于浏览的内容来做到这一点,同时避免页面看起来混乱.
  • 当用户可以快速找到他们感兴趣的内容而不必花时间搜索时,他们会很高兴. 设计一个定义明确、信息易于查找的网站对用户和网站所有者都很有用.

媒体/视频字幕:

想象一下看一部没有音频的电影, or listening to dialogue without watching the screen; it would be difficult to understand the full context of the movie. 如果您的页面包含视频内容, 提供标题是必要的, 成绩单, 和/或音频描述,以确保所有用户都能理解视频的信息. For more information visit NYU's 可访问性 page on 媒体和视频字幕.

  • 视频内容必须配上字幕,以确保所有用户都能理解视频的信息. 音频内容必须有文字记录.

电子邮件 & 可访问性:

比如网站的可访问性, 电子邮件的可访问性是非常重要的,并分享了许多适用于网站的相同概念. 如果可能的话, 确保遵守培训和本文档中指出的可访问性技巧, into your own email blasts such as proper headings & 标题订单, 包括图像的Alt文本, 正确使用描述性超链接, 足够的色彩对比, 最后, 使用简单的语言和清晰的格式为网络写作,适合于手边的上下文.

For more information, visit Mailchimp's page on 电子邮件营销中的可访问性.