Composer has two sets of structural elements to help you make your content flow in a well-organized and easily scanned way on both desktop and mobile.

Using a variety of font styles and content accents makes your pages attractive; it also gives them structure, directs your visitors' paths within a page, and communicates hierarchy of importance for the information you share. What do they want to find? What do you want them to do?

HEADING STYLES

We do not read web pages like a book, we scan to find what might match our interests and jump back to what fits, especially on mobile devices. Clear headings help visitors understand the value of the information on a page. Consistent use of heading styles (found under the P menu) taps into the behavioral needs of your visitors and creates a rhythm and connection between your site pages—across different subjects and authors.

Callout Styles & Cards

Lead in, block quote, and callout text styles (found in the Styles drop-down) help to emphasize areas of interest within your content without altering the page's heading hierarchy.  Callout card styles are applied via the settings of the content element—write in the design style name that you'd like, or clone a card from your Style Guide to place on any page. 

Composer has two interchangeable elements to help you organize and condense related sections of content.

Tab Elements

Tabs group content panels in a horizontal navigation set. On desktop the first tab on the left will always be open by default, and only one tab can be expanded at a time. On mobile, tabs will convert to accordions for space. Use tabs when you have a small number of sections with brief headings.

accordion Elements

Accordions group content panels in a vertical navigation set. You may choose to have the first panel expanded automatically and allow visitors to open multiple panels at the same time. The vertical format allows for longer heading names and/or a larger quantity of panels, but consider the visitors' experience when using them:

• Sort related panels together in a larger set.
• In sets of many unrelated panels, such as a broad FAQ, consider using several smaller accordions grouped with headings by shared subjects. 
• Consider the effort to information value ratio in clicks. For example, if a visitor has to click open three accordions with just one sentence in each, it is an unnecessary consumption of their time. 

It's helpful to know the pros and cons of both methods to insert photos and make the best choice for each page.

In Editor

Using the Image tooltip of the editor you can place and align an image to have the text wrap to one side, such as the one here. 

Pros

• Longer text will wrap under the bottom of the image.
• You can control the margin size on all sides.

Cons

• It takes several steps to apply the alignment and margins.
• Images' width is fixed until it is full-screen, which can create an uneven balance with the text.

Pros

• Photo size is always responsive to the width of the containing column.
• Changing the location/proportion of the image is faster
• Margins are automatically applied.

Cons

• Longer text will not naturally wrap underneath the bottom of the image, but this can often be remedied by placing a full-width content element underneath the layout columns, as has been done here for the pros and cons portion of the text. 

It's more than just a pretty font.

Heading order is key to establishing a visual hierarchy. More importantly, it provides a critical underlying structure for screen readers and search engines. 

• Every page must have a Heading 1, or it fails compliance. 
• Headings should be applied sequentially as if you are outlining a paper. You shouldn't have a Heading 3 nested within a Heading 4.
• It is ok to periodically skip a level, so long as it is logical and consistent. For example, the tabbed sections of this page are each started with a Heading 3, display the tab titles, and then use Heading 5 to segment portions within each tab. 

Making your media content accessible to visually and hearing impaired visitors is a core requirement of the Americans with Disabilities Act and WCAG 2.1 compliance standards. 

Always Use Alternate Text

Alt text is different from caption text. It is descriptive text that explains what is in the image and is required for every non-decorative image on your site. It's also important to note that alt text should be literal, not contextual. For example, take a moment and picture the phrase "Best Friends!". Did you imagine this? It is unlikely that you did. While "Best Friends!" could be used as a caption to accompany the image, successful alt text will exactly describe the physical traits of what is in the image.

Always Use Closed Captioning

Attach a closed captioning (CC) text file to your videos as you upload them, or at a minimum, provide a link to a plain text transcript file. 

Do Not Overlay Text Within Media Files

Whether it be a button, photo, infographic, or video, formatting text within your media is non-compliant: screen readers cannot identify pixel-based text as separate from the image/video it is in. Instead, use live text that is overlaid on top of the image. 

Text included within an image is also problematic for visitors without screen readers: it may appear nice at full screen size on a laptop. But, what happens when that image goes from 800 pixels wide to 250 pixels on a smartphone? Can your visitors still read it? Most likely, they can't.

Clarity & Compliance

It is important to consider all of your visitors' needs and ability to understand what you want them to do and the key is to use descriptive or directive link text. Screen readers can provide a list of all links in a page, in sequential order. Imagine if content like this:

Learn more about our program, and click here to download our curriculum guide. To request an appointment, click here.

Was presented to you like this:

Learn more
click here
click here

Alternatively, we can present the same information in a way that offers clear, descriptive results for all visitors of what they can expect will happen when they click the links:

To learn more, visit our program page, download our curriculum guide, or complete our request appointment form.