BSPH Website Help Desk

Quick Need-to-Know Overview

See the following pages for detailed explanations for each convention.

• Headings
  Use headings to separate your content into meaningful sections.
  
  
• Use Descriptive Hyperlinks
  Use descriptive link text to signal where the link will take the user.
  
  
• Alternative Text
  Include alt text to images to describe images to visitors who are unable to see them.
  
  
• Avoid Images of Text
  Do not use an image of text when you can use plain text to convey the same information.
  
  
• Making Complex Images Accessible
  Provide text descriptions/alternatives for all complex images (infographics, data and graphs, flowcharts and diagrams, maps, and org charts).
  
  
• Ensure Audio and Video are Accessible
  Ensure audio and video are accessible by providing captions, transcripts and/or descriptive audio.
  
  
• Use of Color
  Don’t rely on color alone to convey the meaning of content and make sure the colors you use have enough contrast.
  
  
• Document Accessibility
  Avoid using documents as much as possible. Convert documents to web content, including forms. If you must use a document, make it accessible by following the guides in our documentation.

About Accessibility

Digital Accessibility is the inclusive practice of designing and creating websites and other electronic information to be usable by as wide an audience as possible, including those with disabilities. Digital accessibility encompasses all disabilities that affect digital access, including auditory, cognitive, physical, neurological and visual disabilities.  

Learn more about Digital Accessibility at JHU →

Headings

Headings are about more than just visuals. They provide structure to a page and serve as an outline and they should be used to separate your content into meaningful sections. Headings are essential to screen reader applications which allow a user to jump between headings and thus navigate the page.

It is critical to keep headings in order and use consistently. Do not skip heading levels or choose headings based on how they look (style). Never use bold, italicize, underline, etc. to define sections on your page instead of headings.

Use Descriptive Hyperlinks

Using descriptive links provide users a clear understanding of where the link will take them. Screen reader users often navigate sites y jumping from link to link; providing link texts that make sense is vital.

Avoid vague link text like “Click here” and “Read more”. Ensure that links with different destinations do not have the same link text.

Alternative Texts in Images

Alternative text, or alt text, provides information about the content and function of an image for people who cannot see the image. There are many reasons people might view your web content without images including visual impairment and low-bandwidth internet connections.

Add alternative text to images using the “Alternative Text” field when uploading/adding images in Drupal.

Good alt text should be concise but must provide the same or most important information as the image it replaces. The best format for alt text is sufficiently descriptive but doesn't contain any spammy attempts at keyword stuffing. If you can close your eyes, have someone read the alt text to you, and imagine a reasonably accurate version of the image, you're on the right track.

When using image alt text, do NOT include:

• "picture of"
• "image of"

Screen readers automatically announce an image as an image. So in alternative text “Image of an apple” would be read aloud by a screen reader as “image, Image of an apple”.

It's also important to recognize that some images are used for decorative purposes. Consider: If the image were deleted, would important content be lost? In these cases, it is perfectly fine to provide NO alternative text.

For more information on alternative text, read WebAIM’s article on Alternative Text.

Avoid Images of Text

Do not use an image of text when you can use plain text to convey the same information. Text in images is a bad user experience for many people including:

• People with visual impairments who need to transform or zoom text.
• People who are translating web content into a different language.
• People using a text-only browser.

Images of text are also more difficult to update and maintain than web content and, since search engines cannot read text in images, users may have a more difficult time finding the information.

If it is necessary to use an image of text, be sure the entirety of the text is included in the alt text.

Making Complex Images Accessible

Infographics

Infographics require a text description that explains the relevant content presented in the graphic. Translate your infographic into a text version. You don’t need to describe every graphical element in the infographic but rather focus on what’s most important.

Use headings, bullets, and lists to make your text description more readable. If appropriate, include the images with alternative text descriptions within your text description. 

Data and Graphs

If your images display graphical data, you must supply a text equivalent to describe the data. The best way to do this is to include a text description on the page next to the image or provide a detailed description in the image caption.

On your chart or graph, don’t rely on color alone to provide context as the colors you choose will not always appear the same to everyone. Include data labels and ensure all colors have enough contrast to help users tell them apart.

Flowcharts and Diagrams

Make these graphics accessible by providing a text description of the process on the same page as the flow chart or diagram. Use headings, ordered lists, and unordered lists to organize decisions and steps. Simplify complex visuals as much as possible.

Maps

Maps require a text alternative to be accessible. You must also include a text description on the page to explain the information presented on the map.

Organizational Charts

If an organizational chart must be posted on a page you will need to create an alternate text version to make it accessible. Text versions can easily be created using HTML headings and lists.

By using semantic headings on your page, along with unordered (bulleted) lists, you can represent how your department or team is organized in a way that is accessible to everyone.

Ensure Audio and Video are Accessible

For people to enjoy your video and audio content, these should be presented on your webpage using semantic headings, descriptions, captions, transcripts, and descriptive audio tracks.

Creating Captions, Transcripts, and/or Descriptive Audio

The university does not provide captioning services directly. It is up to the creator(s) of the audio or video to generate captions, transcripts, and descriptive audio.

The following commercial vendors provide high-quality captioning services. Contact JHU Purchasing if you seek to use one of these services:

• 3Play Media (used by the School of Public Health and Engineering for Professionals)
• CaptionSync (used by the School of Medicine)
• rev.com (used by the School of Education)

YouTube Automatic Captions

We encourage creators to add professional captions when possible. Videos posted to YouTube will have captions automatically generated. These automatic captions are generated by machine learning algorithms, so the quality of the captions may vary. These captions may misrepresent the spoken content due to mispronunciations, accents, dialects, or background noise. You should always review automatic captions and edit any parts that haven't been properly transcribed.

For more information visit Video and Audio Accessibility at JHU →

Use of Color

In general, the color choices on the Johns Hopkins Bloomberg School of Public Health website are controlled by the content management system, Drupal, and have been designed to meet most color accessibility standards.

If you're designing an image or document to upload to the site, ensure there's sufficient color contrast between text and background.

For more information visit Digital Accessibility Techniques at JHU →

Other Resources

• Document Accessibility

For questions or concerns regarding website accessibility,
please submit a help desk ticket.