Quick Need-to-Know Overview
See the following pages for detailed explanations for each convention.
- Introduction to Accessibility
Accessibility is about providing a means for users with disabilities to access the same information and services that users without disabilities are able to access. - 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. - Titles in Inline Frames (iframe)
Ensure inline frames are accessible by adding a unique and accurate title attribute. - Review Complex Images for Accessibility
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.
Introduction to Accessibility
Accessibility is a characteristic of an environment – learning or otherwise – that measures its equitable opportunity (i.e., usability) for all individuals, regardless of abilities. This can include but is not limited to individuals with both visible and "hidden" disabilities such as cognitive limitations, hearing loss, low vision, color blindness, impaired mobility, etc.
Johns Hopkins University is committed to ensuring that people with disabilities have the opportunity to acquire the same information, engage in the same interactions, and enjoy the same services as individuals without disabilities. That includes information, interactions, and services that are provided using electronic and information technology (EIT), such as websites, online systems, and electronic teaching equipment. Examples are captioning on videos, alternative text with website images, and transcripts for podcasts.
The university will act in accordance with applicable laws, including Section 504 of the Rehabilitation Act of 1973 and the Americans with Disabilities Act as amended.
Established, Measurable Accessibility Standards
To achieve an accessible web environment, Johns Hopkins is following version 2.1 of the Web Content Accessibility Guidelines (WCAG). WCAG consists of measurable web accessibility standards developed and maintained by the World Wide Web Consortium (W3C). Per University policy, Johns Hopkins’ public-facing web pages must comply with WCAG 2.1 Level AA.
Four Guiding Principles of WCAG — P.O.U.R.
- Perceivable refers to the fact that users read and interact with websites in different ways, often using assistive technology. This standard provides measurable ways to improve your website so users and assistive technology alike can understand the content presented using their senses, including sight, sound, and touch.
- Operable refers to the fact that users should be able to use all the functions of your website regardless of whether they use a keyboard and mouse or other type of assistive technology.
- Understandable sites have clear, simple instructions, explain complex issues, and avoid unusual, inconsistent, or unexpected functions.
- Robust sites follow recognized standards and conventions for the web.
Website Accessibility
Headings
Headings are more than visual; they are a primary component of the markup that provides structure to a web page. Think outline. Headings should be used to separate your content into meaningful sections. Never use bold, italicize, underline, etc. to define sections on your page instead of headings. Headings are increasingly becoming a popular way to navigate on a web page, and are essential to screen reader software that provides keyboard shortcut keys from heading to heading, similar to how the tab key goes from link to link.
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).
Well structured headings also improve search engine optimization.
| Incorrect | Correct |
|---|---|
---- Heading 5 -- Heading 3 - Heading 2 --- Heading 4 Heading 1 --- Heading 4 -- Heading 3 Heading 1 -- Heading 3 | Heading 1 - Heading 2 -- Heading 3 --- Heading 4 -- Heading 3 --- Heading 4 - Heading 2 -- Heading 3 -- Heading 3 |
Use Descriptive Hyperlinks
Using descriptive link text provides users with a clear understanding of where clicking the link will take them. Screen reader users often navigate websites jumping from link to link, using the tab key, providing link text that makes sense is vitally important. Avoid vague link text like “Click here” and “Read more”. Ensure that links with different destinations do not have the same link text.
| Incorrect | Correct |
|---|---|
Learning what to write as proper link text can be confusing, but to learn more click here. | Learning what to write as proper link text can be confusing, but you can learn more by reviewing these Tips for Descriptive Links Accessibility. |
Accessible Images
Alternative Text
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. Additionally, good alt text can contribute to improved search engine optimization.
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, it should 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”.
| Incorrect | Correct |
|---|---|
“Picture of pancakes” | “Stack of blueberry pancakes with powdered sugar” |
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.
Accessible Inline Frames (iframe)
When adding an iframe, whether it is a video from YouTube, a podcast episode, or an internal iframe, be sure to have a title added detailing its contents. If you have multiple embeds in a single page, ensure the titles are distinguishable.
Review Complex Images for Accessibility
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 (aka time-based media), these should be presented on your webpage using semantic headings and descriptions as well as captions, transcripts, and descriptive audio tracks.
Why? Presenting your time-based media content correctly means that people can access it on any device, the way they prefer and regardless of any accessibility requirements. For example, over 80% of people watch videos without sound on Facebook and Instagram.
It’s not only a requirement that all Johns Hopkins time-based media be published with captions, but it means people will actually stop scrolling to watch your video.
When to Include Captions, Transcripts, and/or Descriptive Audio
Knowing when to include captions, transcripts, and/or descriptive audio tracks can be a little confusing. Use the questions and statements below to understand what is required to make your video accessible. Going through the list you may find that your video requires captions as well as a descriptive transcript.
Based on information from Planning Audio and Video Media Checklist from the W3C Web Accessibility Initiative.
Visit Captions, Transcripts, and Audio Descriptions on the WebAIM website to understand each of these.
Video Content
- Does Your Video Include Speech?
If your video includes speech or dialogue, you must provide captions that identify speakers, dialogue, and any important sounds.
Example: talking head, explainer, and interview videos - Does Your Video Contain Visual Information Not Described by Dialogue?
If your video contains text, stepping through a process, charts and/or graphs, and these are not described in the dialogue, you need to include a descriptive transcript of the video or an audio description version of the video.
Example: montage videos with music and no speech, PowerPoint presentation recordings with visual information (images, charts, graphs, etc.) that is not described with dialogue in the video. - My Video Does Not Contain Speech or Other Audio
If your video does not contain speech or other audio content that is needed to understand the content, simply add a note on your webpage that captions are not included because there is no substantive audio content.
Example: a video that only shows a process but does not have dialogue or audio.
Audio Content
- If your audio file does not contain speech or dialogue, simply provide a title or heading (Heading 2, for example) and description of the audio content.
Example: instrumental music or sound effects - If your audio file does contain speech or dialogue, provide a transcript and/or a descriptive transcript of the audio content.
Example: podcasts, audio interviews, music with lyrics
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)
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. We encourage creators to add professional captions when possible. YouTube is constantly improving its speech recognition technology. However, automatic captions might 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. Visit YouTube’s help page for instructions on how to edit captions in YouTube.
In addition, YouTube currently does not provide Descriptive Audio, so if you need this service, please use a vendor from our list of Procurement approved resources for interpreting, transcribing and captioning.
Use of Color
There are two main concepts to consider with the use of color; conveying information and sufficient contrast. The most widely accepted statistics say that 8% of men and 0.5% of women are colorblind. However, individuals who are colorblind are not the only ones affected by the use of color, so are individuals who are low-vision. These individuals are much more affected by color contrast issues.
Conveying Information
Don't rely on color alone to convey the meaning of content. Individuals who are blind, low-vision, or colorblind will not be able to differentiate between the content you are trying to emphasize or highlight. Some examples of where using color only can affect accessibility include; required fields in forms, identifying that items of a certain color are key concepts to learn, using a pie chart with color but not identifying the sections in another way.
Contrast
If the color combinations you use for the text content on your webpage doesn't have enough contrast, then individuals with low vision can have a hard time reading it. Individuals with vision at even a 20/40 rate have a loss of contrast sensitivity. Contrast sensitivity is an issue that affects everyone as they age.
In general, the color choices on the Johns Hopkins Bloomberg School of Public Health website are controlled by the Drupal content management system and have been designed to meet most color accessibility standards.
For questions or concerns regarding website accessibility, please submit a help desk ticket.
Document Accessibility
Please refer to our Document Accessibility article for details on making accessible documents.
For questions or concerns regarding document accessibility, please email webaccessibility@jhu.edu.