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.

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

To ensure readability for people with low vision, the WCAG guidelines has several contrast rations for content and graphical user interfaces.

The guideline proposes a ratio of 4.5 for normal text, 3.1 for larger texts such as heading content, and 3.1 for graphical user interfaces such as border lines, focus indicators, or canvases.

Better contrast improves user experience for everyone, and compliance and increased sales for a business.

Testing for color contrast ratio with Flowy

Example of a good color contrast:

Image showing good color contrast coming soon

Image showing bad color contrast coming soon

Fix your first color contrast issue with our easy-to-follow step-by-step guide.

Logical Flow

Setting the tabindex attribute on an element

Logical flow is important when making a website accessible. This is because it is the natural order in which a user would expect to navigate through or interact with elements on a web page.

Tabindex of 0 should be given to elements that are essential for interacting with the web page such as

• Links (<a>)

• Form Inputs like text fields, checkboxes, radio buttons, and Select Drop-downs.

• Buttons (<buttons>).

On the other hand, Tabindex of -1 is useful for elements that don't need to be accessed directly by tabbing, or when you want to remove something from the default navigation flow, like:

1. Decorative Elements: Think of pretty but useless knick-knacks. They’re there for show, so no need to Tab over to them like, "Hey, check out this shiny thing!

1. Hidden Content: Imagine a magic bookshelf that reveals a hidden room only when you pull a certain book. It’s not something you casually stroll into.

2. Click Actions (like Image Carousels): Picture a spinning carousel of photos. It's like saying, “Click me if you’re using a mouse, but if you’re keyboarding, don't worry about it!

3. Duplicate Links or Buttons: This is like having two doors next to each other that lead to the same place. Mouse users might like options, but keyboard users just need one.

4. Modal Dialogues: Imagine a pop-up window that's like, "Surprise! Now pay attention to me!" But when it's not open, it’s invisible to the Tab key, like it’s sneaking around in.

Fix your first logical flow issues with our easy-to-follow step-by-step guide