URL Analyzer UI/UX Guide

• Developers: inspect rendered DOM behavior, framework signals, performance issues, CSP setup, security headers, custom audit rules, and generated fix snippets.
• Designers: extract palettes, check contrast, simulate color vision deficiencies, preview before/after color fixes, and test responsive layouts.
• Accessibility reviewers: audit labels, landmarks, headings, keyboard flow, screen-reader flow, WCAG criteria, media accessibility, and focus behavior.
• SEO teams: review metadata, structured data, raw versus rendered SEO, sitemap discovery, crawl quality, canonical tags, robots directives, indexability, and content signals.
• Product teams: turn a technical audit into prioritized fixes, export reports, compare history, and use the priority engine to decide what to fix first.

1. Open the tool: go to /tool/analyzer/.
2. Paste a URL: use a full URL such as https://example.com. The analyzer normalizes incomplete but recognizable addresses.
3. Choose Analyze: the main button starts a single-page audit. It needs a free account: signed out, it reads Sign in to analyze, takes you to sign-in and starts the run when you come back. A Cancel button appears while the audit is running.
4. Use This Page: the This Page button has been removed; to test Auric Artisan itself or a same-origin page, paste its URL.
5. Use Share: copy a rerunnable analyzer URL for the same target.
6. Watch the stage: the flow bar moves from Analyze to Issues after results are ready.

The mode switch controls how much interface is visible and which checks a run includes. Simple runs a fixed set of checks; Advanced lets you choose them in the scan scope picker.

• Simple mode: Overview, Project, Insights, Site Map, Contrast, Fixes, Compare, and Report. Use it for a quick path from issue discovery to fix export.
• Advanced mode: adds Palette, Performance, SEO, A11y+, Media, Deep, Simulation, Devices, Security, Playground, Before / After, Rules, Workspace, CSP Setup, the scan scope picker, full-site scan controls, and a console that opens panels into a workspace you arrange and save.
• Persistence: the selected mode is stored locally so returning users keep the same complexity level.

The five-step flow is the main mental model for the UI. Each step points to the panel that best supports the next decision.

1. Analyze: collect raw HTML, rendered DOM, browser timing, colors, metadata, accessibility evidence, and scan context.
2. Issues: open Overview or Insights to understand the score, the highest-impact failures, and category breakdowns.
3. Fix: use Fixes to copy CSS, metadata, accessibility, structure, and security suggestions.
4. Preview: compare original and adjusted contrast colors in Before/After or use Playground for interactive design feedback.
5. Export: open Report to export structured reports, JSON, HTML, PDF, developer and client reports, and fix CSS where available.

• Overview: total score, category scores, issue summary, site-scan pages, and high-level health.
• Project: one shared model of the run: score and grade, URL, origin, source, pages in the model and scan time; counts of the deduplicated pages, stylesheets, scripts, fonts, images, media items, colours, contrast pairs, schema objects, classes, IDs and dependencies, each opening the tab that owns it; findings by module; a cross-linked list of every finding; and Export project model JSON.
• Insights: top fixes, priority engine, business impact, confidence, benchmark, narrative, history comparison, and fix simulator.
• Deep: raw HTML, rendered DOM, framework detection, rendering mode, route discovery, JavaScript intelligence, SEO generation, and developer fix plan.
• Site Map: a page tree for the site with every shared stylesheet, script, font and image listed once with a “used on N pages” count, plus the connections between files and pages. After a single-page run it shows that page's inventory; Crawl Full Site follows links and sitemap.xml up to the page count you set, and a full-site scan's pages are used when there is one.
• Contrast: WCAG ratios, failing color pairs, fixed foreground suggestions, and generated contrast CSS.
• Fixes: actionable snippets grouped by issue type, severity, and likely score gain.
• Before/After: visual comparison of original and auto-adjusted contrast states.
• Report: structured audit output, summary text, exports, schema, and shareable report artifacts.
• Palette: page colors, generated accessible palettes, CVD-safe pair checks, and design lab utilities.
• Performance: timing, resource waterfall, bundle analysis, dependency graph, Core Web Vitals-style metrics, and network simulation.
• SEO: metadata, headings, structured data, canonical, robots, sitemap, content, indexability, and crawl quality.
• A11y+: WCAG mapping, keyboard audit, screen-reader flow, audio accessibility, and advanced accessibility behavior.
• Media: images, video, audio, dimensions, alt text, captions, loading, and layout impact.
• Simulation: color vision deficiency and low-vision previews.
• Devices: mobile, tablet, foldable, laptop, desktop, and custom CSS device preview workflows.
• Security: HTTPS, CSP, referrer policy, permissions policy, mixed content, inline handlers, and reliability signals.
• Rules: custom selector-based audit rules and reusable rule templates.
• Playground: select elements, edit colors, rebuild suggestions, and watch the score move.
• Workspace: saved reports, history, reusable palettes, and monitoring entries.
• Compare: two saved versions of the same site side by side. Pick a site and two versions to see the score change, category scores and per-section counts, then open a section to see which findings went away and which appeared. When the two runs did not include the same checks, it names the checks they did not share instead of drawing a change for them. Open this version and Download it act on the later version.
• CSP Setup: server snippets and guidance for preview, simulator, iframe, and CORS access setup.

