Improving accessibility on your HugoFox website
Every HugoFox website is built to meet the Web Content Accessibility Guidelines (WCAG 2.2 AA) automatically. Behind the scenes we run a suite of compliance tools and keep your site fully responsive, so you don’t need to lift a finger—and whenever the rules evolve we update your site for you. That leaves only the parts you control (documents, images and text choices) to check.
1 How HugoFox keeps you compliant automatically
This section applies to your website.
HugoFox handles the heavy lifting for you:
-
Semantic HTML & component‑based architecture – each header, nav, section, article, aside and footer is correctly tagged, making your site WCAG 2.2 AA compliant, SEO‑friendly and device‑agnostic.
-
Responsive templates ensure text reflows cleanly on phones, tablets and large monitors.
-
Continuous updates—when accessibility standards change, we roll out improvements platform‑wide so your site stays current without extra work.
Note – You still control files, images and page content. The rest of this guide covers those areas HugoFox can’t automate.
2 Checking your colour scheme
This section applies to your website (customise) settings.
You can fine‑tune site colours in the website (customise) page. Before saving, use an online contrast checker—such as click this link—to confirm text and background combinations meet AA contrast ratios.
Tip – Aim for dark text on a light background (or vice versa) and avoid relying on colour alone to convey meaning. Pair colour cues with icons or short labels for everyone’s benefit.
3 Creating accessible documents
This section applies to uploaded documents such as PDFs and Word files.
PDFs, Word files and similar uploads sit outside HugoFox’s automatic compliance, so it’s up to you to ensure they’re accessible. Follow these fundamentals before you attach any file:
-
Give every image meaningful alt text (or mark it decorative).
-
Apply structured headings (Heading 1, Heading 2, etc.) rather than changing font size manually.
-
Tag lists and tables correctly and include table headers.
-
Maintain a logical reading order; avoid floating text boxes that jump the sequence.
-
Set the document language in File > Info > Properties.
-
Make sure link text describes the destination instead of using “click here”.
4 Making content easy to see and understand
This section applies to uploaded documents such as PDFs and Word files.
Whether in a PDF or Word file, these pointers keep information clear:
-
Contrast and scale – text must remain legible at 200 % zoom on desktop or mobile.
-
Reflow and Liquid Mode – view the document in Adobe Reader’s Reflow or Liquid Mode to ensure no horizontal scrolling is needed.
-
No text‑in‑image – except for logos, present information as real text so readers can resize, translate or listen to it.
-
Accessible pop‑ups or annotations – tooltips, comments and form error messages must stay visible long enough and be reachable by keyboard.
5 Ensuring keyboard usability
This section applies to uploaded documents such as PDFs and Word files.
Keyboard‑only users rely on careful planning inside your PDFs:
-
Ensure all links, buttons and form fields can be reached and activated with Tab, Shift + Tab and Enter.
-
Remove any keyboard traps where focus gets stuck.
-
Confirm the Tab order matches the logical reading order (View > Show/Hide > Navigation Panes > Order).
-
Provide a visible focus indicator that meets WCAG 2.2 sizing guidance.
-
Add bookmarks (Document Properties > Initial View) for fast navigation in long files.
6 Keeping content clear and predictable
This section applies to uploaded documents such as PDFs and Word files.
Consistency helps everyone, especially users with cognitive disabilities.
-
Declare the primary language of the document and mark any passages that switch language.
-
Use icons, buttons and labels consistently throughout the file.
-
Keep headings short and descriptive so screen‑reader users can skim quickly.
-
Group related items (for example, “Youth Club FAQs”) and keep to one layout pattern per section.
7 Supporting assistive technologies
This section applies to uploaded documents that contain interactive forms.
Screen readers, braille displays and voice commands rely on the document’s tagging structure:
-
Ensure every form field includes a descriptive label and, where appropriate, a helpful tooltip (Properties > General > Name / Tooltip).
-
Use the Tags panel to check headings, paragraphs and lists are correctly nested and in order.
-
Provide an alert or confirmation message (e.g., “Form submitted”) that is announced to assistive technologies.
-
Remove broken, empty or duplicate tags that may confuse screen‑reader navigation.
8 Running final accessibility checks
These checks are relevant for uploaded documents.
Before publishing or distributing a document:
-
In Adobe Acrobat, choose Accessibility > Full Check and review any flagged items.
-
Generate a detailed report with PAC 2024 for PDFs produced outside Acrobat.
-
Navigate the document using only the keyboard and a free screen reader such as NVDA.
-
Zoom to 400 % or view on a small smartphone to confirm text reflows without clipping.
9 Adding accessible images and media
This section applies to your website when you add images, audio or video.
When you upload an image, make sure vital details (text on a poster, a timetable grid, etc.) stay clear at typical desktop and mobile sizes.
Tip – If your image contains text, check that the text‑to‑background contrast meets AA guidelines and use a font size that stays readable on a mobile screen—HugoFox can’t adjust text baked into an image.
Conclusion
Designing for accessibility is a shared responsibility – HugoFox gives you an AA‑compliant foundation and will keep pace with new guidelines automatically, and with the simple steps above you can ensure every page, file and image is welcoming to all.
Need a hand? Our support team is here 24/7:
-
Email us at team@hugofox.com
-
Use the contact page
-
Silver or Gold customer? Call us on 01635 888 442