Accessibility and Security

Heading Structure

Editors explicitly select H1 through H6 for each Heading element.

Use heading levels according to the page structure rather than visual size alone. Most pages should contain one primary H1.

Images

Image elements support alternative text.

  • Describe informative images.
  • Use empty alternative text for decorative images.
  • Do not place essential text only inside a background image.

Background images are decorative CSS images and do not expose alternative text.

Icons

Icon elements support an accessible label.

When a label is provided, the icon is exposed as an image with that label.

When the label is empty, the icon is treated as decorative. Do not leave the label empty when the icon is the only indication of an action or meaning.

Links

External URLs are sanitized before output.

Links opened in a new browsing context include:

  • target="_blank"
  • rel="noopener noreferrer"

Use descriptive link and button labels.

Reduced Motion

Parallax is disabled when the visitor requests reduced motion.

Do not use the parallax effect as the only method of communicating information.

Color and Contrast

The add-on allows theme and custom colors but cannot guarantee sufficient contrast for every combination.

Editors must verify contrast between:

  • Text and background image
  • Text and content overlay
  • Buttons and surrounding content
  • Icons and their background
  • Focus indicators and custom colors

File Permissions

Selected files are validated when the block is saved. Editors must have permission to access files chosen in the block.

Rich Text

The Text element uses the configured Concrete CMS editor and link-abstraction system.

Only trusted users with permission to edit the block should be allowed to enter rich content.

Drag and Drop

Drag-and-drop sorting is supplemented by move-up and move-down controls. These controls provide an alternative when pointer-based dragging is difficult or unavailable.