Chapter 12: SEO, Accessibility & Performance (5.A)

Exam topic 5.A: Implement discoverability, usability, and performance best practices.
Key terms: Meta title, meta description, 301 redirects, schema markup, contrast ratio, alt text, code minification.
Weight: 15% of the exam (about 7–8 questions). Tied for the second-largest topic.

These three disciplines overlap heavily. Semantic HTML helps screen readers and search engines. Optimised images help Core Web Vitals and users on slow connections. Alt text helps blind users and image search. The official sample question for this topic is multi-select: descriptive meta titles/descriptions and code minification. Expect to choose several correct practices at once.

---

Part 1: SEO

12.1 Meta title and meta description

Element	What it is	Guidance
Meta title (<title>)	The clickable headline in search results and the browser tab title	Unique per page; primary topic first; roughly 50–60 characters before truncation; brand at the end (Grid Layout Guide – Example)
Meta description	The snippet under the title (search engines may rewrite it)	Unique, accurate summary with a reason to click; roughly 150–160 characters

• Set them in page settings. On CMS templates, bind them to fields (e.g. a dedicated SEO title field, falling back to Name).
• Duplicate titles/descriptions across pages dilute relevance and confuse users.
• The meta description isn’t a direct ranking factor, but it affects click-through rate.

12.2 Headings and semantic structure

• One H1 per page that states the page topic; logical H2/H3 nesting (Chapter 4).
• Never remove heading hierarchy “to simplify structure”, which the official sample uses as a wrong answer.
• Descriptive link text (“Download the 2026 pricing guide”, not “Click here”).

12.3 URLs and 301 redirects

• Short, descriptive, lowercase, hyphenated slugs: /services/web-design.
• When a URL changes (slug edit, restructure, migration), add a 301 (permanent) redirect from old → new in site settings → Publishing → 301 redirects. A 301 passes most link equity and updates search engine indexes.
• Pattern redirects move whole sections using a capture group:

/blog/(.*) → /articles/%1

• Avoid redirect chains (A → B → C). Point old URLs directly at the final destination.
• Redirect to the most relevant page, not the homepage. Mass redirects to the homepage are often treated as soft 404s.
• A 302 is temporary and doesn’t consolidate signals. Use 301 for permanent moves.

12.4 Schema markup (structured data)

Schema markup (JSON-LD using schema.org vocabulary) describes page content to machines: Organization, LocalBusiness, Article/BlogPosting, Product, Event, FAQPage, BreadcrumbList. It can make pages eligible for rich results.

In Webflow:

• Site-wide schema (Organization) in site head code, or homepage head code.
• Per-item schema on CMS template head code, inserting CMS fields:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{Name}}",
  "datePublished": "{{Published date}}",
  "author": { "@type": "Person", "name": "{{Author: Name}}" },
  "image": "{{Thumbnail}}"
}
</script>

• Schema must match visible content. Don’t mark up things that aren’t on the page.
• Validate with Google’s Rich Results Test or the Schema.org validator. Watch out for quotes in CMS fields breaking the JSON.

12.5 Other SEO controls (from Chapter 7)

Sitemap (auto-generated), robots.txt, noindex for thin/utility pages, global canonical URL, disabled staging indexing, Open Graph for social sharing, hreflang for localization (Chapter 6).

---

Part 2: Accessibility

The standard is WCAG (Web Content Accessibility Guidelines), organised under four principles: Perceivable, Operable, Understandable, Robust (POUR). Most legal requirements reference WCAG 2.1/2.2 Level AA.

12.6 Alt text

• Informative images: describe the purpose/content in context. “Team of five collaborating at a whiteboard”, not “image123.jpg” or “image of image”.
• Functional images (an image inside a link or button): describe the action/destination: “Home”, “Download PDF”.
• Decorative images: mark them as decorative so they get an empty alt="" and screen readers skip them.
• Complex images (charts): short alt plus a longer description in nearby text.
• Don’t start with “Image of…”. Screen readers already announce it as an image.
• In Webflow, set alt text in the image settings or at the asset level (so every use of the asset gets it). For CMS images, provide alt text through the CMS so each item has its own description.

