Accessibility for Radancy CMS Publishers

Why is Accessibility Important? Anchor ()

• Nearly 20% of the world population is disabled - 1 billion people! (WHO)
• Aging Job Market - Americans 55 and over hold nearly 25% of all jobs. (CNBC)
• First Impressions - A candidates first impression of a company is important and should be a positive one. We seek to reach all potential candidates!
• Right thing to do!
• Risk of Litigation - Over 4,500 web accessibility lawsuits filed under ADA in 2021 - Up from 50 in 2014 and a 15% increase from prior year!

WYSIWYG ≠ Perfection Anchor ()

WYSIWYG (What You See Is What You Get) editors are useful tools that allow for greater, customized control over our digital content, but the output of that content and how it imapcts disabled users, is only as good as the effort an author puts in. The greater care one takes for the craftsmanship of their content, the more accessible it will be. This document will help you to address common issues that impact disabled users.

Common Issues Anchor ()

• Headings
• Hyperlinks
• Alternative Text

Headings Anchor ()

Assistive technology (AT) users can access all of the headings on the page to better understand and navigate that content. The more clear and structured your headings are, the easier this task will be.

• Headings represent the hierarchical structure of the page's content.
• Headings are used by various assistive technology (AT) users to help navigate the page. Well organized and structured headings can benefit AT (and SEO).
• A heading must never be selected for its size. Choose the right heading level and use CSS to style to your design needs. Structure over aesthetics.
• Avoid using more than one h1 element.
• The h1 element should loosely match the title of the page when possible.
• Headings may be nested. (h1, h2, h3, h3, h2)
• Avoid skipping heading levels. (h1, h3, h6)

TODO: Add something more clear on hierarchy.

TODO: Show examples of or proper heading structure and possible screen reader demo of heading navigation.

Hyperlinks Anchor ()

• Assistive technology users depend on hyperlinks to navigate.
• Good hyperlinks provide context. Link relevant word, words or phrases. Better for accessibility and SEO.
• Avoid linking terms like "click here" or "here", etc.
• Many other elements, such as headings and images can contain hyperlinks.

TODO: Share example of link that uses “click here” and suggested alternatives that can be used.

TODO: Show example of this issue in actual screen reader link list.

A Note on Hyperlinks that Open New Window Tabs

• Hyperlinks that open in new windows should be approached with caution.
• Poor implementation of them can have negative effects on Accessibility, UX, Performance and Security!
• Ask yourself if you really need a new window. (The answer is usually no.)

See Guidance on Designing For and Implementing New Windows

Alternative Text Anchor ()

• Not all images require alternative text. Most common types: Informative and Decorative.
• If image is relevant to, supplements, or enhances surrounding content, then it is considered informative and should contain alternative text.
• Decorative images are often icons, branded page dressing or other design flourishes. These require no alternative text, buyt should include a blank alt (alt="").
• Alternative text should succinctly describe an image. Imagine describing the picture to a blind friend.
• Avoid terms like "Picture of..." or "Image of..." within alternative text. This is redundant to AT users.
• Logos and images with embedded text must contain verbatim alternative text.
• Chart or graphica data should be described, but not in detail and should point to equivelent and accessible version of this content.
• Avoid keyword stuffing alternative text values. Alternative text is for people—not search engines.

Images Use In Hyperlinks

Single images wrapped within hyperlinks must contain alternative text, even if they are decorative. However, the text should be more functional in nature. Here is an example that might link to a YouTube video:

<a href="...">

    <img src="..." alt="My Summer Vacation (Video)">

</a>

The only exception to this rule is if adjacent or nearby text is present within the link, too. Here, no alternative text is really required because the content in the element is already sufficient.

<a href="...">

      <img src="..." alt="">
      <span>My Summer Vacation</span>

</a>

Alternative Text Resources

• When in doubt, use the Alt Decision Tree
• Add more resources

Testing Your Work Anchor ()

WAVE, AxE, Lighthouse, New Tool for Clients