A beautifully photographed cardmaking tutorial can still be hard to follow if the steps exist only as lettering inside the photos. Enlarging the page may not make that lettering legible, and a screen reader may miss the instructions entirely. Keep the photos, but put the materials, measurements and steps in ordinary page text too.
That same test works across a craft blog: if someone has only one way to get information or complete a task, look for a second, usable way. Here are common barriers on tutorial pages, galleries and enquiry forms, along with practical fixes.
Images that carry too much information
Missing or unhelpful alternative text
Alternative text, or alt text, conveys what matters in an image when it cannot be seen. Write it for the image's purpose on that page. In a tutorial, “Foam tape placed behind the stamped flower before mounting” is more useful than “Step 4” or the same “handmade card” label on every photo. An image used only as decoration can have an empty alt attribute so assistive technology skips it.
Alt text cannot carry a whole tutorial. Put supply charts, measurements and assembly steps in readable text beside the pictures. If a photo compares two inks, name them and explain the visible difference in the page copy. Readers can then copy a measurement or adjust the text size to suit them.
Colour used as the only label
“Use the red pieces first” is no help if a reader cannot distinguish the colours or the photo fails to load. Number the pieces, label the layers, or describe shape and position: “Attach the narrow scalloped strip along the left edge.” The same principle applies to forms. A red border should come with a message naming the field and explaining what to change.
Text that is difficult to read or navigate
Low contrast and tiny lettering
Pale grey type on cream may fit a soft craft aesthetic, but it can make supply lists and captions tiring to read. Check text against the background it actually sits on, especially over photographs. Commonly used WCAG contrast thresholds are 4.5:1 for normal text and 3:1 for large text; controls and meaningful graphical elements also need sufficient contrast. The overview of the Web Content Accessibility Guidelines explains these criteria.
Making every caption bold is not a fix for poor contrast. Choose readable colour combinations, then check links, button labels, placeholder text and error messages separately. Keep essential instructions out of tiny lettering in photos, and make sure enlarging page text does not cause words to overlap or content to disappear.
Headings that only look like headings
A bold line may look like a heading without appearing in the heading list a screen reader uses. Use actual heading elements in a sensible order: the page title, sections, then subsections. A card tutorial might have sections called “Materials,” “Cut the Base” and “Assemble the Front,” with a stamping technique under the relevant section. Choose heading levels for the structure, not their default font size; you can style them separately.
Links need useful wording as well. Several links called “Learn more” reveal little when read out of context. Name the destination or action instead, such as “View the marker-colouring steps.” If you are working on the order and usefulness of the instructions themselves, rather than accessibility mechanics, see the guide to writing cardmaking tutorials that stay useful.
Controls that cannot be used without a mouse
Menus, image galleries, form fields and buttons should all work with a keyboard. Open a page and press Tab repeatedly. Can you see which control has focus, reach controls in a sensible order, and activate links and buttons? Don't remove the browser's default focus outline unless you replace it with another clearly visible indicator.
Check pop-ups, too. If one offers a newsletter or enlarges a card photo, a keyboard user needs to be able to close it and return to the page. Hover-only menus cause trouble for keyboard and touch users; give submenus a control people can operate without resting a pointer over a label.
Clickable elements without clear names
A magnifying-glass icon might look obvious, but its accessible name should be “Search,” not “Button.” Check shopping-bag icons, gallery arrows and controls that open supply lists in the same way. Use buttons for actions and links for moving to another page. Keep visible labels and accessible names consistent so someone using speech control can say the words they see.
Forms that are hard to complete or recover from
A custom-card enquiry form may ask for the occasion, deadline, preferred colours and contact details. Give each field a persistent, associated label. Placeholder text is a poor substitute: it disappears as soon as someone types and may not make the expected format clear. Spell out which fields are required rather than relying on an unexplained asterisk.
If submission fails, keep what the visitor has already entered. Put a clear error beside the field and, where practical, add a summary that points to the fields needing attention. “Please enter a date in day/month/year format” gives someone something to act on; “Invalid input” does not. If the form has a time limit, check whether it is needed and whether users can extend it.
Make the questions easy to answer in the first place. “When do you need the finished card?” is clearer than a vague “Project details” box that quietly expects a deadline.
Video and motion with no accessible alternative
A heat-embossing video or a demonstration of a light-up card can make a technique easier to grasp. But key details should not live only in audio or fleeting on-screen text. Caption spoken instructions and meaningful sounds, and provide written steps with materials, measurements and safety notes. If the audio does not make a visual action clear, explain it in narration or nearby text—for example, where the maker places the copper tape.
Autoplaying slideshows and animations can interrupt reading. Avoid starting motion automatically where possible, and let readers pause or stop movement that continues. If a demonstration uses flashing, provide a steady image or written description so no one has to watch the flashing sequence to understand the project.
A manageable way to find and fix problems
An automated checker can catch some missing image descriptions, contrast problems and form-label issues. It cannot judge whether alt text describes the useful part of a card photo, or whether the tutorial makes sense without the video. Follow it with a manual check of a few representative pages.
- Pick three page types: a photo-heavy tutorial, a page with navigation or a gallery, and a contact or enquiry form.
- Try the keyboard: move through each page with Tab, Shift+Tab, Enter and Escape where relevant. Note invisible focus, unreachable controls and pop-ups you cannot dismiss.
- Inspect the text: enlarge the page, check heading order, read links without their surrounding paragraphs, and confirm that measurements and steps are available outside images.
- Review media: check alt text, captions, transcripts or written steps, and motion that starts on its own.
- Retest after changes: check the published page, not just the editing screen, on both a narrow and a larger display.
Fix barriers that stop someone completing a task before fine-tuning wording. A form that cannot be submitted by keyboard is more urgent than an alt description that could be phrased better. For each issue, record the page, the control or content involved, what happened and what should have happened. That gives whoever maintains the site a problem they can reproduce.
On your next tutorial, check one step all the way through. If the photo shows a 5 mm gap between foam-tape strips, write “Leave a 5 mm gap between the tape strips” in the step itself. Then use the photo's alt text for whatever the image adds visually.