Skip to main content
Digital Services Factory

13 overlooked details in Front-end Development (That make a big difference)

28/05/25  |  Blog
Featured Overlooked details in frontend

By Constantinos Evangelou, Interaction designer

When we think of front-end development, our minds often go to visuals, components, and interactivity. Great services though, the kind people trust and enjoy using, are built on solid foundations that often go unnoticed. These “small” details aren’t small at all. This post explores some of the most overlooked (yet essential) front-end elements, many of which are also covered in our Unified Design System (UDS). 

Overlooked details in frontend

1. Set the correct lang attribute

Always declare the language of your pages using the lang attribute on the <html> tag and remember to change it when the user changes the language. This helps screen readers pronounce content correctly and improves accessibility and SEO. The UDS page template includes this by default.

2. URLs: kebab-case for clarity

Readable, consistent, and SEO-friendly URLs help users and search engines navigate better. Use lowercase and hyphens, no camelCase, no underscores. For more information refer to the “Service name and URLs”

3. Page template and layout

A consistent page template (header, main, footer, etc.) ensures predictability and easier navigation. The UDS has a defined non-optional page template to be used in all pages and different layouts for the main section to choose from.

4. Title and description

Every page should have a meaningful <title> and <meta name="description">. It improves SEO, accessibility, and how your page appears when shared. For more information refer to the “UDS – Title and description“.

5. Favicons and app icons

Don’t stop at favicon.ico. Cover Apple touch icons, Android icons, and desktop icons. Look at the UDS – theme, app manifest and apple-touch-icon to see how this is done the gov.cy way.

6. Social tags

Set Open Graph (og:) and Twitter tags so that when someone shares your page, it looks good and communicates clearly. Check out the DSF – social tags page to see how you can do this.

7. Print media

Add print styles to ensure your service is usable and readable when printed. This is especially useful for receipts, applications, or summaries. The UDS developer assets have you covered, Print media will work as expected, as long as your HTML is structured according to the documentation. Remember to use the govcy-d-print-none class on the header, footer and any other element you don’t wish to appear in print.

8. Accessibility

Accessible services are better for everyone. Using semantic HTML, proper contrast, labels, legends, roles, and screen reader support is not optional. The UDS includes accessibility best practices in all coded examples, along with dedicated “Accessibility” sections on most pages to highlight key guidelines (for example check out the accessibility section for the accordion component)

9. Labels and legends matter

Clear and descriptive labels and legends aren’t just an accessibility requirement, they’re essential for usability. A form field without a proper label or a group of checkboxes without a legend leaves users guessing. This can lead to frustration or cause them to drop off a service.

In the UDS pattern for labels and legend headings, we explain how to:

  • Write labels that are clear, consistent, and multilingual-ready.
  • Use legends properly to group related fields (especially radios and checkboxes).
  • Avoid using placeholder text as a label.
  • Support screen readers and meet accessibility standards with semantic HTML.

Pay special attention to how labels and legends should be treated as page headings (<h1>) on single-question pages, this is one of the most common issues we find in our assessments. Getting it right pays off in both accessibility audits and user satisfaction.

10. Skip to main content

Essential for keyboard and screen reader users. It lets users bypass repetitive elements and jump straight to the content.

The UDS page template includes this by default. Make sure it:

  • Is the first focusable element
  • Becomes visible on focus
  • Points to #main-content or whatever id is assigned to your main content
  • Has the correct text for the page language

Try navigating with just your keyboard, do you see and use the skip link on first Tab?

11. Error messages and validations

Validation errors should be visible, specific, helpful, understandable, accessible and announced by screen readers. The UDS uses a combination of Error messages and Error summary to achieve this. You should pay attention on:

12. Error pages

Design for the “what ifs.” What if the user hits a 404? What if there’s no data? Don’t leave them in the dark. Check out the patterns for:

13. Keyboard navigation & focus states

Test everything without a mouse. Can you navigate with just Tab and Enter? Can you see where you are on the page? The UDS has you covered on this as well, as long as your HTML is structured according to the documentation.

Conclusion

These elements may seem small on their own, but together, they form the backbone of a high-quality front-end experience. All of them are already embedded into our design system, ready for teams to adopt and implement. Pay attention to them to build services that respect and satisfy users, not just services that work.

Tags: , , ,

Relevant Content

↑