3️⃣Buttons, links , headings, paragraphs and Lists

This chapter discusses web content elements and how to fix elements issues with Flowy.

Web content elements help in identifying the purpose and structure of the content in a website. Web content elements can be compared to signs and decorations in a building that will assist you in understanding the purpose of each room and how to navigate through the website.

There are over 115 elements in HTML. However, this section will showcase a select few of those elements to demonstrate how specific issues can be resolved using Flowy.

Button

A button is an interactive element that triggers some action such as submitting a form or opening a dialog when activated by a user. This can be done in different ways: by clicking the button with a mouse, pressing the enter or space-bar keys on a keyboard, touching the button with a finger on a touch-enabled device, or assistive technology devices such as switches.

Implementing ARIA button with Flowy

How to Fix Implement ARIA Button with Flowy

1. Determine the elements in your web page that will require users to click, tab or tap to perform specific actions (such as submitting forms, triggering navigation, triggering hidden content, initiating downloads, or executing JavaScript functions.)

2. Pick the most appropriate elements that will identify as <button> elements for user interaction.

3. Click on the Elements tool and select element.

4. Select the css selectors that represent the <button> elements for your web page

5. Choose the attribute <button>, click rock and roll and that’s it.

Links

A link <a> is an interactive element that allows you to navigate from one webpage to another, an external document or to a different section within the same webpage. For people relying on screen readers, they can identify and present a list of all the hyperlinks on a webpage. This helps them to go to the right link faster instead of having to listen to everything on the page one by one.

Implementing ARIA link with Flowy

How to Fix with Flowy

1. Determine the elements in your webpage that will take users to an external document or website or different section within the same webpage

2. Pick the most appropriate elements that will identify as link <a> elements for user interaction.

3. Click on the Elements tool and select element.

4. Select the css selectors that represent the <link> elements for your webpage

5. Choose the attribute <link>, click rock and roll and that’s it

Implementing links opening in a new tab with Flowy

Headings

Headings are important for organizing content on a web page and range from h1 to h6. They act as signposts, helping us understand how the information is structured. The main heading, known as the "h1" heading, is the most significant.

Other headings, such as h2, h3, h4, h5, and h6, further organize the content into specific topics or subtopics.

For accessibility, people who use screen readers can navigate a page by using headings. They can listen to a list of all the headings and jump to a specific heading to start reading from there. In terms of usability, headings guide users through a page because they are larger and more recognizable than the surrounding text.

Adding heading role using Flowy

How to Fix Heading Issues with Flowy

1. Determine the areas of your web page that require content to be organized into particular topics and subtopics.

2. Avoid skipping heading levels. Use <h1> for the main title of the web page. To organize your page clearly, use <h2> for different sections and <h3> for smaller parts within those sections.

3. Pick the most appropriate elements that will identify as heading elements and that will show levels of importance within a web page.

4. Click on the Elements tool and select the element.

5. Select the css selectors that represent the heading elements for your web page

6. Choose the appropriate heading level element. Click rock and roll and that’s it.

Paragraph

The <p> in HTML element is used to show a paragraph. When you make paragraphs look the same, it makes the words clear and easy to read for everyone. It also lets people change how paragraphs look, like making them bigger or smaller, so they can read comfortably.

By organizing paragraphs correctly, Assistive technologies can help people who have trouble seeing or reading understand information in a webpage better.

Implementing ARIA paragraphs with Flowy

How to implement a paragraph with Flowy

1. Determine the areas present blocks of text and as separate paragraphs.

2. Pick the most appropriate elements that will make clear sections of text that have some empty space between them.

3. Click on the Elements tool and select element.

4. Select the css selectors that represent the <p> elements for your webpage

5. Choose the <p> element for your selectors , click rock and roll and that’s it.

Lists

Lists are helpful for arranging and showing information on a webpage by categorizing them based on their distinct qualities. Imagine lists as rooms in a building, where each room is unique and has its own specific purpose.

For screen reader users, it informs them when they enter a list and navigate between list items. This is important, especially when an item contains multiple lines of content, as it may be difficult to determine where one item ends and another begins.

1. Ul

The <ul> element represents unordered lists of items on a webpage. You use this when listing items without any specific order. Each item in the list is represented by the <li> tag. Make sure that the <li> elements are placed directly inside the <ul> element

1. Ol

The <ol> element represents an ordered list of items on a web page. You can think of it as a numbered list of items listed in a specific order.

How to Fix List Elements with Flowy

Determine the relevant content on a web page that necessitates grouping of related information(Product cards, A collection of linked images or points or steps content).

1. Click on the Elements tool and select the element.

2. Select the css selectors that represent the the list elements for your web page

3. Choose the appropriate list element for your content, click rock and roll and that’s it.