home
No code to 
<know code>

Page regions, sections and a little ARIA

Fair warning: The code on this page is terrible for screen readers, as I have put in lots of navigation bars and sections to demonstrate how they work in Webflow.

Area on a webpage

Typically, a web page is divided up into areas. This can be done visually:

The problem is that these areas are all just div. There is no meaning behind them. For that we need some semantic HTML. Semantic means "meaning". We need to think about the meaningful HTML of each area, and give it a name. Then, if you can't physically see these areas, your screen reader will announce them to you.

We'll have a look ways to name the areas in Webflow to help all our users, both human and robot.

So let's say we have this layout:

<Header>
<Nav>
<Main>
<Aside>
<Footer>

We understand that the top area is for the company logo and navigation, the footer is for the company address and links to legal, privacy and accessibility policies. The area on the left is the main content of the page and the area on the right could be for additional content or links to related content. Each of these areas now has a semantic meaning and assistive technology can tell the user what part of the page they are on.

Google bots can also understand what the purpose of the content is, and rank it for SEO too.

Everything on the page must be in a semantic area.

<header> or role="banner"

Often the HTML <header> element is the area which is repeated at the top of every page of the website. It man contain the logo, search bar, and menu items. The HTML <nav> element defines the ARIA navigation. If there is only one list of navigation links, we only need the HTML. If you have more than one, for example in the <footer>, you should use ARIA to name them.

ARIA is the Accessible Rich Internet Applications Suite, which defines a way to make Web content and Web applications more accessible to people with disabilities. You should only use ARIA if there is no other way to achieve what you need to do.

In Webflow you probably won't need ARIA very much, but I think it's important to know a little about it, in case you need it sometime.

In Webflow we can use the Element settings > Tag to define the page areas. These are very useful for assistive technology to announce where the user is on the page, and gives a good idea of whether the part is what they are looking for.

This section is tagged as <header> and you can see the HTML below.

