Digital Accessibility Compliance on CIMS HTML pages

---

NYU’s Digital Accessibility requirements are designed to ensure that all users have access to information on NYU websites. This includes, for example, users who access web content with assistive technology (e.g. screen readers) or who use alternate means of navigating a web page (e.g. keyboard navigation without a mouse). Adhering to digital accessibility standards is a legal requirement for NYU websites.

This checklist is intended to highlight the most common accessibility errors that occur on simple HTML pages and HTML content hosted through the Courant CMS systems. 

Because course homepages change from day to day and cannot be easily monitored with NYU automated accessibility monitoring tools, all course homepages and class materials (handouts, etc.) hosted on CIMS servers must be always kept behind authentication. Course homepages should be hosted in the designated directories and not in a user's home directory.

We now recommend using NYU’s automated Wordpress tool for course homepages and other sites whenever possible. Contact helpdesk@courant.nyu.edu for questions about moving course sites to wp.nyu.

Meta Tags

Every HTML page must have a language tag at the top of the page. This is applicable for small static HTML pages such as personal websites. CMS content already has meta tags configured in their parent pages.

Order of HTML Headings

HTML heading tags (e.g. <h1></h1>, <h2></h2> etc.) have semantic value for screen readers. Headings should never be used to style the appearance of text. (Use CSS for this.)

HTML should be constructed in the way an essay outline would be constructed, with major sections (<h1>), sub-points (<h2>), and so on.

Do not skip headings. If a page contains an <h2> tag it MUST contain an <h1> tag.

Images

All images must have a descriptive “alt” text as part of the <img> tag. The alt text is a description of the image which is read by screen readers and displayed if a browser cannot load an image for any reason.

An example of an image tag with alt text is:

<img src="students.jpg" alt="Students sitting in a classroom.">

Exceptions to alt Text Requirements

A common exception to alt text requirements is a decorative image used to divide a page into sections or as a background. These images should have empty alt tags.

Another common use case is when images are used as icons for navigation, for example in a navigation menu. In this case, the alt text should describe the purpose or function of the icon (e.g. alt="Search" in a search bar).

Text Decision Tree for alt Text

You can find a decision tree for how and when to use alt text here:

https://www.w3.org/WAI/tutorials/images/decision-tree/

Page Layout

Content should be positioned on the page using CSS flexboxes, CSS grid, or Bootstrap columns.

Never use HTML tables to position elements on the page. HTML tables have specific semantic value for screen readers, and this makes it very difficult for screen readers to navigate the page.

Menu Bars and Navigation

Any element used to navigate within or between pages must use the <nav></nav> tag. 

On small HTML pages, keep navigation bars simple and to a minimum. Any navigation element must be fully accessible via keyboard “tab” navigation (i.e. cycling through the links on the page using the tab key on the keyboard must allow the user to access every element in the navigation bar; if dropdown elements are hidden from tab navigation, this is inaccessible). A menu bar should generally use HTML list tags within the <nav> tags. For example:

<nav aria-label="Main menu">

  <ul id="menubar1"

      role="menubar"

      aria-label="Main menu">

    <li role="none">

      <a role="menuitem” href="#">Home</a>

    </li>

    <li role="none">

      <a role="menuitem” href="#">Bio</a>

    </li>

    <li role="none">

      <a role="menuitem” href="#">Research</a>

    </li>

  </ul>

</nav> 

A complete example of an accessible menu structure can be found here:

https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#

Links

Avoid using “click here” links. This link text may be read out of context to a user who is using a screen reader and may be confusing. Instead use a descriptive text (e.g. “summary of conference proceedings”)

More information on this can be found here:

https://webaccess.berkeley.edu/ask-pecan/click-here

PDFs

PDF must be fully accessible if they are posted publicly online. Adobe Acrobat can be used to check and fix a PDF’s accessibility: https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html

All PDFs posted on course homepages must be behind authentication and should be accessible.

It is generally easier to export a PDF in an accessible format than it is to fix an inaccessible PDF later. Always use “Save As” in Microsoft Word to create PDFs rather than using other methods (e.g. creating a PDF through the print dialog box, etc.).

InDesign can be used to create accessible PDFs if PDFs are exported in the correct way. For instructions see this guide to exporting accessible PDFs from InDesign.