ArticleContent

We've Added Some Cool Accessibility Features

Posted by Jen Anderson on

We've Added Some Cool Accessibility Features

Our website has gotten a bit of a polish behind the scenes, designed to make the site more usable. We've added an accessibility widget that can enhance your experience whenever you visit us. But, of course, anything with lots of handy dandy functionality can be confusingly complicated. And if you don't know all the cool things this widget can do, you may not bother playing around with it to find out. So let's walk through it together.

The Icon

purple accessibility icon

You'll find this jaunty little purple icon at the lower left of your screen on every page of our site. Click or tap it to bring up the widget. On desktop computers, you can hide this icon by hovering your mouse over it until the word, "Hide" appears. Click Hide and (drumroll) the icon is hidden.

You can also bring up and dismiss the accessibility widget by hitting Ctrl-U on both Macs and PCs.

The Widget

screenshot of accessibility widget

As you can see at the top, this is officially called a menu, but since the site already has a menu I'm going to keep referring to it as a widget. It may look bigger or smaller on your screen depending on your settings. My laptop (which I used to take these pictures) is set to display text bigger than usual to make things easy on my eyes. 

If you want to view the widget in a language besides English, you can select that in the drop-down list. If not, click on or tap that drop-down anyway - it's pretty cool. It displays flags and the language name in the actual language in addition to the language name in English (as in, Deutch German). 

Moving down, you can search for a word in the dictionary. It only does English, even when you've selected a different language.

Now it gets fun. The widget has a built in Screen Reader. It can read any page on our site at slow, normal, and fast speed. Obviously, it's designed for blind people, but you may want to use it just to give your eyes a rest.

We have text descriptions of the photos so the screen reader can read them. 

Contrast is important for readability. You may have noticed that we've tweaked the light purple we use in the header and footer to provide better contrast to the white background. You can select Contrast+ to toggle through a few options that may make the site easier on your eyes. Smart Contrast can change the site colors to enhance the contrast. Since we've already changed some colors to improve contrast, don't be surprised if this option doesn't change anything on your screen.

When you select Highlight Links, the colors around each link will change to make it obvious. 

 

The Bigger Text and Text Spacing options do exactly what they say they do - without messing up the page formatting or forcing you to scroll horizontally.

We don't have animations on the site, but if we did you could select Pause Animations to keep them from playing automatically when a page loads.

The next option lets you change the font of all the text on the page. The first option is Dyslexia Friendly, and the second (tap or click a second time) is Legible Fonts. The dyslexia friendly font is a jarring change from our usual sans serif font, but it distinguishes letters from each other more than any other font which makes reading easier for dyslexic people. (What'll they think of next?)

screenshot of the lower portion of the accessibility widget

Scrolling down, you can play around with the appearance of your cursor. The first option makes your Cursor bigger. The second option is a Reading Mask that dims the page except for a horizontal bar that you control with your mouse (or touchpad, or whatever). The third is Reading Guide which displays a black bar above your cursor arrow.  This isn't available on mobile devices.

If you select Tooltips, you'll see text when you hover your cursor over certain elements (like photos and form fields). This is also unavailable on mobile devices.

Line Height increases the space between lines of text to improve readability. Text Align lets you control (yes, you guessed it) the alignment of the text. Continuing to wear my Captain Obvious hat, I'll point out that Reset All resets all the options you've selected in the widget, and that Move/Hide lets you decide where you want the widget to appear or hide it completely.

Page Structure brings up a pop-up window that lists all the headings on the page so you can jump right to a section instead of scrolling. Which is nifty.

Whew!

That's a lot of stuff, but that also means we now have a lot of ways to make browsing our site easier. Even if your eyesight is relatively good, you may enjoy some of the readability features. Be sure to let us know if you have any questions.

Leave a comment