NYU's digital accessibility policy is now in effect. All content added to or substantially changed on any public NYU Law website—meaning, unless it is on a password-protected page—must follow specific 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.
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 & Heading Order
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 pull up a list of headings first, to try to get a sense of what is on the page and how it is organized. Screen readers let users listen to the headings and go 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
- The page title uses the H1 heading, so the first heading created on the page should be an H2.
- 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 text
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 Tags:
- 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.
-
How to add ALT text when uploading an image:
- Every time an image is uploaded to the website, make sure to add an ALT tag in the Alt text field. 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, mark the checkbox for Published, and to click "Save" to retain all of your changes.
-
-
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”
-
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, make sure the link DOES NOT open in a new window or tab
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:
Integrating proper structure on your pages makes it easier for people using screen readers. Do not use structural elements outside of their intended purpose. For example, using table elements for layout to create columns can confuse individuals relying on screen reading software. 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 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. Each data table SHOULD be unique within the context of other tables on the same page
- 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.
- Example:
<table>
<caption>1st Quarter Results</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Goal</th>
<th scope="col">Actual </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td>$200,000</td>
<td>$150,000</td>
</tr>
<tbody>
</table>
-
Table Headers:
- The only way that screen readers can know if a table cell is a header is by marking it with <th>. If header cells are on the 1st row, screen readers will assume that they apply to the columns below (there is an implicit scope="col").
- The scope attribute makes an explicit association between the table header cell and its corresponding data cells. For simple associations, the options are scope="col" for column headers, and scope="row" for row headers.
- 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.
- Example:
<table>
<caption>Greensprings Running Club Personal Bests</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">1 mile</th>
<th scope="col">5 km</th>
<th scope="col">10 km</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>8:32</td>
<td>28:04</td>
<td>1:01:16</td>
</tr>
</table>
-
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”
- In the WISYWIG, right click the table and click “Table Properties” or click the table icon in the toolbar
- That pop-up window has an “Caption” field. If a table already has caption text it would appear here. If an image doesn’t, enter the Caption text into the field
- If your table already has headers, the Headers dropdown will show either “First Row,” “First Column,” or both.
- Once you changes have been made, click “OK”
-
-
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.