Alt Text Photo Challenge 🖼️[Accessibility Skills Week One]

[queenofcorgis]

Welcome to our first skill series for Accessibility. This week we’ll be focusing on using images accessibly. As a reminder, students who participate will be entered to win one of ten free T-shirts.

Images can provide helpful context when contributing to a project, maybe you want to upload a screenshot to show how something is presenting or you want to add photos from a vacation to a water cooler discussion.

Images should include alternative text, or alt text, in order to provide an explanation of the visual information below the image. The purpose of alt text is to convey the purpose or message of an image.

Challenge 🧠

Put your skills into practice - we have five images in the comments below, write alternative text for them by commenting on them.

Tips

• Alt text should literally describe the image, with as many characters as needed.
• End with a period.
• Don't start with "Image..." or "Graphic...". Screen readers say this automatically.
• Do begin with the type of graphic: "Screenshot of..." or "Diagram that shows..."
• Put multi-word titles, e.g. names of menu items, in double quotation marks ("").
• If an area of the image is visually highlighted, describe how. This enables screen-reader users to understand and describe to a sighted friend/colleague what to look for from a visual language standpoint.

Resources

• Alt Text Decision Tree by W3
• Writing for Accessibility: Alt Text
• Article: Alt Text

Example

Alt text: An abstract image of four people interacting with several geometric objects most in shades of orange and purple, two of the shapes include the Copilot and Pull Requests logos.

A Note on Color Contrast 🎨

Click to learn more

Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page.

When writing text on images, use solid color backgrounds (reading text on busy backgrounds, overlays, textures, or gradients is difficult in general), but especially when the text does not have enough contrast. By picking colors on the opposite ends of the color spectrum and avoiding red/green and blue/yellow combinations, you will increase the likelihood that your color and contrast ratios are robust. Use a tool like the ChromeLens extension or visit the WebAIM website to double-check the color contrast with color blindness in mind. Also, be careful with light shades of color — especially grays — they are difficult to see for people with low vision.

Another note, when considering users with low vision, would be to include a note when using colors on the opposite end of the color spectrum that defines that for users who may be color-blind. For example, if you’re using red text for "no" and green text for "yes" in an image or post, be sure to describe that explicitly using text for users who may not be able to perceive these colors.

*No Purchase Necessary. The prize draw is open to verified registered students of GitHub Education who are at least 13 years old. Game ends 5/15/25. For details, see Official Rules.

[queenofcorgis]

Image One:

[Seb0927]

Alt text: Cartoon illustration in pastel colors of Octocat Mona floating through a city skyline while holding a pink heart-shaped balloon. Other smaller Octocats appear in the background with similar balloons above skyscrapers. A skyscraper on the right, in green, displays a coding symbol ("<>") on its facade.

[Protik49]

Alt text: An Octocat floats through a pastel‑like city skyline with salmon‑pink and teal‑blue towers topped by tiny pink heart‑shaped balloons.

[Juleipssy]

alternative text: Mona the Octocat floats happily through the sky, holding a pink heart-shaped balloon. The background features a bright blue sky with fluffy clouds and stylized city buildings.

[cpronotti]

Texto alternativo: una Mona, vuela con un globo rosado muy grande. Detras se ven edificios con más Monas y sus globos rosados.

[privacyglory]

Alt text: The GitHub Mascot Mona the Octacat is holding a pink heart shaped balloon and flying across a cartoon image of a urban city against a backdrop that is blue and reminds the viewer of a pretty summer day. There are four other heart balloons in the distance and two more Octocats holding them.

[queenofcorgis]

Image Two:

[Protik49]

Alt text: A sleek white rocket blasts off from a lush meadow of blurred tulips and daisies under a cloud‑filled sky.

[Juleipssy]

Alternative text: A space rocket soars dramatically into the sky from a flowery field. The vibrant foreground is filled with red, yellow, white, and pink flowers, while a cloudy sky frames the scene in the background. The contrast between nature and technology creates an inspiring atmosphere.

[kachiden]

Alt text: A sleek rocket soars dramatically from a flowery field into a gray sky during takeoff, acting as a visual bridge and inspiration between the unknowable frontiers and the flowers of the earth.

[cpronotti]

Vista desde el piso de un suelo con muchas flores de colores. Atrás, sobre un cielo gris y con muchas nubes, despega un cohete espacial.

[privacyglory]

Alternative Text: The viewer is given the perspective of an insect or something very small on a lawn of grass and wildflowers looking up at a rocket that has just blasted off in the center of the picture.

[queenofcorgis]

Image Three:

[Seb0927]

Alt text: Abstract digital illustration in neon colors depicting a humanoid figure in shades of green and blue, composed of geometric shapes. Its left hand holds a glowing sphere, while the other lifts a pixelated, staircase-like structure. The figure stands against a background that features a purple grid pattern and abstract 3D elements, including spheres, blocks, and a spiraling ribbon in green, orange, and pink.

