Logo
Logo

Web Accessibility in Adobe Business Catalyst

I have been using the  Adobe Business Catalyst  content management system for the last three years and have recently looked at how the system handles web accessibility for content authors.

This post does not take into consideration the requirements to make your entire website accessible..

So I wanted to explain how you can make your content that little bit more accessible to your readers.

The new WYSIWYG is nice to use although still has some improvements needed.

wysiwyg-img

 

When you are uploading an image to your website you need to enter your image tool tip into the field shown below. Make sure the alt text is descriptive if you are trying to use the image to display information. If the image is purely decorative don’t worry about the alt text. The Alt text shouldn’t be longer than 125 characters.

tool-tip-image

Q. What is alt text?

A. Alt text or alternative text is what is displayed when you place your cursor over an image and what a screen reader will read.

A few things to think about with the image alt text is, is the image there to be purely decorative or is it to used to show the visitor something  descriptive.

Avoid words like “picture of,” “image of,” or “link to.”

Organise your content using true headings (e.g., <h1><h2>) and lists.

heading-level-img

There should only be one Header 1 on each webpage.

Provide a descriptive for your page  <title> tag, not just “about us”

Avoid phrases like “Click here”, “Here”, “More”, “More information”, “Read more”, and “Continue.”

Although the editor does allow for the creation of tables in the editor you still can, but you will need to do this outside of the editor. You will need to edit the code in code view to edit the table code. When creating basic tables make sure you add scope to the column and rows (scope=”col”) and assign a header to the table.

The main tags to ensure are added to table.

  • Summary in the opening table tag
  • Caption,after the closing table tag
  • Assign a header row
  • Add the scope attribute
  • If using complex tables seperate them into multiple tables

If you are adding hyperlinks you have the option to add your title tag. A tip is to give the user a hint to were they are navigating to. An example “Link provided to the website for Google”

In summary how does the Adobe Business Catalyst content management system shape up for accessibility. My first thoughts are very good, but you will need to know some basic HTML to make sure you are adding the correct tags to your content. There are areas for improvement but that is the same for many other systems i have used and continue to use for content authoring.

The biggest thing I think to remember is close your eyes and try to imagine what it is you have just added to your site and speak it out loud.  If it doesn’t make sense to you it will not to a screen reader, as that is what a screen reader does, it reads what is on your site. So if it doesn’t make sense to you, how is it going to make sense to people with disabilities.

A screen reader will read every thing you add to the screen so ensure that it is unambiguous.

Read more on our first installment of web accessibility on our blog.

Web Accessibility for Designers infographic with link to text version at WebAIM.org

tags:

Matt

Matt has been working in the web industry for over 15 years, he is also an avid mountain biker. He discovered his love for the internet years ago and has since honed his skills to keep up with the latest trends and technologies in the industry. Matt has worked with a diverse range of clients, including small businesses, non-profits, and large corporations, delivering high-quality websites. Apart from his work, Matt loves to explore the outdoors and takes every opportunity to hit the trails on his mountain bike. His commitment to his work and passion for mountain biking have earned him a reputation as a talented and well-rounded individual. If you're in need of a skilled web developer or an adventure-seeking mountain biker, Matt is the perfect fit.