Create an org chart that's accessible

Robin Ridgway's Avatar

Robin Ridgway

02 Nov, 2015 03:37 PM

Hello: I have posted org charts for our department on our webpage. It is very difficult to make the charts accessible. Is there a way to build a chart in the wysiwyg editor box so it is converted to HTML and thereby accessible?

  1. Support Staff 1 Posted by Tim on 17 Nov, 2015 02:32 PM

    Tim's Avatar

    Hi Robin,

    There aren't any built-in tools within TinyMCE (the editing interface) that will allow for you to build an organizational chart. However, if you are familiar with HTML and are comfortable modifying it to fit your needs, you could take a look at an HTML Organizational Chart example like this one. You would need to make sure that the CSS provided there is applied to both your Template and your Site CSS file so that the styles can be applied in the editing interface as well as within the rendering of the Page.

    Once the general layout of the organization chart has been copied/pasted, you'll be able to change the labels in the WYSIWYG interface but you won't be able to easily change the connectors since that is more a function of the HTML/CSS.

    Hope this helps.

  2. Support Staff 2 Posted by Tim on 17 Nov, 2015 02:55 PM

    Tim's Avatar

    Keep in mind the link I provided above is just a sample. That one doesn't appear to be accessible, so you may want to see if you can find an example that uses alt attributes for all of its img tags, for example.

  3. Tim closed this discussion on 02 Dec, 2015 02:53 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac