🎉 ClearView – New Accessibility Widget Bric for Blocs

Custom Brics
1

ClearView — an accessibility widget designed to make websites more usable for everyone.

Accessibility has become really important, and we wanted to create something simple that any Blocs user can add to their projects without needing to write code or integrate complicated plugins.

:flexed_biceps: What ClearView does
It adds a clean, floating accessibility panel that visitors can use to adjust the website to their needs.

The main features include:

  • High Contrast modes (3 levels)
  • Text size, line height, and spacing controls
  • Dyslexia-friendly font option
  • Color blindness filters
  • Pause animations / Reduced motion
  • Larger cursor and option to hide images
  • Built-in text-to-speech (Screen Reader)
  • Voice Control commands
  • Support for over 30 languages

The Bric is based on a solid open-source accessibility widget and has been adapted to work smoothly inside Blocs. You can fully customize the position, colors, icon, and which tools are shown, all from the Blocs sidebar.

We built this because we believe every website should be more inclusive by default, and this makes it much easier to achieve.

ClearView is available for a one-time payment as little as $15

To get this 'must have Bric:
:globe_with_meridians: Product Page → here

Read the manual prior purchasing :
:bookmark: Product Manual → here

9 Likes
2

Look I don’t even know if I will use this bric, but I felt compelled to support the genius who thought of it. I am sure so many people to build with Blocs will be putting this to use. Thank you, so much for developing a bric that looks so simple to use.

1 Like
3

ClearView 1.1.0 — bigger update than planned :tada:

Quick follow-up on ClearView. What started as one bug fix turned into a proper
overhaul, so here’s everything that’s new. Free update for existing owners.

:sparkles: Responsive columns

You can now set a different column count for each Blocs breakpoint, LG, MD,
SM and XS, anywhere from 1 to 4 columns. Defaults are 2/2/2/1, so phones get a
single clean list instead of cramped wrapped labels.

:sparkles: Card Size

Compact, Standard or Large controls the height, padding, label size and icon
size of each feature button together.

Compact stops at 44px and that’s deliberate. WCAG recommends 44×44px as the
minimum target size, and these are the buttons someone with a hand tremor has to
press. It’s a dropdown rather than a number field specifically so you can’t
accidentally build buttons that are too small to use in a widget whose whole job
is accessibility.

:sparkles: Font control, with Atkinson Hyperlegible built in

Five options: Atkinson Hyperlegible (the new default), System, Helvetica,
Georgia and Verdana.

Atkinson Hyperlegible was made by the Braille Institute specifically for
low-vision readers as it exaggerates the differences between characters that get
confused, like capital I vs lowercase l vs the digit 1. It’s bundled directly
into the Bric, so there’s no download, no CDN call and nothing to break.

One deliberate decision: the panel does not inherit your site’s font. If
someone opens the accessibility panel because your page is hard to read, the last
thing that panel should do is use the same hard-to-read typeface. It keeps its
own font on purpose.

For languages Atkinson doesn’t cover (Chinese, Japanese, Arabic, Hebrew, Thai,
Hindi, Cyrillic) it falls back automatically to a proper system font for that
script. Nothing to configure.

:sparkles: Header styling

The old header was pretty rough, so: Title Size, Title Weight, Title
Align, Header Style (Flat / Gradient / Bottom Border / Minimal) and
Header Height (Compact / Standard / Tall).

The close button is a real icon now instead of a text “×” character, which never
quite lined up with the reset icon next to it.

:sparkles: Redrawn icon set

Every icon has been redrawn on a single consistent grid. They’re properly even
now, the originals were drawn at nine different scales, so they never quite
matched no matter what you set Icon Size to. They also pick up your Button Icon
colour correctly, which makes dark-themed panels look much better.

:sparkles: Reduced motion support

The widget’s own open/close animation now respects the visitor’s OS-level
reduced-motion setting, on top of the existing Pause Animations feature.

:bug: Also fixed

  • Button Size no longer resets while you type. Values outside the allowed
    range are clamped to the nearest valid one instead of snapping back to the
    default. Same fix for Panel Width, Icon Size, Corner Radius, Bt. Offset and
    Z-Index.
  • The Button Icon colour now applies to every icon. Previously about half of
    them ignored it, which was rough if you were building a dark panel.
  • The header no longer renders narrower than the panel at 3 or 4 columns.

:blue_book: Updated manual / Blocs Store page

Manual → here
Product page → here

As always, if something’s broken or you want a feature, say so. Most of the changes in
this release came from user suggestions. :folded_hands:

4 Likes