VH Helper

Bric By Blocs Builder

Buy Now $14
DetailsDocumentationReviews

Unlock your creative freedom while upholding SEO best practices with VH Helper.

VH Helper is a unique tool tailored specifically for Blocs users. It integrates Bootstrap 5’s visually hidden helper classes into your design canvas in a non-destructive, visual way. This ensures your website maintains SEO best practices without sacrificing your creative design.

Boosting Accessibility

A high score on accessibility rating sites like PageSpeed Insights shows your site's features are correctly coded. But true accessibility is about making your site user-friendly for everyone. VH Helper helps you take a step further towards this goal, easily and quickly.

VH Helper logo
VH Helper overview

Visually Hidden H1 Tags

Ever struggled with fitting H1 tags into your design? VH Helper lets you place these tags where they should be, then hides them so they don't affect your design. The best part? You can still see and edit these tags when you're working in Blocs, ensuring they're optimally positioned for SEO. This way, your website maintains its visual appeal while being search engine-friendly.

Skip to Content Link

'Skip to content' is a navigation link that lets users bypass or 'skip' over repetitive content on your webpage, such as menus and navigation links, and jump directly to the main content. This feature is particularly beneficial for keyboard and screen reader users, who would otherwise have to tab through every link in the navigation to reach the main content. By reducing the need for excessive tabbing, the 'Skip to content' feature enhances your website's user-friendliness and accessibility.

In addition to improving user experience, the 'Skip to content' feature also aligns with the Web Content Accessibility Guidelines (WCAG). Including a 'Skip to content' link on your webpage is a simple yet effective strategy to improve your website's accessibility and compliance.

With VH Helper, adding a 'Skip to Content' link to your website is seamless and straightforward. The link is visually hidden and only becomes visible when it receives focus, ensuring it doesn't disrupt your website's visual design. By integrating this feature into your website, VH Helper not only enhances your website's accessibility but also contributes to a smooth and efficient user experience.

What you get!

  • VH Helper

Requirements

  • Blocs 5

  • Bootstrap 5

Buy Now $14

VH Helper Settings

Flexy foot-2__Bric

At a glace you can clearly see if the .visually-hidden elements are visible on your design canvas.  This ensure you end up with no stray hidden elements on your page, creating potential SEO problems.

Vh Helper Settings options

Visibility Hidden

  • Show on canvas - Toggle the visibility of any element using the .visually-hidden class in your project.

  • Opacity - Set an opacity level for the .visually-hidden element when set to visible on the canvas.

  • Style Dropdown - Select a style for the Canvas Highlighter. Choose from Dashed, Dotted, Solid or none. 

  • Width - Set a width for the highlighter.

  • Offset - Set the distance the Canvas Highlighter is from the .visually-hidden element.  You can also use negative values.

  • Colour Well - Choose a colour for your Canvas Highlighter.

  • Bootstrap Helper Class - Easy reminder of the correct Bootstrap Helper class to apply in your project.

  • Copy to clipboard - Quickly and easily add the class .visually-hidden to your clipboard to paste into the Blocs class manager.

Vh Helper Settings options

Skip to Content Link

  • Enable on export - Will generate the required markup on browser preview and export of your project.
    Note: Skip to content does not work within the Blocs environment.

  • Select an ID - This is required for 'Skip to Content' to work. Choose an ID of the bloc your content starts at.  Note: When VH Helper is used in the global area of the canvas, you will need to ensure each page in your project has this ID. 

  • Skip to Content text - The text for the link should be simple and descriptive. “Skip to main content” is commonly used.

Vh Helper Settings options

Extras

Change the colour of the VH Helper bric placeholder, just because you can!

Vh Helper Settings options

Other

Easily click to the Blocs Builder website for VH Helper documentation (this page) or to contact support.

Skip Content Styling

Easily style the Skip Content link using the helper class.  Here is an example of the styling used on the Blocs Builder website.

Vh Helper example styling in class editor
Vh Helper example styling in class editor
Vh Helper example styling in class editor
Vh Helper example styling in class editor
Vh Helper example styling in class editor

Testing in Safari

To test Skip to Content you need to use Tab navigation in Safari. You can enable this under Safari settings -> advanced and ticking the ‘Press Tab to highlight each item on a webpage’.

Safari app settings

* For other browsers, please see the relative documentation for enabling their accessibility features.