Silica Dust Hazards

The challenge

Crystalline silica dust is invisible until it isn’t: crushing, drilling, or grinding concrete, masonry, rock, or mortar releases particles that cause silicosis, lung cancer, COPD, kidney disease, and autoimmune disease. Virginia Tech’s researchers needed contractors and workers to actually feel that risk, then tell them how their crews handle dust in the field.

The research design depends on order. Participants answer a baseline survey, work through the evidence, then answer a follow-up, so the study can measure whether a short, honest look at the evidence changes what crews say they will do.

Where it started: WordPress

Our first build was a WordPress site on the Avada theme, in Virginia Tech’s brand. It carried the content that still anchors the project: nine standalone pages on which materials contain silica, which tasks release it, what the diseases are, what OSHA requires, and what controls cost, plus side-by-side video of the same cutting and grinding tasks with and without dust collection, and two survey pages bracketing the material.

Why we rebuilt it

On WordPress the nine learning pages were flat, standalone pages and the two surveys were separate pages, so the sequence the study depends on was only suggested by the menu. For research whose results depend on people moving through it in order, the site needed to be shaped like the study.

The content was stable and needed no editing interface, so we moved to static output with no CMS and no database, and rebuilt the experience around three parts: survey, learn, survey again.

The rebuild on Astro

The new site is built with Astro 7 and Tailwind CSS 4, with no front-end framework and no islands. Its 20 public pages render to finished HTML at build time. Page changes run through Astro’s view transitions with a custom crossfade, and links prefetch as they scroll into view, so moving step to step through the module feels immediate. Fonts are self-hosted, with Outfit standing in for Virginia Tech’s Acherus Grotesque alongside Crimson Text, and the palette is built from the university’s Chicago Maroon, Burnt Orange, and Hokie Stone.

The learning module is nine steps with a shared layout: a progress rail, a “Step X of 9” label, a dot stepper that marks the current step, and next and previous cards that hand off to the surveys at either end. Data is shown, not just stated. On the OSHA step, bars and counting figures compare how much dust each tool’s control removes; the return-on-investment step counts up to the 483% annual return on a $144 shroud and vacuum, and its formula has a text version for screen readers. The field videos are muted Vimeo loops that load lazily, shown side by side so the difference between controlled and uncontrolled dust is the whole argument.

News is an Astro content collection with a typed schema, so the research team’s updates are Markdown files with validated dates and covers rather than pages in a database.

A survey built for the study

Both surveys are nine questions, asked one at a time. Each question is a fieldset with a legend, with single choice, multiple choice, 1 to 5 scales, and optional free text. A progress bar counts questions, required answers block Continue with an error that is announced, Enter advances, and single-choice answers move on by themselves after a short pause. Picking “None” or “Not sure” clears the other boxes in a multi-select, so answers stay consistent. Progress is held for the session, so a participant who gets interrupted picks up where they left off.

Where responses land is the research team’s call, so the survey is built to plug into either path: it can post structured answers to an endpoint, or embed a hosted research instrument such as Qualtrics or REDCap, by changing one setting. The surveys never ask for a name, employer, or job site; the one contact field, an email on the follow-up, is optional.

Nothing lost in the move

Every old WordPress address forwards to its new home: the nine learning pages move under /learn, the two survey pages map to the start and finish of the new flow, and the remaining pages point to About, Resources, and Contact, so links already shared with crews and contractors keep working.

Accessibility, stated precisely

The rebuild has a skip link, labeled header and footer navigation, a visible focus outline, and survey steps that move focus to the new question. The main motion respects the reduced-motion setting: the hero’s drifting dust and slow zoom, the stats ticker, and the counters stop or land on their final values, and the survey no longer advances on its own.

To be precise about the claim: those are patterns we built and checked, not a conformance audit. The dated Lighthouse run below scores accessibility at 95, and the one issue it flags is contrast on the orange primary buttons.

Google PageSpeed Insights