Paste your content as plain text
Getting the content from the PDF into a webpage will involve some copying and pasting. We recommend using the "Paste as Plain Text" option in the editor and using the editor's tools - headings, inserting images, lists, bold/italic, etc. - and recreating the content.
An example of the "Paste with Plain Text" button which appears in the webpage editor.
Using Snippets to style the content
There are many content styling tools which we call "snippets" that you can use to make this content special, look good, mobile-friendly and accessible. Check out our Snippets Showcase to see what tools are already available to you. (For you Excel sheet-ers, there are some great table snippets which are completely accessible and mobile-friendly.)
A common issue with creating a web page from a PDF is determining how to section the content. How can we take information presented in a non-accessible PDF and turn it into a web page? Start by looking through the document to get an idea of what main points the document conveys. Looking for topics and headings is a good place to start, keeping in mind how you would explain the content to someone who couldn't read it themselves.
Walkthrough example of converting a PDF to a webpage
Let's take a PDF and create a web page as an example. The PDF that we're going to use as an example contains information on how MSU employees can donate sick time. The PDF is two pages and contains links in the text.
Note: Just because the PDF is searchable and contains links, doesn't mean it's accessible by the WCAG standards.
I've created a new page in the CMS called "donate-sick-time.pcf" and given the page a title of "Donate Sick Leave Pool Program" which is consistent with the PDF title. I've also created a subtitle "Starting January, 2015." The CMS allows you to add or remove editable regions.
Technical Structuring
Looking at the PDF, we can see that there are headings in bold that are great candidates for HTML headings. I'll make those into H2 tags (Heading 2 in the CMS.) There is also a heading "Submission Timeline" within "Applying for a Sick Leave Pool Allocation" which, I will make an H3 tag (Heading 3) since it's a sub-header to an H2 tag in HTML. You can follow this tutorial if you need a refresher on the use of headings.
Benefits of Design Decisions
There are five links at the top of the page, one links to a policy page and the others link to a page containing all forms for the department. When the PDF was designed the goal was to call attention to these links and put them in the forefront of the content. Turning this into a web page allows us to address a couple of issues that will make this content even more accessible and allow us to control the document flow even more. First, those links can now be presented inline without losing efficacy and in-fact will help page navigation. Presenting those links in the page will keep the surrounding context and increase clarity. The next benefit is presented in the context of a screen reader; the reader, if we repeat link information several times in the document will repeat that information multiple times so, you're doing a service to those who are not reading or skimming the content as a non-impaired person may. Finally, a PDF is a static document, the web page on the other hand can be more dynamic in nature, meaning that we can actually link to those particular sections of a document or a particular portion of another page and in doing so, reduce the reader's search efforts making it easier for visitors to find the information.
Effective Decisions
Looking carefully at the links of this document and the content of the PDF, I can include the links in the text pretty efficiently. Remember: it is very acceptable to make a link a few words longer to increase clarity of where it's going. I'm also going to make the links go to the exact portion of the page that I'm referencing. If you don't know how to make an anchor link in the CMS, we have an article on creating page jumps. This can be an effective design decision to make it easier for people to obtain the information and successfully navigate through the content you wish to present.
Alternative Approach
With a longer document, an alternative would be to create a quick page navigation with an anchor link to a specific portion of the document. Using this structure with the content needs and document flow can be a good option and one that would work well if you decide to make multiple CMS pages to present the content. This approach would be similar to our collapsible accordion snippet without the theatrics and the idea can be tailored to suit your needs.
We are still retaining the visual appeal of the document and we haven't lost any information of the original PDF. We've also made it easier to navigate, for impaired and non-impaired members of the audience. I've elected to leave the image out of this example but, you could certainly include it.
Important: In some cases you may want to include a link within the page to the original document, this is also acceptable and makes the original PDF information accessible by WCAG standards.
