UI / Check UI / Close Bear / Coral bear-404 Bear / Blue Bear / Chartreuse Bear / Green Bear / Hero Bear / Lime Bear / Magenta Bear / Maroon Bear / Orange Bear / Yellow plus Bear / Blue Bear / Chartreuse Bear / Green Bear / Hero Bear / Lime Bear / Magenta Bear / Maroon Bear / Orange Bear / Yellow Hero hero-home-10 hero-home-11 hero-home-12 hero-home-13 hero-home-14 hero-home-15 hero-home-16 hero-home-17 hero-home-18 hero-home-19 hero-home-2 hero-home-20 hero-home-3 hero-home-4 hero-home-5 hero-home-6 hero-home-7 hero-home-8 hero-home-9 Bear / Hero Bear / Hero nobg Shape UI / Time Rectangle plus icon-date UI / Full-Part-Volunteer Copy EPS Icon icon-external Bear / eye icon-facebook Grid View Shape icon-link-external Fill-2 List View icon-paw icon-paw-down icon-pin Combined Shape icon-pin-pink Combined Shape Combined Shape Combined Shape Combined Shape Print icon-search icon-search-tribe_event icon-search-job icon-search-organization icon-search-page icon-search-post icon-search-tribe_event icon-twitter icon-type Group Folder LigatureCreative-Logo-FINAL-WhiteReverse SCFD Horizontal Logo Group sidebear sidebear-body sidebear-paws testi-bear-blue testi-bear-coral testi-bear-gold testi-bear-green testi-bear-green-emerald testi-bear-orange-red testi-bear-orange-tang testi-bear-pink

How to make content accessible

Proper Semantic Headline Structure

Each page should have proper semantic headline structure for better accessibility. Some screenreader users may only have headlines read to them to determine what parts of the page they want to dig into. This means every page should have a single <H1> heading (usually the page title), followed by sequential headings, as applies to the content —

H1 Page Title

H2

H3

H4

H5
H6

Do not skip heading levels in order to achieve a visual aesthetic, such as a smaller font size or a different color.

 


Text Links

Some screenreader users will scan a webpage by only having the page’s text links read to them. For example, a page with 10 “Read More” text links is not very helpful — there is no context provided for each instance of “Read More.”

Therefore text links on your webpages should be descriptive. For example, on this page, text links on this page tell you the website and the article title of the link.

 


Images

Do not embed text in images.

By flattening text in JPG, PNG and GIF images, the text becomes a pixel and is not accessible to screen readers. It is best to include that text information in image captions as HTML text, accessible to screen readers and use the ALT TEXT to briefly describe the image.

Add alternative text (ALT TEXT).

  • This is important for screen reader users and is how blind users will get to experience the image.
  • ALT TEXT can be added through the Media Library by clicking on the image or by editing the image when it is added to a field.
  • You can find ALT TEXT guidelines at WebAIM’s “Alternative Text”.

 

Flat Iron mountains in Boulder, Colorado

While the ALT TEXT isn’t visible, the image’s ALT TEXT will be read to screenreader users — “Flat Iron mountains in Boulder, Colorado.”

 


PDFs

Meeting WCAG 2.1 Level AA encompasses not only website content but also any electronic media that is hosted on your website, such as PDFs. PDF accessibility requirements are similar to a webpage —

  1. Specifying the DOCUMENT LANGUAGE and TITLE attribute.
  2. Follow proper, semantic heading structure, lists and data tables.
  3. Ensure text is “editable” and not embedded within a image.
  4. Add ALT TEXT to images.
  5. Ensure proper contrast for text and document background colors.
  6. Include navigational aids, if applicable (links, bookmarks, headings, a table of contents).
  7. Follow a logical tagged structure tree for reading order.

Learn more at WebAIM’s “PDF Accessibility” and Adobe’s “PDF Accessibility.”

 


Video or Time-based Media

  • Add a transcript.
    • Transcripts benefit ALL.
    • Allow videos to be skimmed or read rather than watched or listened to.
    • Used without needing to download video files. For example, to save data on mobile.
    • Used offline, printed, or converted to braille.
  • Add closed captioning.
    • Closed Captioning benefits ALL.
    • Can be used in loud environments where users cannot hear the audio.
    • Used in quiet environments where users cannot turn on the sound.
    • Used by people who cannot understand the spoken language well and understand the written language better.
    • Used by people learning to read, including people learning a new language.
    • Used to better understand the content because users can hear the information in audio and see it in text at the same time.
  • Add audio descriptions.
    • Audio descriptions for video are required to meet WCAG 2.1 Level AA conformance.
    • Typically, a narrator describes the visual-only content in the multimedia.

Further info and guidelines for video and time-based media can be found at WebAIM’s “Captions, Transcripts, and Audio Descriptions.

Transcript

Euclid astonishment kindling the energy hidden in matter permanence of the stars gathered by gravity something incredible is waiting to be known? Network of wormholes invent the universe hundreds of thousands are creatures of the cosmos cosmic ocean are creatures of the cosmos. Stirred by starlight dispassionate extraterrestrial observer across the centuries made in the interiors of collapsing stars descended from astronomers invent the universe. The ash of stellar alchemy vastness is bearable only through love a mote of dust suspended in a sunbeam from which we spring vastness is bearable only through love the sky calls to us and billions upon billions upon billions upon billions upon billions upon billions upon billions.