Feature #1: Content Editor Accessibility Assistance

You may have already noticed (and started using!) a very handy new button in the Composer content editor called the “Accessibility Checker” button, which is towards the top left of the content editor, directly to the right of the </> “Source Code” button. 

Clicking this button will begin a check for a number of different accessibility issues within the content area. This check searches for missing tags, missing alt text, link text that provides no context as to where the link will take you, heading tags, incorrect formatting, and more.

If the Accessibility Checker finds one or more accessibility errors, a smaller pop-up style window will open over whatever content you are currently editing. This is where you’ll find any errors or suggestions that the Accessibility Checker brings to your attention. 

In the example shown above, you’ll notice the accessibility checker has found two warnings to bring to be addressed. Warnings differ from errors in that they are suggestions the checker is providing, instead of errors which need to be corrected. In the example shown, the Accessibility Checker is warning us that the image alt text should not be the same as the file name. This isn’t exactly an accessibility error; it’s just that the alt text for this image should be changed. 

For example, let’s say you want to use an image of students doing classwork on your school’s website. 

The above image might have saved to your desktop or images folder as “students_100718.jpg”. While the numbers are helpful in organizing photos, you wouldn’t want to upload the image with that alt text. 

That particular alt text doesn’t help anyone. It’s not descriptive of the image and will only confuse anyone using a screen reader. It also fails to help portray a picture of what the image was supposed to display for those who elect to not load images on your website due to slow internet speed or data limits. 

Instead, a better example of alt text for this image would be “Young male student does classwork at school next to female classmate.” Again, the Accessibility Checker did not identify the alt text sharing the file name as an error, but it’s pointing out to you that you probably want to go ahead and address the alt text now. 

Generally, you’ll want to keep alt text shorter than a tweet; Composer limits alt text to 125 characters. Adding too much alt text becomes cumbersome to read when it nears paragraph length. 

Accessibility errors and warnings can be addressed immediately with the “Quick fix” button. In this case, simply enter your desired alt text and hit the “Quick fix” button to change the alt text without needing to open a new window, before moving on to any other errors or suggestions.

One thing to note is that images used solely for decorative purposes do not require alt text. These can include banners, footers, sidebar and paragraph break images placed on a page to add some decorative “flair”. The Accessibility Checker will flag these images as a warning and ask if they are intended for decorative purposes only. If so, simply hit the “Ignore” button and continue on your editing way. If not, simply add some helpful alt text and hit “Quick fix.” 

The Accessibility Checker isn’t just a tool to check for missing or poor alt text. It does far more than that. The Accessibility Checker can be used to reliably scan any content you create for accessibility suggestions and errors dealing with: 

• Descriptive link text - Poor links are those that simply say “click here” or “learn more” instead of supplying context about what the link will contain. Try and provide some information about where the link will take you. Instead of simply linking “click here” to ask parents to download photos, use an entire sentence such as “Download the class museum field trip photos from this photo catalogue.”
   
• Misuse of headings - Generally, page headings should be used in descending order as you move down your web page for a uniform look. For example, title the page with a “Heading 1.” Then, separate sections with “Heading 2,” subheadings with “Heading 3,” sub-subheadings with “Heading 4,” and so on.
   
• Missing headers on tables - The general rule of thumb says that all tables, charts, graphs, etc. require a heading for context. How is someone supposed to know what a table, chart, or graph is displaying without knowing the subject or purpose?
   
• Using bold text in place of headings - While tempting to bold text because it can visually break up paragraphs of text, headers (especially the proper use of headers as shown above) do a much better job and actually help with search engine optimization (SEO).
   
• Misusing ordered lists - Make sure you make use of Composer’s built-in list feature when creating numbered or bullet point list. Failing to do so can result in poorly structured and difficult to navigate web pages.
   
• Alt text identical to the file name
   
• Missing alt text on non-decorative images  

After making all the edits the Accessibility Checker brings up, you’ll be notified that there are no further suggestions through a completion alert at the top of the page. Congratulations! 

The Accessibility Checker is available in Finalsite Composer’s content blocks, as well as in Finalsite Posts — ensuring all content on your website can receive a thorough scan before publishing.

Feature #2: Only Display Resource Images with Alt Text

Another important product release is the option to require alt text in order for images to display on your live website. 

On top of providing additional context for those with disabilities, alt text is incredibly important to add to images because it provides an alternative to images in search engines, which have difficulty interpreting images that appear on a web page. Alt text serves as the work around by providing text alternatives that can be read by search engines.  

If this option is selected, images without alt text will not be displayed in Resource elements or single image and video elements. A separate selectable option exists for images embedded through the CK editor (see Feature #3). 

To enable this option, simply navigate to the Resources menu in Composer and select the settings tab. Once in Settings, toggle “Only display Resource images with alt text.” You will also be able to see how many image resources that are set to display in Composer that currently do not have alt text set.

Admin users can also click on “No ALT Text” to filter through the all of the uploaded resources to find images without alt text. Images that appear in the menu are those without alt text.

Feature #3: Require Alt Text in the Rich-Text Editor

Another new option in Resources requires alt text for all images added to content in the WYSIWYG editor. Users will have to supply alt text before they can save the image properties menu while adding a new image or editing an existing image. 

Please note that this option will not be retroactive for images that have already been embedded in content. This will also not apply for images added or edited via HTML mode. An admin will have to manually add alt text for those images. 

This option is also enabled in the Resources menu in Composer. In the Settings tab, click the button next to “Require alt text for images added to content in the rich-text editor.” 

Feature #4: Alt Text is Automatically Added to Thumbnails in Posts

Since its creation and launch, Posts has quickly become one of the most heavily-used ways schools add content to their websites because of how easy it is to add text, images, and videos to elements on a web page. Accessibility makes this process even easier by automatically adding alt text to every thumbnail added to Posts. 

As with previous new features, this is not retroactive. Images previously added to Posts will need alt text manually added. 

Posts will automatically bring in any alt text that already exists for the image resource that was previously added elsewhere. Posts will also create alt text for image resources without alt text by copying the Post title as a reference since the thumbnail is normally a link to the post. Keep in mind that this auto-created alt text may need to be manually edited since image file names are rarely in an already accessibility-friendly format. 

For example, the above image of a dog may have been saved to your desktop as “Martin_101718,” auto-formatting generated based on a user’s last name and the date the image was created. As mentioned above, most file names for alt text are not inherently helpful. Let’s change that alt text to “Nova Scotia Duck Tolling Retriever standing with tongue out in a grass field during the day.” This alt text paints a complete picture of what the image shows.  

Key Takeaway

Finalsite’s holistic approach to accessibility continues to make viewing and interacting with your website easy and intuitive for everyone, while these new features, especially the Accessibility Checker, make accessibility-friendly website design just as easy on the back end.

ABOUT THE AUTHOR

As Finalsite’s Product Marketing Specialist, Andrew writes blogs and creates videos to share information about all the latest and greatest Finalsite products. Andrew has more than 10 years of video production experience and a journalism education from the University of South Carolina. He is excited about bringing his experience and expertise to Finalsite.