Allow defining of semantic components

[charlietriplett]

Description

If this tool allowed for the assigning of semantic components, it would help expedite development. For example, defining if a call to action is <a> link or a <button>. Should a set of mutually exclusive options be written as buttons or radio inputs?

Why

Developers are often left to choose semantics of controls. This is problematic because for people using assistive technology, the code is the UX.

This is important because designers should be designing the user experience for everyone.

We would use this to define which of our design system components to use.

This would serve to expedite development by reducing the decision making about UX placed on developers.

Possible Implementation & Open Questions

A tag to allow semantic html annotations, especially for form controls:

Web

• Radio inputs
• Checkbox
• Button
• Link
• Select
• Fieldset/legend
• etc

Native

• Button
• Link
• Picker
• Segmented control
• Switch
• etc

Is this something you're interested in working on?

I'd be happy to work with others to help make this feature available.

Thank you!
Charlie Triplett
Sr Accessibility Manager, T-Mobile

[calebnance]

Hey @charlietriplett,

We definitely have this on the roadmap, we've talked about annotating interactive elements and the best ways to keep it high level enough to help all that use this tool. Will keep this ticket open until we have it ready for prime time!

Thanks so much for the feedback!

We created this plugin as a small team out of passion for accessibility. We appreciate your insights—they will help us to prioritize work for next release. In the meantime, feel free to reach us with more questions and ideas via our feedback form.