--- title: "Resolve your SEO and accessibility markup conflicts." description: "Use semantic headings, useful alt text, labeled forms, and accessible modal focus. Test your markup for both readers and crawlers." canonical: "https://scalewithsearch.com/articles/seo-accessibility-conflicts-developers" date: "2026-03-20" modified: "2026-09-25" --- ## Site navigation - [Scale With Search](https://scalewithsearch.com/) - Real estate - Real estate - [Real estate](https://scalewithsearch.com/for/real-estate) - Work - Start here - [Send your brief](https://scalewithsearch.com/work#send-your-brief) - [Prepare your six-question brief](https://scalewithsearch.com/work#prepare-your-six-question-brief) - Build - [Site build, content library with SEO, signal desk](https://scalewithsearch.com/work) - For your business - Trades and home services - [Auto body and collision shops](https://scalewithsearch.com/for/auto-body-and-collision-shops) - [Foundation and home repair contractors](https://scalewithsearch.com/for/foundation-and-home-repair) - [Garage door and fencing contractors](https://scalewithsearch.com/for/garage-door-and-fencing-contractors) - [HVAC contractors](https://scalewithsearch.com/for/hvac-contractors) - [Janitorial and commercial cleaning companies](https://scalewithsearch.com/for/janitorial-and-commercial-cleaning) - [Locksmiths](https://scalewithsearch.com/for/locksmiths) - [Moving companies](https://scalewithsearch.com/for/moving-companies) - [Pest control companies](https://scalewithsearch.com/for/pest-control-companies) - [Plumbing and electrical contractors](https://scalewithsearch.com/for/plumbing-and-electrical-contractors) - [Restoration and water or fire damage companies](https://scalewithsearch.com/for/restoration-and-water-fire-damage) - [Roofing companies](https://scalewithsearch.com/for/roofing-companies) - [Towing companies](https://scalewithsearch.com/for/towing-companies) - [Tree services and landscaping companies](https://scalewithsearch.com/for/tree-services-and-landscaping) - [Solar installers](https://scalewithsearch.com/for/solar-installation) - [General contractors](https://scalewithsearch.com/for/general-contractors-and-construction) - [Paving, concrete, and flooring contractors](https://scalewithsearch.com/for/paving) - Practices and professional services - [Bookkeeping and tax practices](https://scalewithsearch.com/for/bookkeeping-and-tax-practices) - [Dental practices](https://scalewithsearch.com/for/dental-practices) - [Family and criminal defense law firms](https://scalewithsearch.com/for/family-and-criminal-defense-law-firms) - [Med spas and aesthetics practices](https://scalewithsearch.com/for/med-spas-and-aesthetics) - [Personal injury law firms](https://scalewithsearch.com/for/personal-injury-law-firms) - [Veterinary clinics](https://scalewithsearch.com/for/veterinary-clinics) - [Gyms and fitness studios](https://scalewithsearch.com/for/fitness) - [Therapy and outpatient health practices](https://scalewithsearch.com/for/therapy-and-outpatient-health) - [Medical billing companies](https://scalewithsearch.com/for/medical-billing) - [Insurance agencies](https://scalewithsearch.com/for/insurance-agencies) - [Financial advisors](https://scalewithsearch.com/for/financial-advisors) - [Property management companies](https://scalewithsearch.com/for/property-management) - [Recruiting and staffing agencies](https://scalewithsearch.com/for/recruiting-and-staffing) - [Architects and interior designers](https://scalewithsearch.com/for/architects-and-interior-designers) - [Logistics and supply chain companies](https://scalewithsearch.com/for/logistics-and-supply-chain) - Agencies, MSPs, and manufacturing - [IT and managed service providers](https://scalewithsearch.com/for/it-and-managed-service-providers) - [Machine shops and precision manufacturers](https://scalewithsearch.com/for/machine-shops-and-precision-manufacturing) - [Marketing agencies and freelancers](https://scalewithsearch.com/for/marketing-agencies-and-freelancers) - [SEO agencies and consultants](https://scalewithsearch.com/for/seo-agencies-and-consultants) - [Small manufacturers and fabricators](https://scalewithsearch.com/for/small-manufacturers-and-fabricators) - Restaurants, shops, studios, and nonprofits - [Restaurants and hospitality businesses](https://scalewithsearch.com/for/restaurants-and-hospitality) - [Retail stores and ecommerce sellers](https://scalewithsearch.com/for/retail-and-ecommerce) - [Photographers, event planners, and travel agents](https://scalewithsearch.com/for/photographers) - [Churches and nonprofits](https://scalewithsearch.com/for/churches-and-nonprofits) - [All industries](https://scalewithsearch.com/for/) - Learn - For your office - [Office job guides](https://scalewithsearch.com/guides/) - [Browser calculators](https://scalewithsearch.com/tools/) - Start here - [How it works](https://scalewithsearch.com/how-it-works) - [Free Starter Kit](https://scalewithsearch.com/kit/business-memory-starter-kit.zip) - [Synthetic specimen](https://scalewithsearch.com/specimen/working-session-specimen.zip) - Guides - [The Complete Guide to Business Memory for AI Agents](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [The Complete Small-Business Guide to AI Agent Governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [The Complete Guide to Leaving Vendor AI Memory](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - Articles by cluster - [Business memory](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [Agent governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [Migration and ownership](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - For machines - [llms.txt](https://scalewithsearch.com/llms.txt) - [llms-full.txt](https://scalewithsearch.com/llms-full.txt) - [Machine view](https://scalewithsearch.com/?view=machine) - Company - Evidence - [Proof](https://scalewithsearch.com/proof) - Company - [About](https://scalewithsearch.com/about) # Resolve eight SEO and accessibility conflicts so one semantic build serves users and crawlers. A developer gets two tickets in one sprint. The SEO ticket asks for keywords in every image's alt text and a second H1 for a promo banner. The accessibility ticket cites the Web Content Accessibility Guidelines (WCAG) and asks for the opposite. The developer has to pick one. Most of these conflicts are false. They come from misunderstandings about how assistive technology and crawlers read HTML. With correct semantic markup, both sides get what they need. This guide covers the eight conflicts developers meet most often and the markup that resolves each. ## 1. Alt text: description, not keyword lists Screen readers read the `alt` attribute aloud to convey an image to blind users. SEO practice once stuffed alt text with keywords, which made long, unnatural descriptions. That practice conflicts with WCAG 1.1.1, which requires a text alternative that serves the same purpose as the image. Write alt text for people first. Describe what the image shows in about 125 characters or less. Include a keyword only when it fits the description naturally. Weak: `alt="golden retriever puppy for sale best prices affordable dog"` Strong: `alt="Golden retriever puppy sitting in grass"` Google's image guidance says it uses alt text together with the surrounding content, the file name, and the page topic. It also treats keyword stuffing in alt attributes as spam. A plain description serves both screen reader users and search engines. Decorative images get an empty attribute, `alt=""`, as WCAG allows. Screen readers skip them, which makes navigation faster. An SEO tool that flags an empty `alt` as an error applies the wrong rule to decorative images. Background images set in CSS need no alt text, because assistive technology and crawlers ignore them. Complex images, such as charts and diagrams, need more than an alt attribute can hold. Point `aria-describedby` at a longer explanation in nearby text, or put a data table next to the chart. Google reads the whole page, so a detailed description in an adjacent paragraph adds topical relevance without a bloated alt attribute. The [image optimization guide](/articles/image-optimization-ux-seo) covers file names, formats, and sizing. ## 2. Headings: one outline for both audiences Screen reader users move through a page by jumping from heading to heading. A clean hierarchy, H1 to H2 to H3 with no skipped levels, makes that fast. Some SEO advice recommends several H1 tags, or picks heading levels by visual size. Both break WCAG 1.3.1, Info and Relationships. HTML5 once described an outline algorithm that would let each `
` or `
` carry its own H1. No browser or screen reader implemented it, and the WHATWG removed it from the HTML standard in 2022. JAWS and NVDA announce every `

