Accessibility for NYU Websites
All content added to or substantially changed on any public NYU Law website must follow specific accessibility practices for policy compliance.
If this topic is new to you, please review our FAQ on accessibility. You can also view a recording of one of our earlier trainings (use the NYU NetID sign-in method).
Alternatively, you can start with our accessibility documentation below or browse the many 'how-to' guides on NYU's accessibility website.
Note: the following content refers to webpage accessibility. See the section menu for topics like:
Page Titles
- Page titles should be concise, unique, clear and descriptive.
- Not only does this give users context of what they are looking at on any particular page, but it also appears as the tab title when a user has multiple tabs open in a browser.
- Vague Title Example: “Contact Us”
- Improved Title Example: “Contact JD Admissions”
- You can use the Display Title field if you want your page title to be something other than the 'Title field. You can also type [notitle] here to instruct Drupal not to display a page title.
Headings
When people who are blind listen to web pages with their screen readers, they can't easily get a sense for the way the content on a page is organized in the same way that sighted users can with a quick glance. Many blind users will have the screen reader read a list of the page's headings first, to see how the content is organized. Screen readers let users listen to the headings and jump directly to any of the headings. For more information visit NYU's Accessibility page on Creating Accessible Rich Text.
- Properly nest all headings in hierarchical order
- Your first heading you create on the page should be an H2. The page title uses the H1 heading.
- When nesting headings, remember not to skip levels when creating sub-sections. For example, 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 just make it bold.
- Don’t use the heading format solely for aesthetic purposes. To call out an important point, consider making that sentence bold or applying a callout text style instead of incorrectly applying a heading format.
Images and ALT texts
In some cases, providing poorly written ALT text can be as bad as not providing ALT text at all. Poorly written, ambiguous, or irrelevant ALT text can actually worsen understanding of a page and cause confusion. Alt text should typically:
Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose. For more information visit NYU's Accessibility page on Creating Accessible Images.
Writing Alt Texts:
- Be accurate and equivalent in presenting the same content and function as presented by the image.
- Be succinct. This means the correct content and function of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
- DO NOT be redundant or provide the exact same information as text within the context of the image.
- DO NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It’s usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user knows that it is an image that is conveying the content, as opposed to text
- When an image is used as a link, use the Alt text to describe the function of the image such as where it links to rather than describe the content of the image itself.
Webpage Links:
Hypertext links are one of the most basic elements of HTML. As such, making hypertext links accessible is one of the most basic and most important aspects of web accessibility so that users, whether directly or through the use of some sort of assistive technology, can access them. 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 Accessibility page on Creating Accessible Rich Text.
- DO NOT use “click here” or “read more” for links -- link meaningful words or phrases
- Incorrect Examples: "Click here" or "Read more"
- Correct Example: "Read our FAQ" or "...there you will see a list of our upcoming events" or "...an explanation of our career counseling services"
- Screen readers are unable to provide context to a link beyond the linked text — which means multiple “click here” links on a page all appear to be the same.
- When an image is used as a link, use the Alt text to describe the function of the image such as where it links to rather than describe the content of the image itself.
- When creating a new link, the link should open in the same tab or window. Please don't set links to open a new tab or window.
Links to PDFs and Files:
- When linking a file, include the title, the file type and size as part of the linked text.
- Example: NYU Identity Style Guide (PDF: 367 KB).
- Information such as the file-size of your PDF can be found by right-clicking on your PDF and then clicking “Get Info.”
Tables:
For more information visit NYU's Accessibility page on Creating Accessible Tables.
Table Captions/Names:
- The name/caption of a data table SHOULD describe the unique identity or purpose of the table accurately, meaningfully, and succinctly.
- Screen readers read the caption or name of the table when users navigate to the table, giving users a sense of what the table is about.
Table Headers:
- Screen readers rely on key markup within the table to communicate information to the reader. Column and/or row headings need to be marked as such so the screen reader can announce them correctly.
- When you create a table in the editor, click on the heading row, then click on the row icon that shows in the small popup tools menu.
- Make sure the Header row toggle is showing green, not gray. This automatically adds the correct markup to the table.
- If you are using row headings, do the same as above: click anywhere in your heading column, then choose the column icon in the popup tools menu. Make sure the Header column is set to green/on.
- If the text in the header cell is vague (for example, naming it "Column 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.
Advanced Tables:
- For larger more complex tables, please reach out to law.web@nyu.edu with your request and someone will assist you with building out your advanced table.
Files (PDFs, Word Docs, etc.):
- Please visit our page on Creating Accessible PDFs.
Color Contrast:
A key usability aid for the majority of web site users is to make sure that there is a high contrast between the color of text and the color of its background. This is particularly important for people with visual impairments that affect visual acuity or color perception. When there is insufficient contrast between text and its background, some people will find it difficult or impossible to read.
- In order to test your contrast, use the Color Contrast Checker to input the foreground color and background color.
- You should see a green “Pass” bubble under WCAG AA for both small and large text if their is indeed enough contrast.
Writing for the Web - Content, Language, and Readability:
Content should be put together with simple language and clear formatting that is appropriate for the context at hand. Some ways to do this are to make sure that sentences and paragraphs are short and clear, and unnecessary complex language should be avoided. For more information visit NYU's Accessibility page on Writing For The Web.
- Users using assistive technology are better able to navigate a site that is not cluttered.
- Websites that are clear and easy to navigate get more viewers. They do so by presenting content that is concise and easy to navigate while avoiding pages that appear cluttered.
- Users appreciate when they can quickly locate content that is of interest to them without having to spend time searching for it. Designing a well-defined site with easy-to-find information proves useful for the user as well as the site owner.
Media/Video Captions:
Imagine watching a movie without the audio, or listening to dialogue without watching the screen; it would be difficult to understand the full context of the movie. If your page includes video content, it’s essential to provide captions, transcripts, and/or audio descriptions to ensure all users are able to understand your video’s message. For more information visit NYU's Accessibility page on Media and Video Captions.
- Video content must be captioned, to ensure all users are able to understand your video’s message. Audio content must have a transcript.
Emails & Accessibility:
Like website accessibility, email accessibility is very important and shares many of the same concepts that apply to websites. If possible, make sure to adhere to the accessibility tips pointed out in training and this documentation, into your own email blasts such as proper headings & heading order, including Alt Text for images, proper use of descriptive hyperlinks, enough color contrast, and lastly, writing for the web with simple language and clear formatting that is appropriate for the context at hand.
For more information, visit Mailchimp's page on Accessibility in Email Marketing.