What Does Tabindex Mean? Tabindex Elements Error in Lighthouse Audit

You know that when you own a website you have to manage the users’ entire experience on the pages, right? Well, that is exactly what the tabindex is for. The most important feature of this attribute is that it allows you to manage the keyboard focus.

Well, what does it mean? In other words, what can smart management of web widgets provide you with within your website? Let’s review it together.

Screpy experts have brought together the most common warnings in Google Lighthouse audits for you. Among these, tabindex is among those that are frequently searched for. Tabindex attribute should be used correctly to optimize the experience of users navigating the site using the keyboard. Misuse can damage the accessibility of the content on your website.

Today, we will examine all the features of the tabindex attribute closely and take a look at what you can offer your users with it. Let’s get started right away if you’re ready, folks!

What is Tabindex Attribute and Why Is It Used For?

When a tabindex attribute is used on a web page, the object becomes an element that can be focused with the keyboard. The tabindex attribute also determines how the user who focuses on the element will handle this focus. Generally, this value will be a numeric one, and the interaction captured with the keyboard is organized through values of positive, negative, or 0.

So why is all this important? If web users surf on a desktop, they often use a mouse, that’s true. However, you still have to appeal to users who want to navigate your site using the keyboard. Otherwise, you could really lose a lot from your UX score. Someone who wants to navigate your site using the keyboard uses the arrow keys, the Enter key, the tab key, and more to jump from one element to another. While doing this, you need to determine which items can be missed by focusing. You can also use tabindex for this.

This choice will ensure that the focus is not on items that will take the user nowhere, and will allow the user to experience a quality website browsing using only the keyboard. You are at the right time to make such changes to your website.

Tabindex Attribute Usage Areas – Examples

Well, which areas can be navigated with the keyboard thanks to Tabindex?

For example, imagine that you are on the log-in page on a website. Thanks to the tabindex attribute, the user can go to the username field, then the password field, and finally the ” login” button by using the keyboard. A similar situation applies to logging out. This is provided by tabindex. Let’s examine a sample code sequence together:

<label for="username">Username:</label>

<input type="text" id="username">

<label for="password">Password:</label>

<input type="password" id="password">

<input type="submit" value="Log in">

Similar to the above, some of the elements that can be focused can be listed as follows:

elements with an href attribute

elements that are not type = “hidden”

elements with an href attribute

