Session 7: Quality: UX, Accessibility & SEO

Usability is not aesthetic taste; it is whether a person can accomplish what they came for without thinking about the interface. The failures on Nigerian business sites are consistent. A phone number that must be copied rather than tapped. A form with no labels so the visitor guesses what each box wants. Text too small to read on a phone in daylight. A hero whose headline is unreadable over a photograph. Navigation that does not say where it leads. A page that takes fifteen seconds to load on mobile data, by which time the visitor has left.

The principles that fix most of it are few. Make the primary action obvious and reachable — the WhatsApp or call button should be visible without hunting, ideally in the header as well as the contact section, because a visitor who decides to call should never have to scroll to find the number. Say what things are: 'Get a quote' beats 'Submit', 'See our prices' beats 'Learn more', because a vague label forces the visitor to guess the consequence of clicking. Keep forms short — every field you add loses some completions, so ask only for what you genuinely need to respond.

Then there is the principle that ties them together: test it as a stranger would. Open the page on a phone, in daylight, over mobile data, having never seen it before, and try to make contact. Every hesitation you feel is a real cost, and the designer who built the page is the least qualified person to find them because they already know where everything is. This is why the pre-launch checklist at the end of this session exists.

Roughly one in six people worldwide has a significant disability, and that includes people who are blind, have low vision, cannot use a mouse, are deaf, or are colour blind. Accessibility is whether they can use your page. It is a legal requirement in many jurisdictions, it is a moral one everywhere, and in practical terms it also improves the page for everyone — captions help in a noisy room, good contrast helps in sunlight, semantic structure helps a search engine.

The three things that matter most, and they are all things you have already learned. Semantic HTML — a screen reader navigates by landmarks and headings, so a page of divs with styled text is effectively unnavigable, while `main`, `nav`, `h1` to `h3` give a blind user a way to jump to what they need. Alt text — a screen reader reads it aloud, so an image without one is a hole in the content. Contrast — body text needs at least 4.5:1 against its background, and low-contrast grey-on-white excludes a large share of low-vision users while looking fine to the person who designed it in a dim room.

Two more that cost nothing. Visible focus — when you tab through a page, the focused element must be visibly marked; `outline: none` with no replacement is a common and genuinely harmful thing to find in a stylesheet, because it makes keyboard navigation impossible to follow. And labels on form fields — an unlabelled input is announced as 'edit text' with no indication of what to enter. Fix those five things and a page moves from unusable to usable for most assistive-technology users, and every one of them is something a beginner can do from the first project.

Search engine optimisation at this level is not mysterious and it is mostly good HTML. The elements that matter, in rough order of impact. The title tag — the single most important piece of text, because it is what appears in the search result and what the engine reads first. It should name the business, what it does and where: 'Adaeze Cakes — Custom Wedding & Birthday Cakes in Lagos'. A title left as 'Document' or 'Home' is a free visibility loss on every page.

The meta description does not directly rank you, but it is the sentence shown under your title in results, so writing one that answers the searcher's question measurably improves click-through. Headings — one `h1` per page stating the topic, then `h2` and `h3` for sections — because they form the outline the engine uses to understand structure. Real content that answers the questions a customer would ask, in the words they would use; a services page with three sentences cannot rank for anything.

Then the technical basics: alt text on images, which is both accessibility and image search; fast loading, which is a ranking signal and which on a Nigerian mobile connection is mostly about image size; mobile friendliness, without which a page is penalised; and clean URLs — `/wedding-cakes` rather than `/page?id=47`. What does not help: keyword stuffing, which reads badly to humans and is penalised; buying links; and any scheme promising a shortcut. The honest summary is that SEO at this level is the by-product of building a clear, fast, well-structured page with real content, and there is no separate trick.

A slow page loses visitors before they see anything, and on mobile data — the normal condition in Nigeria — the losses are severe. Studies of abandonment and everyday experience agree: past about three seconds a large share of mobile visitors leave. Diagnose in the dev tools Network panel, sorted by size, and you will almost always find the same three causes.

Images are the first and largest. A phone photograph is routinely several megabytes; five of them on a page is twenty megabytes, which on a mobile connection is not a website but a download. Resize to the largest displayed size and compress — the visual difference is nil and the size difference is often tenfold. Fonts are second: each weight is a separate file, and loading a family in six weights when you use two wastes four downloads. Load only what you use, and prefer `font-display: swap` so text renders immediately in a fallback rather than waiting invisibly. Too many requests is third — every script, icon library and tracking snippet is another round trip, and a page making ninety requests will be slow regardless of file sizes.

The target for a small business site is a total page weight under about two megabytes and a load under three seconds on mobile data. That is achievable on almost any business site with compressed images, two font weights and no unnecessary scripts — and it is worth stating to a client explicitly, because they will judge the site by how it feels on their phone before they judge anything else.

A designer stops seeing their own page after a few days, which is why a checklist matters more than attention. Run it before every handover. Content: no placeholder text, no 'Lorem ipsum', no broken sentences, every price and phone number correct — read the whole page aloud once, which catches what skimming never does. Links: click every single one, including the footer and the fragment links in the navigation, and confirm the WhatsApp deep link opens with the right number and message.

Forms: submit one and confirm the message actually arrives somewhere, because a form that silently discards enquiries is worse than no form and it can take a client months to notice. Images: confirm every one has alt text and none is several megabytes. Contact: tap the phone number on a real phone and confirm it dials. Responsiveness: check at 360, 768 and 1280, and load it on a real phone over mobile data. Titles: confirm no page says 'Document' or 'Untitled'. Console: open dev tools and confirm there are no red errors, because a JavaScript error can silently break something you are not looking at.

Then the handover itself: give the client the files or the hosting login, explain in plain language how to change a price or a photograph, and tell them what they should not touch. A client who breaks the site in week one and blames you is a common and entirely preventable outcome, and ten minutes of explanation prevents it.