Accessibility

It is imperative that website admins ensure their content is accessible. There are a few basic things we expect web users to manage as editors.

  • All media (video, audio, images) on all pages in your site should have alternative text (alt text) descriptions.Images should not use text, whenever possible, and if they do have embedded text, must include that text on the page or post.
  • All pages should be designed around the principle of distinguishability–easy to read colors, fonts, and buttons.
  • Each page in your site should be fully readable by a screen reader. For most users, this means using headers to break up content (starting with h2), adding alternative text, using simple tables, and avoiding pdfs or making sure pdfs pass accessibility screens.
  • All links should use descriptive text: ie: link “graduate handbook” instead of “click here.”
  • All pdfs must be machine readable and tagged, at a minimum. More details are available on the PDF guidelines page.

Accessibility at Johns Hopkins University website includes more details, trainings, and tools that can help staff create accessible digital products.

The Web Services Team reserves the right to edit or remove any content or images that fails the World Wide Web Consortium Web Content Accessibility Guidelines, version 2.1 Level AA conformance.

Image Accessibility

All images must contain alt text to satisfy accessibility requirements. These describe the appearance and function of an image on a page. Images that do not have alternative text descriptions will be removed without notice.

  • Images with embedded text are not accessible. You should not use text in an image to get your message across, as the content will be too long to add to an alternative text field. Do not add these type of images.
  • Images that are missing alternative text descriptions will have a red dashed box around them when viewing the page logged in. An example of both the type of image to not post, and what the alt text warning looks like:
a screenshot of a website with an image of a silhouette, but the image has red dotted lines around it

Learn how to add alternative text in our Images section.

Interested in what a screen reader sounds like? Check out this demo video from Siteimprove to understand why things like headings and alternative text are needed.


PDFs

PDFs of scanned book pages or posters, and other PDFS that are not machine-readable, are accessibility violations because a screen reader cannot read the words on the page. Making a document machine-readable allows users to search the contents of the PDF, and copy and paste its text. It also enables screen-reader users to access the content. Use our PDF and Documents page to create or remediate pdfs so they are legally allowed on the site.