2️⃣Landmarks

This chapter provides an overview of landmarks and an easy-to-follow guide to fix landmarks issues on your website.

Landmark Elements

Landmarks on a web page are like friendly signs in a building that says, "Hey, important stuff this way!". Just like signs in a building save you from wandering aimlessly, landmarks on a web page make it easier to navigate and find what you're looking for.

Sample landmark elements on a web page

Main

The main landmark on a web page is like a building's main entrance. It helps all users, including those with disabilities, find the important stuff. It guides everyone to the most essential content on a web page.

People with disabilities who rely on assistive technologies can easily access the main information because it's well organized.

How to Fix Landmark Issues with Flowy.

1. Determine which area of the page contains the primary content of your web page that is most relevant to assistive technologies and user experience.

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

3. Select a css selector that represents the ‘main’ area for the page.

4. Choose the element landmark <main>, click rock and roll to confirm changes and that’s it

Form

The form landmark shows you where to find forms on a webpage. It is are super helpful because it makes it easy for everyone, even for people with disabilities to find and use forms. For instance, for people relying on screen readers, the form landmark informs the reader what the form is all about and what information to fill in.

Implementing form with Flowy

How to Fix with Flowy

1. Determine which area of the page contains the form content that is most relevant to assistive technologies and user experience.

2. Click on the Elements tool and select th element.

3. Pick the most appropriate element that will identify the whole area as a form landmark. Only one <form> element is needed within a form group.

4. Select the css selector that represents the form landmark for the form group.

5. Choose the element landmark <form> , click rock and roll and that’s it.

Search

A search landmark on a web page that helps you search for things on the whole website.With this landmark, you can find anything by typing it’s name or related words. The cool thing is, it helps everyone including people with disabilities. If typing is tough, you can make search queries with your voice.

How to Fix with Flowy

1. Determine which elements or areas of the page are used for performing searches.

2. Click on the Elements tool and select element.

3. Pick the most appropriate element that will identify the whole area or element as a search landmark.

4. Select the css selector that represents the search functionality.

5. Choose the element landmark <search> , click rock and roll and that’s it.

Footer

A footer landmark serves as a means to recognize shared information located at the bottom of every page within a website. It's like a special sign that tells you, "Hey, look here for important information!".So, instead of searching all over the place, just scroll down to the bottom, and you'll find all the common information you need such as copyrights, links to privacy and accessibility information.

Implementing footer landmark

How to Fix Footer Issues with Flowy

1. Determine which area of the page contains the footer content that is most relevant to assistive technologies and user experience.

2. Pick the most appropriate element that will identify the footer area as a ‘footer landmark’. Only one <footer> element should be in a page because it is a top-evel element (must not be contained within another landmark.)

3. Click on the Elements tool and select element.

4. Select the css selector that represents the <footer> landmark for the page.

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

Banner/Header

A banner landmark or commonly known as 'Header' is like a big sign that shows you important stuff when you visit a website. It's usually at the very top of the page.it is like the building's fancy entrance that grabs your attention and tells you what's inside. It mainly consists of items such as logo, site search tool and announcements.

Implementing a header/banner landmark

How to Fix Banner Issues with Flowy

1. Determine which area of the page contains the banner content that is most relevant to assistive technologies and user experience.

2. Pick the most appropriate element that will identify the banner (Header) area as a ‘banner landmark’. Only one <header> element should be in a page because it is a top-evel element (must not be contained within another landmark.)

3. Click on the Elements tool and select element.

4. Select the css selector that represents the <header> landmark for the page.

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

Aside

An aside landmark is a valuable tool for enhancing the main content of a web page by providing additional information. It is particularly useful for incorporating sidebars, glossaries, or any supplementary content that aids in a better understanding of the main content of a web page. Moreover, for users who rely on assistive technologies, this element allows them to skip the content during reading and effortlessly locate and revisit it after engaging with other elements in a web page.

Implementing aside with Flowy video

How to Fix with Flowy

1. Determine which areas of your web page contain content such as sidebar content, popular content, categorized content, newsletter subscriptions or advertisements.

2. Pick the most appropriate elements that will identify as <aside> areas your content.

3. Click on the Elements tool and select element.

4. Select the css selectors that represent the <aside>sections for your web page

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

Article

An article landmark is used to mark a standalone piece of content on a web page. Picture it as a special room inside a multi-floor building that holds its own special and interesting content. The <article> element helps organize and identify standalone pieces of content, making it easier for assistive technologies to understand and handle it correctly.

Implementing article with Flowy

How to Fix Article Issues with Flowy

1. Determine which areas of your web page page contain a series of related information (such as image galleries,lists of videos, lists of products or lists of blog posts) that is relevant to assistive technologies and user experience.

2. Pick the most appropriate elements that will identify as a <article> areas your content.

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

4. Select the css selectors that represent the <article>sections for your webpage

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

Navigation

Navigation landmarks is a valuable element that groups a list of related links together allows users to move easily between web pages. Think of the navigation landmark as an elevator in a building that helps you to different floors inside a tall building.

Implementing landmarks with Flowy

How to Fix with Flowy

1. Identify the sections of your web page that contain a list of grouped links, representing the navigation (nav) area of your content.

2. Click on 'Select element'.

3. A 'plus' mouse pointer will appear. Use it to pick the most appropriate elements that will be identified as the <nav> area(s) of your content.

4. Inside the 'Attribute' placeholder, click the 'plus' icon.

5. Navigate to the 'Landmark' tab and select 'Navigation'.

6. Click on the 'Save' button.

7. Click on 'Add to Editor'. From the 'Test on Screen' drop-down, select 'Quick Fix'.

8. Click on 'Quick Fix', and you're done.

You have now implemented a navigation landmark element with Flowy!

Section

A section landmark acts as a container that groups similar content together, improving the organization of a web page. This is essential for accessibility and user experience. Think of it like a multi-floor building, where each floor contains various rooms and areas serving different purposes. Similarly, a section on a webpage holds distinct pieces of content . Just as you explore different floors of a building to find what you need, users relying on assistive technologies can navigate through sections on a webpage to access the desired information.

Implementing section with Flowy coming soon

How to Fix with Flowy

1. Determine which areas of your webpage page contain distinct pieces of information(such as such as text, images, videos or interactive elements) .

2. Pick the most appropriate elements that will identify as <section> areas your content.

3. Click on the Elements tool and select element.

4. Select the css selectors that represent the <section> containers for your webpage

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