""""


<header>
<div class="w-container"></div>
</header>

Note that in the Webflow Designer, this tag does NOT change the name of the Section on the page or in the Navigator. It only appears in the HTML of the published website.

<nav> or role="navigation"

The <nav> (HMTL) or navigation (ARIA) area is pretty essential for any site with more than one page. Here's the Webflow Navbar element.

The Webflow Navbar component

And here's the code (without the logo): 

<div class="w-container"><a href="#" class="w-nav-brand"></a>
<nav role="navigation" class="w-nav-menu"><a href="#" class="w-nav-link">Home</a><a href="#" class="w-nav-link">About</a><a href="#" class="w-nav-link">Contact</a></nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>

So Webflow builds in ARIA support <nav role="navigation"> for this element.

Build your own navbar

If you are building your own navigation bar you can use the Div Tag <nav>

We use an unordered list <ul> to create the menu, with list items <li>.

Webflow > Add elements (A) > Basic > List

The HTML looks like this (no links on the menu items), with HTML <nav>

<nav class="nav-div"><img src="https://assets.website-files.com/5d1bc81d5bfe498e3c017ed2/5d4d8cbc574a7821b4d93390_little%20pop%20brand.svg" width="100" alt="" class="image-38">
<ul class="list-5">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

Main

<main> or role="main"

<main> identifies the primary content of the page. It's an HTML element <main> or can be an ARIA landmark, role="main"

Most often it's the area that will be linked to in a bypass block to skip past the header and navigation directly to the page content.

It's important to have a <main> on each page.

In Webflow > Element settings (D) > Tag > Main

Here's the HTML: 

<main>
<div class="w-container">
<h2>Main </h2>
<p>Main identifies the primary content of the page. It&#x27;s an HTML element &lt;main&gt; or can be an ARIA landmark. <br><br>Most often it&#x27;s the area that will be used in a bypass block to skip past the header and navigation directly to the page content. <br><br>‍</p>
</div>
</main>
Text to test div as section

<section class="section-section wf-section">
<section class="section-section">
<div>Text to test div as section</div>
</section>

Section

<section> or role="region"

We use <section> when the area doesn't have a more specific semantic element to represent it.

This is a bit strange in Webflow. The Section in Webflow from Add elements > Layout > Section is just a <div> block, not a <section>

If you want a section to be named section in the HTML, you have to use the Webflow > Element settings (D) > Tag > Section. Even if you give the Section a name it will not appear in the Navigator.

My advice would be to never use Webflow Section. Just use div, and Tag the area as Section. Then you can see the name in the navigator, which is easier for editing.

Sections almost always need a <h> Heading, so that they can be seen in the document outline.

<section>
<div class="w-container">
<h1>Section</h1>
<p>This is a bit strange in Webflow. We create sections all the time, but they are just &lt;div&gt;. If you want a section to be named section in the HTML, you have to use the Tag in the Element settings. </p>
</div>
</section>

Article

<article> or role="article"

The HTML <article> element is used for self-contained areas in a page which can be distributed or reused independently. Examples are a forum post, a magazine or newspaper article, or a blog entry.

Articles are not navigational landmarks, but many assistive technologies support a way to navigate around articles. So it could be helpful for screen reader users if you add the Webflow > Element settings > Tag > Article in your blogs.

<article>
<div class="w-container">
<h2>Article</h2>
<p>The HTML <span class="code">&lt;article&gt;</span> element is used for self-contained areas in a page which can be distributed or reused independently. For example a forum post, a magazine or newspaper article, or a blog entry.<br>Articles are not navigational landmarks, but many assistive technologies support a way to navigate around articles. So it could be helpful to use this Tag in your blogs.</p>
</div>
</article>
Navigation
<Article>
<Article>
<Article>
<Article>
<Article>
<Article>

Aside

<aside> or role="complementary"

The HTML <aside> element or the ARIA complementary represents an area of content which is indirectly related to the document's main content. Author bio, explanations of definitions, related information, adverts, client testimonials, could be given the tag <aside>.

Webflow > Element settings (D) > Tag > Article

<header>
<main>
<aside>
<footer>

Address

<address>

<address> is contact information in whatever form is appropriate for the context. In the <footer> it's going to be the contact info for the website owner. If it's part of a blog post <article> it would be the name and contact details of the author. It can include any type of contact information that is needed, such as a physical address, URL, email address, phone number, or social media handle.

One of the interesting things about <address> is that the browser automatically makes text italic with no additional styling necessary.

Webflow > Element settings (D) > Tag > Address

Andy Landmark
email:  andy@address.com

The code looks like this:

<address>
<p>Andy Landmark
<br>email:&nbsp; andy@address.com
</p>
</address>

Figure

<figure>

Examples of <figure> are images, illustrations, diagrams, code snippets. These are referenced in the main flow of the page, but could be moved to another part of the document or to an appendix. The text would still make sense, without looking at the figure.

A caption can be associated with the <figure> element by using <figcaption>.
This is only an option in a rich text block.

Webflow > Add Elements (A) > Elements > Typography > Rich Text

In the Rich Text Block > Add image > 

Rich Text Block add image screenshot

You can then add the image caption

add figure caption

Here is a Rich text block showing a <figure> and <figcaption>.  In the code below you can see that the image is inside a div with a <figcaption> below.

Rich text block

Bar graph showing Lemonade's affect on Beyonce's Social Media
Lemonade's affect on Beyonce's social media
<div class="beyonce w-richtext">
<h4>Rich text block</h4>
<figure class="w-richtext-align-normal w-richtext-figure-type-image">
<div><img src="images/beyonce-lemonade.jpg" alt="Bar graph showing Lemonade&#x27;s affect on Beyonce&#x27;s Social Media"></div>
<figcaption>Lemonade&#x27;s affect on Beyonce&#x27;s social media</figcaption>
</figure>
</div>

Form

<form> or role = "form"

Webflow has a whole section of elements (A) for Forms.

Here's a form block

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Here's the code:

<div class="w-form">
<form id="email-form" name="email-form" data-name="Email Form" class="form"><label for="name">Name</label><input type="text" class="w-input" maxlength="256" name="name" data-name="Name" id="name"><label for="email">Email Address</label><input type="email" class="w-input" maxlength="256" name="email" data-name="Email" id="email" required=""><input type="submit" value="Submit" data-wait="Please wait..." class="w-button"></form>
<div class="w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>

On the second line you can see the <form> element, with an id, name and data-name.

You can change the name of the form in Webflow > Element settings (D) > Form Settings > Form Name.

For example, here's the code for one I named "Signup Form".

<div class="w-form">
<form id="wf-form-Signup-Form" name="wf-form-Signup-Form" data-name="Signup Form" aria-label="signup-form" class="form"><label for="name">Name</label><input type="text" class="w-input" maxlength="256" name="name" data-name="Name" id="name"><label for="email">Email Address</label><input type="email" class="w-input" maxlength="256" name="email" data-name="Email" id="email" required=""><input type="submit" value="Submit" data-wait="Please wait..." class="w-button"></form>
<div class="w-form-done">

<footer> or role = "contentinfo"

As we saw at the top of this page, most websites have a <header> and a <footer>. The footer usually has an <address>, some legal, terms and conditions, policies and accessibility statement links.

I have created a Symbol for the footer on this website, and set it to Element Settings (D) > Tag > Footer

<footer>
<div class="w-embed"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1440 320"><path fill="#5762ff" fill-opacity="1" d="M0,256L48,229.3C920Z"></path></svg></div>
</footer>