Accessibility | How to set the tabbing order for your microapp

Follow

Tiled supports the ability to set the tabbing order for elements within a microapp by using a new feature in the builder. Microapp creators can ensure that keyboard shortcut users This allows recipients of microapps who leverage the keyboard shortcuts to navigate through the microapp in the most logical way.

1. Create a microapp

2. Go to the builder to edit

3. Set the "Show tab index" toggle on

Screen_Shot_2022-07-15_at_7.02.44_PM.png

4. Add tiles to your microapp

  • You will see a tab index input field appear for each tile and a tab index value
  • Each tile that is dragged on the canvas will automatically be given a tab index value in the order it was added to the canvas
  • Each microapp screen can have its own tabbing order set (page, page state, overlay, scrolling canvas, and scroll state)
  • If you copy and paste a tile from one screen to another the tile index value will persist, similar to any configurations on that tile

Screen_Shot_2022-07-15_at_7.02.20_PM.png

5. Change the tab index value for a tile

  • You will be able to update the value with your desired order number
  • You will be able to delete the value to make the element unfocusable

Note: A value of NA will appear on elements that have no tab index value making it unfocusable

Note: If more than one tile has the same tab index value, the web browser will determine the tabbing order between the two elements

Note: If you have a previously created microapp and turn the "show tab index" toggle on, the tab index value for all the tiles will display NA. The tiles are still focusable, but the tabbing order is up to the web browser. You can update the tab index values from NA to your desired values.

 

 

 

 

 

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.