The Purpose of Organizational Charts
Organizational charts help users understand reporting relationships, departmental structure, and areas of responsibility within the college or district. Historically, organizational charts have been published as PDFs or images.
Though these formats are visually appealing, they present accessibility challenges. Users of screen readers, mobile devices, screen magnifiers, translation tools, and other assistive technologies may have difficulty accessing information that is presented only as a PDF or image.
To improve accessibility and meet Title II requirements, organizational charts should be published as HTML. An HTML organizational chart allows the information to be:
- Read and navigated by screen readers
- Accessed using a keyboard
- Resized without loss of information
- Searched and indexed by search engines
- Translated by browser translation tools
- More easily updated and maintained over time
Organizational Chart Structure
Organizational charts are built using nested lists that represent reporting relationships. Each employee or position is represented by a card containing:
- Position title
- Employee name
Nested lists indicate that one position reports to another. This creates meaningful HTML structure that can be interpreted by assistive technologies while also allowing CSS to visually display the hierarchy.
Org Chart Conversion Tool
To simplify the creation process, we've created a conversion tool. Just paste or type a text version of an organizational chart and automatically generate the required HTML markup.
The converter uses hyphens to determine reporting relationships. Each line should contain:
Position Title | Employee Name
Example:
Chancellor | John Smith
- Vice Chancellor, Area 1 | Jane Doe
-- Director of Area 1 | Janet Smith
--- Analyst, Area 1 | James Doe
Each level of increasing hyphens represents a reporting relationship. There may be instances where you don't want a label to appear, but instead want to link to another org chart list or ID. When that is the case, include your desired text and omit the vertical bar.
Example:
Chancellor | John Smith
- Vice Chancellor, Area 1 | Jane Doe
-- See Area 1 Staff
The generated HTML can then be copied and pasted into the appropriate content tray in the CMS page source code.