Accessibility: How to add alternative text and titles to your microapp tiles

Follow

Tiled wants to help create engaging microapps for all users. Many aspects of a microapp’s accessibility are determined by the designers of a microapp, but we are working toward making both microapps and our own interface accessible where possible. 

Our vision is to introduce a communication platform and medium that everyone can benefit from. We are working toward making microapps accessible starting with microapp tiles.

  • Microapp creators can add alternative text and titles to microapp tiles in the builder
  • Microapp viewers can use screen readers to read the configured text description in the HTML

We will be providing more accessibility features to come and are working toward being 100% accessible.

1. Drag any accessible tile in the builder to your desired page

Note: To identify accessible elements in the builder, see the complete mapping below

2. Add your desired description to the corresponding accessibility field in the tile flyout

  • Alt text
  • Title

Screen_Shot_2021-11-16_at_11.42.17_PM.png  Screen_Shot_2021-11-16_at_11.42.25_PM.png

Note: For Asset Library assets, you must add your desired description to the corresponding accessibility field from the Asset Library preview. This description will show automatically wherever the asset is used.

Assets_Library_Screenshot.png

Screen_Shot_2021-11-16_at_11.47.20_PM.png

3. Add your desired description for page, state, or overlay names

Note: Hotspots with targets leverage the name of the page/state/overlay for the accessibility aria-label. Overlays leverage the name of the overlay for the accessibility aria-label.

Note: Existing descriptions in the accessibility field will persist if you replace a local asset with the same local asset type. The existing description in the accessibility field will clear out if you replace a local tile asset with a different local asset type or global asset.

Microapp Accessibility

Builder element

Builder accessibility field

HTML accessibility field

Hotspot Tile

(with internal target)

None: System automatically provides accessibility based on selected target without requiring

Role: Button

Aria-label: Name of the target

Hotspot Tile

(with external target)

None: System automatically provides accessibility based on selected target without requiring

Role: Link

Aria-label: Target information (phone number, website etc.)

Image Tile Alt text

Aria-role: Img

Aria-label: Alt text description

Gallery Tile Alt text

Aria-role: Img

Aria-label: Alt text description

Video Tile (url) Title

Aria-label: Description provided in title

Video Tile (file) Title Video title: Description provided in title
Embed Tile Title Title: description provided in title field in flyout
Google Forms Title Title: description provided in title field in flyout
Google Sheets Title Title: description provided in title field in flyout
Google Data Studio Title Title: description provided in title field in flyout
Script Tile (new) Title Aria-label: description provided in title field in flyout
Close Button (for overlays) None: System automatically provides accessibility details

Aria-role: Img

Aria-label: close icon

Overlays None: System automatically provides accessibility details

Aria-role: Dialog

Aria-label: Name of the overlay

 

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.