[Protik49]

Alt text: Digital illustrations of geometric humanoid figures in surreal, neon environments interacting with glowing spheres, floating prisms, and pixelated structures.

[Juleipssy]

Alt text: A futuristic, completely abstract digital artwork featuring a green and blue humanoid figure surrounded by vibrant geometric shapes and neon colors. The figure interacts with floating digital panels and orbs in a surreal, technological environment filled with grids, curves, and overlapping planes in shades of purple, pink, and orange.

[cpronotti]

Ilustración abstracta con un humanoide en el centro que sostiene una esfera en una mano, y en la otra un bloque como de un tetris. Y muchas imágenes y cuerpos geométricos que van hacia una dirección, hacia adelante.

[privacyglory]

Alternative Text: The image shows a stylized, digital illustration of a humanoid figure with a green, pixelated or geometric appearance. The figure appears to be interacting with digital elements in a vibrant, abstract environment filled with geometric shapes and bright colors including purple, orange, pink, and blue. The figure is reaching out with its hands, appearing to manipulate or interact with floating orbs and rectangular elements in this digital space. The overall aesthetic is futuristic and evokes themes of technology, digital interaction, and virtual reality, with a grid-like background suggesting a digital dimension or interface.

[queenofcorgis]

Image Four:

[Seb0927]

Alt text: Photograph of a rustic wooden board filled with an assortment of cheeses, fruits, and herbs. Cubes of yellow cheese, slices of brie, fresh figs, strawberries, and pear slices are neatly arranged, with sprigs of rosemary and mint scattered throughout. Two metal tongs rest on top of the food.

[Protik49]

Alt text: A wooden platter with assorted cheeses, fresh figs, strawberries, pear slices, rosemary, mint, and silver tongs, showcasing vibrant textures and colors.

[Juleipssy]

alt text: Artfully presented charcuterie board: fanned cheese slices, petal-like pear slices, fresh figs split open like blossoms, juicy strawberries, fragrant rosemary sprigs, and mint leaves adding a vibrant touch of green. All carefully arranged on a rustic wooden board, accompanied by metal tongs inviting you to taste.

[cpronotti]

Una tabla de madera con una exquisita picada de queso, manzana, higos, frutillas, cortados y bien ordenados sobre la bandeja. Con algunas hojas verdes arriba que le dan una presentación delicada.

[privacyglory]

A wooden cheese board featuring an assortment of cheeses and fruits arranged attractively. The board includes cubed hard cheese, soft brie or camembert cheese, sliced pears, fresh figs cut in half, strawberries, and sprigs of fresh herbs like rosemary and mint for garnish. Several small serving utensils with silver handles are placed throughout the display for guests to serve themselves. The rustic wooden board provides a warm backdrop that complements the natural colors of the food.

[queenofcorgis]

Image Five:

Hint: This is @ashtom at the Day 1 Keynote for GitHub Universe 2024

[Seb0927]

Alt text: Photograph of GitHub CEO Thomas Dohmke on stage at GitHub Universe 2024. The speaker, wearing a light blue sweater and jeans and facing the audience, stands in front of a large screen displaying the title "GitHub Spark" and the tagline "From idea to app, faster than you can say 'no code necessary'." A crowd of attendees is seated in the foreground.

[Protik49]

Alt text: GitHub CEO Thomas Dohmke presenting on stage at GitHub Universe 2024 with a digital banner titled "GitHub Spark" in bold gradient text, with the tagline "From idea to app, faster than you can say 'no code necessary'" below on a geometric hexagon-patterned background.

[Juleipssy]

alt text: GitHub CEO Thomas Dohmke stands on stage during the GitHub Universe 2024 event. He wears a light blue sweater and dark jeans and speaks with a relaxed stance. In the background, a screen displays the GitHub Spark logo and the slogan “From idea to app, faster than you can say ‘no code necessary’” against a dark background with curved lines and lighting effects. In the foreground, a crowd of attendees can be seen watching the presentation.

[cpronotti]

Una conferencia donde se encuentra el CEO Hithub sobre el escenario. Detras de el, un cartel de Hithub Spark con su logo y una leyenda que dice: De la idea a la aplicación, más rápido de lo que puedes decir 'no se necesita código'. Delante se ve el público en segundo plano.

[privacyglory]

Alt Text: The image shows a presentation stage at GitHub Universe 2024. On stage is a presenter wearing a light blue sweater and dark pants, speaking to a large audience visible in the foreground. Behind the presenter is a large screen displaying the "GitHub Spark" logo (featuring the GitHub cat mascot with colorful sparkle elements) and the tagline "From idea to app, faster than you can say 'no code necessary'". The caption indicates this is "@ashtom at the Day 1 Keynote for GitHub Universe 2024." The audience appears to be filling the venue, watching the presentation about this GitHub product.

[allubie]

Image One:

