How to make your website accessible and improve user experience.

Web accessibility is about making websites and web applications usable by anyone, including users with visual, hearing, motor or cognitive disabilities. For website owners, ensuring accessibility is not only an ethical duty, but also a legal obligation. In Italy and Europe, in fact, there are specific regulations that establish standards to be respected.

Benefits of an accessible website

In addition to being ethically sound, making our websites accessible to include users with disabilities is not only an ethical choice to include users with disabilities, but it also offers numerous concrete benefits:

• Audience Expansion: Approximately 20% of the population needs accessibility tools. Reaching this segment means significantly expanding the user base.
• SEO Improvement:Accessible sites follow good design practices that improve search engine rankings.
• User Experience Optimization: An accessible interface makes navigation more intuitive and enjoyable for everyone, increasing time spent on the site and engagement.
• Improving corporate reputation: An accessible website demonstrates a commitment to inclusivity and strengthens your brand image.

Investing in accessibility not only supports users with disabilities, but improves the digital experience for all users.

Fines and European regulations to follow

In Italy, the Stanca Law defines the specific requirements to ensure the accessibility of public administration websites. The European Accessibility Act (EAA) imposes new regulations starting from June 28, 2025.

All websites of companies with more than 10 employees and/or with a turnover above 2 million euros must be fully accessible.

According to article 24, paragraphs 1, 2, 3 and 4 of Legislative Decree 82/2022 Fines range from a minimum of €5,000 to a maximum of €40,000 based on the extent of the non-conformity, the number of non-compliant products or services, as well as the number of users involved.
For companies with a turnover of more than 500 million, the penalty can reach 5% of the turnover.

Businesses must ensure that their websites:

• Are fully compatible with assistive technologies.
• They allow easy navigation via assistive devices.
• They feature an intuitive and accessible interface for everyone, including features such as text magnification, volume adjustment and other customization options.

👉 Read more in our article How to make a site accessible and avoid fines

WCAG Guidelines

The guidelines WCAG 2.0 And WCAG 2.2, developed by the W3C, provide standards to improve accessibility based on 4 key points:

• Perceptible: Information must be presented in a clear and accessible way so that all users can perceive it.
• Operable: Interface elements must be easy to use by anyone.
• Understandable: Information and functionality must be simple to understand and use.
• Robust: Content must be flexible enough to work with different assistive technologies.

Following these guidelines not only ensures compliance, but also improves the browsing experience for all users.

How to Improve Accessibility with Accessible UI Elements

1. Dropdown Menus

I dropdown menus are common elements in user interfaces, however, they often present accessibility issues. An inaccessible drop-down menu can create significant difficulties for users with visual or motor disabilities. Here are some of the most common problems:

• Difficult navigation: Users who use assistive technologies such as screen readers may have difficulty locating drop-down menus if they are not designed properly.
• Incorrect focus: The lack of focus management can lead to a poor user experience, where users cannot navigate through menu options intuitively.
• Generic elements: The use of generic HTML elements (such as <div> or <span>) without meaningful semantic markup makes it difficult for users to interact with it.

To counteract these problems, it is essential to implement semantics HTML And ARIA attributes. Here's how you can make your site more accessible through these practices:

