At Northwoods, we believe that all websites should be accessible to everyone, including those who must navigate sites with screen readers and mouse alternatives. We are proud and happy to build as many accessibility features and accessibility testing tools as possible into Titan CMS, in order to meet and exceed ADA standards for accessible design.
I generally divide web accessibility into three categories: design, content, and functionality. Design is the look and feel of the site – the colors, fonts and so on. Content comprises the text, images, videos and such, any information you wish to convey to the user. Functionality is how the site behaves – what happens when the user clicks on a link.
The new Titan CMS accessibility features for the Freeform block help content authors meet the content needs for accessibility. It finds and flags potential issues and suggests possible resolutions.
Good accessibility starts with well-structured content. Headings are a big part of that. Headers arranged in a logical sequence help people who use screen readers understand how pieces of content relate to one another. Think of headers as sections in an outline for a paper.
In this example of a freeform block, the lines of bold text look rather like headers, but they really aren’t. They’re just bold text. Structurally, bold face adds no meaning apart from body text. Screen readers will give them no extra weight, and that could lead a user to misunderstand the text.
A new button in the Freeform block in the Titan CMS workstation now clues us in on accessibility issues.
Clicking that button allows us to see that the three bold-faced “headings” are now highlighted as potential accessibility issues. Titan CMS then provides corrective suggestions.
Clicking the quick-fix button changes the offending lines into headings at suggested levels. Furthermore, an info box explains why the original text might cause an accessibility problem, which gives the content authors grounds for deciding whether or not this is a real issue.
Here are the corrected headers, per the checker’s suggestions. We see the headings’ 1-through-3 hierarchy. Thanks to Titan CMS accessibility check, screen readers can see that hierarchy, too.
Images present content authors with another important accessibility area. For our purposes, two categories of images matter:
- Images that contain important visual information
- Images that are decorative
Is the image in this screen shot decorative, or does it contain important visual information?
This judgment depends on context, that is, the surrounding text. If the image contains important visual information – say, it shows an example of an engineering firm’s bridge style – apply alt text to the image. Screen readers will read the alt text out loud to help users understand the full meaning of all the content on the page, including images.
If it is decorative and not important to an understanding of the surrounding content, alt text need not be applied.
Either way, the accessibility checker in the Freeform block in the Titan CMS workstation will alert the content authors to accessibility issues related to images.
The checker reported two issues for this image. So, before looking at alt text, let’s look at the first issue – title attribute.
Mostly likely you haven’t done anything with the title attribute when you placed the image on the page. You can ignore this issue. Just make sure the value is left blank and click the Ignore button. Ignoring will help the content author keep track of what issues have been dealt with and which still need resolution in subsequent editing stages.
After ignoring the first issue, I clicked the Next button to see the Alt Text issue. Now the content author must decide: Vital information or mere decoration?
Let’s say our bridge photo is important for understanding the content. I filled in the Alternative Text field with words I want screen readers to read to the user. The text should be short – no more than 100 characters. Then I clicked the Quick Fix button. Now the image has alt text for screen readers.
Make sure the alt text provides additional information and doesn’t just repeat text from the body copy.
Sometimes, one link can get split into two during the editing process. Screen readers will see this as two links. Nobody likes two links that go to the same place.
The double-link example at right raises two accessibility issues.
Adjacent links to same location
The dialogue box below addresses the first issue: Should the links be merged? The answer is yes; the two links were accidently created and go to the same location.
This suggested fix is the one I want, so I click the Quick Fix button to combine both links into one.
Great – but we’re not quite done.
The second issue causes the Titan CMS accessibility checker to ask if these are separate links. It tells us that, if this is the case, we must insert some sort of separating text between the two links. We’re assuming, now, that the links go to different locations.
Commas within the sentence or a bulleted or numbered list will separate the links properly.
The Titan CMS Accessibility Checker covers the most common content accessibility issues. It helps content authors easily identify and resolve issues they might otherwise overlook. The checker is a great start in accessibility, but works best when integrated into an overall accessibility plan and process, with the goal of not only conforming to ADA accessibility guidelines, but truly meeting the needs of all visitors to your site.
Accessibility is a team effort. Northwoods can help you create an overall web accessibility plan that covers not only content, but also design and functionality. We can provide all the accessibility tools and accessibility features to give all your users an excellent experience.
This is our job. It also makes us happy.
Originally Published: Wed, September 13, 2017