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 browser spends excessive time parsing, compiling, and executing JavaScript while the page loads. Heavy JavaScript work blocks the main thread and is the primary cause of poor Interaction to Next Paint (INP), the Core Web Vital that replaced First Input Delay in 2024 and that Google uses as part of its ranking algorithms. Fixing this issue means shipping less JavaScript, splitting what remains, and deferring everything that is not needed for the initial interaction.

Where to make the change

• Application code: audit your bundle with a tool such as Bundle Analyzer or Source Map Explorer. Identify the largest dependencies and either remove, replace, or lazy-load them.
• Build configuration: enable code splitting so each route loads only its own chunk. Tree-shake unused exports from libraries.
• Third-party scripts: the biggest INP wins often come from removing or deferring analytics, advertising, and tag-management scripts.

Common causes and how to resolve them

• Single large bundle: split the bundle by route or feature so the user only downloads and executes the code for the current page.
• Heavy third-party tags: load analytics, ads, and chat widgets after main content with async or defer, or move them into Google Tag Manager so they can be controlled centrally.
• Unused JavaScript: audit with the Coverage tab in DevTools to find code that loads but never runs on the page. Remove or split it out.
• Long tasks blocking the main thread: break work into smaller chunks with setTimeout, requestIdleCallback, or scheduler.yield(). Move heavy computation to a Web Worker.
• Polyfills shipped to modern browsers: use modern-only bundles for ES2017+ and serve legacy polyfills only when needed via differential serving.

Best practices

• Target sub-200 millisecond INP at the 75th percentile: this is the official "good" threshold for the Core Web Vital.
• Ship less code: the cheapest JavaScript to execute is the JavaScript you never sent. Audit dependencies for lighter alternatives.
• Defer non-critical scripts: use defer for scripts that need the DOM, async for fully independent ones.
• Move CPU-intensive work off the main thread: Web Workers can handle large data transformations without freezing the UI.

This test fails when one or more images carry disproportionately large embedded metadata such as EXIF data, thumbnails, color profiles, geolocation, and camera information. This metadata is rarely useful on the web and adds bytes to every request without any rendering benefit. Fixing this issue means stripping the metadata as part of your image processing pipeline.

Where to make the change

• Image build pipeline: use a tool such as ImageMagick (mogrify -strip image.jpg), jpegoptim --strip-all, or oxipng --strip all to remove metadata at build time.
• WordPress: a media optimization plugin will strip metadata automatically on upload.
• Shopify, Wix, Squarespace: the platforms strip most metadata server-side. Failures usually point to images served from external sources you control.
• Image CDN: Cloudflare Images, Cloudinary, and Imgix strip non-essential metadata by default during transformation.

Common causes and how to resolve them

• Original camera files uploaded as-is: camera files contain large EXIF blocks (lens, GPS, embedded JPEG previews). Strip during upload or build.
• Color profile larger than the image: embed a small sRGB profile or strip the profile entirely if the image is meant for the web.
• Stock photo metadata: stock images often carry copyright notices, IPTC blocks, and watermarks larger than the image data itself.
• Geolocation in personal photos: beyond bytes, EXIF GPS can leak the photographer's location. Strip for privacy as well as performance.

Best practices

• Strip metadata on upload: make it part of the asset pipeline so no human action is required.
• Preserve only essentials: a small ICC color profile is occasionally worth keeping for accurate color rendering; everything else can usually go.
• Verify with a quick check: tools like exiftool image.jpg show what is left after stripping, so you can confirm only what you want remains.

This test fails when external JavaScript files are served without caching headers that allow browsers to store and reuse them. Cached scripts skip the network on repeat visits, reducing load time and bandwidth for returning users. Fixing this issue is a server or CDN configuration change.

Where to make the change

• Server configuration: add Cache-Control: public, max-age=31536000, immutable to JavaScript responses, paired with versioned filenames.
• CDN configuration: set a default cache rule for *.js assets at the edge.
• Build pipeline: emit hashed filenames (for example app.7f3c1e.js) so cache lifetimes can be long without risking stale code.
• WordPress and plugins: caching and CDN plugins handle JS cache headers automatically.

