Skip to content
Octo Assist

Features

All 23 accessibility tools in the Octo Assist panel

What each tool changes on the page, how visitors use it, and who it helps most. You choose which tools your visitors see.
  • 23 tools
  • 6 one-click profiles
  • 6 languages
  • Keyboard and screen reader friendly

Text tools

Make words bigger, clearer and easier to follow.

7 tools

Text size

Makes the text on the page larger. Every piece of text, including buttons and form fields, grows from its own original size, so headings stay bigger than body text.

Each click

  1. Off
  2. 120%
  3. 140%
  4. 160%

How to use it

Click the Text size tile to step through 120%, 140% and 160%, then click again to turn it off. Text the page adds later, such as more results in a list, is enlarged too.

Line height

Adds more space between lines of text, so each line is easier to follow and tell apart.

Each click

  1. Off
  2. 1.5×
  3. 1.8×
  4. 2×

How to use it

Click the Line height tile to step through 1.5×, 1.8× and 2×, then click again to turn it off. The Low vision profile uses 1.5× and the Dyslexia profile uses 1.8×.

Letter spacing

Adds space between letters and between words, so each word is easier to pick out.

Each click

  1. Off
  2. Light
  3. Medium
  4. Wide

How to use it

Click the Letter spacing tile to step through Light, Medium and Wide, then click again to turn it off. The Dyslexia profile uses Medium.

Readable font

Switches the page's text to a plain sans-serif font: Verdana, or Tahoma, Segoe UI or Arial when Verdana isn't on the device. Common icon fonts are left alone, so icons still show.

Each click

  1. Off
  2. On

How to use it

Click the Readable font tile to turn it on, and click again to turn it off. The Dyslexia and Cognitive profiles turn it on.

Text align

Lines up all the text on the page to the left, center or right.

Each click

  1. Off
  2. Left
  3. Center
  4. Right

How to use it

Click the Text align tile to step through Left, Center and Right, then click again to go back to the page's own alignment. Left helps on pages with centered or justified text, because every line then starts in the same place.

Text magnifier

Shows the text under the mouse pointer in a large box next to the pointer.

Each click

  1. Off
  2. On

How to use it

Turn on Text magnifier, then move the pointer over any text. The box shows up to 200 characters of that text and hides when you scroll. It follows the pointer, so it is most useful with a mouse or trackpad. Screen readers skip the box, since it repeats text already on the page.

Color tools

Change contrast and color to suit how each person sees.

4 tools

Contrast

Changes the page's colors to give text a strong contrast with its background.

Each click

  1. Off
  2. Dark
  3. Light
  4. Invert

How to use it

Click the Contrast tile to step through Dark, Light and Invert, then click again to turn it off. Dark gives a black background, white text and yellow links. Light gives a white background, black text and dark blue links. Invert flips every color on the page, while photos and videos are flipped back so they look normal.

Smart contrast

Finds text that is hard to read against its background and turns only that text black or white, whichever reads better there. The rest of the page keeps its own colors.

Each click

  1. Off
  2. On

How to use it

Click the Smart contrast tile to turn it on or off. It compares each piece of text with the background color behind it, using the WCAG contrast ratios (4.5:1 for normal text, 3:1 for large text) to decide what is too faint, and checks text the page adds later too. It looks at background colors, not background images. When Dark or Light contrast is also on, those take over.

Saturation

Changes how strong the colors on the page are.

Each click

  1. Off
  2. Low
  3. High
  4. Mono

How to use it

Click the Saturation tile to step through Low, High and Mono, then click again to turn it off. Low softens colors, High makes them stronger, and Mono shows the page in shades of gray. The Seizure safe profile uses Low.

Color blindness

Adds a color filter that shifts colors that are hard to tell apart with color blindness into colors that are easier to tell apart.

Each click

  1. Off
  2. Red-weak
  3. Green-weak
  4. Blue-weak

How to use it

Click the Color blindness tile to step through Red-weak, Green-weak and Blue-weak, then click again to turn it off. Pick the one that matches your color vision. It changes how colors look on screen, but it can't add words or labels where a site uses color alone.

Page structure

Opens a list of the page's headings, indented by level and marked H1 to H6, so you can see how the page is organized.

