Accessibility Tool

Features

The feature portlet produces a single feature, meant to highlight a particular subpage, product, service, event, etc. Each feature contains a heading, an image, a link, and a rich text area that displays a paragraph by default. The text editor includes HTML editing capabilities, so extra links, headings, or paragraphs can be added as needed. Authors can add/edit/delete feature portlets, so CSS should be in place to ensure flexibility (ex. features displayed inline can wrap to another line gracefully if more are added).

Best Practices

  • Feature images should have large enough dimensions to scale up to HD resolution.
  • Image file sizes should be compressed as much as possible without large amounts of quality loss (High control image compression).
  • CSS background images should ONLY be used for decorative elements, never as a replacement for the "img" tag.
  • Background images should either be large enough to scale or be designed to repeat. For full width or height backgrounds, background-size should be set to cover(covers entire viewport on all sides) or contain(stops when any part of image hits a viewport edge) for responsiveness.
  • Text styling should display properly at all device widths (1920-1024px desktop, 990-320px mobile) and should be able to accomodate more or less verbiage.
  • Text must conform to ADA AA contrast guidelines (Web AIM Contrast Checker).

Render Templates

The HTML structure of a portlet is determined by the render template in use. Portlets have multiple render templates to choose from, and our development team has the ability to create new render templates based on client need.

stacked

Feature - Stacked

This feature has a heading, a container with an image wrapped in a link, and a container with a rich text area (paragraph by default) and a "Read More" link. Both links have the same destination.

Read more
divided

Feature - Divided

This feature has two containers: one with an image wrapped in a link, and another with a heading, a rich text area (paragraph by default) and a "Read More" link. Both links have the same destination.

Read more
lightbox

Feature - Lightbox

This feature consists of an image wrapped in a link and a lightbox pop-up container. The lightbox pop-up also has two containers: one for the image and another for the caption. The caption contains a heading and a rich text area. The pop-up will generate a "close" button and forward/next controls.

Read more
merged

Feature - Merged

This feature has two containers: one with an image and a heading all wrapped in a link, another with a rich text area (paragraph by default) and a "Read More" link. Both links have the same destination.

Read more
testimonials

Feature - Testimonials

This feature consists of two containers: one for the image and another for the header and rich text area (paragraph by default). There is a numbered pager and left and right arrows generated by JavaScript to navigate through the testimonials.

Read more
testimonials-single

Feature - Testimonials - Single

This feature consists of a header and two containers: one for the image and another for the rich text area (paragraph by default). There is a pager generated by JavaScript to navigate through the testimonials.

Read more
tab-slides

Feature - Tab Slides

This feature contains a feature button area to navigate the tabbed content. Each "feature" or "tab slide" consists of two containers: one for the image and another for the rich text area (paragraph by default).

Read more

Side-by-side Comparisons

2020 © All Rights Reserved | Website Design By: Intrado | Login