Skip to main content

Ask the community
1

Hi folks, I am looking to add a “Skip to main content” functionality to my site for users who with accessibility requirements that rely on keyboard navigation.

Has anyone achieved this through their Softr apps? I have come across examples such as this one but am not quite sure how to implement it across the app

Any help appreciated!

image

2

It’s a shame this has had no reply because it is an important point for those needing accessibility options. I would have expected someone from Softr to comment on this.

3

It’s a great suggestion indeed, @flavi . I’ve added it to our backlog.

If others are in need of this feature, let us know. Generally, we know that this would be very valuable for those who need it, but haven’t seen a large interest in it from our community to warrant building it yet.

4

Hey @dreamsuite-mike & @flavi - good news! I’ve put together I believe a good workaround for this!

STEP 1: Identify your main content
On the page that you’re going to be adding this button to you’ll need to identify the block that you’d like to be the main content to scroll to. Change the ID of this block to main-content or whatever you’d like to call it; just remember what it is for the next steps!

image

STEP 2: Create a custom code block
Add a custom code block onto the page you’d like the button to appear. Put in the following code:

<a href="#main-content" class="skip-main">Skip to main content</a>

<style>
    .skip-main {
        position: absolute;
        left: -999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        z-index: -999;
    }
    .skip-main:focus, .skip-main:active {
        color: #fff;
        background-color: #000;
        left: auto;
        top: auto;
        width: 30%;
        height: auto;
        overflow: auto;
        margin: 10px 35%;
        padding: 5px;
        border-radius: 15px;
        border: 4px solid yellow;
        text-align: center;
        font-size: 1.2em;
        z-index: 999;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        // Add tabindex to the main content block
        const mainContent = document.getElementById('main-content');
        if (mainContent) {
            mainContent.setAttribute('tabindex', '-1');
        }
    });
</script>

If you used main-content as your ID you can keep #main-content. If not, change that to whatever name you used keeping # in front of the name.

STEP 3: Preview & test!
You should now be able to click Preview and then by tabbing/focusing you should then be able to select the button which should scroll the assigned section. This button should remain hidden until focused as suggested.

image
image993×362 35.7 KB

Please let me know if this works/doesn’t work and I’d be happy to help fix this!

I’m also going to make a note to see if we can put together a short tutorial on this for our social channels as well to give visibility to this workaround for those needing accessibility options. :blush:

1 Like