At FAIRTIQ, our mission is to make public transport simple and accessible for everyone. This commitment to ease of use extends beyond our app to every piece of digital content we create, from promotional pages to support articles.
This principle is more important than ever. As of 28 June 2025, the European Accessibility Act requires digital products, including mobile apps and their associated web content, to comply with the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. Non-compliance can result in significant fines; more importantly, it would mean failing a segment of our audience.
Creating accessible content is a shared responsibility. To support our development teams in achieving this goal, we have outlined six foundational best practices. These habits not only help ensure compliance but also lead to cleaner, more maintainable, and more robust code for everyone.
1. Use relative units for spacing and typography
A common pitfall is to define sizes using fixed pixels, which can override a user's browser settings. The modern approach provides a more flexible and respectful experience.
- The old way: using fixed px units for font-size, margin, and padding.
- The modern way: using relative rem units for font-size, margin, and padding. The rem unit is relative to the root (<html>) element's font size.
Improvements:
- Accessibility: relative units honour the user's default font size. If someone with low vision increases their browser's base font size, a layout built with rem units scales proportionally and predictably. A px-based layout can break, causing text to overlap or become unreadable.
- Consistency: basing measurements on a single root font size makes it far easier to maintain consistent scale and coherence across the entire application.
Actionable advice:
- Default to rem for font-size, margin, padding, and other component dimensions.
- Use em when you need sizing relative to the element's own font size, which is useful for things like padding on a button that should scale with its text.
- Reserve px for properties you truly want to be fixed, like a 1px border that should never scale.
- Establish a clear base in your CSS, such as html { font-size: 100%; }, which sets 1rem equal to the user's default font size (typically 16px).
2. Choose HTML tags for their meaning
Generic <div> and <span> tags tell assistive technologies nothing about the content's role. Semantic HTML provides a clear, machine-readable structure that is essential for accessibility.
- Instead of generic containers: Building structure with <div class="main-title"> or <div class="list-item">.
- Use tags that describe content: Using <h1> for the main title, and <ul> with <li> for the list items.
Improvements:
- Accessibility: screen readers and other assistive tools use semantic tags to build a "map" of the page. This map allows users to understand the document's structure and navigate efficiently (e.g., "jump to the next heading" or "list all links").
- Readability: the code becomes self-documenting. The purpose of each element is clear from the tag itself, making the codebase easier for developers to understand and maintain.
Actionable advice:
- Before writing a tag, ask: "what is this content?" Is it a heading, a list, a main content area, a navigation bar? Choose the tag that accurately describes its function (<h1>-<h6>, ul, main, nav, etc.).
- Use headings (<h1> - <h6>) to create a logical outline of the page. Never skip levels (e.g., do not jump from an <h2> to an <h4>).
- Only use <div> and <span> when no other semantic element is appropriate, typically for grouping elements purely for styling purposes.
3. Write classes that describe purpose, not appearance
Coupling class names to visual styles makes code brittle and difficult to maintain. Naming classes based on their component's function creates a more resilient system.
- The old way: presentational class names like .bold-text, .red-error, or .padding-10.
- The modern way: structural or purposeful class names like .card-title, .status-message-error, or .cta-button.
Improvements:
- Maintainability: if you need to change all card titles from bold to regular weight, you change a single CSS rule for .card-title. You don't have to search the HTML for every instance of .bold-text. This properly separates concerns: HTML for structure, CSS for presentation.
- Reusability: well-named components (e.g., a .card with its child elements) become self-contained and can be reused reliably across the site.
Actionable advice:
- Name classes based on what something is, not how it looks. For example, .error-message is better than .red-text.
- Think in components. Group related elements and use a consistent naming convention that reflects their structure (e.g., .card, .card-header, .card-body).
4. Distinguish between informative and decorative images
Every <img> tag needs an alt attribute, but its content depends on the image's purpose. Providing the wrong information can create a frustrating experience for screen reader users.
- The common mistake: adding descriptive alt text to a purely decorative icon that is already explained by adjacent text.
- The correct approach: providing an empty alt="" attribute for decorative images, which instructs screen readers to ignore them.
Improvements:
- Reduces noise: when an image is purely for visual effect, an empty alt attribute prevents screen readers from announcing redundant information (e.g., "Icon of a ticket. 20% discount."). It streamlines the experience by focusing on the essential content.
- Clarity of intent: explicitly marking an image as decorative shows that accessibility has been considered. Note that an empty alt="" is very different from a missing alt attribute, which is an accessibility error.
Actionable advice:
- Always include the alt attribute on <img> tags.
- If the image conveys information not found in the text, write concise, descriptive alt text (e.g., alt="Graph showing a 50% increase in ticket sales in July.").
- If the image is purely decorative or its purpose is fully described by surrounding text, use an empty alt attribute: alt="".
5. Build layouts with modern CSS
Legacy CSS relied on hacks like using display: table or complex floats for page layout. Modern tools like Flexbox and Grid are more powerful, predictable, and designed for this exact purpose.
- The old way: using display: table on non-table elements, negative margins to counteract padding, and complex float-based systems for page structure.
- The modern approach: using CSS Flexbox and Grid to create robust, responsive, and maintainable layouts.
Improvements:
- Simplicity and power: Flexbox (for one-dimensional layout) and Grid (for two-dimensional layout) are purpose-built for creating page structures. Their behavior is predictable and far easier to reason about than legacy hacks.
- Maintainability: code is cleaner and less prone to breaking when content changes. A layout built with Grid or Flexbox is far more resilient than one held together by floats and negative margins.
Actionable advice:
- Use Flexbox and CSS Grid as your default tools for layout.
- Avoid using display: table for anything other than actual tabular data presented in a <table> element.
- Be cautious with negative margins. They can be a sign of an underlying layout issue that could be better solved with Flexbox, Grid, or adjusted padding.
6. Ensure sufficient color contrast
Text is unreadable if it doesn't stand out from its background. This affects users with low vision, color blindness, and even users without impairments who are viewing a screen in bright sunlight.
Actionable advice:
- Meet WCAG 2.1 AA standards: aim for a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text (18pt / 24px or 14pt / 18.5px bold).
- Use verification tools: Regularly check your color combinations with a reliable tool like the WebAIM Contrast Checker.
- Don't rely on color alone: ensure that information conveyed with color is also available through text or icons, as some users cannot perceive color differences.
Key takeaways
- Use relative units (rem) for sizing and spacing to respect user settings.
- Prioritize semantic HTML to give your content clear structure and meaning.
- Name CSS classes by purpose, not appearance, to separate structure from style.
- Use the alt attribute correctly for all images (descriptive for informative, empty "" for decorative).
- Embrace modern CSS like Flexbox and Grid for all layout tasks.
- Maintain a compliant contrast ratio (at least 4.5:1 for normal text).
Conclusion
Adopting these practices is about more than writing clean code or meeting legal requirements. It is a direct reflection of FAIRTIQ’s core mission. By building modern, maintainable, and accessible web content, we ensure our digital presence is as simple and welcoming as the journeys we enable for our customers.