Common causes and how to resolve them

• No Cache-Control header: add one. Without it, browsers revalidate on every page load.
• Short max-age: bump to a year for versioned files. Use a shorter lifetime only for unversioned scripts that may change in place.
• no-cache or no-store on static JS: remove these directives; they belong on dynamic responses, not static assets.
• Cookies on script requests: serve scripts from a cookie-free subdomain or a CDN to enable shared caching.

Best practices

• Versioned filenames: hashed file names plus immutable caching is the gold standard for cache effectiveness.
• Self-host critical scripts: hosting third-party scripts yourself lets you control cache headers and avoid vendor outages.
• Audit with DevTools: the Network panel's "Disk cache" column shows whether each script is genuinely served from cache on repeat visits.

This test fails when the page exposes one or more email addresses in plain text. Spam-harvesting bots scrape pages for plaintext addresses and add them to bulk mailing lists. Fixing this issue means obfuscating contact addresses, using a contact form, or rendering them via JavaScript so simple scrapers cannot read them.

Where to make the change

• Application code or templates: replace plain contact@example.com text with one of the obfuscation techniques below.
• WordPress: a contact form plugin handles email submissions without exposing the address. Some SEO and security plugins also offer email obfuscation.
• Shopify, Wix, Squarespace: use the platform's built-in contact form blocks rather than displaying the email address directly.

Common causes and how to resolve them

• Plain text address in a paragraph or footer: replace with a contact form, an obfuscated rendering (HTML entities, CSS reversal), or a JavaScript-built mailto link.
• Mailto link with the address visible: the visible text is what bots read. Make the visible text a label like "Email us" while the href still works.
• Address baked into images is fine for SEO but bad for accessibility: screen readers cannot read it. Pair an image with a contact form instead.

Best practices

• Prefer contact forms: they reduce spam and make analytics easier.
• Use HTML entity encoding: writing co... for the address defeats the simplest scrapers, though sophisticated ones decode it.
• Render via JavaScript: building the mailto link client-side blocks scrapers that only read static HTML.
• Consider a Cloudflare-style email obfuscation: some CDNs automatically rewrite plaintext emails to obfuscated equivalents.

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 fails when the site does not serve a branded, helpful page for missing URLs. A custom 404 keeps users on the site by offering navigation, search, and suggested links rather than dropping them at the browser's generic error screen. Fixing this issue means designing a 404 template, ensuring it returns the correct HTTP 404 status, and pointing your server at it.

Where to make the change

• Server configuration: point your web server at a custom 404 page. In Nginx, use error_page 404 /404.html;. In Apache, use ErrorDocument 404 /404.html.
• WordPress: create a 404.php template in your theme. WordPress invokes it automatically for missing URLs.
• Shopify: edit the 404.liquid template in the theme code editor.
• Wix or Squarespace: use the platform's built-in 404 page editor in site settings.
• Headless or framework sites: Next.js uses not-found.js, Astro uses 404.astro, and similar frameworks all have a convention for the missing-route page.

Common causes and how to resolve them

• No custom 404 at all: create one. The minimum is the site header, navigation, a clear "page not found" message, and links to popular sections.
• 404 page returns HTTP 200: a "soft 404" confuses search engines. Verify the response status with DevTools or curl, and configure the server to return 404 for missing routes.
• 404 page redirects to homepage: redirecting users to the homepage hides broken URLs from analytics and search engines. Show a real 404 instead.
• Generic browser error visible: the server is not invoking the custom template. Check the configuration directive.

Best practices

• Keep the site chrome: show the header, footer, and navigation so users do not feel lost.
• Offer next steps: a search box, popular links, or category navigation help users get back on track.
• Track 404s: log missing-URL hits in analytics so you can spot broken inbound links worth fixing or redirecting.
• Be clear about the error: "Sorry, that page does not exist" is better than vague messaging that confuses users.