A beautifully photographed tutorial is still hard to use when the instructions live only inside images, pale text fades into a patterned background, or the next step cannot be reached with a keyboard. Accessibility helps more people enjoy your cardmaking ideas, supplies, and services in the way that suits them.
It matters for visitors with permanent disabilities, temporary limitations such as a broken arm, and everyday situations like bright sunlight, a noisy craft room, a slow connection, or one hand occupied with a glue gun. These small changes usually make a site clearer for everyone.
Start with the content people need most
Focus first on pages that help visitors complete something: tutorials, supply lists, product or service details, contact forms, booking pages, and newsletter sign-ups. A card tutorial should not ask readers to guess measurements from a photo or decipher tiny labels on a diagram.
Use headings as a real outline
Headings help screen-reader users scan a page, and they help every visitor jump to a stage such as embossing, coloring, or assembly. Use one clear page title, then build the page with a logical heading structure. Choose heading tags for their meaning, not just because they make text look larger.
- Use an H1 for the main page title.
- Use H2 headings for major sections, such as “Materials” and “Assembly.”
- Use H3 headings only for subsections within an H2 section.
- Do not jump from H2 to H4 for visual styling.
In a project guide, put the supply list before the instructions, include measurements in text, and number the actions in the order they need to happen. Readers should be able to complete the project without interpreting a collage of images.
Make images useful without making pages wordy
Alternative text, often called alt text, describes meaningful images for people who cannot see them or choose not to load them. It is not there to list every visual detail or add search phrases. It should explain what the image contributes at that point in the page.
For an assembly photo where the layer sizes matter, “Layer a 9 cm floral panel over a 10 cm navy mat” is useful alt text. For an inspirational photo of the finished card, “Pink floral birthday card with gold-foiled sentiment” may be enough. When a nearby caption already gives the same information, shorter alt text is usually best.
Decorative flourishes, divider graphics, and repeated background motifs should generally have empty alt text so assistive technology can skip them. If an image includes essential words, such as a stamped sentiment or cutting measurement, include those words in the page text too. Text that appears only in an image can be missed, and it cannot be resized, translated, or copied reliably.
Build readable color and typography choices
Color can make a cardmaking site feel joyful, but it should never be the only cue. A red “out of stock” note, a green success message, or a color-coded supply category also needs a written label, icon, pattern, or another visible signal.
Text needs enough contrast with its background as well. Light gray type on white, white lettering over a busy craft-table image, and pastel text on pastel paper can look delicate while remaining difficult to read. Give body copy, form labels, buttons, and instructional notes sufficient contrast. Use comfortably readable type sizes and enough line spacing for detailed instructions.
| Common choice | More accessible approach |
|---|---|
| “Required fields are red” | Add the word “Required” and an asterisk explained in text |
| Pale text over a card photo | Place text on a solid or darkened overlay |
| Color-only supply chart | Name each color and add symbols or labels |
| Tiny caption-style instructions | Use normal body text below the image |
Ensure a keyboard can operate the site
Some visitors use a keyboard rather than a mouse, relying on Tab, Shift+Tab, Enter, and arrow keys. Set the mouse aside and press Tab repeatedly on your key pages. You should be able to see where the focus is, move through menus and form controls in a sensible order, activate buttons, open and close pop-ups, and submit forms.
A visible focus indicator is essential. Removing the outline around a selected link or button may appear cleaner, but it leaves keyboard users unsure where they are. If you use a custom focus style, make it at least as noticeable as the browser default.
Use specific button labels. “Submit” can work for a short contact form, while “Send my workshop enquiry” gives visitors more context. Avoid repeating clickable phrases such as “Learn more” across a listing page unless each one has an accessible label that identifies where it leads.
Create forms with clear, recoverable steps
Keep labels visible beside their fields instead of relying on placeholder text that disappears once someone starts typing. Where possible, explain the expected format before submission: “Phone number, optional” or “Enter date as month/day/year.”
If a mistake occurs, identify the field and explain how to fix it. “Please correct the highlighted fields” is less useful than “Email address is missing” or “Postal code must contain five digits.” Preserve information already entered whenever the form can be safely reloaded.
Support different ways of viewing tutorials
Videos need captions for spoken instructions and meaningful sound effects. A written transcript helps readers who prefer to skim, translate the content, or work at the craft desk without sound. For short reels that demonstrate a technique, add a brief written explanation of the key motion, timing, and materials instead of saying only “watch the video.”
Responsive design matters too. A tutorial that works well on a wide monitor can become frustrating when supply lists, photo galleries, and buttons crowd a small screen. Practical adjustments are covered in our guide to making cardmaking tutorial pages mobile-friendly, including ways to keep instructions usable on phones.
Test with people and everyday tools
Automated accessibility checkers can spot missing alt text, weak color contrast, and some form problems. They cannot tell you whether an image description is meaningful, a tutorial sequence makes sense, or a button label is clear. Use automated checks alongside manual review.
- Increase browser zoom to 200% and check that content does not overlap or disappear.
- Use only a keyboard to move through a key page.
- Turn off sound and review a video for caption quality.
- Check pages on a phone in bright light.
- Ask a few readers for feedback, especially people who use assistive technology or have different access needs.
Keep a simple accessibility checklist with your publishing checklist. Before sharing a new interactive light-up card tutorial, check that the supply list is text-based, every important diagram has a description, captions identify the battery connection step, and the final “Print instructions” button has a visible keyboard focus outline.