{"id":1511,"date":"2025-10-20T15:53:49","date_gmt":"2025-10-20T19:53:49","guid":{"rendered":"http:\/\/www.jfciii.com\/blog\/?p=1511"},"modified":"2026-02-17T10:32:17","modified_gmt":"2026-02-17T14:32:17","slug":"updated-organizational-chart-examples-using-html-and-css","status":"publish","type":"post","link":"http:\/\/www.jfciii.com\/blog\/2025\/10\/20\/updated-organizational-chart-examples-using-html-and-css\/","title":{"rendered":"Updated Organizational Chart Examples Using HTML and CSS"},"content":{"rendered":"<p>Back in 2016 I was looking for the best way to code an organizational chart that was accessible and thought it was time to publish an update blog post with an additional examples and some updates. <span data-preserver-spaces=\"true\">My organizational chart example page now has three examples instead of the two examples from before.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">I&#8217;m hoping the <\/span><a class=\"editor-rtfLink\" href=\"http:\/\/jfciii.com\/presentations\/examples\/org_chart.html\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">accessible organizational charts<\/span><\/a><span data-preserver-spaces=\"true\"> page using text and are code based (HTML and CSS) instead of graphics <\/span><span data-preserver-spaces=\"true\">make sense visually, but more importantly to those using assistive technology users like screen readers.<\/span><\/p>\n<h2><span data-preserver-spaces=\"true\">Example Charts<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">The first example organizational chart <\/span><span data-preserver-spaces=\"true\">was created<\/span><span data-preserver-spaces=\"true\"> using structured headings. These were indented by adding CSS classes to make them easier to read and understand the organizational hierarchy visually.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The second version uses unordered lists that contain headings within list items that have built in indentation.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">The third chart uses nested definition lists (DL), which are styled with CSS to show visually which groups or people fall under other groups or people.<\/span><\/p>\n<h2><span data-preserver-spaces=\"true\">Conclusion<\/span><\/h2>\n<p><span data-preserver-spaces=\"true\">I&#8217;m hoping one of these organizational charts works better for those using assistive technologies like a screen reader.<\/span><\/p>\n<p><strong><span data-preserver-spaces=\"true\">NOTE<\/span><\/strong><span data-preserver-spaces=\"true\"> &#8211; I think making organizational charts this way might not work well if you have a large organization, but could be useful to smaller teams or companies.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">If you use assistive technology can you please tell me if these <\/span><a class=\"editor-rtfLink\" href=\"http:\/\/jfciii.com\/presentations\/examples\/org_chart.html\" target=\"_blank\" rel=\"noopener\"><span data-preserver-spaces=\"true\">organizational charts<\/span><\/a><span data-preserver-spaces=\"true\"> are helpful in conveying an organization&#8217;s structure or confusing.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Thanks in advance for your help.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Back in 2016 I was looking for the best way to code an organizational chart that was accessible and thought it was time to publish an update blog post with an additional examples and some updates. My organizational chart example &hellip; <a href=\"http:\/\/www.jfciii.com\/blog\/2025\/10\/20\/updated-organizational-chart-examples-using-html-and-css\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[349,22,23,205,280,21,87,20],"tags":[],"class_list":["post-1511","post","type-post","status-publish","format-standard","hentry","category-349","category-22","category-accessibility","category-charts","category-code","category-css","category-html","category-web-standards"],"_links":{"self":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/1511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/comments?post=1511"}],"version-history":[{"count":5,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/1511\/revisions"}],"predecessor-version":[{"id":1532,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/1511\/revisions\/1532"}],"wp:attachment":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/media?parent=1511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/categories?post=1511"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/tags?post=1511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}