1. Start in Overview: check the overall score and SEO-related category notes.
2. Open SEO: review title, description, canonical, robots, viewport, language, headings, word count, internal links, indexability, schema, and keyword signals.
3. Open Deep: compare raw HTML with rendered DOM to find SEO fields injected by JavaScript, missing from source, or changed after hydration.
4. Check sitemap discovery: confirm robots.txt and sitemap URLs are discoverable, inspect candidate paths, and review discovered URL counts.
5. Open Fixes: copy title, meta description, canonical, schema, heading, and structured content recommendations.
6. Export Report: save JSON or PDF for handoff to engineering and content teams.

1. Review Overview: note accessibility, contrast, and deep-analysis scores.
2. Open A11y+: inspect WCAG criteria, labels, landmarks, headings, keyboard flow, screen-reader flow, focus behavior, audio accessibility, and behavior risks.
3. Open Contrast: find failing color pairs, ratios, text size categories, and replacement foreground colors.
4. Use Simulation: preview deuteranopia, protanopia, tritanopia, achromatopsia, and low-vision filters.
5. Use Before/After: compare original colors against auto-adjusted contrast fixes before touching production CSS.
6. Copy Fixes: export CSS and HTML recommendations, then retest the page.

Full-site scanning is available in Advanced mode, needs you to be signed in, and runs on our servers (or the analyzer backend in a local checkout), spending tokens per page. Use it for internal QA, release readiness, and comparing page families across a site.

1. Switch to Advanced: open Site scan settings under the URL field.
2. Keep Robots enabled: leave robots.txt respect on unless you are scanning a site you control in a test environment.
3. Set Pages: choose a realistic max page count, up to the per-crawl cap the field shows. Start small, then increase if the scan is stable.
4. Choose Page size: use 25 for detail review or 50 for faster browsing through large results.
5. Choose Workers: use lower worker counts for production sites and higher counts only for controlled environments.
6. Run Scan Site: monitor progress messages, skipped pages, page errors, and aggregate score.
7. Review paged results: sort by score, issue count, title, URL, or scan order and open individual page details.

• Fixes: treat this as the developer handoff surface. It groups generated CSS, metadata suggestions, semantic HTML notes, accessibility fixes, structure changes, and security recommendations.
• Before/After: use this for safer contrast review. It helps designers compare original colors with auto-generated replacements before implementation.
• Playground: use this for interactive experiments. Select elements, edit colors, rebuild suggestions, and watch live score movement.
• Design Lab: use palette generation, CSS export, token export, history, undo/redo, and version saving when color fixes become a design-system update.
• Safe fix habit: copy small changes, apply in code, retest, then export the final report rather than applying many unknown fixes at once.

• Report tab: contains the structured report, plain text summary, issue cards, exported artifacts, generated CSS, and schema-aware report data.
• JSON export: best for automation, regression checks, and comparing fields over time.
• PDF or HTML export: best for stakeholders, QA records, and release review.
• Share link: copies a link that reopens the analyzer with the same target URL and reruns the audit.
• Workspace: stores recent audits, score history, saved palettes, and monitoring entries locally in the browser.
• Projects: every run is filed as a version of one project per site in the Library, and the report is stored section by section in this browser, so a project reopens without running again. Compare lists the versions; signed in, Keep in my account copies a version to your account so another machine can open it. The button appears only when the account has report storage.
• Schema export: report exports can include generated JSON-LD describing the audit, metrics, FAQ, and report structure.

• Can a first-time user run a useful audit from Simple mode without opening every tab?
• Are issue counts, badges, and scores clear without relying only on color?
• Do long site-scan result sets stay paged at 25 or 50 rows instead of flooding the UI?
• Does every action button have a clear label, accessible name, and tooltip where helpful?
• Can a keyboard user move through the URL field, buttons, tabs, panels, and export actions?
• Do generated fixes explain why they matter, where to apply them, and how confident the tool is?
• Do exported reports include the target URL, date, score, issue summary, key fixes, and version context?
• Does the documentation page itself keep the same Auric Artisan cursor, scroll, loader, header, footer, and print behavior as the rest of the documentation library?

• The audit cannot load a page: the target may block iframes, CORS, or automated fetches. Make sure you are signed in so the page can be rendered on our servers, then retry.
• The scan is rate-limited: lower workers, reduce max pages, keep robots enabled, and wait before retrying.
• The SEO panel says content changed after rendering: review Deep to see whether title, description, canonical, H1, schema, or body content depends on JavaScript.
• Contrast suggestions feel too strong: use Before/After and Playground to test alternate foreground colors while preserving WCAG ratios.
• PDF export is unavailable: PDF is a Pro export on paid plans, and when the PDF server is unreachable the analyzer opens a print view instead. Export HTML or JSON carries the same data.
• Full-site results are too large: use paged result controls, sort by lowest score or issue count, and export compact summaries first.