This page is adapted for people with low vision

Logo de adapta tu web

ACCESIBILIDAD ≠ OVERLAY · ENTREGA 25

Accessibility ≠ Overlay: when a dropdown menu becomes a barrier

📅 October 2026   ·   ⏱ 7 min read

A navigation menu can look perfect yet be impossible for some people to use.

01. The problem is not always visible

A dropdown may work with a mouse while failing with a keyboard, screen reader or touch device. Visual polish does not guarantee accessible interaction.

02. Mouse-only navigation

If a submenu opens only on hover, people using Tab or alternative input may be unable to reach it. Access must not depend on a pointer hover state.

03. Visible focus and logical order

Every link and control needs a sensible focus order and a clear focus indicator. Removing outlines without an accessible replacement makes navigation harder.

04. Announcing open and closed states

A button that expands a submenu should expose its purpose and state. A native button with an updated aria-expanded attribute can help assistive technology communicate what happened.

05. Keyboard-friendly submenus

People must be able to open and close submenus, reach their options and move away without focus traps. Ordinary website navigation does not necessarily need the ARIA application-menu pattern.

06. Why an overlay cannot fix it

Changing colours or font sizes does not automatically repair mouse-only event handlers, missing semantics or broken focus management. The underlying navigation component must be fixed.

07. How to test it

Put the mouse aside. Use Tab and Shift+Tab, open every submenu, observe focus and repeat with a screen reader. Test the mobile version too.

08. Conclusion

Accessible navigation works across input methods, communicates its state and lets everyone reach the content. Accessibility is built into design and code.

♿ Accessibility ≠ Overlay · 25

Adapta tu Web — El diseño inclusivo es mejor diseño.

W3C WAI — Menus tutorial · W3C APG — Disclosure pattern · WCAG 2.2 Quick Reference

🧑‍🦯 Blind Reader
Intent narrator ready.

Accessibility guide

This is a functional summary, not a literal reading.

Go to primary goal Jumps to the main action area (form, list or contact).

You are on a listing page. The main goal seems to be: to explore options.

Top actions: Browse results, Filter or sort.

There are 11 key sections you can jump to.

Confidence: 68%

Before continuing:

  • Handle cookies/consent Reason: Detecté un aviso relacionado con cookies/consentimiento. — Recommended route: Contenido principal

Recommended actions

  • Browse results Reason: Parece haber un listado de elementos. — Recommended route: Listado
  • Filter or sort Reason: Detecté términos de filtros/ordenación. — Recommended route: Listado

Go by goals

Choose what you want to do. I will explain it, then ask before jumping.

Confirmation mode

Choose how often I should ask before jumping.



Learning scope (only for “first time”)

Site: remember this goal across the whole site. Page: remember per URL.


  • Go to Home
  • Go to About
  • Go to BlindReader
  • Go to Withdrawal Button
  • Go to Services
  • Go to Blog
  • Go to Contact
  • Go to Español
  • Go to Català
  • Go to Polski
  • Go to Română
  • Go to Italiano
  • Go to Français
  • Go to Svenska
  • Go to Deutsch
  • Go to Nederlands
  • Go to Português
  • Go to article content
  • Go to comments
  • Go to end of article
  • Back to News / Blog
  • Previous post
  • Handle cookies/consent Important: this may block navigation.
  • Browse results
  • Filter or sort

Jump to sections

Guided navigation

The guide announces one section at a time.

How it works: Start guide announces the first key section and scrolls to it. Next moves to the following section. To move focus to the section, use Go to current section. Stop exits.

Status: Guide inactive

Go to current section This link updates as the guide advances.

This article has approximately 291 words.

Moves focus to the start of the content, skipping menus and secondary elements.

About Blind Reader

Blind Reader is an accessibility assistant that analyzes each page and narrates its purpose, key sections and recommended actions — designed for screen reader users.

Compatible page builders: Works with any WordPress theme or builder: Divi, Elementor, Gutenberg, WPBakery, Avada and others. It reads the real content of the page, not the builder markup.

Does it interfere with your content? No. Blind Reader adds an accessible panel above the page but does not modify, hide or alter any existing content or styles on your site.

How does it work? It analyzes the page structure (headings, links, forms, landmarks) and generates a functional summary. The guide and goals help navigate without having to scan the whole page.

Keyboard shortcut: Press Alt + G to jump directly to the first goal.