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.
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.
How to Fix with Flowy
Determine the elements in your webpage that will take users to an external document or website or different section within the same webpage
Pick the most appropriate elements that will identify as link <a> elements for user interaction.
Click on the Elements tool and select element.
Select the css selectors that represent the <link> elements for your webpage
Choose the attribute <link>, click rock and roll and that’s it
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.
How to Fix Heading Issues with Flowy
Determine the areas of your web page that require content to be organized into particular topics and subtopics.
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.Pick the most appropriate elements that will identify as heading elements and that will show levels of importance within a web page.
Click on the Elements tool and select the element.
Select the css selectors that represent the heading elements for your web page
Choose the appropriate heading level element. Click rock and roll and that’s it.
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.
How to implement a paragraph with Flowy
Determine the areas present blocks of text and as separate paragraphs.
Pick the most appropriate elements that will make clear sections of text that have some empty space between them.
Click on the Elements tool and select element.
Select the css selectors that represent the <p> elements for your webpage
Choose the <p> element for your selectors , click rock and roll and that’s it.
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.
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
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).
Click on the Elements tool and select the element.
Select the css selectors that represent the the list elements for your web page
Choose the appropriate list element for your content, click rock and roll and that’s it.
Last updated