Skip to Content
Main Content

June 24, 2022

How to Keep Your Titan CMS Website WCAG Compliant

The Titan CMS team is committed to creating a more accessible internet. That’s why Titan CMS evolves with global accessibility standards and allows you to aim for full WCAG 2.1 or 2.2 compliance in both code and content, and to meet Section 508 of the Americans with Disabilities Act (ADA) requirements.

While Titan CMS is built to help you achieve web accessibility compliance, website managers, editors and authors still have a huge role to play in making sure their sites achieve and maintain compliance.

Here’s an overview of Titan CMS’ current accessibility features and tips to help you keep your site accessible to all, including those with disabilities.

Titan CMS Accessibility Features

The Titan CMS WYSIWYG editor includes error correction to generate valid HTML5 markup. Titan CMS supports:

  • CSS-based layouts
  • HTML5 element authoring
  • Complete control over custom coding for sites that layer visual presentation on top of semantic structure – allowing designs with appropriate color contrast, thoughtful visual focus states, and text reflow/resizing.

Writing semantic HTML, by using the appropriate HTML elements for their intended purposes, gives web developers a head start in creating accessible code. That’s because web browsers are designed to handle basic HTML elements in accessible ways. Other assistive technology for the web, like screen readers, utilize that HTML structure to help users navigate. Separating structure from look and feel with CSS-based layouts is an important aspect to maintaining ‘clean’ HTML as well. Finally, using HTML5 elements provides an additional layer of accessible possibilities, introducing native regions and landmarks.

Titan CMS also features a built-in accessibility checker that will report and help you correct errors like:

  • Missing alt text on images
  • Alt text that duplicates nearby text
  • Links missing text
  • Heading levels that are out of order or misused
  • Redundant adjacent links

What You Can Do to Keep Your Site Accessible

Technical infrastructure is just one component of achieving WCAG compliance. Here’s what your team can do in Titan CMS to meet WCAG standards and keep your website WCAG compliant:

  • Create WCAG-compliant navigation and bypass links (highlighted in yellow in the image below). You’ll likely need our team to help you with this!

    Example of bypass links and keyboard-friendly navigation on the Titan CMS website
     
  • Dynamically create a sitemap 
  • Add unique page titles to every page
  • Add alt text to all images
  • Add text alternatives to media, like audio and video
  • Configure page language using the Titan CMS Snippets Manager (shown below)

    Example of HTML page language
     
  • Create forms with clear labels and error messaging

You can also use automated accessibility tools to help pinpoint objective accessibility errors with accuracy and speed. While automated tools are helpful, they can’t replace human judgment and can sometimes report inaccurate results. A complete website accessibility assessment requires manual code reviews and functional assessments related to various conditions.

Final Thoughts

Achieving and maintaining WCAG compliance is challenging for many organizations. Our Titan CMS team provides several resources to help, including:

  • 20-minute accessibility consultations
  • Site risk assessments
  • Site accessibility audits
  • Accessibility training for content authors and webmasters

Additionally, we develop accessible website designs to ensure compliance with color contrast, focus states, text characteristics, and more. If you’re just beginning a site redesign project or planning for one, talk to us about web accessibility right away. It’s much less costly to develop an accessible website from scratch than it is to remediate issues down the road!

Accessibility can be complicated, but we’re here to help! Contact us to discuss how our website accessibility experts can help you reach or maintain compliance. Visit the blog on the Northwoods website for additional accessibility resources and insights.

Authored By

Sydney Shimko

Sydney Shimko

Front End Development Practice Lead

