Dropdown- second level hover information

A scalable software platform for all budgets.

Recruit students, help parents stay connected, and empower your staff to easily update content with premium communications products and tools.

Award-winning designers bringing your school to life online.

Schools love how Finalsite finds what makes them unique and translates that into an authentic digital experience.

School marketing experts at your service.

Schools turn to Finalsite's consultants for their decades of experience developing and executing a digital marketing strategy.

Improve School-to-Home Communications with Password-protected Portals.

Portals provide a safe and secure place for your community to access information that's just for them on every device.

Sarah Gordon, Assistant Director of Communications
Choate Rosemary Hall

A best-of-breed approach to give you the "all in one" solution you need.

We focus on the critical function of marketing and communication, while leveraging relationships and integrations with 70+ partners to provide a more seamless experience between the school and your constituents.

A team of 200, Finalsite has been serving schools worldwide for 20 years.

Our business has been for and about schools since the beginning, which is why 95% of clients stay with us year over year.

Save Time and Enhance Data Integrity

Our secure integrations with popular SIS providers mean you can replace timely manual data uploads with our automatic transfers for a seamless solution.

Sarah Gordon, Assistant Director of Communications
Choate Rosemary Hall
  • General Best Practices
  • Software Updates & Tips
New Tools Simplify Web Accessibility on Finalsite Composer
Andrew Martin

Making website design and content more accessible for every user is something we see as the right thing to do. After all, about 15 percent of the world’s population has some form of disability, which can make accessing websites an extra and unwelcome challenge.

Your school’s website brings together your school’s community on one platform; likewise, every school, big or small, is going to have someone in their community with additional accessibility needs. Ideally, every student, parent, and staff and faculty member can use your school’s website without issue. 

To nurture and grow their community, schools of all sizes can push out an impressive amount of content on a daily basis. But this staggering volume of content can make manually scanning for every accessibility error difficult, if not completely impossible. Schools with an accessibility-friendly design mindset need a way to catch every error before they’re published.  

Fortunately, the four fundamental principles of Perceivable, Operable, Understandable, and Robust (POUR) outlined in the Web Content Accessibility Guidelines (WCAG) can be seen in the very tools you will be using with Composer when you edit your website content. Some of these tools you will already be familiar with, such as alternative text (alt text) and image captions. These have been around for years. 

You may also be familiar with Finalsite’s partnership with AudioEye which provides your school with their proprietary technology and processes, which include:

  • Turnkey Solutions and Speed to Compliance
  • Beautiful, Functional, and Fully Accessible Websites
  • Continuous Monitoring
  • Automatic and Manual Remediation of Errors
  • AudioEye Toolbar for greater usability for all visitors

In an effort to ensure we continue to lead on accessibility, we’re excited to share with you some of our recent additions to the accessibility feature set on the Finalsite Platform.


Learn About Finalsite's Web Accessibility Solutions

Learn More


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. 

View the Accessibility Checker in Action

 

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.

Accessibility Checker Icon in Composer

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. 

Dog Image with Accessibility Checker Warning

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. 

Young male student does classwork at school next to female classmate

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.

Accessibility Checker warning

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.” 

Accessibility Checker Notice

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! 

Accessibility Checker pop-up with no issues

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). 

Accessibility Option to Only Display Resource Images With Alt Text

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.

Accessibility option to show images 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. 

Accessibility option to require alt text for images added to content in rich-text editor

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 thumbnail image menu that shows a Macbook image with alt text

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. 

Nova Scotia Duck Tolling Retriever standing with tongue out in a grass field during the day

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.


Download My Copy


Andrew Martin Header
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.

 

 


 

  • Web Accessibility
There are no news posts to display

Explore More Blogs

Macbook mockup with The American School in London website homepage
Debbie Eisenach

The American School in London (ASL) continues to hold a leading reputation among international schools around the world with thousands of global daily site visitors. Learn how ASL updated their homepage to make use of images, interactive elements, and clear messaging to reflect their mission of an outstanding American education with a global perspective. 

Read More about International School Website Redesign: The American School in London