Skip to main content

Search

Welcome to Support

How to make your website more accessible (Legacy content editor)

  • Updated

TeamSideline works to make the pages it builds for your legacy website accessible, following the Web Content Accessibility Guidelines (WCAG). The content your admins add is yours to make accessible: choose readable colors on Content > Configurations > Site Layout, give your pictures alt text, write pages with clear headings and links, keep moving content easy to follow, and, if you like, add the UserWay accessibility widget.

Applies to: Org admins and content editors · All plans · Legacy content editor

Where: Content > Configurations > Site Layout; Content > Configurations > General; Content > Image Rotators; Content > Photo Galleries; Content > Page Edit

What TeamSideline covers and what you cover

  • TeamSideline: the pages it builds for you, such as your menus and built-in pages, sign-in, registration and checkout, schedules, team sites and member pages. Since 2024, TeamSideline has updated these pages for WCAG levels A and AA, and it keeps fixing accessibility issues as they're found.
  • You: what your admins add, such as page text, pictures, documents, News Items, the colors you choose, and any outside widgets you embed (a weather widget, for example).

Choose readable colors

  1. Go to Content > Configurations > Site Layout.
  2. In the Colors section, choose colors with strong contrast between text and its background. WCAG level AA asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
  3. Check each pair of colors with a free tool such as WebAIM's Contrast Checker.
  4. Click Save. You'll see "Save Successful."

Check the text Color on your Image Rotator pictures the same way, against the picture behind it. Don't use color alone to show meaning: if a schedule note is in red, also say in words what it means.

Describe your pictures (alt text)

Alt text is the short description a screen reader reads aloud in place of a picture. Describe what the picture shows or what it's for, in a sentence or less.

  • Image Rotators: on Content > Image Rotators, click the rotator's pencil icon, then the picture's pencil icon. Under Step 3: Alt Text, type up to 125 characters and click Save. Without it, screen readers hear only "Image Rotator 1", "Image Rotator 2" and so on.
  • Photo Galleries: on Content > Photo Galleries, open the gallery, click a picture's Edit icon (pencil) and fill in Alt Text under Step 3 (up to 125 characters).
  • Pictures in your pages: in Content > Page Edit, select the picture and enter its alternate text in the picture's settings.
  • News Items: there's no alt text box. On your home page, a News Item's picture is described by its News Item Title, so write titles that make sense on their own.
  • Sponsors: each logo is described by the sponsor's name, so enter the name in full.

Put important words in text, not only inside a picture: if you post a flyer image, add its dates, times and places to the page as text too.

Write pages everyone can use

  • Use headings for sections (the paragraph styles in Page Edit's toolbar), in order, rather than bold text. Screen reader users jump between headings.
  • Write link text that says where the link goes, such as "Spring registration", not "click here".
  • Use tables only for information in rows and columns, with a heading row.
  • Give videos captions, and post documents as text you can select, not as scanned images.

Keep moving content easy to follow

  • Image Rotators change pictures by themselves. Choose a longer Time Interval under Content > Configurations > General > Image Rotator so visitors have time to read each picture, and keep key information in your page text too.
  • Game Scroller: under Content > Configurations > General > Game Scroller Gadget, set Style to List to show upcoming games as a list that doesn't scroll, or set Show Gadget to No if you don't need it. Click Save.

Add the UserWay widget (optional)

UserWay is an outside widget, with a free option, that lets visitors adjust your pages for themselves, for example with larger text or more contrast.

  1. Create an account at userway.org and copy your UserWay account code. UserWay's site shows where to find it.
  2. Go to Content > Configurations > General.
  3. Under ADA Compliance Accessibility, paste the code into UserWay Code (up to 25 characters).
  4. Click Save. You'll see "Save Successful."

What you'll see: the UserWay button on your website's pages, on the Evolved and Minimalist layouts. UserWay helps visitors adjust a page; it doesn't fix content that isn't accessible, such as a picture with no alt text.

Check your pages

TeamSideline checks its pages with WAVE, a free accessibility checker. Use it too: go to wave.webaim.org, type the address of one of your pages and look at the errors it lists, such as missing alt text, low contrast or empty links. Fix the ones in content you added. If an error is in a part of the page TeamSideline builds, send the page's address to TeamSideline Support.

If it doesn't work

  • The UserWay button doesn't appear. Check that UserWay Code holds only your account code, not UserWay's whole embed script, and that you clicked Save. The button shows on the Evolved and Minimalist layouts.
  • A checker reports pictures named "Image Rotator 1", "Image Rotator 2". Those rotator pictures have no alt text. Add it under Step 3: Alt Text.
  • A color pair fails the contrast check. Make the text darker or the background lighter (or the reverse) until it passes, then save Site Layout again.

Good to know

Related articles