I have a component library that I want to add support for accessibility. Some of our components need to have HTML tags of alt=“” and aria-label=“”. I would like to have these in Figma for our writers to add content. I’ve looked at a ton of Figma to code plugins, and have tried using text properties, but with no success. Any ideas?
Question
Add alt="" and aria-label="" to components
Hello, looking for the same thing. Work-around, improvisation, tips welcome
Totally necessary
+1 to this
Thanks for raising this topic! Let me change the category into “Suggest a feature” for future improvements :) Our team regularly checks that.
Thanks!
It would help a lot with design handoffs and code generation if components would have metadata properties. There could be a specific property type for metadata that doesn’t affect the rendering of the component but can be used to pass key-value pairs that would appear in properties list in Dev Mode.
Few examples:
- aria-label: “Save changes”
- max-length: 16
- Web component: <vaadin-dashboard-widget>
- Component version: 1.2.1
I already thought that setting up a text variable that isn’t connected to any layer could be used for passing the info in a “hidden” property, but it will result an invalid asset due to unused property. The simplest workaround could be to support special markup for read-only properties. For example “_component: vaadin-dashboard-widget”. Ideally the values in metadata properties could be marked to allow editing to make them more useful (i.e. aria-label case).
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.