` as level 1. A page with five H1 elements gives a screen reader user five competing top levels. Use one H1 per page for the main topic. Use H2 for major sections and H3 for subsections, in order. This structure gives Google a clear topical outline and gives assistive technology a clean map. Some teams still believe that several H1s help rankings. Google's John Mueller said in 2020 that Google handles multiple H1s and does not prefer them. Keep visual style separate from heading level. If the design needs large text that is not a heading, enlarge a paragraph with CSS. If a real H3 must look small, change its `font-size` in CSS. Do not change the level to get the look. Lighthouse flags skipped heading levels in its accessibility audit. Lighthouse reports accessibility and performance as separate categories. Accessibility results do not feed the performance score or Core Web Vitals. Fix the headings because users need them. ## 3. Link text: descriptive anchors satisfy both WCAG 2.4.4 requires that the purpose of a link be clear from its text, or from the text and its context. Screen reader users often browse a list of links, and a list that reads "click here, click here, learn more" tells them nothing. SEO practice asks for descriptive anchor text, which points in the same direction. Google uses anchor text to understand the page a link points to. "Click here" gives it nothing. Write "download the accessibility compliance checklist", not "click here to download". Exact-match anchors, where the whole anchor is the target keyword, draw attention from Google's link spam systems when they are overused in external backlinks. They are fine for internal links in moderation. Natural language still reads best: "learn about React accessibility patterns" beats both "click here" and "React accessibility patterns guide for developers". A link that shows only an icon needs an accessible name. Add `aria-label="Follow us on X"` to a social icon link, so a screen reader can announce it. Google has not documented `aria-label` as a ranking input, so write the label for users. Sometimes an image link and a text link sit side by side and go to the same URL. Wrap both in one link. Screen readers announce two links otherwise, which adds noise. One link is also cleaner for crawlers than two duplicates. ## 4. JavaScript rendering: content in the first HTML Single-page applications built with React, Vue, or Angular often render content in the browser after the first HTML arrives. A screen reader in a modern browser reads the result once scripts run. Crawlers and users on slow connections depend on those scripts finishing. Googlebot renders JavaScript, but rendering adds delay and costs crawl resources. A page that needs several seconds of client-side work may not be indexed in full. Users with disabilities on slow connections or older devices hit the same wall: when rendering fails, the page is empty for them too. Server-side rendering (SSR) fixes both problems. The server sends complete HTML on the first request, and the browser then hydrates the interactive parts. Next.js for React, Nuxt for Vue, and SvelteKit all support SSR. Screen readers get content at once, and crawlers index complete pages. Static site generation (SSG) renders pages at build time and serves HTML files from a CDN. Gatsby, Eleventy, and Hugo work this way. The speed helps users on limited devices, and crawlers always receive full content. Progressive enhancement builds core content and navigation in HTML and CSS, then adds JavaScript on top. It puts content delivery ahead of interactivity, which serves accessibility and SEO together. The [server-side rendering guide](/articles/server-side-rendering-seo) compares the rendering options in depth. To test, disable JavaScript in Chrome DevTools, reload, and confirm that critical content appears. Run Lighthouse and check First Contentful Paint and Total Blocking Time. Lighthouse dropped Time to Interactive in version 10, in February 2023. For real-user responsiveness, check Interaction to Next Paint (INP) in field data. Long script execution delays screen reader access and crawling alike. ## 5. Modal dialogs: no keyboard traps, no intrusive interstitials A modal dialog overlays the page. A badly built modal traps keyboard focus, so the user cannot tab out. That violates WCAG 2.1.2, No Keyboard Trap. A modal that covers content right after a visitor arrives from search can also count as an intrusive interstitial. Build accessible focus handling: 1. When the modal opens, move focus to the first interactive element inside it. 2. Keep `Tab` cycling inside the modal, from the last element back to the first. 3. Close the modal on `Escape` and return focus to the element that opened it. 4. Hide the background from screen readers with `aria-hidden="true"` or the `inert` attribute while the modal is open. Google announced its intrusive interstitial signal in 2016 and applied it from January 2017. It targets pop-ups that cover the main content on mobile right after a visitor clicks through from search. Legally required notices, such as cookie consent and age verification, are exempt. Promotional modals that hide the content harm both users and rankings. Delay promotional modals until the visitor shows engagement. Examples are a scroll past 50% of the page, 30 seconds of reading, or exit intent. Make the close button a large enough target. WCAG 2.2, published in October 2023, sets a 24 by 24 CSS pixel minimum at level AA (2.5.8). The older 44 by 44 pixel target in 2.5.5 is a level AAA criterion. Confirm that the modal still works at 400% zoom. A newsletter modal must not block the answer the searcher came for. If someone searches "how to implement SSR in Next.js" and a modal covers the article at once, Google may judge the page a poor experience. Trigger the modal after the reader reaches the how-to content. The [interstitial and pop-up guide](/articles/interstitials-popups-seo-impact) covers the exemptions in detail. ## 6. Color contrast: brand palette versus readable text WCAG 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, meaning 18 point, or 14 point bold. Marketing teams often want brand colors that fail these ratios. Search engines do not measure contrast directly. Text that people cannot read still costs you: visitors leave, and engagement falls. Check ratios with the WebAIM Contrast Checker or the Chrome DevTools accessibility pane. Text over images needs special attention, because the image colors vary under the text. Add a text shadow or a semi-transparent overlay to hold the minimum ratio across the whole background. Give the design system contrast-safe variants. If a brand color fails 4.5:1 as text, define a darker or lighter version for UI text. Keep the original for logos and decoration. Record the variants in the design system so nobody reintroduces the failure. The [SEO guide for UX designers](/articles/seo-for-ux-designers) covers how to bring these rules into design reviews. Placeholder text in form fields is often a light gray that fails contrast. Dark mode must also meet the ratios: light text on a dark background needs 4.5:1 too. Test both themes with automated tools and by eye. ## 7. Form labels: explicit labels, not placeholders Screen readers need a label tied to each form input, either with `