Alt attributes provide a text alternative for images, used by screen readers when a user cannot see the image and by search engines and multimodal AI models to understand what the image depicts. Fixing this issue means writing concise, descriptive alt text for every meaningful image on the page, and using empty alt for purely decorative images so assistive technology can skip them. The same alt text helps multimodal LLMs and image search tools surface and cite your visuals.

Example

<img src="/images/marathon-shoes.jpg"
     alt="Side view of a lightweight neon-green marathon running shoe">

<img src="/images/divider.svg" alt="">

Where to make the change

• Raw HTML: add the alt attribute to every <img> tag. For decorative images, use alt="" so screen readers skip them.
• WordPress: the media library has an Alt text field on every uploaded image. Fill it once and the value is reused everywhere the image is inserted.
• Shopify: in the product or page editor, click an image and use the Edit alt text option. Theme code that renders product images should pull image.alt.
• Wix or Squarespace: click the image in the editor and use the Alt text or Image description field in the side panel.
• Headless or framework sites: require an alt prop on every image component and lint for missing values during build.

Common causes and how to resolve them

• Attribute missing: add alt="" at minimum so the page validates. Replace with descriptive text on any image that conveys information.
• Alt text is the filename: "IMG_4837.jpg" tells the user nothing. Replace with a description of what is in the image.
• Alt text duplicates the visible caption: screen readers will read both, doubling the user's listening time. Differentiate the alt from the caption or empty the alt.
• Decorative images get descriptive alt text: background patterns and dividers should use alt="", otherwise screen readers narrate noise.
• Bulk imports left alt blank: a one-off audit of the media library or a CMS-side script can fill missing alt values from product names, captions, or asset descriptions.

Best practices

• Describe the function, not just the appearance: for a chart, describe what the chart shows. For a button image, describe what the button does.
• Keep it concise: aim for under 125 characters. Screen readers do not pause mid-sentence, so long alt text is exhausting to listen to.
• Skip "image of" or "picture of": the screen reader already announces it as an image.
• Include the focus keyword when natural: alt text is a minor on-page signal, but stuffing keywords in unnatural alt text harms both accessibility and ranking.

This test fails when the page uses HTML elements that are no longer part of the current HTML specification. Deprecated tags may still render in today's browsers, but support can be dropped at any time and most have semantically richer modern replacements. Fixing this issue means swapping legacy tags for current equivalents and moving presentation concerns into CSS.

Example

<!-- Deprecated -->
<font color="red">Important</font>
<center>Centered text</center>

<!-- Modern equivalent -->
<span style="color: red;">Important</span>
<p style="text-align: center;">Centered text</p>

Where to make the change

• Raw HTML: search the codebase for the deprecated tag names and replace each occurrence with a semantic element styled via CSS.
• WordPress: deprecated tags often live in classic-editor posts or custom theme templates. Open the offending post or template and replace the legacy markup; the block editor will not introduce new ones.
• Shopify, Wix, or Squarespace: issues usually trace to custom HTML embeds. Edit the embed to use modern tags and CSS.

Common causes and how to resolve them

• <font>, <center>, <marquee>, <blink>: replace with semantic tags styled in CSS.
• <b> and <i> for emphasis: use <strong> and <em>, which carry semantic weight that <b> and <i> do not.
• Presentational attributes such as bgcolor, align, border: move them to CSS so the markup stays clean.
• Old <frameset> or <frame> markup: rebuild the layout with CSS and, if absolutely necessary, <iframe>.

Best practices

• Use semantic HTML5 elements: <header>, <nav>, <main>, <article>, <section>, and <footer> describe meaning, which helps both SEO and accessibility.
• Keep presentation in CSS: markup describes structure and meaning; CSS handles visuals. This separation makes the site easier to redesign.
• Validate with a current HTML checker: running the page through an HTML validator catches deprecated tags and other markup issues before they ship.

This test fails when external links opened in a new tab (with target="_blank") lack the rel="noopener" or rel="noreferrer" attributes. Modern browsers (Chrome 88+, Firefox 79+, Safari 12.1+) apply noopener implicitly, so this is largely a defense for older browsers and a way to keep the destination page from running in the same browser process as the original tab. Fixing this issue means adding the attributes explicitly to every external target="_blank" link.

