Digital Accessibility

Accessibility Is Part of Good Web Content

Accessible content is not a separate step at the end of a project. It should be part of how we write, structure, design and publish digital information from the beginning.

When content is accessible, users can:

• Understand the page structure.
• Navigate using headings and links.
• Read content clearly.
• Access information in documents.
• Understand images through alt text.
• Use videos with captions or transcripts.
• Complete tasks without unnecessary barriers

Heading Tags and Content Structure

Websites are a writing medium distinct from newspapers, magazines and books and one of the key differentiators is the notion of random access. Books are meant to be read from beginning to end and, while magazines and newspapers have discrete articles, each article is meant to be read from beginning to end. On the web, however, users may enter a site through a link or a search result and arrive on a single page where they do not have the benefit of context.

Heading tags are a tool provided in HTML that allows page authors to separate a page into sections and subsections that can quickly be scanned by visitors. For the vision and motor impaired, assistive technologies exist that allow the visitor to quickly list or jump between sections. And search engines use the headings to understand what topics are discussed in detail on the page itself.

Heading Tag Numbering

Heading tags are numbered H1 through H6 and the number refers to the level of indentation if you were to write out the page headings as an outline. H1 is reserved for the page’s title. H2 breaks the page into multiple sections. H3 breaks each section into subsections. H4 breaks each subsection into multiple under-subsections, and so on.

You should always break up a section using the next level of heading - do not skip directly from H2 to H4, for example. Sections defined by H2 tags should only ever be sub-divided using H3 tags.

The assorted page Sections provided in the Inside Montclair CMS are already set up to provide the correct heading structure, but you will need to keep the numbering in mind when using the Body Section as it allows the writer free rein with regards to headings and paragraphs.

Descriptive Heading Tags

Heading tags should describe the content contained within the section they delineate. Avoid writing “fun” heading tags that read like taglines in an advertisement. This doesn’t mean your site must be devoid of personality, but your priority should be to help users find the information they need while scrolling through the page.

Whenever it’s practical to do so, write the heading tag so that it can stand alone and be understood out of context. For example, instead of having a page structure like:

• H2: Financial Aid
  • H3: Undergraduate
  • H3: Graduate

Consider using more descriptive headings like:

• H2: Financial Aid
  • H3: Undergraduate Financial Aid
  • H3: Graduate Financial Aid

This not only helps people with disabilities navigate the headings directly, it helps people on mobile devices to keep track of where they are when they can only see one small screen at a time.

Links & Link Text

Links are the fundamental point of interaction for website visitors and they’re critical not just for helping visitors to get around but to help search engines understand the structure of our site.

When making links your first goal is to help the visitor understand what will happen when they click on that link. Write your link text such that it describes the thing you’ll get when they click on that link. Ideally any link text should be understandable when taken completely out of context. Visitors who use screen readers may choose to extract all the links on the page into a list and then navigate that list instead of the page itself - and visitors in a hurry might scroll quickly through a page looking for links and only reading the link text.

Since visitors might view just the links without context, it’s important to also ensure that links with identical labels go to the same destination, and that links with the same destination have (whenever possible) the same label. Remember that you’re trying to help the visitor understand “when I click this, I get that.” As such, consistency is your friend.

Examples of Bad Link Text

• Click Here - This link does not give any clues as to its destination.
• Visit the Financial Aid website. - This link only indicates a destination in context.
• https://www.montclair.edu - This link is annoying to listen to, and it doesn’t aid in SEO.
• Registration Instructions: Undergraduate, Graduate and Online - These links do not indicate what they link to without the preceding copy to lend context.
• View our department’s research. - This link text is too generic, and will conflict with other links in the site’s header or footer.

Examples of Good Link Text

• Montclair State University and Inside Montclair - These links use the canonical name of each site, clearly indicating that they will open the site’s homepage.
• Financial Aid Office - Clicking on this link will go to the department’s page.
• Undergraduate Registration Instructions (PDF), Graduate Registration Instructions (PDF), Online Registration Instructions (PDF) - These links clearly indicate what the user will get when they click on the link - a PDF document containing registration instructions.
• Biology Department Faculty Research - Clearly indicates that this is research done by the Biology Department’s faculty (as distinct from student research).

Link Positioning and Context

It’s important to keep in mind that users with motor impairments will have difficulty with small links or links that are too close together. While this sounds like a rare occurrence, it’s best to think of visitors using smartphones and tablets as though they are motor impaired when compared to visitors who use a mouse (as a touch-screen is inherently less precise than a mouse).

If you write a paragraph that has several links close together - not just linearly, but vertically from one line to the next - there are a few strategies you can use to make it easier to click on those links.

• Remove unnecessary links. It’s not necessary (or even desirable) to link to a thing every time it’s mentioned. If you’ve previously linked to the Biology Department on a page, for example, you don’t need to link every subsequent mention.
• Split the paragraph. You should never split a paragraph just for aesthetics, but if you have two links in a paragraph to two disparate topics, check to make sure that your paragraph isn’t also trying to cover two disparate thoughts.
• List links after the passage. If the links are important, but you want to ensure that the reader gets through the copy before following them, consider moving inline links to a bulleted list that appears after the relevant passage. You don’t have to do this on a paragraph-by-paragraph basis. Instead, consider putting your list of links before the next H2 or H3 heading and have them encompass the entire preceding section.

