Test Organizational Charts

This page was created to see if text based organizational charts make sense for someone using assistive technologies like screen readers.

The first example organizational chart is built using structured headings. These were indented by adding CSS classes to make them easier to read and understand the organizational hierarchy visually.

The second version uses unordered lists that contain headings within list items that have built in indentation.

The third chart is built using nested definition lists (DL), which are styled with CSS to show visually which groups or people fall under other groups or people.

I'm hoping creating organizational charts this way may work and can be added after the visually designed chart. Making charts this way might not work out well if you have a large organization.

Organizational Chart Using Proper Heading Structure

Head Wine Geek

John F Croston III

Chief Chef

Evan Carlson

Apprentice Taster

Liam Black

Assistant Apprentice Taster

Dave Williams

Pig and Party Master

Tony Guida

Director of the Grounds Crew

Jeff "the Task Master" Bryant

Assistant Director of the Grounds Crew

Sarah Melinda

Director of Yard Work

Hannah "the Scot"

Director of Field Tastings

Buzz Cerino

Austin

Glenda "Tthe Good Witch" Simms

St. Louis

Justin "Thorpus" Thorp

Seattle, WA

Marcy Sutton

Portland, OR

Matthew "Matto" Oliphant

Organizational Chart Using Unordered List and Proper Heading Structure

Organizational Chart Using a Definition List (DL)

Head Wine Geek
John F Croston III
Chief Chef
Evan Carlson
Apprentice Taster
Liam Black
Assistant Apprentice Taster
Dave Williams
Pig and Party Master
Tony Guida
Director of the Grounds Crew
Jeff "the Task Master" Bryant
Assistant Director of the Grounds Crew
Sarah Melinda
Director of Yard Work
Hannah "the Scot"
Director of Field Tastings
Buzz Cerino
Austin
Glenda "the Good Witch" Simms
St. Louis
Justin "Thorpus" Thorp
Seattle
Marcy Sutton
Portland
Matthew "Matto" Oliphant