Skip to main content

Recommendations for Accessible Panels

Using Panels

Panels provide a way to easily publish pre-formatted content on your pages. There are currently 15 panels available in the Boise State University WordPress theme. Different sections of the panels create headings on the page for users to better navigate your content.

We recommend the following tips to structure your panel content using the default template. These recommendations also apply to other templates but vary slightly on the panels template. For more details about using the Panels template, please see Page Templates to review our recommendations.

We provide tips in parentheses about how the content appears on the page for end users. For example, as a heading (h2) or hyperlink (link). This can help you review the accessibility of your content. We also provide links to additional resources on how to configure panels and follow best practices for design.

This page is for demonstration purposes only. Contact the OIT Web Accessibility Team at OITAccessibility@boisestate.edu if you have any questions.

Optional Accent Title (h2)

1. Image and Text Panel Title (h2)

Content goes here. We do not recommend adding additional heading levels here. Keep text content brief. Add a short alternative text description in the “Alt Text” field in the Add/Edit Media window. Adjust the layout and background color using the panel settings.

Label is link text for text panel should be unique and descriptive

2. WYSIWYG Editor Panel Title (h2)

Content goes here. We do not recommend using additional heading levels here. Keep content brief. You can add column borders in the settings. Add up to three columns of content. Turn column boarders on or off in the panel settings.

Column One Heading (h3)

We recommend using a brief heading at the beginning of each column to help with accessibility and navigation.

Any links in the WYSIWYG Editor Panel must be unique to avoid accessibility errors. Images must have a brief alternative description to describe purpose and function. If purely decorative, leave both title and alternative text fields blank.

Column Two Heading (h3)

We recommend using a brief heading at the beginning of each column to help with accessibility and navigation.

Any links in the WYSIWYG Editor Panel must be unique to avoid accessibility errors. Images must have a brief alternative description to describe purpose and function. If purely decorative, leave both title and alternative text fields blank.

Column Three Heading (h3)

We recommend using a brief heading at the beginning of each column to help with accessibility and navigation.

Any links in the WYSIWYG Editor Panel must be unique to avoid accessibility errors. Images must have a brief alternative description to describe purpose and function. If purely decorative, leave both title and alternative text fields blank.

Optional Accent Title

3. Card Grid Panel Title (h2)

Card Grid Panel Description content goes here. Keep text content brief. Card Grid Titles are heading level 3 and any links provided in the card grid label must be unique. For example, using “learn more” as all card labels creates accessibility errors on every card. You can also leave the label field blank.

If you use images as your cards you must include a brief alternative text to describe the purpose and function. In this case, the purpose and function is to open a new page. We recommend using the name of the page you are linking to as your alternative text. List your description in both the title and alternative text fields.

Card Title (h3)

Card Title (h3)

Card Title (h3)

Card Title (h3)

4. Categorized Searchable List Panel Title (h2)

About Headings in Panels - Item Title (h4)

Item content goes here.

Headings in Items (h5)

If using headings within items, start at heading level 5. If content in an item is lengthy, headings are recommended to improve accessibility and readability of content or you can create additional sections to break up the content with section headings.

Additional headings in items (h6)

If you need another heading underneath heading 5, use heading level 6. Keep in mind however, heading level six should be used sparingly. Consider adding another item or section instead.

About Links in Panels (h4)

Links in Categorized Searchable List Panel should be unique to avoid accessibility errors. Names of sections in this panel should also be unique because they display on the “jump to section” area and display as a link on the page.

About Images in Panels (h4)

Images in the searchable list panel require an alternative text description that briefly describes their purpose and function. If description is longer, consider adding a caption as well to provide additional content.  The alternative text is only visible when the image is not while the caption is available for all users. For more tips and information about using images and alternative text see Webguide: Image and Media.

About Using Multiple Searchable Lists - Item Title (h4)

We do not recommend using more than one Categorized Searchable List panel on a page. Doing so creates accessibility errors for web users.

5. Tab Panel Title (h2)

6. People List Panel Title (h2)

Description for people list goes here. Can be left blank.

  • Portrait photo icon

    Person Name (h3)

    Optional Job Title (h4)

    Person description goes here. If using headings in the description, we recommend either heading 4 (h4) or heading 5 (h5). If using image, add the name of the person to the “Alt Text” field in the Add/Edit Media window.

    Person description goes here. If using headings in the description, we recommend either heading 4 (h4) or heading 5 (h5). If using image, add the name of the person to the “Alt Text” field in the Add/Edit Media window.

8. iFrame Embed Panel Title (h2 and iFrame title description - do not leave blank)

Optional Accent Title

9. Video and Text Panel Title (h2)

Content goes here. We do not recommend adding additional heading levels here. Keep text content brief. Adjust background color in panel settings. If using optional video thumbnail image, we recommend leaving the alternative text and title fields blank. All videos require captions, audio descriptions, and transcripts.

If the image is decorative, leave title and alternative text fields blank otherwise provide a short alternative text description in both fields. (image caption)

10. Interstitial Panel Title (h2)

Content goes here. If using heading levels, start with heading 3 but keep overall content brief. We do not recommend using the interstitial panel as your first panel. Adjust the layout options by reviewing the panel settings.

Label is link text for interstitial panel should be unique and descriptive

11. News Feed Panel Title (h2)

Tips for Monitoring Your Website
Escalate Your Events to the University Events Calendar
Inclusive Design for Social Media and Email
In case you missed it: Digital Equity for your Website

13. Countdown Panel Title (h2)

Days
Hours
Minutes
Seconds

Content goes here. We do not recommend adding additional heading levels here. Keep text content brief and include the date for the countdown either here, in the title, or the accent title. You also can include a Countdown Complete Description for when your countdown is over.