• Alt Text: Animated illustration of GitHub's mascot Octocat (Mona), flying through a pastel cityscape. The cat-like character with tentacles holds a large pink heart-shaped balloon soaring between colorful buildings. Several small figures also float with heart shaped balloons all-round the scene. A pink building with vertical elements appears on the left, while a mint green building with a code bracket symbol sits on the right. The background is a cheerful light blue sky with soft clouds.

Image Two:

• Alt text: An AI-generated image of a rocket launching into cloudy sky, framed by colorful spring flowers. The white rocket with orange flame exhaust is ascending through billowing white launch clouds. Pink cherry blossoms appear in the upper corners while colorful tulips and wildflowers in yellow, white, and pink create a natural border at the bottom of the image, creating a striking contrast between natural beauty and technological achievement.

Image Three:

• Alt text: A Digital illustration in a vibrant geometric style featuring a stylized green humanoid figure manipulating abstract objects in a futuristic purple environment. The figure holds a yellow-green sphere in one hand while various geometric shapes including purple, orange circles, and rectangular forms float around. A curved purple ribbon-like element winds through the composition. The scene uses a bold color palette of greens, purples, oranges, and blues in a flat, textured style reminiscent of digital art.

Image Four:

• Alt text: Photograph of a gourmet cheese and fruit board arranged on a round wooden platter. The board features cubed hard cheeses, soft white cheese, sliced pears, halved fresh figs, strawberries, and fresh herbs including rosemary and mint. Several serving utensils with silver handles are placed throughout the arrangement. The careful composition showcases contrasting textures and colors for an appetizing presentation.

Image Five:

• Alt text: Photograph of GitHub CEO Thomas at the Day 1 Keynote address for GitHub Universe 2024 on stage with the GitHub Spark logo and tagline displayed on a large black screen behind him. Thomas wears a light blue sweater and dark pants while gesturing to the audience. The screen shows the GitHub spark logo alongside text "GitHub Spark" and "From idea to app, faster than you can say 'no code necessary'" in blue gradient text. A crowd of attendees is visible in the foreground.

[queenofcorgis]

@allubie nice work! Did you find any image particularly easy or challenging to describe?

[allubie]

@queenofcorgis Thank you, The digital illustrations were a bit hard to describe for me they have their unique art style and some key details that complement the whole image. The other two were easy, as we are familiar with the objects, which makes understanding and imagination much easier.

[queenofcorgis]

That makes sense and you've sparked a learning opportunity for me, I'm going to dig in how to best represent artistic styles in alt text as that is important context!

[ghostinhershell]

Just have to say shout out to @melvincwng, @Vivek09Chahal and @allubie for jumping right in with the great alt-text submissions! ✨

Love to see it and super excited to see more!

[Salgado2004]

Congratulations on the initiative 👏👏 Accessibility is a very important aspect of software development that is often overlooked! It's great to see events bringing attention to this and teaching how to implement it effectively!

---

Image One:

Alt text: GitHub's mascot, "Mona the Octocat", flying in a heart-shaped balloon in the sky over a tech city, with the roofs of buildings in the background

Image Two:

Alt text: AI-generated image featuring a field of colorful flowers in the foreground, contrasted with a rocket launch against a gray sky

Image Three:

Alt text: Psychedelic illustration featuring a human figure in a surrealist environment, with different geometric shapes converging into each other

Image Four:

Alt text: Appetizer board, with sliced ​​strawberries, pears and figs along with blocks of different types of cheese

Image Five:

Alt text: GitHub CEO Thomas Dohmke on stage at the GitHub Spark tool launch event

[FranciscoLDB]

Heyy! This challenge is very interesting, let's do this 🫡

Image One

Alt Text: Illustration of a city sky, in which there are some github mascots "Mona the Octocat" holding a heart-shaped balloon flying and others just holding the balloon on the terrace.

Image Two

Alt text: Image of a rocket taking off in the middle of a field full of flowers.

Image Three

Alt text: Digital illustration with vibrant alternate colors in which a person is lined up by a certain checkered wall with various geometric shapes.

Image Four

Alt text: Photo of a snack board with cheese, strawberries, apples, mint and serving tongs.
🤦‍♂️(I don't know the name of the fruit/seed in the middle lol)

Image Five

Alt text: Photo of a presentation by GitHub CEO Thomas Dohmke at the Day 1 Keynote for GitHub Universe 2024 introducing GitHub Spark to attendees.

[queenofcorgis]

Awesome work everyone for our first week ❤️ Join us for Week Two in our Let's link accessibly discussion for a chance to win one of ten free T-shirts!

As a reminder, we have an an action to remind users to use alt text on Issues, Pull Requests, and Discussions: add the Accessibility Alt Text Bot action to your repositories from the marketplace.

[queenofcorgis]

Don't miss Week Three's discussion on plain language and emojis!

[queenofcorgis]

Don't miss the final challenge to update your README to be more inclusive. Grab some more tips and share your profile for feedback in this discussion.