Digital Accessibility Guidelines for Content Creators

USC’s preferred digital accessibility standard (Americans with Disabilities Act, ADA) is WCAG 2.1 AA. USC is committed to digital accessibility and continues to focus on the following measures to create an inclusive culture.

Your role as content creator/manager for the Viterbi WordPress websites is ensuring accessibility so we work towards the equitable inclusion of all members of the USC community. It not only benefits those with vulnerabilities, but impacts all of society. This is known as the curb-cut effect. Further, by adhering to ADA guidelines, you lessen the legal exposure of the university and the school.

Here are steps and key practices to implement for a more inclusive online experience.

Summary

  1. Ensure H-Tags Hierarchy is Appropriately Used
  2. Ensure Images Have Alt-Text
  3. Appropriately Naming Files for Upload
  4. Ensure Buttons and Icons have Aria-labels
  5. Ensure Each Element Has Appropriate Spacing
  6. Avoid Using Hover Materials for Information
  7. Appropriate Color Contrast
  8. Appropriately Written Links

Ensure H-Tags Hierarchy Is Appropriately Used

Proper heading structure not only improves the organization and clarity of content for sighted users but also aids screen readers in understanding the hierarchy and flow of information. In short, there are two rules with utilizing h-tags.

  1. We must ensure there is always an <h1> tag present in each page and that it matches the page title.
  2. H-tags must be used in hierarchical order. By utilizing h-tags (<h1>, <h2>, <h3>, etc.) appropriately, we enable users to navigate through content more efficiently which enhances the overall accessibility and usability of the website.

We also have documentation on hierarchical structure when utilizing h-tags.

Ensure Images Have Alt-Text

Images play a crucial role in web content, but they can also pose barriers to accessibility for users with visual impairments. By providing descriptive alt-text for images, we empower screen readers to convey the content and context of images to those who rely on auditory cues. Alt-text enables everyone to access and understand the information presented visually. Therefore, when you upload an image, always fill out the alt-text information within the media library.

Image
The best alt-text descriptions offer context for the imagery used. Please read on our article regarding Digitally Accessible Imagery.

Appropriately Naming Files for Upload

When uploading media files such as imagery or documents to WordPress, it is highly recommended to not use generic filenames like "document1.pdf" or "image.jpg" as it provides little context to users and can be confusing. Instead, ensure file names are descriptive and meaningful. This not only helps screen readers, but also makes content searchable for the content creator and search engines. It is easier to find "Summer Class Sign Up Form.pdf" rather than "form.pdf".

Ensure Buttons and Icons Have Aria-labels and Roles

Buttons and icons serve as interactive elements guiding users through a website's functionalities. However, for users navigating through assistive technologies like screen readers, these elements may lack context without proper labeling. Aria-labels and roles provide descriptive labels for interactive elements, ensuring that all users can navigate and interact with your web pages seamlessly.

Learn more in our article on how to apply aria-labels to icons and buttons. You will also learn when it is appropriate to use aria-labels as icons that are deemed decorative do not need aria-labels and roles.

Ensure Each Element Has Appropriate Spacing

Spacing plays a critical role in enhancing readability and usability for all users, especially those with motor impairments or visual processing difficulties. By ensuring adequate spacing between elements, we facilitate easier navigation and interaction, reducing the risk of accidental clicks or misinterpretation of content.

In Cornerstone, you can adjust the margin and padding of each element. The link icon allows you to adjust all sides at once while the broken link icon allows you to adjust each side individually.

Margin and Padding settings in Cornerstone editor.

Avoid Using Hover Materials for Information

While hover effects can add visual interest and interactivity to a website, they can also create accessibility barriers for users who rely on keyboard navigation or assistive technologies. Information hidden behind hover effects, such as the Flip Card element in Cornerstone, may be inaccessible to users who cannot hover over elements. Instead, opt for design solutions that ensure all critical information is readily available and accessible without relying on hover interactions.

Appropriate Color Contrast

Color plays a significant role in web design, but it can also hinder accessibility if not used correctly. Ensure that there is sufficient contrast between text and background colors to make content readable for users with visual impairments. Adhering to WCAG standards for color contrast ratios improves legibility and ensures that information is accessible to all users.

Please use this Contrast Checker to test your color contrast score between text and background.

Below are WCAG 2.1 AA requirements.

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large Text
    • Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental
    • Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes
    • Text that is part of a logo or brand name has no contrast requirement.

Appropriately Written Links

Links are essential for navigating between pages and accessing additional resources, but poorly written or ambiguous link text can confuse users, especially those using screen readers. Instead of using vague phrases like "click here" or messy URLs, incorporate descriptive link text that provides context and indicates the destination or purpose of the link. For example, instead of "Click here for more information," use "Learn more about our accessibility initiatives."

Closing Words

In conclusion, prioritizing website accessibility isn't just about compliance or catering to a niche audience—it's about creating an inclusive digital environment where everyone, regardless of ability, can access and engage with online content. By implementing these key practices and embracing accessibility as a fundamental design principle, we can build a web that is truly for all.

Resources and Tools

  1. Internal
    1. USC Digital Accessibility Website
    2. USC Creating Accessible Content Checklist
    3. How to Apply Aria-Labels to Buttons and Icons
    4. How to Appropriately Utilize HTML Headings
  2. External
    1. Web Content Accessibility Guidelines (WCAG) 2.1
    2. Digital.gov's Introduction to Digital Accessibility
    3. Curb-cut effect
    4. W3C's Images Tutorial
      1. Informative images
      2. Decorative images
      3. Functional images
      4. Images of text
      5. Complex images
      6. Groups of images
      7. Image maps
    5. Color Contrast minimum for WCAG 2.1 AA
    6. Colour Contrast Checker

Published on April 11th, 2024

Last updated on May 2nd, 2024