Principles of Website Development II — UX, Accessibility, Consistency & Motion
beginner25 minLearning objectives
- Explain accessibility features: colour contrast, captions/transcripts, keyboard navigation, breadcrumbs, customisable features
- Explain consistency (branding, page layout, UI) and user-friendliness (simplicity, intuitive, engaging, responsive)
- Explain use of motion (micro-interactions, animation, parallax, sliders), dynamic websites, cross-browser compatibility and SEO
Learn
A1 — Accessibility, consistency and motion
Accessibility features
A website is only genuinely usable if it works for everyone, including users with visual, motor or cognitive impairments:
- Colour contrast — text must stand out clearly against its background (WCAG sets minimum contrast ratios).
- Captions/transcripts — make video and audio content usable for deaf/hard-of-hearing users.
- Keyboard navigation — every interactive element must be reachable and usable without a mouse.
- Breadcrumbs — a trail (e.g.
Home > Shoes > Trainers) that helps users understand and navigate their location in a site. - Customisable features — e.g. text resizing, high-contrast mode.
Consistency and user-friendliness
Consistency means the same branding, layout patterns and UI conventions (e.g. the logo always links home, buttons always look like buttons) are used throughout the site — inconsistency forces users to relearn the interface on every page.
User-friendliness covers simplicity (no unnecessary complexity), intuitiveness (things work as users expect), engagement, and responsiveness (the site adapts well to different screen sizes and devices).
Motion, dynamic content, compatibility and SEO
- Micro-interactions/animation/parallax/sliders add polish and feedback but must not get in the way of usability or accessibility (motion can trigger issues for some users — always consider a "reduce motion" option).
- Dynamic websites change content based on data or user interaction (as opposed to static, hand-written pages).
- Cross-browser compatibility — a site must work correctly across Chrome, Safari, Firefox, Edge, etc., not just the one browser it was built in.
- SEO (Search Engine Optimisation) — structuring content and code so search engines can find and rank the page appropriately.
Task
Review an assigned website against every principle from this lesson and the previous one, recording your findings — this is direct evidence for PSAB Task 1's A.P1/A.M1/A.D1 criteria.