WordPress Administration ·

WordPress Accessibility

  • Accessibility
  • Smith College Accessibility Support and Resources
  • Headings
  • Contrasting Colors and Backgrounds
  • Descriptive Hyperlinks
  • Alternative Text Descriptions for Images 
  • Video Captions and Transcripts
  • Audio Transcripts
  • H5P Content
  • Accessibility Checking Tools

    • Accessibility 

    As administrators of any website, we are expected to take responsibility towards making our content accessible for everybody. The list below have essential tips that will help you to keep your website available for anyone interested in your site information. Assistive Technologies (AT) pay special attention to page’s structure and semantics. The better organized your content is, the easier it will be to navigate your page with a screen-reader.

    Quick Tips for Accessible Content
    • Use headings instead of changing the size of fonts to organize your content.
    • Use descriptive links for URLs, rather than pasting a URL directly or using “click here.”
    • When adding links, instead of adding the URL itself directly in the page, describe the location linked using verbs or keywords. Do not use “link,” “this link,” “here,” or “click here” as link text.
    • Make sure to use Alt Text for each image, unless it’s purely decorative. Alt Text describes the content of the image. Good Alt Text helps the user understand the context and reason behind the inclusion of this image. See the Accessible Website Checklist for more information.
    • Avoid using unnecessary images on your site. Keep your website concise and simple to avoid user distractions.
    • If you are using multimedia content on your site, provide transcripts.
    • Be careful with the colors you are using on your site. For more information about accessible colors, visit the Accessible Colors website.

    Smith College Accessibility Support and Resources

    Headings

    Headings are a special kind of text formatting and are useful for organizing documents and webpages.

    Using the formatting options in WordPress, you can apply heading styles to your text (i.e. Heading 1, Heading 2, etc.). Headings make documents and webpages much easier to navigate for people using screen readers.

    The WordPress heading block

    Contrasting Colors and Backgrounds

    For text-based content to be accessible, you should ensure there is high contrast between the text color and the background. If text color is too similar to a background, or when using certain color combinations, it can be difficult for users to access the information. WordPress has built in tools to help you gauge whether or not text is readable. When you use the Styles Setting, WordPress automatically detects color combinations that may be difficult for some people to view.

    The WordPress Style settings block displaying an error message that the chosen colors can be difficult for some people to read.
    The Style settings can automatically detect contrast issues

    You can also review the Accessibility Checking Tools at the bottom of this page to check color contrast.

    This sentence has high contrast because it’s black text on a white background.

    This sentence also has high contrast and is easy to read.

    This sentence can be more difficult to read for some people.

    This sentence is challenging for most people to read  and impossible for people with certain kinds of color blindness to read.

    Using descriptive phrases for hyperlinks will make your documents and web pages more accessible because it gives readers more context about where links go, makes it easier to find the link they need, and for people using screen readers, the ability to differentiate one link from another.

    Here is an example of a descriptive hyperlink and two less descriptive links:

    Alternative Text Descriptions for Images 

    The Smith College Botanic Garden

    Alt text (alternative text) is the description that a screen reader will read aloud when it reaches an image in a document or webpage. Descriptions should be used on all images and are especially important when an image is communicating important information so that people using screen readers can access the same content. 

    Video Captions and Transcripts

    All video content should have accurate closed captions that users can switch on or off when viewing video content. 

    Audio Transcripts

    All audio-only content should be accompanied by a transcript, most often as a separate file. Transcripts are helpful because they’re a searchable version of the audio content, and are useful for studying, printing, and taking notes.

    • Otter.ai real-time transcription - The free version of Otter.ai lets you transcribe up to 45 minutes of audio at a time. Much like other speech to text services, transcripts will not be completely accurate and should be reviewed and edited before sharing.
    • Panopto Captioning - If you're using Panopto to host your podcast, you can request automatic captioning and manually correct those captions.
    • H5P Accordion - The H5P accordion tool allows you to add additional content, and works well for including a separate video transcript if added below the podcast.
    • WordPress Details block - The details block is another option to create a separate podcast transcript.

    H5P Content

    Most–but not all–H5P content types have accessibility features built in and are tested by the H5P code development. When you create content within H5P, make sure to fill out any Alt text fields and follow the previous recommendations about text contrasts and links. You can find a list of which H5P content types are accessible and more information about accessibility testing at H5P’s Recommendations and overviews of content types - H5P.com page.

    Accessibility Checking Tools

    Back to WordPress Admin Starter Pack

    Go Back Up

    Tags: