[Post] Using Microsoft Designer AI, and Figma to Create Accessible Web Graphics, Social Media, and Alt Text

[GingerKiwi]

Thank you for your interest in writing a post! Please fill out the following information:

Your idea

A step by step article showing how to use Microsoft Designer's Image Creator to create accessible web illustrations and social media graphics. When done thoughtfully the AI prompt is a great starting point for alt text.

Outline (optional)

1. Introduction
2. Tools and setup
3. Using Microsoft Designer Image Creator
4. Crafting a prompt
5. Saving your file and the prompt
6. Importing image into Figma
7. Figma 101 7a. Figma: Frame sizes 7b. Figma: Using images 7c. Figma: Accessible contrast and text in Figma
8. Using your image in social media and the web 8a. Quickly Crafting alt text from the AI prompt 8b. Alt text and accessible hashtags on LinkedIn 8c. Alt text on the web

Additional information (optional)

Example:

I've already done this process to create my "Scriptmas Cheerleader" image for LinkedIn.

Alt Text: Dark red border and matching text colour. The text is a cartoon elf style script. Says Scriptmas Cheerleader! at the top. Underneath is a square Pixar style AI generated drawing. A redhead female Christmas Scandinavian gnome wearing: red boots with curly toes, a pointed gnome hat with a curl at the top, a long-sleeved dress, and striped leggings. She has red cheerleader pompoms with sliver glitter in them. She is smiling and holding her pom poms up and shaking them to cheer on the viewer. She is in an awesome active user manual wheelchair. The background is a joyful outdoor winter village scene. At the bottom it says www.gingerkiwi.dev with a subtle orange to pink gradient.

LinkedIn Post where I shared my Scriptmas Cheerleader image

About Me

I'm a software developer, SEO technical content writer, and former assistive tech specialist. I've been volunteering for A11yTO for almost a year now, and met tons of other passionate A11y professionals though A11yTO and Microsoft, including Michelle Williams at the A11yTO week and after party.

I'm familiar with 11ty as I've had an 11ty blog for about 1.5 years https://gingerkiwi.blog. My new site, https://gingerkiwi.dev is a full stack Astro with much better A11y features. It's being built in public. The mobile layout is being done today, along with adding alt text to images.

Terms

• [x] I have read, and agree to follow this project's Contributing Guidelines
• [x] I have read, and agree to follow this project's Content Style Guide
• [x] I have read, and agree to follow this project's Code of Conduct

[davatron5000]

Hi @GingerKiwi, thanks for the idea. This is a fun idea but I think we'll have to pass on it. I think it'd be good treat for something like Smashing Magazine or a personal site. The decision comes down to two factors:

1. We want to keep things pretty tactical about accessible design/development, whereas this falls into content generation. The only tactical piece would be the alt text portion and we already have an alt text article.
2. Candidly, we're not very well setup for managing contributions right now (my fault).

Sorry, about that. I'll close this issue for now but happy to follow up if you have any more questions.

[GingerKiwi]

Hi @davatron5000, Thanks for replying. I'll give the proposal a try with Smashing Magazine.

In regards to your second point, that's completely fine! I was chatting with Ben Myers earlier this week and he gave me more insight into how much work The A11y Project has been. I've been there with other types of community projects myself.

I'm not in a position to offer help now, but please keep me in mind in the future/ later 2024. I have over 15,000 volunteer hours and really love helping out. Kindly, Liz