A tutorial becomes frustrating the moment a pale-grey supply list disappears into a white background, a button appears only on hover, or a finished-card photo has no helpful description. Accessibility often comes down to these small choices. They affect whether people can perceive, understand, operate, and use your site with different devices and assistive technology.
For a cardmaking blog or small creative business site, the most useful changes are usually practical ones. Clear headings help readers scan a long tutorial. Strong contrast helps someone reading in bright sunlight. Keyboard-friendly forms support people who do not use a mouse. Captions and accurate image descriptions make visual teaching more complete.
Start with the pages people need most
Trying to fix an entire website in one sitting often leads to rushed work. Start with the pages people use most: the home page, navigation, popular tutorials, category pages, contact page, newsletter sign-up, shop or booking steps, and downloadable instructions. A barrier on any of these pages can stop someone from completing what they came to do.
Make a short inventory, then test each page through ordinary tasks. Can a visitor find an autumn card tutorial? Can they identify the materials they need? Can they send a question? Can they enlarge a project image and return to the page? Testing real tasks reveals problems that are easy to miss when you only view the site as its editor.
Use a simple improvement log
A spreadsheet or notes document is enough. Record the page, the issue, who it may affect, the change needed, and whether you have checked the fix. For example:
- Birthday shaker-card tutorial: two process images have empty or vague alternative text.
- Navigation menu: keyboard focus is difficult to see against the background.
- Contact form: required fields are indicated only by red text.
- Newsletter form: the error message appears at the top of the page, far from the field that needs correcting.
Where possible, fix one repeated issue across the site before moving on. Updating heading structure everywhere, for example, is usually more consistent than making isolated changes one page at a time.
Give every page a dependable structure
Headings are more than decoration. They show the structure of a page to readers, screen-reader users, and search tools. Most pages need one clear H1 that states the main topic, followed by H2 headings for major sections and H3 headings for subsections. Do not select a heading level simply because it looks bigger or smaller; change the styling in your site design instead.
A card tutorial might use this structure:
- H1: Watercolour Floral Birthday Card
- H2: Materials and tools
- H2: Prepare the stamped panel
- H3: Mask the flowers
- H3: Add marker colour
- H2: Assemble the card
- H2: Variations and troubleshooting
Use real lists for supplies, steps, and options. A numbered list makes the order clear: stamp first, let the ink dry, then add colour. A bullet list suits items that can be gathered in any order. Avoid creating fake lists with hyphens or decorative symbols at the start of regular paragraphs.
Clear page titles and link text also remove guesswork. “Download the A6 card base template” tells visitors what to expect. “Click here” does not. If a link opens a file, a new tab, or a different format, mention that nearby where practical.
Make text comfortable to see and understand
Legibility is about more than font choice. Type size, contrast, spacing, line length, and page clutter all matter. Small text in low-contrast pastel shades may fit a brand palette, yet it can be difficult to read for people with low vision, colour-vision differences, fatigue, or a dim screen.
Check contrast before relying on colour
Text needs to stand clearly apart from its background. As a useful baseline, normal-sized text needs a contrast ratio of at least 4.5:1, while large text generally needs at least 3:1. A contrast checker can assess two colour values quickly. Check text over photographs and gradients separately, because the background changes across the image.
Use colour to support meaning, not carry it by itself. If a supply is optional, do not mark it only in green; add “Optional” or an icon with a text label. If a form field contains an error, pair the red border with a written explanation, such as “Please enter an email address in [email protected] format.”
Keep body text at a readable size, and allow browser zoom without overlapping content, disappearing elements, or side-to-side scrolling. Avoid long blocks of centred text, fully justified paragraphs with uneven gaps, and paragraphs written in capitals. Often, a shorter and plainer sentence works better than extra visual emphasis.
Write alternative text that supports the lesson
Alternative text, often called alt text, gives an image a text equivalent when it cannot be seen. The right description depends on the image’s role. A decorative flourish with no useful meaning can have empty alt text so screen readers skip it. A process photo in a tutorial needs to explain what it adds to the instruction.
For example, “cardmaking supplies” is too broad for an image beside a materials list. Better alt text might be: “Stamped floral panel beside pink markers and foam tape.” For an important technique photo, include the action or result: “Low-tack tape holds the stencil over the inked card panel.”
There is no need to begin every description with “Image of,” and you do not need to repeat details already given in an adjacent caption. Avoid filling alt text with product names or search phrases. Screen-reader users need the useful visual detail, not a catalogue entry.
Some images need more than a short alt attribute. A detailed diagram, cutting template, or comparison chart should have explanatory text nearby. Describe dimensions, sequence, colour coding, and important relationships in the body of the page. If a printable file is essential to the project, do not rely only on labels embedded in an image.
Support keyboard and touch use
Some visitors use a keyboard, switch device, voice controls, or a mix of tools. A quick keyboard test can reveal common problems. Starting in the browser’s address bar, press Tab to move through the page. Each interactive element should receive focus in a logical order, and the focus indicator should be visible. Shift+Tab should move backward in the same predictable way.
Check menus, search controls, accordions, lightboxes, cookie notices, carousels, and forms. A visitor should be able to open and close a menu, use a slideshow, choose a filter, and submit a form without a pointer. Keyboard focus should not get trapped inside a pop-up. When the pop-up closes, focus should return to the control that opened it.
Touch controls need room around them, too. Tiny social icons, close buttons, and gallery arrows are easy to miss on a phone, especially for people with limited dexterity. Give each control a generous tappable area, even when the icon itself is small. Do not rely on instructions such as “swipe left” without providing a visible button or another option.
Keep movement under the visitor’s control
Autoplaying videos, rapidly rotating galleries, animated backgrounds, and flashing effects can distract people and may cause discomfort. If movement communicates something important, provide controls to pause, stop, or hide it. Avoid flashing content altogether. A card-reveal animation can be lovely, but the finished card and instructions should still be available as static content.
Build forms that explain themselves
Forms often fail because labels, instructions, error messages, and confirmation states do not work together. Every input needs a visible label that remains in place. Placeholder text is not a replacement: it disappears once someone starts typing and is often low contrast.
Put instructions before the field where possible. If a contact form asks for a project deadline, label the field “Preferred completion date” and explain the expected format beside it. Mark required fields with text, not an asterisk alone. If validation fails, explain what needs to change close to the relevant field, and keep information the visitor has already entered whenever it is safe to do so.
Make successful submission clear as well. “Thanks, your message was sent. We will reply by email” is more helpful than returning someone silently to the same page. The practical guidance in How to Create a Contact Form That Visitors Will Actually Use can help when you are improving enquiry steps alongside these accessibility checks.
Use media and downloads without excluding people
Video tutorials need accurate captions for spoken content, including important sound cues such as “heat tool starts.” Captions help deaf and hard-of-hearing viewers, and they are useful in quiet places or when someone cannot play audio. For longer tutorials, a transcript is also a handy reference when it includes supply names, measurements, and timestamps.
Provide a transcript for audio instructions. In visual-only demonstrations, describe the essential actions instead of assuming viewers can infer them. “I am placing the foam tape around the edge, leaving no gaps, so the shaker pieces stay inside” teaches the method more clearly than silent close-up footage.
PDFs need the same attention as web pages. A document made from a photo of text will not be reliably readable with assistive technology. Use selectable text, meaningful headings, tagged lists, readable contrast, and descriptive document titles. When possible, keep the main project steps on the webpage rather than making a download the only way to access the instructions.
Check tables, galleries, and embedded tools
Tables are useful when information has genuine row-and-column relationships, such as cardstock-weight comparisons or card-base dimensions. They are not for page layout. Introduce each table clearly, use concise column headings, and leave enough space for mobile reading.
| Component | Measurement | Purpose |
|---|---|---|
| Card base | 5 × 7 inches | Finished folded card |
| Front panel | 4.75 × 6.75 inches | Stamped and coloured layer |
| Foam tape | Thin strips | Raised dimension |
For image galleries, make sure every image can be reached by keyboard and has a meaningful label when it represents a distinct stage. Avoid slides that advance on their own. Third-party widgets for mailing lists, comments, booking, or social feeds can introduce accessibility problems, so test them on mobile and with keyboard controls after major updates.
Make accessibility part of publishing, not a repair project
A repeatable pre-publish check stops small oversights from building up. Before posting a tutorial, check that headings follow a logical order, images have appropriate alternative text, colour is not the only instruction, links describe their destination, videos have captions where needed, and the page still works at enlarged text size. Theme and plug-in updates can change settings or behaviour, so include these checks in regular maintenance. Website Maintenance for Cardmakers: Small Checks That Build Trust offers a useful framework for keeping those routine checks manageable.
For a practical first step, open your most-visited tutorial and press Tab from the top of the page. Write down every place where focus disappears, skips a control, or lands on something that cannot be used. That list gives a developer, theme provider, or site editor a clear starting point for the first fixes.