• Using Semantic HTML: It is important to use appropriate tags such as < button > to activate the menu, and
  And
  • to list the menu options. This approach not only improves accessibility but also helps with SEO.
  • htmlMenu
  • Implementing ARIA AttributesARIA attributes can greatly improve the user experience. Use aria-haspopup to indicate that an element activates a drop-down menu and air-expanded to indicate whether the menu is open or closed.

  Managing focus is essential when interacting with dropdown menus. Make sure that focus is locked inside the menu when it is open and is properly restored to the button when the menu is closed.

  Here are some additional tips to improve accessibility:

  • Automatic accessibility testing: Use tools like WAVE or AXE to quickly identify any problems in your dropdown menus.
  • Verification with real users: Involve people with disabilities in your site testing process to get direct feedback on how to improve accessibility.

  By implementing these measures, you can ensure that your dropdown menus are accessible and usable by all users, thus contributing to accessible design and inclusive interfaces.

  2. Modals

  The importance of the focus management in modals cannot be underestimated. These UI elements, if not designed properly, can become obstacles for users using assistive technologies such as screen readers. It is crucial to ensure that focus is locked within the modal until it is closed. This helps maintain the consistency and accessibility of the interface.

  Here are some practical techniques to ensure that your modals are accessible:

  • Using ARIA attributes: Add ARIA attributes like role="dialog" can provide contextual information to assistive technologies, signaling that this is an interactive dialogue.
  • Focus Management: Implement a JavaScript script to “trap” focus inside the modal. When a modal opens, focus should jump to the first interactive element within the modal, and return to the previous active element when closed.
  • Accessible closure: Ensure that users can close modals using both the Esc key and a clearly identifiable close button.

  Investing in accessible design for modals helps create inclusive interfaces, improving the browsing experience for all users, including those with disabilities.

  3. Tabbed Interfaces

  Tabbed interfaces are a common element in accessible design. However, improper construction can hinder accessibility. Common problems include:

  • Confused navigation: Users who use assistive technologies may have difficulty understanding which tab is active.
  • Lack of visual cues: The lack of clear visual cues for active tabs can lead to confusion.

  To ensure an inclusive experience, it is essential to use ARIA roles and specific properties, thus facilitating keyboard navigation. Here are some guidelines:

  1. Using ARIA roles:
  • Tax role="tablist" for card containers.
  • Each card should have role="tab" and only one must have air-selected="true".
  1. Links between cards and contents:
  • USA air-controls to associate each tab with its respective content panel.
  • Panels must be marked with role="tabpanel" And aria-labelledby to refer to the active tab.
  1. Keyboard navigation:
  • Users should be able to switch between tabs using the arrow keys, replicating behaviors familiar in other interfaces.

  Implementing these practices not only improves the accessibility of tabbed interfaces, but also provides a smoother and more intuitive user experience. Creating inclusive interfaces requires attention to detail and understanding user needs.

  4. Improve Color Contrast and Visual Formatting

  Color contrast is a crucial element in ensuring the readability of content on a website. Good contrast helps users with visual impairments, such as partial blindness or color blindness, to better perceive information. Here are some key points to consider:

  • Adequate Contrast: Make sure your text is easily readable against the background. Use tools like the WebAIM Contrast Checker to evaluate the contrast between colors.
  • Colors and Style: Avoid similar color combinations that can confuse the user. High contrast colors such as black on white or dark blue on yellow are generally more effective.

  Visual formatting plays an equally important role in improving accessibility. Some practical tips include:

  • Text Size: Use text sizes large enough to make them easy to read, ideally no smaller than 16px.
  • Text Alignment: Prefer left alignment over justified, as this makes it easier to read for people with dyslexia.
  • Using Spacings: Maintain adequate spacing between lines and paragraphs to avoid a crowded look.

  By implementing these techniques, you can make your site more accessible and improve the user experience for everyone.

  The Web Content Accessibility Guidelines (WCAG) standard defines two levels of contrast ratio: AA (minimum contrast) and AAA (enhanced contrast).

  • Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large (at least 18pt) or bold text.
  • Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large or bold text.

  5. Alternative Text and Accessible Visual Content

  TheImportance of alt text for images cannot be underestimated. This tool is essential to ensure that people with visual impairments can understand the visual content of a website. Using clear and descriptive alt text allows screen readers to provide useful context about images, improving the user experience.

  Consider the following points to effectively implement alt text:

  • Descriptive and concise: Make sure your alt text accurately describes the image in a concise manner, without overwhelming the user with unnecessary details.
  • Avoid generic phrases: Phrases like “image of” or “photo of” do not add value. Get straight to the point.

  As for the accessible visual content, it is important to adopt techniques that improve usability:

  • Subtitles and Transcriptions: Offering closed captions for videos makes content accessible to deaf or hard-of-hearing users. Transcripts provide an additional resource for understanding audio content.
  • Clear and easy to read texts: Using easy-to-read fonts and contrasting colors helps ensure that your videos are accessible to those with vision impairments.

  By implementing these practices, you help create a more inclusive online environment for all users.

  Tools and Resources for Testing Web Accessibility

  Use accessibility testing tools is essential for identifying and fixing issues on your website. These tools ensure an inclusive experience for all users, helping to make your site more usable.

  👉 Colour Contrast Checker

  The Colour Contrast Checker is an excellent tool for evaluating color contrast. This tool helps you ensure that text is readable by people with visual impairments. By entering the colors of your site, you can check whether they meet accessibility standards. Good contrast not only makes the site more accessible, but improves the experience for all users.

  👉 WAVE

  WAVE provides a detailed analysis of your site's accessibility. It presents errors and suggests improvements to comply with WCAG standards. With WAVE, you can see accessibility issues in real time and receive guidance on how to fix them. It is a useful tool for developers and designers who want to take a proactive approach to optimizing accessibility.

  👉 MAUVE++

  The MAUVE++ validator is a project of the HIIS laboratory at ISTI CNR, currently maintained by Fabio Paternò, Marco Manca and Nicola Iannuzzi.

  MAUVE++ (Multi-Guide Accessibility and Usability Validation Environment) is a system for evaluating the accessibility of websites by checking their HTML and CSS code against guidelines, provides validation results for different types of stakeholders and supports validation against W3C WCAG 2.1 guidelines.

  👉 IBM Equal Access Accessibility Checker

  This Extension for major browsers is an essential tool for anyone who wants to ensure the accessibility of web content. Here are some of its key features:

  The extension is able to scan web pages, identifying any accessibility issues that could hinder the enjoyment of the content by users with disabilities.

  Take Action Now! Make Your Website Accessible

  Investing in web accessibility not only supports users with disabilities, but improves the digital experience for everyone. If you need an expert partner to make your website accessible, rely on the web development services of the web agency BigFive.

  To learn more about our services or for any questions, contact us without hesitation!

  For the companies with a turnover of less than 500 million euros, at the moment, according to article 24, paragraphs 1, 2, 3 and 4 of Legislative Decree 82/2022 Fines range from a minimum of €5,000 to a maximum of €40,000 based on the extent of the non-compliance, the number of non-compliant products or services, as well as the number of users involved. Is your site inaccessible? You may incur penalties of up to 5% of your turnover
  Don't take any risks and make your site accessible now!

  Contact us for a quote