Click

Opens a list you can jump from

How to use it

Click the Page structure tile to open the list in the panel. Choose a heading to close the panel and jump straight to that part of the page. The list can only show headings the site has marked up as headings; if there are none, the panel says so.

Read aloud

Reads text out loud when you click it, using the voices built into your browser or device.

Each click

  1. Off
  2. On

How to use it

Turn on Read aloud, then click a paragraph, heading, list item, button or other text. It is read aloud and marked with a dashed orange outline while it is read. Clicking other text reads that instead, and turning the tool off stops the voice. Clicking a link still opens it. The voice follows the page's language, and the voices on offer depend on your device. The tile is hidden in browsers without built-in speech.

Reading guide

Shows a horizontal bar that follows the mouse pointer up and down the page, to help you keep your place in a line of text.

Each click

  1. Off
  2. On

How to use it

Turn on Reading guide and move the pointer: the bar moves with it. Click the tile again to turn it off. It follows the pointer, so it works best with a mouse or trackpad. The Dyslexia and Cognitive profiles turn it on.

Reading mask

Darkens the page above and below a clear strip, so you see only the lines you are reading.

Each click

  1. Off
  2. On

How to use it

Turn on Reading mask and move the pointer: the clear strip follows it. When you press Tab, the strip moves to the item that has keyboard focus. The ADHD friendly profile turns it on.

Image descriptions

Shows an image's text description, its alt text, in a small box when you point at the image or reach it with the keyboard.

Each click

  1. Off
  2. On

How to use it

Turn on Image descriptions, then hover over an image, or Tab to a link or button that holds one. Images the site marked as decorative are skipped, and images with no description show This image has no description. It shows only descriptions the site already has; it does not write new ones.

Keyboard shortcuts

Adds single-key shortcuts to move around the page: H for the next heading, K for the next link, B for the next button, F for the next form field and G for the next image.

Each click

  1. Off
  2. On

How to use it

Turn on Keyboard shortcuts, then press a key to jump. Add Shift to go back. The keys don't react while you type in a form field, so typing works as usual. Each jump is announced to screen readers, and the panel shows a reminder of the keys. Alt+Shift+A opens the panel at any time, even when this tool is off.

Big cursor

Replaces the mouse pointer with a large black arrow with a white outline, which is easier to see and follow.

Each click

  1. Off
  2. On

How to use it

Click the Big cursor tile to turn it on or off. It only changes the mouse pointer, so it has no effect on touch screens. The Low vision and Keyboard & motor profiles turn it on.

Focus outline

Draws a thick yellow and black ring around whatever has keyboard focus, so you can always see where you are on the page.

Each click

  1. Off
  2. On

How to use it

Turn on Focus outline, then move through the page with Tab or the keyboard shortcuts. The ring stays visible on both light and dark backgrounds. The Keyboard & motor profile turns it on.

Stop animations

Stops movement on the page: CSS animations and transitions jump straight to their end, videos on the page pause, animated GIFs freeze on their first frame and SVG animations pause.

Each click

  1. Off
  2. On

How to use it

Click the Stop animations tile to turn it on. It pauses the videos and GIFs that are on the page at that moment. It also asks YouTube and Vimeo players in the page to pause (YouTube only listens when the site's embed allows it) and turns off smooth scrolling. Slideshows that a script moves on a timer can still change slides, but without the sliding motion. Turning it off brings back GIFs and SVG animations; paused videos stay paused until you play them.

Mute sounds

Mutes the audio and video players on the page, including ones that start playing later.

Each click

  1. Off
  2. On

How to use it

Click the Mute sounds tile to turn it on. It can't reach sound inside players embedded from other sites, such as a YouTube video. Turning it off puts each player's sound back the way it was.

Hide images

Hides the images and background pictures on the page, keeping the space they took so the layout doesn't jump.

Each click

  1. Off
  2. On

How to use it

Click the Hide images tile to turn it on or off. Videos stay visible.

One-click profiles

Several tools at once, in one click

Each profile turns on the tools made for a need. Visitors can still adjust each tool afterwards.

Let your visitors choose what helps them

Create an account, add your website and preview the widget in minutes.