Links in Headings

A heading tag tells visitors that what follows is the thing that’s named in the heading - but a link tells visitors that what they get when they click is what’s named in the link. Links inside headings give conflicting information to the visitor: This is “Financial Aid” and that is “Financial Aid.” Whenever possible you should avoid putting links in headings and, instead, find ways to link to the related information after the heading using different verbiage.

When to Open Links in a New Tab

Only open links in a new tab when linking to pages that are not a part of Montclair State University. This does not mean any other website. Links from Inside Montclair to NEST, for example, should open in the same tab.

Lists

There are three types of lists provided by HTML, and each serves a slightly different function. UL (unordered list) provides a list of items where the order is not important. OL (ordered list) provides a list of items where order is important. DL (definition list) provides a way to pair terms with definitions.

Unordered Lists

The most frequently used type of list is the unordered list – sometimes called a bulleted list. A bulleted list should be used for distinct items that are somehow correlated. 

Unordered lists should not be used to create large structured documents – heading tags are for document structure. Items in unordered lists should be very short. For example:

Technologies we use:

• HTML: This is the basic document format of the web.
• CSS: This allows us to describe how a document should look.
• JavaScript: This adds functionality to elements in the HTML document.

Ordered Lists

Ordered lists are good for sequential information or for ranking.

1. Fill out the form.
2. Mail the form to admissions.
3. Complete the survey.

Definition Lists

Definition lists are rarely used but when you have a need for them they can be very helpful. They create a structure that pairs DT elements (terms) with DD elements (definitions). For example:

• Registrar’s Office
  • Handles scheduling and class registration, as well as applications for graduation.
• Student Accounts
  • Handles bill payment and financial aid disbursement.
• Academic Advising
  • Helps students choose what classes to register for based on their current degree audit.

Definition lists allow for multiple Definitions to be paired with a single Term. This can be helpful if your Term is something like “Start Date” and there are multiple start dates. It is not intended to be used to create the illusion of multiple paragraphs in a single Definition - Terms and Definitions in a Definition List should be relatively short.

Definition Lists are not included within Drupal’s visual editor interface, so if you want to use one you’ll need to add the code manually.

Tables

The table tag is intended to hold tabulated data. Unlike a list or a paragraph, data in a table is given additional meaning by its placement within the row/column structure.

Tables are required to have a THEAD and TBODY, and must use TH tags to indicate column and row headers, not TD tags, which indicate table data.

Tables take a very long time to read out in screen readers so they should be used only when absolutely necessary. If you have a table with only three rows of data or less, consider whether there are alternative ways you could present that information (like a three-item list with copy that explains the content). If you have only two columns, your data should almost always be reformatted into a Definition List instead.

Tables should never be used to create rows and columns in layout. For basic columns, use the column layout options presented in the WYSIWYG editor (labeled “50/50” and “3 column”). For more complex layouts, use the assorted page Sections available to you, like Checkerboard and Listing Section.

Images and ALT Text

ALT text (or alternative text) is used to describe an image’s content to a person who cannot see the image. It is mandatory that all images on the website have alternative text and you are responsible for providing ALT text for any images you upload.

Good ALT text should be brief and describe the visual information presented in an image. We’re all familiar with the expression that an image is worth a thousand words, but you should limit your ALT text to fewer than 25. This means that you will need to focus on the most important and relevant details of the image. 

Your goal is to communicate the same information (both factual information and feelings) in the ALT text that you intend to communicate with the image itself. If you cannot articulate a reason for your image selection, that might be a sign that you should reconsider your image selection as it probably doesn’t convey any meaning to visitors who can see it either.

Images that contain text (like logos) should reproduce all text in the image in its entirety. The University’s design conventions typically don’t allow for text in images and the site’s theme is not designed with this in mind. You should avoid text in images wherever possible. Do not post event fliers with copy on them or statistic-heavy infographics. Present the information as actual text and use non-text images to punctuate and decorate the text instead.

How to Caption Video

When presenting video on the website, University Communications and Marketing strongly recommends using YouTube as a hosting platform for several reasons - but one key reason is that YouTube has integrated support for closed captions.

When you upload a video to YouTube it will generate closed captions automatically. While the voice recognition engine is best-in-class, it still only gets things right about 95% of the time - meaning that if your video contains five hundred words worth of dialogue (two printed pages), about 25 of those words are going to be wrong. The technology to close the remaining 5% does not exist and it is up to you to review the captions and make the necessary changes.

When correcting closed captions, be sure to be on the lookout for misspelled or misinterpreted names, incorrect punctuation and capitalization, and background chatter that’s been misinterpreted as speech. Automatic text generation specifically has a difficult time with extemporaneous or improvisational speech where people may stammer, make unplanned digressions, or use filler words (like “um” or “uh”) to fill the time while they formulate their next thought.

Remember also that closed captions are not the same thing as subtitles. You should also leave notes like “[music]” or “[birds chirping]” when the video intentionally foregrounds a sound other than dialogue. You will need to use your best judgment to decide which sounds are significant enough to warrant transcription.