<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=683797551780598&amp;ev=PageView&amp;noscript=1">
Skip to content
  • There are no suggestions because the search field is empty.
en
A11Y

Design and Development

Considering the special accessibility requirements is critical for design and development, A short overview.

A11Y: Free Consulting
design-and-dev-new-bg

Accessible websites

Thinking accessibility from the start: A successful accessible website requires accessibility to be integrated from the outset – not as a post-launch fix. Ideally, all relevant disciplines are involved from the beginning: design and conceptualization, technical implementation, and content creation. This ensures that visual design, code, and content are equally accessible. 

The interplay of design, development, and content lays the foundation for a website that all people can use – without restriction. Starting in mid-2025, digital accessibility will even be legally required (keyword: European Accessibility Act and BFSG in Germany) – so now is the time to act.

Accessible design: 
Systems, principles, and practice

Accessible design doesn’t start with color contrast – it starts with structure. Creating modern, accessible websites requires more than a good visual sense: it’s about design processes, component logic, and a structured, repeatable approach with accessibility integrated from the beginning. Especially for larger or long-term projects, a consistent design system is the backbone of accessible UI/UX design.

1-nu

Design Systems: The Foundation of Accessible UI

A good design system includes:

  • Component library: Buttons, form elements, navigation modules, modals, etc. – all reusable and properly documented.
  • Style definitions: Colors, typography, spacing, contrast – all aligned with accessibility standards.
  • State definitions: Focus, hover, disabled, error – clearly distinguishable and keyboard-accessible.
  • Documentation & guidelines: Accessibility rules (e.g., contrast requirements, minimum sizes, focus behavior) are a core part of the system.

This makes accessibility a built-in standard – not a patch or afterthought – for both designers and developers.

Pro tip: Tools like Figma can be used to build accessible design systems, including plugins for contrast checking and focus visualization. Design tokens help standardize semantic color use (“primary-focus”, “error-border”) instead of relying on raw HEX values.

2-nu

Inclusive Design in Visual Interfaces

Design system or not – the core principles of inclusive design remain the same:

  • Colors and contrast: Color palettes must comply with WCAG (minimum 4.5:1 for body text). Contrast must also be preserved across states (e.g., hover vs. background color).
  • Typography: Font sizes should be scalable (e.g., using rem instead of px), and readability must remain intact when zoomed. Line height and text block width should also support readability.
  • Layout & visual hierarchy: Logical structure, clear separation of content areas, sufficient white space – not just for aesthetics, but also to reduce cognitive load.
  • Navigation & orientation: Consistent placement of menus, logos, footers, etc., supports muscle memory for repeat use – especially relevant for users with cognitive impairments.

3-nu

Interactive Components: Visual and Functional Feedback

Accessible UI design considers every interaction:

  • Focus indicators: Must clearly show which element is currently in focus via keyboard.
  • States: Buttons and controls must be visually distinguishable in all states (normal, hover, focus, disabled, active) – not just by color.

Process tip: When a modal opens, where does keyboard focus go? And where does it return to after closing?

Defining accessibility requirements: The basis for strategic planning

Every accessible web project begins with a thorough requirements analysis. The central question: Who needs to use this site, and how? This phase focuses on understanding the diverse target groups and their specific needs—for example, users with visual impairments, keyboard-only users, or those with cognitive disabilities. These requirements should be identified early and documented in a written requirements profile. This profile may include: minimum font sizes, contrast requirements, screen reader compatibility, plain language needs, content structure, etc.

Even at this stage, involving stakeholders or accessibility experts—via interviews, user testing, or pre-project audits—can help uncover real needs.

It’s also important to factor in constraints such as budget and timeline from the start. While accessibility can be cost-effective if planned early, trade-offs may be necessary. Experienced consultants help assess which actions offer the highest impact per budget, often producing action plans that prioritize immediate and long-term improvements.

Another key aspect is assessing the technical foundations early. In this consulting phase, the team determines which platform or CMS best supports accessibility goals. Off-the-shelf systems like WordPress may offer built-in features, while custom solutions can be tailored for specific requirements. These technical decisions significantly influence how easily accessibility can be implemented. The goal is to establish a technical foundation that supports HTML5, ARIA attributes, alternative text management, and other critical features.

Accessible Development: Standards-Based Technical Implementation

While design defines the structure and consistency, it’s the frontend development that ultimately determines whether a website is truly accessible. Many requirements are implemented in HTML and scripting. Key elements of accessible development include:

Semantic HTML & structure

Use HTML elements according to their meaning (<nav>, <main>, <footer>, headings <h1>–<h6> in proper order). A clear semantic structure enables assistive technologies like screen readers to interpret the page correctly. Visually grouped content should also be grouped in the code (via containers, lists, ARIA roles if necessary). Ideally, these match the structure defined in the design system.

Forms and controls

Use <label> elements for all inputs, group related fields using <fieldset> and <legend>, and provide helpful placeholder and error texts. All states should be represented both visually and programmatically – in the design and in the code.

Keyboard accessibility & focus management

Develop with a keyboard-first mindset. Anything clickable must be usable without a mouse. Focus should move logically and be handled properly in interactive components – e.g., returning focus to the triggering element after closing a modal.

ARIA & JavaScript

Use WAI-ARIA roles and states (aria-expanded, aria-live, role="alert", etc.) only when HTML can’t do the job on its own. And only when their impact is fully understood and compatible with the DOM and design system.

Performance & compatibility

Accessibility includes technical robustness. Fast loading, cross-browser compatibility, and clean, maintainable code all contribute to accessibility – especially for users with older devices or assistive tools.

 

Note: A perfect Figma library is only useful if it’s correctly translated into code. Design systems must be consistently implemented in frontend development.

Content and Media:
Creating Accessible Content

Even the best design system and technically flawless frontend are of little use if the content is inaccessible. A truly accessible website depends just as much on how information is written, structured, and presented. Key content-related accessibility practices include:

Clear and understandable language

Write in plain, accessible language. Avoid complex sentence structures, technical jargon, and unnecessary foreign words. Where appropriate, explain terms or offer a version in Plain Language. Use headings meaningfully – not for visual style, but to signal structure and hierarchy.

Alternative texts for images

Every meaningful image must have a descriptive alt attribute that explains its content or function. Logos, button graphics, icons – anything with meaning must be understandable even without visual perception. Decorative images should be marked as such (alt="") so screen readers can skip them.

Accessible audiovisual media

Provide captions and, where possible, audio descriptions for videos to ensure that users who are deaf or blind can fully access the content. For podcasts or other audio formats, offer transcripts. If your target audience includes sign language users, consider offering videos in sign language as well.

Documents and downloads

PDFs and other downloadable files must also be accessible (tagged structure, alt texts for images, correct reading order). As a rule of thumb: if the document is part of your website offering, it should either be fully accessible or be accompanied by an equivalent HTML version.

Content management and editorial workflows

Content editors need to be trained in accessible publishing practices. This includes using proper heading styles (not visually faked with bold text), entering alt texts, structuring tables correctly, and using the built-in accessibility features of the CMS. Ongoing attention to these practices ensures that a website that starts out accessible remains so over time.

Fatty-head

Accessible design means thinking across disciplines, and delivering value at every level.

Design and development are at the heart of any accessible website – but only when they are tightly integrated with thoughtful, accessible content does a truly inclusive experience emerge. Those who establish accessibility early, systematically, and across all disciplines benefit in multiple ways: improved UX, wider reach, sustainable code quality – and legal compliance.

Accessibility is not a design constraint; it’s a hallmark of design maturity. What works for everyone is better for each individual.