3961429/Blog/How-to-Keep-Your-Titan-CMS-Website-WCAG-Compliant
<div class="columnWrap"> <p>The Titan CMS team is committed to creating a more accessible internet. That&rsquo;s why Titan CMS evolves with global accessibility standards and allows you to aim for full <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/" linktype="3" target="_blank">WCAG 2.1 or 2.2</a>&nbsp;compliance in both code and content, and to meet Section 508 of the Americans with Disabilities Act (ADA) requirements.</p> <p>While Titan CMS is built to help you achieve web accessibility compliance, website managers, editors and authors still have a huge role to play in making sure their sites achieve and maintain compliance.</p> <p>Here&rsquo;s an overview of Titan CMS&rsquo; current accessibility features and tips to help you keep your site accessible to all, including those with disabilities.</p> </div> <h2>Titan CMS Accessibility Features</h2> <div class="columnWrap"> <p>The Titan CMS WYSIWYG editor includes error correction to generate valid HTML5 markup. Titan CMS supports:</p> <ul> <li>CSS-based layouts</li> <li>HTML5 element authoring</li> <li>Complete control over custom coding for sites that layer visual presentation on top of semantic structure &ndash; allowing designs with appropriate color contrast, thoughtful visual focus states, and text reflow/resizing.</li> </ul> <p>Writing semantic HTML, by using the appropriate HTML elements for their intended purposes, gives web developers a head start in creating accessible code. That&rsquo;s because web browsers are designed to handle basic HTML elements in accessible ways. Other assistive technology for the web, like screen readers, utilize that HTML structure to help users navigate. Separating structure from look and feel with CSS-based layouts is an important aspect to maintaining &lsquo;clean&rsquo; HTML as well. Finally, using HTML5 elements provides an additional layer of accessible possibilities, introducing native regions and landmarks.</p> <p>Titan CMS also features a built-in accessibility checker that will report and help you correct errors like:</p> <ul> <li>Missing alt text on images</li> <li>Alt text that duplicates nearby text</li> <li>Links missing text</li> <li>Heading levels that are out of order or misused</li> <li>Redundant adjacent links</li> </ul> </div> <h2>What You Can Do to Keep Your Site Accessible</h2> <div class="columnWrap"> <p>Technical infrastructure is just one component of achieving WCAG compliance. Here&rsquo;s what your team can do in Titan CMS to meet WCAG standards and keep your website WCAG compliant:</p> <ul> <li>Create WCAG-compliant navigation and bypass links (highlighted in yellow in the image below). You&rsquo;ll likely need our team to help you with this!<br /> <br /> <a class="fancybox" data-fancybox="blog" href="/Titan-CMS-20211/Industry-Insights/Blog-Images/titan-bypass-and-keyboard-navigation-highlighted.png" linktype="3" target="_self" title="select for larger view"><img alt="Example of bypass links and keyboard-friendly navigation on the Titan CMS website" loading="lazy" src="/Titan-CMS-20211/Industry-Insights/Blog-Images/titan-bypass-and-keyboard-navigation-highlighted.png" /></a><br /> &nbsp;</li> <li><a href="https://titancms.com/Documentation/Site-Map-Index-Overview.htm" linktype="3" target="_self">Dynamically create a sitemap</a>&nbsp;</li> <li>Add unique page titles to every page</li> <li>Add alt text to all images</li> <li>Add text alternatives to media, like audio and video</li> <li>Configure page language using the Titan CMS <a href="https://titancms.com/Documentation/Titan-CMS-Snippets-Manager-Overview.htm" linktype="3" target="_self">Snippets Manager</a>&nbsp;(shown below)<br /> <br /> <a class="fancybox" data-fancybox="blog" href="/Titan-CMS-20211/Industry-Insights/html-lang-in-Titan.png" linktype="3" target="_self" title="select for larger view"><img alt="Example of HTML page language" loading="lazy" src="/Titan-CMS-20211/Industry-Insights/html-lang-in-Titan.png?Large" /></a><br /> &nbsp;</li> <li>Create forms with clear labels and error messaging</li> </ul> <p>You can also use <a href="https://www.nwsdigital.com/Blog/Website-Accessibility-Tools-You-Can-Use" linktype="3" target="_blank">automated accessibility tools</a> to help pinpoint objective accessibility errors with accuracy and speed. While automated tools are helpful, they can&rsquo;t replace human judgment and can sometimes report inaccurate results. A complete website accessibility assessment requires manual code reviews and functional assessments related to various conditions.</p> </div> <h2>Final Thoughts</h2> <div class="columnWrap noBorder"> <p>Achieving and maintaining WCAG compliance is challenging for many organizations. Our Titan CMS team provides several resources to help, including:</p> <ul> <li>20-minute accessibility consultations</li> <li>Site risk assessments</li> <li>Site accessibility audits</li> <li>Accessibility training for content authors and webmasters</li> </ul> <p>Additionally, we develop accessible website designs to ensure compliance with color contrast, focus states, text characteristics, and more. If you&rsquo;re just beginning a site redesign project or planning for one, talk to us about web accessibility right away. It&rsquo;s much less costly to develop an accessible website from scratch than it is to remediate issues down the road!</p> <p><em>Accessibility can be complicated, but we&rsquo;re here to help! <a href="/Titan-CMS-2021/Contact-Us" linktype="2" target="_self">Contact us</a> to discuss how our website accessibility experts can help you reach or maintain compliance. Visit the blog on the <a href="https://www.nwsdigital.com/Stories/Blog" linktype="3" target="_blank">Northwoods website</a> for additional accessibility resources and insights.</em></p> </div>
Sydney Shimko/Titan-CMS-20211/People/Sydney-Shimko.jpgThe author, smiling/Titan-CMS-20211/Industry-Insights/How-to-Keep-Your-Titan-CMS-Website-WCAG-Compliant---Open-Graph.jpg?LargeHow to Keep Your Titan CMS Website WCAG Compliant2022-06-24T07:30:11.050Learn about the accessibility features built into Titan CMS and what your team needs to do to keep your site accessible to all, including those with disabilities.362219/People/Sydney-ShimkoSydneyShimkoFront End Development Practice Lead<p>Sydney is a skilled UX developer who seamlessly blends the aesthetics of thoughtful design with responsive, semantic code. With a passion for delivering top-notch solutions, she negotiates constant change in the field of front end development and ensures functionality across an ever-growing variety of devices and screen sizes. Sydney is also Northwoods&rsquo; go-to web accessibility expert, and she strives to deliver creative, efficient solutions that improve usability for everyone. When not crafting exceptional websites, Sydney is an avid mountain biker, road cyclist, and coffee enthusiast and serves as co-head coach to the Shorewood Mountain Bike Team.&nbsp;</p>Sydney Shimko/Northwoods-2020/People/Sydney-Shimko.jpgSydney ShimkoAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data ModulesTeamAll StaffDesignersDevelopersAdd-In Type - NWS Data ModulesCategory - NWS Data ModulesCommittee - NWS Data ModulesDivision - NWS Data ModulesEvent Audience - NWS Data ModulesEvent Service - NWS Data ModulesEvent Type - NWS Data ModulesLocality - NWS Data ModulesModule - NWS Data ModulesNWS Data ModulesTopic - NWS Data ModulesFeatures and FunctionalityTips and TricksPackage Type - NWS Data ModulesPersonID - NWS Data ModulesSydney ShimkoProductVersion - NWS Data ModulesRecorded Webinar TopicsRegion - NWS Data ModulesSite Display - NWS Data ModulesTitan CMSSkillLevel - NWS Data ModulesTopic - NWS Data ModulesVideoAudience - NWS Data ModulesVideoClassification - NWS Data ModulesVideoStatus - NWS Data Modules02022-06-28T11:01:11.36000