PDFs and accessibility, part 1: making our organisation chart accessible

Organisation charts presented in PDF format are one of the worst offenders when it comes to accessibility. Rob, from our Content Design team, explains how he turned one such chart into accessible HTML content.

When the bristol.ac.uk site was audited by Government Digital Services last year, one of the main issues that we had to fix was inaccessible PDFs.

PDFs pose particular problems for anyone with accessibility needs. It is possible to painstakingly add all of the structural tags for titles and headings so that the PDF passes accessibility criteria, but it’s unlikely that the effort will pay off; if someone finds 99% of PDFs that they encounter inaccessible, they’re not going to take the risk of opening another.

PDFs ‘Unfit for human consumption’ – Nielson Norman Group

The original purpose of PDFs was to create a document in which the layout was static. This is why the Nielsen Norman Group recognises that PDFs are ‘great for one thing and one thing only: printing documents’.

Creating a static document runs counter to all current content design wisdom. PDFs might have been fine back in 1993, but 30 years later we now use all sorts of different devices (laptops, tablets, smartphones) and web content needs to be able to resize to fit those screens.

Adobe’s new ‘Liquid Mode’ for PDFs has improved some accessibility issues, but many remain, particularly when including tables and charts, invoices, statements and receipts, forms, or non-standard page sizes.

How we made our organisation chart accessible

The most accessible alternative to a PDF is a HTML web page. Some documents are easy to turn into web pages, by creating common document elements such as headings, bullet lists and tables.

Others are not so easy to make into webpages – but definitely not impossible!

As part of work to improve the governance section of the University website, I worked on turning the ‘Academic Organisation’ PDF image into a HTML web page.

An 'org chart' diagram showing the structure and hierarchy various positions. A textbox giving the name and title of the Vice-Chancellor is at the top. A line to a box below, for the Deputy Vice-Chancellor, shows that the deputy reports to them. Further lines of reporting and hierarchies are indicated by the positioning and lines connecting other text boxes.
The January 2023 University of Bristol academic organisation chart PDF.

Someone with visual impairment who cannot see such images is completely shut out from the information contained there:

  • A screen reader cannot detect the text, as the chart is an image file.
  • A screen reader cannot detect the ‘reporting lines’ in the image (for example, the lines indicating that the three Pro Vice-Chancellors report to the Deputy Vice-Chancellor).
  • A screen reader cannot detect the different shades of colour – another exclusively visual representation of the hierarchy between roles.

In the UK there are almost two million people living with sight loss, so this has a much bigger impact than you might realise.

This information must be presented as text. But simply replicating the text in the images does not communicate the team structure.

My solution was to create an academic management webpage and to represent each person with a module box. Each module box includes the job title, the current role holder, roles that that person manages or reports to, and – crucially – hyperlinks between them, so that someone who just needs to find out who someone reports to does not have to scroll through every other role to find them.

Screenshot of a section of a webpage with three module boxes. The top box has the heading 'Vice-Chancellor and President', the second one is 'Deputy Vice-Chancellor and Provost', and the last is 'Pro Vice-Chancellor for Education and Students'. Each module box includes the name of the post holder and a list of roles that report to that person. The Deputy Vice-Chancellor and Pro Vice-Chancellor boxes also include a list of roles that that person reports to, indicating that the Deputy reports to the Vice-Chancellor and the Pro-Vice Chancellor reports to the Deputy. The roles are underlined, indicating that these are links to those text boxes.
Screenshot of the new academic management webpage, showing module boxes.

Someone who wants to escalate something from the Pro-Vice Chancellor for Education and Students, for example, can follow the link under the ‘Roles that this person reports to’ heading to get details of the Deputy Vice-Chancellor and Provost. If necessary, they can escalate up to the Vice-Chancellor and President, following the same actions.

The old PDF version is still available to open on the same page, for any users who are happy (and able) to open it and see the entire team structure at a glance. The number of PDF views/downloads decreased from 355 in 2020 to 135 in 2022, illustrating that the new HTML page is meeting user needs, and in a much more accessible way.

This new method has been a success: accessibility expert George Rhodes said that this solution ‘used basic components to deliver a visually clear and accessible organisation chart, which is the fundamentals of accessibility’. The site owners for the governance site have maintained this page since we developed this for them, so it’s also a sustainable solution.

Accessible PDFs help on our support site (University of Bristol staff only).

Contact the Content Design Team to discuss accessible alternatives to PDF organisation charts and other content (University of Bristol staff only).

3 thoughts on “PDFs and accessibility, part 1: making our organisation chart accessible

  1. This is very helpful! Out of interest, I just created an org chart type thing on Sharepoint – the way I did this was to include an embedded PPT slide – is this accessible if the person downloads the original PPT slides or would they still encounter the same issues?

    Thanks for your thoughts

  2. Hi Alice,

    I’m afraid that a PPT slide – whether embedded or downloaded – will present many of the same problems as a PDF. (There’s even a perversely pro-PDF argument that most people will be able to open PDFs whatever device they’re using, whereas not everyone’s phone/tablet/whatever will have the means to open PPT, but since this is a staff intranet site on SharePoint we can reasonably assume that the user probably won’t struggle with that here…)

    If this content *needs* to remain on SharePoint then you can probably replicate what I did on T4 using the in-built heading link functionality – if you want, feel free to put something in my calendar for us to workshop a SharePoint solution. Alternatively, if this org chart isn’t ‘for staff eyes only’ then it could(/should?) go on T4 and you can simply link to the public page from the intranet site.

    Fight the power ✊

    -Rob

  3. Huge thanks to Rob and the Digital Comms Team who supported this project.

    We really appreciate all the work you put in to rebuild the website from scratch and make it more accessible 🙂

    Sarah

Leave a Reply to Rob Cancel reply

Your email address will not be published. Required fields are marked *