JCA accessible website design

Redesigned accessible website

Custom home page design

Default page template with sidebar

Custom page templates/designs

Original website

Home page with slider

Programs page with content slider at bottom

Background

A nonprofit organization in Rockville, Maryland, the mission of the Jewish Council for the Aging (JCA) is to help all older adults in the Washington, D.C., area maintain their independence, dignity, vitality and self-respect.

Problem

JCA needed a new website that was accessible to people with disabilities (Section 508/WCAG compliant), easy to read and find information, a new design consistent with their branding and easy for staff to update without it affecting the design.

The original website had small, scrunched text, a tall header area (making it hard to see a lot of page content on the screen at once), forms that were not accessible to screen readers and sliders with page content that many users did not understand how to interact with.

Solution

We started by giving the site a new design that:

has more visual white space,
reduced the screen space the header occupied,
makes the text easier to read,
makes headings easier to find when scanning a page and
has a modified color palette that is accessible,
includes functionality for the user to change contrast and text size if desired.

We created a custom template for the home page that:

clearly states who JCA helps;
enables someone needing help for themselves or for a loved one to find information;
allows for optional promotional areas, which JCA can easily add more of as needed;
shows recent blog posts;
has a large call to action (to donate).

We also created custom page templates that allow for a lot of information to be presented in a more visual, reader-friendly manner, in a “grid” of circles, such as the Programs page, which then leads to all of their programs on individual pages. This makes it easy for the user to find information quickly. The page templates allow JCA staff to show images (which automatically get styled as circles with a border), a heading, short text and a link to highlight certain content.

We not only made these links accessible, but we made them more understandable to people using screen readers by adding in areas for JCA to fill out that explains what the link is about (where it goes) but that only screen readers see. So, sighted visitors, who do not need that information, won’t see it, and that information doesn’t clutter the page.

We also reorganized and simplified the navigation, consolidating several pages of related content where it made sense. We also did the same for contact forms, as there had been multiple contact forms throughout the site. Having a single form with multiple departments makes it easier for staff to update, while still being user friendly for the visitor.

Summary of the Work

Creation of the overall design and design elements
Accessibility (visually and structurally)
Customized theme
Custom page templates
Reorganization and simplification of the navigation and several pages of content

Client

Jewish Council for the Aging, Rockville, MD

Industry

Nonprofit/not for profit

Note

Please note that websites we built may have been modified by the client or a third-party developer after launch. Sites designated as “accessible” were audited prior to launch and accessible at that time.