12.7 Contrast ratio

Content	WCAG AA minimum
Normal text	4.5:1
Large text (≥ 24px, or ≥ ~18.66px bold)	3:1
UI components & graphical objects (input borders, icons, focus rings)	3:1

• Check text over images and gradients at the worst point; add overlays if needed.
• Check every state (hover, focus, disabled placeholders) and dark mode.
• Webflow’s Designer includes tooling to flag contrast and other issues (e.g. the Audit panel and vision previews that simulate visual impairments).

12.8 Keyboard, focus and semantics

• Everything works with a keyboard (Tab, Shift+Tab, Enter, Space, Esc).
• A visible focus indicator on all interactive elements. Never remove outlines without replacing them.
• Real buttons for actions, real links for navigation (Chapter 4).
• Landmarks (header, nav, main, footer) and a skip link to main content.
• ARIA only where native HTML can’t express the semantics (“no ARIA is better than bad ARIA”).
• Language attribute set (Chapter 7), form labels (Chapter 9), reduced motion respected (Chapter 2).

---

Part 3: Performance

12.9 Core Web Vitals

Metric	Measures	“Good” threshold
LCP (Largest Contentful Paint)	Loading: when the main content appears	≤ 2.5s
INP (Interaction to Next Paint)	Responsiveness to input	≤ 200ms
CLS (Cumulative Layout Shift)	Visual stability	≤ 0.1

12.10 Images (usually the biggest win)

• Compress and size correctly before or after upload. Never upload a 6000px, 8MB photo for a 600px card. (The official sample’s wrong answer: large, uncompressed images to preserve clarity.)
• Modern formats: WebP/AVIF. Webflow’s Assets panel can convert images to modern formats.
• Responsive images: Webflow generates multiple sizes and a srcset for images placed with the Image element, so browsers download the right size. Background images don’t get srcset, so keep them optimised and avoid huge CSS backgrounds for important content.
• Lazy loading: images below the fold use lazy loading. The hero/LCP image should load eagerly (not lazy), so it isn’t delayed.
• Set dimensions (width/height or aspect ratio) so space is reserved, which prevents CLS.
• Use SVG for icons and logos. Keep Lottie files and videos lean, and don’t autoplay heavy video above the fold.

12.11 Code minification and clean-up

• Minify HTML, CSS and JS in site settings → Publishing (advanced options). It strips whitespace and comments, so files are smaller and load faster with no visual change. (Correct answer in the official sample.)
• Clean up unused styles (Chapter 1) and unused interactions so they don’t ship in your CSS/JS.
• Keep custom code lean: load third-party scripts with async/defer, put them in the footer, delay non-critical widgets until interaction, and use facades for heavy embeds (Chapter 8).
• Fonts: load only the families and weights you use. Each one is a download.

12.12 Testing tools

• PageSpeed Insights / Lighthouse (lab + field data), Chrome DevTools (Network, Performance), Search Console (Core Web Vitals report, indexing, rich results).
• Accessibility: Webflow’s Audit panel, browser extensions like axe or WAVE, keyboard-only testing, and a screen reader pass (VoiceOver, NVDA).
• Test on real mobile devices and throttled connections.

---

12.13 Pre-launch quality checklist

SEO
– ☐ Unique meta titles and descriptions (static + CMS bindings)
– ☐ One H1 per page; logical heading order
– ☐ 301 redirects for changed/old URLs; no chains
– ☐ Schema markup validated
– ☐ Sitemap on, staging noindexed, utility pages noindexed

Accessibility
– ☐ Alt text on informative images; decorative images marked decorative
– ☐ Contrast meets AA (text 4.5:1, large text/UI 3:1)
– ☐ Keyboard-only walkthrough passes with visible focus
– ☐ Labels on all form fields; lang set; reduced motion respected

Performance
– ☐ Images compressed, modern formats, correct sizes; LCP image eager
– ☐ Minification enabled; unused styles cleaned up
– ☐ Third-party scripts deferred/delayed; fonts limited
– ☐ Core Web Vitals checked on mobile

---

Practice questions: SEO, Accessibility & Performance

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Comment *

Name *

Email *

Website

Δ