elements</li>
<li><button> elements</li>
</ol>
<p>Each of the elements listed above are elements that can be focused by simply touching the keyboard. In Javascript, it is possible to focus on these elements using the focus () method. You can review this method by taking a look at the code snippet below:</p>
<p><code>document.querySelector("a").focus();</code></p>
<ul>
<li><strong>A little note</strong>: Of course, you need to be very careful in how you place the items you want to focus on in the source HTML file. Because this sequence will directly determine which item the user will jump to using the keyboard keys.</li>
</ul>
<p>With Tabindex you can:</p>
<ol>
<li>You can make some elements in the source code of your web page focus.</li>
<li>You can completely remove the focusable feature of some elements in the source code of your web page.</li>
<li>You can arrange the order of the items that will be focused while users navigate the site with their keyboard.</li>
</ol>
<p>It is possible to say that the tabindex attribute is extremely useful for all the above operations. This is exactly why this attribute is extremely valuable for Google Lighthouse audits.</p>
<h2 id="how-to-use-tabindex-coding-tips-for-web-developers">How To Use Tabindex – Coding Tips for Web Developers</h2>
<p>If you want to use Tabindex for your website, let’s say this: This attribute can be used for all elements on your site. So you don’t need the element to be focusable to use Tabindex attribute. As we said earlier, the value of the attribute can be of three kinds: <em>0, negative, or positive</em>. Accordingly, different practices are applied. Let’s go through three different scenarios with you.</p>
<h3>Using Negative Tabindex Values</h3>
<p>If you assign a negative tabindex value for any element in your web page, you will ensure that the element in question is removed from the focus order. In other words, the negative tabindex value is to prevent the user from accessing a certain element with keyboard keys. This element is automatically skipped as the user moves from one item to the next.</p>
<p>For this, we wanted to show you a code example below:</p>
<p><code><button type="button">Click me to start, then press the "tab" key</button></code></p>
<p><code><button type="button">I’ll be in focus first</button></code></p>
<p><code><button type="button" tabindex="-1">I won’t be in focus :(</button></code></p>
<p><code><button type="button">I’ll be in focus last</button></code></p>
<ul>
<li><strong>What it means</strong>: As you can easily see above, the user can focus on the first button with the keyboard, the second button is ignored and the user focuses directly on the third button. This is a sequence obtained with a negative tabindex value. You can use it too. Generally, -1 is preferred for negative value in code usage. But this is not the value you should use specifically. You can use -1 as well as – 77747478. The result will be the same. But it’s better to use -1 to make the code source cleaner and clearer. Remember, Google Lighthouse really cares about readability, and too long source code can slow down the speed.</li>
</ul>
<h3>Using Zero Tabindex Value</h3>
<p>It is also possible to use the tabindex attribute with a value of 0. When you use this, you make the element in question focusable. However, you cannot determine a spesific order for focusing action: The user using his or her keyboard will be focus on the related elements by default order. If you use this attribute for non-focusable elements, you will make them behave as if they are focusable and the visitor can jump from one to another with default order.</p>
<p><code>We wanted to give you an example regarding this:</code></p>
<p><code><button type="button">Click me to start, then press the "tab" key</button></code></p>
<p><code><button type="button">I’ll be in focus first</button></code></p>
<p><code><div tabindex="0">I’m a DIV and will be in focus second</div></code></p>
<p><code><button type="button">I’ll be in focus last</button></code></p>
<ul>
<li><strong>What it means</strong>: Let’s briefly summarize the code snippet you saw above. First of all, the first line says “Click me to start”. After the user clicks, the first focus will be the second line. Then the next line will have focus, and finally, the third line will have it. All of this is a default order and usually works.</li>
</ul>
<h3>Using Positive Tabindex Values</h3>
<p>Did you know that it is also possible to edit your website using positive tabindex values? A tabindex attribute with a positive value is a good option for maximum selection chance.</p>
<p><em><strong>Let’s set up a scenario</strong></em>: You want an element on your web page to be focusable, so users can easily access this element using only their keyboard. But that’s not all, of course. You also want to decide in which order the element in question will be focused. Instead of accepting the default order, a positive value with tabindex must be used in coding to process a specific order you want to create.</p>
<p>Let’s take a look at a code that uses a positive value tabindex attribute with you:</p>
<p><code><button type="button" tabindex="1">I’m the first focusable item on the page</button></code></p>
<p><code><button type="button" tabindex="500">I’m the second</button></code></p>
<ul>
<li><strong>What it means</strong>: When we briefly examine the code above, we see that the first button is primarily determined as the first element to be focused on. The button on the second line is the next focus. Just like that, you can determine the focus order on different elements on your page. One of these elements can be at the top of the page, while the other one can be in the middle or at the end. This flow is completely determined by the code you will write and it becomes possible to be customized as you wish.</li>
</ul>
<h2 id="what-else-is-tabindex-used-for">What Else Is Tabindex Used For?</h2>
<p>We hope you understand how useful the tabindex attribute can be, thanks to the information we have reviewed so far. The correct use of this type of attribute can maximize the browsing <a href="https://screpy.com/page-experience-2021-google-update/">page experience</a> of your visitors using only their keyboards. The studies conducted also allow you to determine which elements in the source code of your web page can be made focusable via Javascript.</p>
<p><em><strong>Well, what does it mean?</strong></em></p>
<p>This actually means taking free will on your website. In the source code of the page, you can make the previously non-focusable elements focusable with a simple Javascript language coding and put it in a position accessible with the keyboard. The person using the keyboard can access the element in question or its surroundings with the help of just a few keys.</p>
<p>We have prepared a few different examples for you that you can review on this subject.</p>
<ul>
<li>First, let’s examine the code below. Here we see that an element that is actually focusable is transformed into a non-focusable element thanks to a tabindex attribute that has a negative value. Therefore, the user cannot access this element using the keyboard and cannot use the features of this element.</li>
</ul>
<p><code><div tabindex="-1">I'm a div</div></code></p>
<ul>
<li>Second, if you want to make a non-focusable element focusable using Javacscript, you can simply use the <code>focus ()</code> method. When you use this attribute, the button becomes accessible with the keyboard. Here is an example of a code snippet we have prepared for you:</li>
</ul>
<p><code><button type="button"</code></p>
<pre><code>    `onclick="document.getElementById('demo-div').focus();">`

`Click me to focus the DIV`
</code></pre>
<p><code></button></code></p>
<p><code><div id="demo-div" tabindex="-1">I'm a div</div></code></p>
<h3>Using Negative Tabindex for Programmatic Focus</h3>
<p>We now know very well that the negative tabindex is used specifically to remove tab focus from certain items. For example, the most important features of modal containers, which are frequently used in the software world, are that they have certain elements that are impossible to focus. As you can see from the examples above, these are various elements such as <code><div></code> or <code><section></code>.</p>
<p>So what do we do to get screen readers to focus on the right detail when a window is open?</p>
<ul>
<li>Modal content should reach a level that can be read by screen readers and be focusable.</li>
<li>However, even if the content is focusable, the modal container itself should not be focusable.</li>
</ul>
<p>It will be necessary to use the tabindex attribute with a negative value to meet the above conditions at the same time. We wanted to give you an example of this below:</p>
<p><code><div id="modal" tabindex="-1"></code></p>
<pre><code>``
</code></pre>
<p><code></div></code></p>
<p><code><script></code></p>
<p><code>function openModal() {</code></p>
<pre><code>`document.getElementById("modal").focus();`

`// Other stuff to show modal`
</code></pre>
<p><code>}</code></p>
<p><code></script></code></p>
<h3>Using Positive Tabindex for Programmatic Focus</h3>
<p>If you want to use the tabindex attribute, which has a positive value, for programmatic focus, you need to know that you are actually using an anti-pattern.</p>
<p><em>Remember what the positive value does</em>: it changes the order between elements that are focusable. Therefore, when you use this value for programatic focus, you change the source order of the elements in question.</p>
<h3>Using Zero Tabindex for Programmatic Focus</h3>
<p>When you use the tabindex attribute with a value of zero, you are actually restoring the focusable properties to certain items. Some items can be removed programmatically from these properties. This value helps them to be accessible with the keyboard. This can be an extremely good operation, especially for custom elements.</p>
<p>Because let’s give you information about custom button elements: Since they technically do not have a button label, they do not appear as focusable in default settings. It is possible to easily restore this feature to these elements, which have lost these features due to programmatic, with a simple tabindex. When you use this attribute, the custom buttons that become accessible via the keyboard as if they have a focusable feature, help you increase the browsing experience on your site.</p>
<p>Here is an example of this:</p>
<p><code><my-custom-button tabindex="0">Click me!</my-custom-button></code></p>
<h2 id="how-to-check-if-my-website-is-keyboard-accesible">How To Check If My Website Is Keyboard Accesible?</h2>
<p>When a standard user enters your website, they should be able to easily navigate between focusable areas using the tab key on their keyboard. If you do not have this feature, there are some problems with your accessibility and UX scores. With Screpy, you can perform each of the Google Lighthouse audits specifically for each page and ensure that the shortcomings are determined specifically for each page. In this way, the optimization process will be easier.</p>
<p>There is of course one more way to tell if your pages are keyboard accessible. Go to your web page via the incognito tab and try to navigate by clicking the tab key. Ask yourself the following questions:</p>
<ol>
<li>Can you focus on any element?</li>
<li>As you request the order of focus when jumping from one element to the next?</li>
<li>Are there any elements you want to change or make unfocusable while focusing?</li>
</ol>
<p>It is possible to perform all the above operations easily and quickly by using the tabindex attribute.</p>
<p><em><strong>Tip for developers to have an accessible web page:</strong></em></p>
<p>So, is there anything you need to be aware of to make sure that your website is accessible via the keyboard without any additional settings? Actually, <strong>yes, it certainly does</strong>.</p>
<p>Using the commonly used built-in HTML elements on your site makes them universally accessible and focused on the keyboard. As we mentioned earlier in our content, custom buttons are not actual <code><button></code> and you need to make them focusable with a tabindex attribute that has zero value. We recommend that you avoid custom buttons to avoid code pollution and to ensure that the default version of your page is accesible.</p>
<h3>Why is Accessibility Important for a Website?</h3>
<p>Did you know that one of the most important categories that <a href="https://web.dev/control-focus-with-tabindex/">Google Lighthouse</a> measures and scores by creating an audit are accessibility?</p>
<p>Just like any other search engine, Google wants its users to be able to access the information they request in the easiest way possible. That’s why you are requested to make your website accessible from every point of view and at any time for users using different devices. If you do not have the necessary features, your Lighthouse scores will also decrease. Moreover, this does not mean only a theoretical decline.</p>
<ol>
<li>Accessibility ensures that any user who visits your site will have a loyal following.</li>
<li>The visitor who can easily navigate on your site with different devices or methods, is more likely to convert. Also, the total time spent on your site will increase.</li>
<li>All these values are seen by Google and help increase the SEO score. As a result, you will get excellent results in ranking. Yes, you heard it right: <a href="https://screpy.com/user-experience-and-seo/">SEO and UX</a> are pretty much related as always.</li>
</ol>
<p><strong>Should I use Tabindex?</strong></p>
<p>You do not need to use a positive valued tabindex attribute, which is usually marked as an anti-pattern. However, using tabindex attributes, which have negative and zero values, can be useful to gain keyboard access to your site.</p>
<p><strong>What does Tabindex 0 do?</strong></p>
<p>When you set the tabindex attribute with a value of zero, the element you select acts as a focusable feature and becomes focusable with the keyboard. It is not possible to create a sequental order or change an existing order with this value. But you can change the attribute you assign to the values.</p>
<p><strong>How do I disable Tabindex in HTML?</strong></p>
<p>For an element that can be focused with the tab key in the HTML file, it will be sufficient to use the value -1 to make it unfocusable. This allows you to remove the focusable property and make the element inaccessible to the keyboard.</p>
<p><strong>What is keyboard accessibility?</strong></p>
<p>You need keyboard accesibility so that your website can be easily scanned by users navigating using only the keyboard. In other words, users should be able to jump from button to button and perform basic functions with the help of their keyboard.</p>
<p><strong>How do I make my website keyboard accessible?</strong></p>
<p>If you want your site to be keyboard accessible, just follow the 3 best practices we have prepared for you:</p>
<ol>
<li><pre><code> First, make sure that the elements that keyboard focus should have are accessible. If necessary, you can use tabindex zero value.
</code></pre>
</li>
<li><pre><code> Second, make sure that all interactive elements are easily navigable by the user.
</code></pre>
</li>
<li><pre><code> If there are too many areas of focusable, feel free to remove them using tabindex -1 value.
</code></pre>
</li>
</ol>
<ul>
<li><a href="https://screpy.com/task/tabindex/">Elements that have a [tabindex] value greater than 0</a></li>
<li><a href="https://screpy.com/why-is-your-seo-strategy-failing/">Why Is Your SEO Strategy Failing?</a></li>
<li><a href="https://screpy.com/task/button-name/">No Accessible Names on Buttons</a></li>
<li><a href="https://screpy.com/task/duplicate-id-active/">Duplicated [id] Attributes on Active and Focusable Elements</a></li>
<li><a href="https://screpy.com/task/bypass/">No Heading, Skip Link, Or Landmark Region in the Web Page</a></li>
</ul>
</article> </div> </div> </div> <section class="mt-20 border-t border-gray-200 pt-12 pb-24"> <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between"> <div> <h2 class="text-3xl/9 font-medium tracking-tight text-gray-950">
Related posts
</h2> <p class="mt-3 max-w-2xl text-base/7 text-gray-500">
Keep reading practical SEO guides from the Screpy blog.
</p> </div> <a href="/blog" class="text-sm/6 font-medium text-gray-950 hover:text-gray-700">
View all posts
</a> </div> <div class="mt-8 grid gap-5 md:grid-cols-2 xl:grid-cols-3"> <article class="group flex min-h-56 flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md hover:ring-black/10"> <h3 class="text-lg/7 font-medium tracking-tight text-gray-950"> <a href="/blog/how-to-integrate-ai-with-seo-for-better-user-experience" class="hover:text-gray-700"> How To Integrate AI with SEO for Better User Experience </a> </h3> <p class="mt-3 line-clamp-3 text-sm/6 text-gray-500"> In the ever-evolving world of digital marketing, the integration of Artificial Intelligence (AI) with Search Engine Optimization (SEO) is not just a trend but a revolution. [&hellip;] </p> <div class="mt-auto pt-6 text-sm/6 text-gray-500"> May 16, 2024 </div> </article><article class="group flex min-h-56 flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md hover:ring-black/10"> <h3 class="text-lg/7 font-medium tracking-tight text-gray-950"> <a href="/blog/guide-to-integrating-ai-into-your-seo-practices" class="hover:text-gray-700"> Guide to Integrating AI into Your SEO Practices </a> </h3> <p class="mt-3 line-clamp-3 text-sm/6 text-gray-500"> Artificial Intelligence (AI) is no longer just a buzzword—it's a powerhouse tool transforming the way we optimize for search engines. From enhancing user [&hellip;] </p> <div class="mt-auto pt-6 text-sm/6 text-gray-500"> May 8, 2024 </div> </article><article class="group flex min-h-56 flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md hover:ring-black/10"> <h3 class="text-lg/7 font-medium tracking-tight text-gray-950"> <a href="/blog/methods-to-increase-time-on-page" class="hover:text-gray-700"> Methods To Increase Time On Page </a> </h3> <p class="mt-3 line-clamp-3 text-sm/6 text-gray-500"> Let's suppose you are a marketer. You are having such a beautiful day in your branch office involving full of high-quality products. [&hellip;] </p> <div class="mt-auto pt-6 text-sm/6 text-gray-500"> May 3, 2024 </div> </article><article class="group flex min-h-56 flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md hover:ring-black/10"> <h3 class="text-lg/7 font-medium tracking-tight text-gray-950"> <a href="/blog/detailed-guide-for-search-engine-marketing-sem" class="hover:text-gray-700"> Detailed Guide for Search Engine Marketing (SEM) </a> </h3> <p class="mt-3 line-clamp-3 text-sm/6 text-gray-500"> The marketing world changed more than it ever changed in the past with the presence of Search Engine Marketing or SEM. If [&hellip;] </p> <div class="mt-auto pt-6 text-sm/6 text-gray-500"> April 24, 2024 </div> </article><article class="group flex min-h-56 flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md hover:ring-black/10"> <h3 class="text-lg/7 font-medium tracking-tight text-gray-950"> <a href="/blog/how-to-get-more-youtube-subscribers-the-most-effective-ways-every-youtuber-needs-to-know" class="hover:text-gray-700"> How to Get More YouTube Subscribers: The Most Effective Ways Every YouTuber Needs to Know </a> </h3> <p class="mt-3 line-clamp-3 text-sm/6 text-gray-500"> Do you need to increase your subscribers on YouTube? Those who would like to get more YouTube subscribers, use some effective methods [&hellip;] </p> <div class="mt-auto pt-6 text-sm/6 text-gray-500"> April 22, 2024 </div> </article><article class="group flex min-h-56 flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:-translate-y-0.5 hover:shadow-md hover:ring-black/10"> <h3 class="text-lg/7 font-medium tracking-tight text-gray-950"> <a href="/blog/website-migration" class="hover:text-gray-700"> Website Migration </a> </h3> <p class="mt-3 line-clamp-3 text-sm/6 text-gray-500"> Website Migration is a migration process that includes all the steps taken to avoid or minimize traffic loss while migrating a website [&hellip;] </p> <div class="mt-auto pt-6 text-sm/6 text-gray-500"> February 15, 2024 </div> </article> </div> </section>  </div> </div> <footer> <div class="relative bg-linear-115 from-[#fff1be] from-28% via-[#ee87cb] via-70% to-[#b060ff] sm:bg-linear-145"> 
    <div class="absolute inset-0 bg-white/80"></div>
    <div class="px-6 lg:px-8"> <div class="mx-auto max-w-2xl lg:max-w-7xl"> 
      <div class="relative pt-20 pb-16 text-center sm:py-24"> <div> <p class="font-mono text-xs/5 font-semibold tracking-widest text-gray-600 uppercase data-dark:text-gray-400">
  Get started
</p> <p class="mt-6 text-3xl font-medium tracking-tight text-gray-950 sm:text-5xl">
Ready to dive in?
<br>
Start your free trial today.
</p> </div> <p class="mx-auto mt-6 max-w-xs text-sm/6 text-gray-500">
Audit your site, monitor important changes, and turn SEO signals into
          clearer reports.
</p> <div class="mt-6"> <a data-slot="button" data-variant="default" data-size="default" href="https://app.screpy.com/" class="inline-flex shrink-0 items-center justify-center border border-transparent font-medium whitespace-nowrap transition-colors outline-none disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-lg bg-gray-950 px-5 py-[calc(--spacing(2.5)-1px)] text-lg text-white shadow-md hover:bg-gray-800 disabled:bg-gray-950 w-full sm:w-auto">Get started</a> </div> </div>
      <div class="pb-16"> 
        <div class="group/row relative isolate pt-2 last:pb-2"> <div aria-hidden="true" class="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2"> <div class="absolute inset-x-0 top-0 border-t border-black/5"></div> <div class="absolute inset-x-0 top-2 border-t border-black/5"></div> <div class="absolute inset-x-0 bottom-0 hidden border-b border-black/5 group-last/row:block"></div> <div class="absolute inset-x-0 bottom-2 hidden border-b border-black/5 group-last/row:block"></div> </div> 
          <div class="pt-6 group/item relative"> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -top-2 -left-2 hidden size-[15px] fill-black/10 group-first/item:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -top-2 -right-2 size-[15px] fill-black/10"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -bottom-2 -left-2 hidden size-[15px] fill-black/10 group-first/item:group-last/row:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -right-2 -bottom-2 hidden size-[15px] fill-black/10 group-last/row:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> 
            <span class="h-9 inline-flex items-center"> <img src="/screpy-logo.svg" alt="Screpy SEO platform logo" width="1788" height="688" class="h-full w-auto"> </span>
           </div>
         </div>
        <div class="group/row relative isolate pt-2 last:pb-2"> <div aria-hidden="true" class="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2"> <div class="absolute inset-x-0 top-0 border-t border-black/5"></div> <div class="absolute inset-x-0 top-2 border-t border-black/5"></div> <div class="absolute inset-x-0 bottom-0 hidden border-b border-black/5 group-last/row:block"></div> <div class="absolute inset-x-0 bottom-2 hidden border-b border-black/5 group-last/row:block"></div> </div> 
          <div class="grid grid-cols-2 gap-x-8 gap-y-12 pt-10 pb-6 lg:grid-cols-5"> <div class="col-span-2 grid grid-cols-2 gap-x-8 gap-y-12 lg:col-span-5 lg:grid-cols-5"> <div> <p class="text-sm/6 font-medium text-gray-950/50"> SEO Platform </p> <ul class="mt-6 space-y-2.5 text-sm/6"> <li> <a href="/features" class="font-medium text-gray-950 hover:text-gray-950/75"> Features </a> </li><li> <a href="/feature/website-audit" class="font-medium text-gray-950 hover:text-gray-950/75"> Website Audit </a> </li><li> <a href="/feature/seo-crawler" class="font-medium text-gray-950 hover:text-gray-950/75"> SEO Crawler </a> </li><li> <a href="/feature/technical-seo-score" class="font-medium text-gray-950 hover:text-gray-950/75"> Technical SEO Score </a> </li><li> <a href="/feature/broken-link-checker" class="font-medium text-gray-950 hover:text-gray-950/75"> Broken Link Checker </a> </li> </ul> </div><div> <p class="text-sm/6 font-medium text-gray-950/50"> Monitoring </p> <ul class="mt-6 space-y-2.5 text-sm/6"> <li> <a href="/feature/rank-tracker" class="font-medium text-gray-950 hover:text-gray-950/75"> Rank Tracker </a> </li><li> <a href="/feature/core-web-vitals" class="font-medium text-gray-950 hover:text-gray-950/75"> Core Web Vitals </a> </li><li> <a href="/feature/pagespeed-monitoring" class="font-medium text-gray-950 hover:text-gray-950/75"> PageSpeed Monitoring </a> </li><li> <a href="/feature/uptime-monitoring" class="font-medium text-gray-950 hover:text-gray-950/75"> Uptime Monitoring </a> </li> </ul> </div><div> <p class="text-sm/6 font-medium text-gray-950/50"> Content & Reports </p> <ul class="mt-6 space-y-2.5 text-sm/6"> <li> <a href="/feature/keyword-research" class="font-medium text-gray-950 hover:text-gray-950/75"> Keyword Research </a> </li><li> <a href="/feature/image-seo-analysis" class="font-medium text-gray-950 hover:text-gray-950/75"> Image SEO Analysis </a> </li><li> <a href="/feature/ai-article-generator" class="font-medium text-gray-950 hover:text-gray-950/75"> AI Article Generator </a> </li><li> <a href="/feature/white-label-seo-reports" class="font-medium text-gray-950 hover:text-gray-950/75"> White Label SEO Reports </a> </li><li> <a href="/blog" class="font-medium text-gray-950 hover:text-gray-950/75"> Blog </a> </li> </ul> </div><div> <p class="text-sm/6 font-medium text-gray-950/50"> Company </p> <ul class="mt-6 space-y-2.5 text-sm/6"> <li> <a href="/pricing" class="font-medium text-gray-950 hover:text-gray-950/75"> Pricing </a> </li><li> <a href="/about" class="font-medium text-gray-950 hover:text-gray-950/75"> About </a> </li><li> <a href="/editorial-policy" class="font-medium text-gray-950 hover:text-gray-950/75"> Editorial Policy </a> </li><li> <a href="/tasks" class="font-medium text-gray-950 hover:text-gray-950/75"> SEO Tasks </a> </li><li> <a href="/changelog" class="font-medium text-gray-950 hover:text-gray-950/75"> Changelog </a> </li> </ul> </div><div> <p class="text-sm/6 font-medium text-gray-950/50"> Legal </p> <ul class="mt-6 space-y-2.5 text-sm/6"> <li> <a href="/terms-of-service" class="font-medium text-gray-950 hover:text-gray-950/75"> Terms of Service </a> </li><li> <a href="/privacy-policy" class="font-medium text-gray-950 hover:text-gray-950/75"> Privacy Policy </a> </li><li> <a href="/cookie-policy" class="font-medium text-gray-950 hover:text-gray-950/75"> Cookie Policy </a> </li><li> <a href="/refund-cancellation-policy" class="font-medium text-gray-950 hover:text-gray-950/75"> Refund & Cancellation Policy </a> </li><li> <a href="/data-processing-agreement" class="font-medium text-gray-950 hover:text-gray-950/75"> Data Processing Agreement </a> </li><li> <a href="/security-policy" class="font-medium text-gray-950 hover:text-gray-950/75"> Security Policy </a> </li><li> <a href="/acceptable-use-policy" class="font-medium text-gray-950 hover:text-gray-950/75"> Acceptable Use Policy </a> </li> </ul> </div> </div> </div>
         </div>
        <div class="flex justify-between group/row relative isolate pt-2 last:pb-2"> <div aria-hidden="true" class="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2"> <div class="absolute inset-x-0 top-0 border-t border-black/5"></div> <div class="absolute inset-x-0 top-2 border-t border-black/5"></div> <div class="absolute inset-x-0 bottom-0 hidden border-b border-black/5 group-last/row:block"></div> <div class="absolute inset-x-0 bottom-2 hidden border-b border-black/5 group-last/row:block"></div> </div> 
          <div> <div class="py-3 group/item relative"> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -top-2 -left-2 hidden size-[15px] fill-black/10 group-first/item:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -top-2 -right-2 size-[15px] fill-black/10"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -bottom-2 -left-2 hidden size-[15px] fill-black/10 group-first/item:group-last/row:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -right-2 -bottom-2 hidden size-[15px] fill-black/10 group-last/row:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> 
              <div class="text-sm/6 text-gray-950">© 2026 Airscarp LLC</div>
             </div> </div>
          <div class="flex"> <div class="flex items-center gap-8 py-3 group/item relative"> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -top-2 -left-2 hidden size-[15px] fill-black/10 group-first/item:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -top-2 -right-2 size-[15px] fill-black/10"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -bottom-2 -left-2 hidden size-[15px] fill-black/10 group-first/item:group-last/row:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> <svg viewBox="0 0 15 15" aria-hidden="true" class="absolute -right-2 -bottom-2 hidden size-[15px] fill-black/10 group-last/row:block"> <path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path> </svg> 
              <a href="https://www.facebook.com/Screpy-107071387735572/" target="_blank" aria-label="Visit us on Facebook" class="text-gray-950 hover:text-gray-950/75"> <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16 8.05C16 3.603 12.418 0 8 0S0 3.604 0 8.05c0 4.016 2.926 7.346 6.75 7.95v-5.624H4.718V8.05H6.75V6.276c0-2.017 1.194-3.131 3.022-3.131.875 0 1.79.157 1.79.157v1.98h-1.008c-.994 0-1.304.62-1.304 1.257v1.51h2.219l-.355 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.95z"></path> </svg> </a>
              <a href="https://x.com/_screpy" target="_blank" aria-label="Visit us on X" class="text-gray-950 hover:text-gray-950/75"> <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"> <path d="M12.6 0h2.454l-5.36 6.778L16 16h-4.937l-3.867-5.594L2.771 16H.316l5.733-7.25L0 0h5.063l3.495 5.114L12.6 0zm-.86 14.376h1.36L4.323 1.539H2.865l8.875 12.837z"></path> </svg> </a>
              <a href="https://www.linkedin.com/company/screpy" target="_blank" aria-label="Visit us on LinkedIn" class="text-gray-950 hover:text-gray-950/75"> <svg viewBox="0 0 16 16" fill="currentColor" class="size-4"> <path d="M14.82 0H1.18A1.169 1.169 0 000 1.154v13.694A1.168 1.168 0 001.18 16h13.64A1.17 1.17 0 0016 14.845V1.15A1.171 1.171 0 0014.82 0zM4.744 13.64H2.369V5.996h2.375v7.644zm-1.18-8.684a1.377 1.377 0 11.52-.106 1.377 1.377 0 01-.527.103l.007.003zm10.075 8.683h-2.375V9.921c0-.885-.015-2.025-1.234-2.025-1.218 0-1.425.966-1.425 1.968v3.775H6.233V5.997H8.51v1.05h.032c.317-.601 1.09-1.235 2.246-1.235 2.405-.005 2.851 1.578 2.851 3.63v4.197z"></path> </svg> </a>
             </div> </div>
         </div>
       </div>
     </div> </div>
   </div> </footer> </main>
 </body> </html>