On Twitter, Hilary Cluet asked a great question…
There are 2 types of searching on the World Wide Web
- Using a search engine, like Google Search or DuckDuckGo, which crawl pages to find the right content
- Searching for content on a page or specific website, using a site map or a site-wide search bar
Using a search engine
Search Engine Optimization (SEO) is the process of setting up your web page so that Google Search can find it. One step in this process is to create a site index. Google bots crawl the site index to understand what pages exist, and how they relate to each other.
Here’s an example of a Webflow site index from a site we built for The Stone Centre.
In Webflow this page is created automatically, and you can turn off Indexing for the staging site (sitename.webflow.io) so that Google bots don't find duplicate content. Webflow > Project settings > SEO
The page URL is https://www.stone-econ.org/sitemap.xml . The words site index and sitemap are often used interchangeably, and they refer to a XML page that acts as a “table of contents” for bots.
XML is Extensible Markup Language, which is used to represent data structures.
Searching for content on a page or specific website
A site map
A site map (2 words) refers to a visual representation of a website used for planning or navigation. For example, Finsweet has a site map page (archive) which shows all the “sections” of all their websites in a graphical way.
While you are designing a site it’s a good idea to use a site map tool like Octopus.do to show what pages you will need, and how they relate to each other. This example shows how we planned the WebflowersPodcast.com site.
Making your site map accessible
In the Finsweet example above there are headings and lists, contained in different colored boxes. This gives a clear understanding of hierarchy and content.
Navigating with a screen reader
Screen reader (SR) users can navigate a page in many ways, for example
- listening to all the headings
- jumping from one list to the next
Often a “mini” site map is shown in the footer of a website. Here’s an example from The Stone Centre.
Footer headings like this are often H4, even when this would not be expected in the normal flow of heading hierarchy. Screen Reader users may jump to the Footer and then look for lists or headings, expecting to find a list of links or site map there.
Aria-labelledby in Webflow
It might be useful to add aria-labelledby to the list so that Screen reader users know what the list is about.
Aria-labelledby for Headings and Lists in Webflow
1. Go to Webflow Designer
2. Click on Heading of the List
3. Go to Element Settings (D)
4. Add an ID name
I usually use the heading text as the ID, so that it will be unique.
5. Select the List
NOT a list item
6. Click on Custom Attributes
7. Type "aria-labelledby"
8. Type the name of the ID
which in this case is the same as the heading
9. Click on Save
The HTML with the ARIA labelledby
<div class="w-layout-grid footer_link-col">
<h5 id="help-and-support" class="text-color-white">Help and support</h5>
<ul aria-labelledby="help-and-support" role="list" class="footer_links-list">
<a href="/legal-pages/contact" class="footer_link">Contact us</a>
Using a Search bar in Webflow
The Search bar is only available on Site plans, from CMS and higher.
Add the Search Bar element and design the Search results page.
1. Go to Webflow Designer
2. Go to Add Elements (A)
3. Drag Search component onto the page
4. Style the Search Bar
5. Click on Go to Search Results Page
6. Style the Search results page
Use aria-labelledby to provide context to unordered lists