Designer Diary: Build a Better Floor Plan with Hotspot

Joey.S.348

I’m an instructional designer working with Creator+ to build content at D2L. In this series, I’ll share some of the tips, tricks, and hidden gems of the Creator+ suite.

It may not seem like it, but the office floor plan is one of the most important documents at an organization. It helps new employees orient themselves and can direct existing employees around unfamiliar spaces. Floor plans must always be at hand and often hold a privileged position in an organization’s human resources directory. 

Despite their significance, some employees don’t get the same benefit from floor plans. Even with thoughtful alt text, these documents can present serious accessibility issues for employees who are visually impaired or have low vision.  

Here’s an idea: make your floor plan fully accessible to all employees by getting creative with the Creator+ Accessible Hotspot. You can customize your floor plan with points of interest around the office and add links or other media to hotspot boxes for a more engaging experience. Even better, screen reader users can scan the map to understand common destinations and how to get there safely.  

In this article, I’ll show you how it’s done. 

Setting Up Your Floor Plan 

To make your accessible floor plan, you’ll use the Creator+ Hotspot element on an HTML content page: 

1. Open an HTML page with Creator+ enabled 
2. Select “Other Insert Options,”  
3. Navigate to “Insert Element” 
4. Select “Hotspot” 

Now it's time to configure your Hotspot. Choose a JPEG or PNG of your floor plan and add it as the Hotspot image. Write a simple alt-text description for the floor plan, something like “Overhead view of office floor plan” is fine for this general description. If there's a suite, office, or floor number, consider including that as well.

Select points of interest around your office and place your hotspot markers on these areas. You can have a maximum of ten hotspot markers, so try to think about the most important parts of your office, such as the kitchen, restrooms, IT help desk etc. 

Using the content associated with each hotspot marker, you can provide more details, relevant links, or even supporting audio or video. Maybe you want to link out to your IT ticketing system? Maybe there's a video of how to use the office coffee maker? Be creative and add details that will help learners understand their office. 

Make it Accessible 

Next, you’ll want to make your floor plan fully accessible. To enable an accessible floor plan, follow these steps: 

1. Select the “Accessibility” button in the Hotspot options 
2. Select the “Fully accessible image” option

The fully accessible option overlays your floor plan with a grid. Create unique micro alt tags for each cell of the grid to describe the details of the image. This is crucial because it allows screen readers to “read” the floor plan. Screen reader users will tab through the image cell-by-cell hearing the descriptions of what’s captured within each cell, as well as its position within the grid. You’ll want to give each cell a simple description, so screen reader users understand. 

After that, you’re ready to deploy your accessible floor plan to your learners. Simply select "Save and Insert" to add the element and select "Save" to finalize changes to the HTML page.

Explore More 

Hotspot lets you deconstruct and contextualize complex images for learners. It allows your learners to explore important visuals in unique ways and promotes equity for all learners at your organization.  

What are some of the ways you’re using Hotspot? Share some examples in the comments! 

Floor plan image taken from grapholite.com