1️⃣Images, contrast and logical flow

This chapter provides an introduction for beginners in implementing Flowy Builder to create accessible websites.

The content discussed in this chapter includes Images, color contrast, and logical flow.

Images

Alt texts (alternative texts) serve as textual descriptions for images, providing context and meaning for screen reader users or when images fail to load. It bridges the gap between visual content and users who might not be able to see it.

Images must have text alternatives that describe the information or function represented by them. This is especially important for people who are blind and for people who have difficulty in perceiving visual content.

The text should explain what is in the image so they can enjoy and experience the images as well.

Example 1: An example of a good ALT

Daytime landmark photograph of trees near a rocky mountain under clear blue skies.

Example 2: Example of a bad alt text:

An image of a rocky mountain.

Fix alt text issues with our easy-to-follow step-by-step guide.

https://www.youtube.com/watch?rel=0&v=CvgnUw5mxqI?vq=hd1080www.youtube.com

Adding an alternative text with Flowy

1. Using the 'Images' tool, check if your image has an alternative (alt) text. Images missing alt text will have a empty content.

2. Press control, then right-click on the image missing an alternative text.

3. Select "Add alt text" from the Flowy context menu and type the description of your selected image inside the value placeholder. Ensure that the image provides context.

4. Click on 'Add to Editor'. From the 'Test on Screen' drop-down, select 'Quick Fix'. Click on 'Quick Fix', and you're done. Your image now has an alt text.

5. Repeat the above process for the rest of the of the images on website missing alternative texts.

Color Contrast

Logical Flow