Back to Plugins
Accessible Navigation Order

Accessible Navigation Order

Used to identify the navigation order of an interface for accessible development.

Plugin Preview

Accessible Navigation Order preview

About this plugin

This plugin helps visualize the accessible navigation order for screen readers, respecting the reading hierarchy of elements in the interface.


Features:

  1. Manual order: Select components in the desired sequence to define the navigation flow.
  2. Grouped order: Generate the order based on the layout of elements within the selected frame.
  3. Edit navigation order: Allows individual editing of the generated items.
  4. Individual deletion: Enables removing items separately.
  5. Bulk deletion: Allows you to remove all items from the selected frame.
  6. Customization: Lets you change the color of the focus tag and the border of the generated navigation order.


The navigation order will follow the Western reading logic, from top to bottom and left to right.


by Priscila Melo - UX Accessibility



----------

Português BR


Este plugin ajuda a visualizar a ordem de navegação acessível para leitores de tela, respeitando a hierarquia de leitura dos elementos na interface.


Funcionalidades:


  1. Ordem manual: selecione os componentes na sequência desejada para definir o fluxo de navegação.
  2. Ordem agrupada: gere a ordem com base no layout dos elementos dentro do frame selecionado.
  3. Editar ordem de navegação: permite a edição individual dos itens gerados.
  4. Exclusão individual: possibilita remover itens separadamente.
  5. Exclusão em massa: permite remover todos os itens do frame selecionado.
  6. Personalização: permite alterar a cor do focus tag e a borda da ordem de navegação gerada.


A ordem de navegação seguirá a lógica de leitura ocidental, de cima para baixo e da esquerda para a direita.


Por Priscila Melo - UX Accessibility

Plugin Details

Version1
CreatedJuly 29, 2025
Last UpdatedJuly 29, 2025
CategoryAccessibility tools
CreatorPriscila Melo
Stats1 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none