Making content that works for your users

Navigation

• Be predictable: Place the main navigation menu horizontally at the top of the page, with links like “Home,” “About,” “Services,” and “Contact” in that order.
• Keep it shallow: A user can reach the “Book a Room” form from the homepage in just two clicks: Home → Services → Book a Room.
• Label clearly: Use “Apply for Funding” instead of vague labels like “Go” or “Click Here.”
• Support orientation: Include a breadcrumb trail like: Home > Research > Funding > Apply for Funding.

Page Structure

• Use headings logically: Use a clear heading hierarchy (see example below)
• Chunk content: Break a long policy page into sections like “Eligibility,” “How to Apply,” and “Deadlines,” each with its own heading.
• Prioritise key information: Start a page with a summary: “Applications for 2025 are now open. Deadline: 15 March.”
• Maintain consistent layouts: Use the same sidebar, header, and footer across all department pages.

Header styles should not be used purely as a styling tool; they convey structure

Links

• Use descriptive link text: “Download the 2025 Undergraduate Prospectus (PDF)” instead of “Click here.”
• Avoid duplication: Don’t use “Read more” for multiple links. Instead, use “Read more about accommodation,” “Read more about tuition fees,” etc.
• Indicate file types and external links: “View the full report (PDF, 2MB)” or “Visit the https://www.bbc.co.uk (opens in new tab).”
• Check links regularly: Use a tool like SiteImprove or Screaming Frog to identify broken links monthly.
• Don't force links to open new tabs.

The text inside a link tag is used by search engines and assistive software to understand the purpose and destination of the link, so it is important that link texts are descriptive of their destination.

Images

• Include images that add value: Use a photo of a lab in action on a research page, not a generic stock image of a handshake.
• Provide alt text: <img src='library.jpg' alt='Students studying in the Bodleian Library'>
• Avoid text in images: Instead of embedding a timetable as an image, use an HTML table.
• Compress images: Use tools like TinyPNG or Squoosh to reduce image file sizes before uploading.

Are all images free of text?

Do images have appropriate alt text?

• • Not all screen readers can read images
  • Zooming in on text can make them pixelated and unreadable
  • There can be issues with responsive design

Audio

• Provide transcripts: Below a podcast player, include a full transcript in collapsible text.
• Ensure good sound quality: Record in a quiet room with a quality microphone and edit out background noise.
• Avoid autoplay: Ensure all users can access controls to pause/stop audio and to control the volume

Video

• Include subtitles or captions: Use YouTube’s captioning tool or upload an SRT file with your video.
• Provide a summary: “This 3-minute video explains how to apply for a student visa, including required documents and timelines.”
• Use accessible players: Use players that support keyboard navigation and screen readers, like Able Player or YouTube’s embedded player.
• Avoid autoplay: Embed videos with autoplay=0 or omit the autoplay attribute entirely.
• Give the users control: Ensure all users can access controls to pause/stop video and to control the volume

Language

• Use simple, jargon-free language: “You can apply online” instead of “Applicants may submit their documentation via the digital portal.”
• Prefer active voice: “We will email you the results” instead of “The results will be emailed to you.”
• Address the user directly: “You’ll receive a confirmation email” instead of “A confirmation email will be sent.”
• Use inclusive language: Use “they” instead of “he/she,” and avoid idioms like “hit the ground running.”

Interactivity

• Accessible via keyboard: Ensure users can tab through form fields and buttons in a logical order.
• Immediate feedback: Show a green checkmark and “Saved successfully” message after a form submission.
• Progressive disclosure: Hide advanced search filters under a “More options” toggle.
• Label form fields clearly: Use “Email address” instead of just “Email.”
• Real-time validation: Show “Password must be at least 8 characters” as the user types.
• Touch accessibility: Ensure buttons are at least 44x44 pixels and spaced apart for touch use.
• ARIA roles and states: Use role='alert' for error messages and aria-expanded='true' for dropdowns.
• Visible focus states: Use a clear outline or background change when a button is focused via keyboard.