Example

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  External link
</a>

Where to make the change

• Application code or templates: search for target="_blank" and add rel="noopener noreferrer" to each match. A simple find-and-replace handles most cases.
• WordPress: the block editor adds rel="noopener" automatically on every external link opened in a new tab. Older content may need a one-time bulk update.
• Shopify, Wix, Squarespace: editor-generated links typically include the rel attributes. Manual HTML embeds need them added.
• Headless or framework sites: wrap external links in a component that always sets the correct rel attributes.

Common causes and how to resolve them

• Hand-written external links missing the attribute: add rel="noopener noreferrer" to each one.
• Old content from before the editor added it automatically: a one-time bulk update through the database or CMS export covers it.
• Markdown-rendered content: configure the renderer to add the attributes to every external link by default.

Best practices

• Use noopener noreferrer together: noopener handles the security concern, noreferrer additionally hides the referring URL. Both are safe defaults for most external links.
• Reserve target="_blank" for genuinely external links: internal links should open in the same tab so users can use the back button naturally.
• Add a lint rule: ESLint plugins for React and similar frameworks can enforce the rel attribute automatically.

This test reports on whether the page applies a nofollow directive that tells search engines not to follow outbound links. The nofollow attribute (and the related sponsored and ugc values) controls how link equity flows from your page. Fixing this issue means using the right rel value on each external link based on its purpose so signals are passed only where you intend.

Where to make the change

• Raw HTML: add rel="nofollow", rel="sponsored", or rel="ugc" to specific outbound links rather than blanket-applying them site-wide.
• WordPress: the block editor offers a "mark as nofollow" option per link, and SEO plugins can auto-tag external links by domain.
• Shopify, Wix, Squarespace: editor-generated links allow rel attribute toggles; manual HTML embeds need them set explicitly.
• Headless or framework sites: wrap external links in a component that decides the rel based on the link's classification.

Common causes and how to resolve them

• Site-wide nofollow on every external link: overly aggressive. Reserve nofollow for sponsored, untrusted, or user-generated content.
• Sponsored content not labeled: use rel="sponsored" on paid placements and affiliate links to comply with Google's link spam policy.
• User-generated content unmarked: comments, forum posts, and review user submissions should use rel="ugc".
• Trusted editorial links nofollowed: these should pass equity. Remove the nofollow.

Best practices

• Use the most specific value: sponsored for paid links, ugc for user content, nofollow for everything else you want to disclaim. They can be combined: rel="sponsored noopener".
• Do not nofollow internal links: "PageRank sculpting" with internal nofollow no longer works and just wastes crawl signal.
• Audit periodically: as content ages, sponsored relationships change. Review affiliate and partner links once a year.

This test fails when the page uses a meta refresh tag to automatically reload or redirect after a delay. Meta refresh is largely obsolete: it hurts accessibility by jumping focus and disorienting screen reader users, and it is a weaker signal to search engines than a proper server-side 301 redirect. Fixing this issue means removing the meta refresh and using the appropriate alternative (a 301 redirect for permanent URL changes, JavaScript or CSS for dynamic content updates).

Where to make the change

• Raw HTML: remove <meta http-equiv="refresh" ...> from the <head>.
• Server configuration: replace with a proper 301 redirect at the server, CDN, or platform level.
• WordPress: a redirection plugin handles 301s without touching code. Remove any meta refresh injected by older themes or shortcodes.
• Shopify, Wix, Squarespace: use the platform's URL redirect settings rather than meta refresh.

Common causes and how to resolve them

• Meta refresh used as a redirect: replace with a server-side 301. Search engines treat 301 redirects as authoritative; meta refresh is a fallback at best.
• Meta refresh used to reload data: use fetch() with setInterval or a real-time data layer instead. Reloading the entire page wastes bandwidth and frustrates users.
• Inherited from a legacy template: remove the tag from the template; do not just override it on individual pages.

Best practices

• Use 301 redirects for URL changes: they pass full ranking signal to the new URL and are cached aggressively.
• Use 302 only for genuinely temporary moves: the 302 status indicates a temporary redirect; reserve it for short-lived changes.
• Avoid auto-reloading content: if real-time updates matter, fetch only the changed data rather than reloading the page.