kursor Creative Digital Design - Canberra

Web Accessibility in Adobe Business Catalyst

Posted by: Matt | May 19, 2015

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

Get the latest SEO and WordPress tips

SUBSCRIBE NOW!

Signup to recieve our latest hints and tips.

WELCOME,

Enjoy luxury, exclusivity and discretion

NOW TREAT YOURSELF!

Get 25% Off & Free Shipping On Your First Order. Enter Code WELL25SPE