With the current school year coming to a close, you may be starting to think about how to update your school’s handbook for next year. According to Education World, “A school's ‘parent handbook’ is one of the first and most important resources that new parents and students receive. When questions arise, this is the guide to which parents turn, so a good parent handbook cuts down on time-consuming calls to the school office.” With that in mind, why not make your handbook a reference that parents will return to time and again, rather than a flat PDF parents will struggle to read even once? This blog has tips and tricks to make your school handbook more usable and successfully capture the content on an HTML page.

Use tabs and/or accordions--sparingly

One thing all school handbooks have in common is a lot of content. There are several different ways you can manage this large amount of content and make it easier for users to find what they need.

One way, of course, is to break it up into multiple pages. You still may have a lot of scrolling to do on each of those pages, though. To help mitigate this, tabs and/or accordions can be useful to show and hide content as it’s being used. You may even want to use both! Accordions can be nested inside tabs to further shrink the amount of content that’s being displayed at one time. (This seems to work better than tabs inside accordions, although it’s up to you.) Be careful when you’re using these elements that you don’t end up with a labyrinth of clicks that’s even harder to navigate than before! A little bit of scrolling isn’t too terrible.

Use anchor links to make your handbook interactive

Another way to reduce scrolling on a long page is to give your users links to jump straight to the content they’re interested in. Within a content element, you can set an anchor and then provide a link to that anchor to easily skip around in the text.

This works well if you have a lot of subsections within a content box. Place your cursor at the beginning or end of a heading, then use the Link dropdown to select “Add Anchor.” Give the anchor a unique name, then save it.

An anchor symbol will appear in the content element where you have added the anchor. This won’t be visible to your users!

Next, go to the place where you want to put a link to that anchor and highlight the desired text. Select the “Add Link” button and choose the “Anchor” tab. The dropdown list on this tab will include any anchors you have created inside this content element. Simply choose the anchor you want and save.

If your content is long enough, it may be a good idea to put a “table of contents” at the top with a list of anchor links. Another good trick for using anchor links is to give users a way to re-orient themselves after they’ve accessed content at an anchor link by adding a “back to top” link at the end of each section, pointing to an anchor at the top of your document.

Use a logical heading hierarchy

Here on the Support blog, we’re firm believers in using headings to break up text and make long passages more readable! We don’t pick headings at random, though. Just like accordions inside tabs, headings are nested within one another.

To help users understand where your document is going, use the heading levels provided in the text editor in order. Don’t skip levels just because you like the way one looks more than the other. This is especially important for users who use screen readers or other assistive technology and often rely on headers to navigate a web page.

Use a simple HTML tag to change list type

Buckle up--this tip involves changing the HTML! A numbered list in HTML is called an “ordered list,” or “ol.” But there are more ways to number a list than just 1, 2, 3. You may want to use letters or roman numerals instead! While the text editor only offers the regular number option, you can take a quick peek at the HTML and add a simple code to change the type of list you’re using. Follow steps A-D to make it happen.

1. Make the list into a regular numbered list using the text editor.   

2. Click on the HTML button to view the code.  

3. Find the <ol> tag at the beginning of your list content.  

4. Add a space and one of the following codes before the closing bracket.  

   type="A"	Upper-case alphabetical list
   type="a"	Lower-case alphabetical list
   type="I"	Upper-case roman numerals
   type="i"	Lower-case roman numerals

    

That’s it! When you click the HTML button to return to the edit view, you’ll see the letters or numerals you selected. You can do this on any level of list you create, as long as you can find that opening <ol> tag.

Use an accessible PDF

Finally, if you simply have to use a PDF (whether alongside or instead of HTML content), take the time to make it accessible for users with assistive technologies. Making PDFs accessible can be useful even for users who don’t need the help, but still appreciate these features.

There are lots of helpful tips for making a PDF accessible in our Knowledge Base. For a comprehensive rundown of how to make an accessible PDF, check out this webinar from our partners at AudioEye.