Quick Navigation
Images
Every image that conveys information needs a short text description (called alt text). In Joomla, add this in the Alternative Text field when inserting an image through the Media Manager or the article editor.
- Describe the meaning - Describe what the image shows, not just what it looks like. For example: "Bar chart showing sales growth from 2022 to 2024" rather than "blue bar chart".
- Decorative images - If an image is purely decorative (such as a background pattern or a divider), leave the Alternative Text field blank.
- Complex visuals - For charts or diagrams, also add a plain-text summary in the article body nearby so the key information is available to everyone.
⚠️ Important: Never save text as an image. Type it as real text in the article editor instead.
Back to Top
Links
Link text should describe where the link goes. Avoid 'click here,' 'read more,' or pasting a raw web address as the link label.
- Test yourself - If someone heard only the link text out of context, would they know where it leads?
- New windows/tabs - If a link opens in a new browser tab, state it in the text. For example: 'Annual Report (opens in new tab)'. In Joomla's link dialog, check the Target tab to see if a new window is set.
- File downloads - For file downloads, include the file format and size, for example: "Download the Q2 Report (PDF, 1.1 MB)".
Back to Top
Color and Contrast
- Readability - Text must be easy to read against its background. Dark text on a light background is the safest choice. Avoid placing text on top of busy or patterned background images.
- Don't rely on color alone - Never use color as the only way to communicate information. For example, do not say 'items shown in red are overdue' without also adding a label or symbol (like an asterisk or icon).
- Check your work - Test your text and background colors using the free WebAIM Contrast Checker (opens a new tab)
Back to Top
Headings and Page Structure
In Joomla's article editor, use the Paragraph Format dropdown in the toolbar to apply Heading 2, Heading 3, and so on. Use headings to organize your content logically, not just to make text look bigger.
- Heading 1 - Your article title is automatically your Heading 1. Do not add another Heading 1 inside the article body.
- Nest sequentially - Sections within the article should use Heading 2, sub-sections use Heading 3, and so on. Do not skip levels (e.g., jumping from an H2 straight to an H4).
⚠️ Important: Do not use bold or enlarged text to simulate a heading! Screen readers rely on the actual HTML tags to navigate the page.
Back to Top
Forms
- Visible labels - Every form field must have a clear, visible label above or beside it.
- Required fields - Mark required fields clearly with the word 'Required' or an asterisk (*), and explain at the top of the form what the asterisk means.
- Clear error message - Error messages must say specifically what went wrong and how to fix it. For example: "Please enter a valid email address' rather than just 'Invalid input".
- Keyboard access - Make sure users can complete and submit the entire form using only a keyboard.
⚠️ Important: Do not use placeholder text as a label replacement. Placeholder text vanishes the moment a user begins typing, which confuses users with cognitive disabilities.
Back to Top
Keyboard Navigation
Test your page by pressing the Tab key to navigate through it. You should be able to reach every button, link, and form field sequentially.
- Visual focus - The element currently selected by the keyboard should always have a clearly visible highlight or outline around it so the user know where they are.
- No keyboard traps - Users should never get stuck in one part of the page (like a dropdown menu or video player) and be unable to move on using only the keyboard.
⚠️ Important: Nothing on the page should require a mouse to interact with.
Back to Top
Video and Audio
- Captions - All videos that contain spoken audio must have accurate captions. Auto-generated captions are a useful starting point but should always be reviewed and corrected before publishing.
- Transcripts - Provide a written transcript for any audio-only content, such as podcasts or recordings.
- Audio descriptions - If a video shows important visual information not described in the audio, add a written description in the article body alongside it.
- No autoplay - Do not set videos or audio to play automatically when the page loads. Check the settings of any media module or plugin you are using.
Back to Top
Page Basics
- Page Titles - Give every article and page a unique, descriptive title. In Joomla, this is the Title field at the top of the article editor. Keep it clear and specific.
- Zoom/Reflow - Make sure page content is still readable when a user zooms their browser in to 200%. Text should reflow vertically, not get cut off or require horizontal scrolling.
- No flashing content - Avoid any content that flashes or strobes rapidly, as this can trigger seizures.
Back to Top
See Also
Contact Information
For further assistance:
Back to Top