Skip to main content

Recommendations for Accessible Theme Blocks

Using Blocks

Theme Blocks provide a way to easily publish pre-formatted content on your pages. There are currently 19 theme blocks available in the Boise State University WordPress theme:

  • One (1) is for section navigation
  • Four (4) are considered “do not use”
  • The remaining fifteen (14) are available for page design and layout

Different fields in the theme blocks create headings on the page for users to better navigate your content.

We recommend the following tips to structure your theme block content using the default template. These recommendations also apply to other templates but vary slightly on the theme blocks template. For more details about using the Theme Blocks 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 theme blocks and follow best practices for design.

Demonstration Only

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

Section Navigation

The Section Navigation theme block can be added to the top of your page. Please review the Section Navigation page for details on configuring this block.

Do not use

The following are theme blocks that are considered Do Not Use for page design:

  • Categories
  • Tags
  • Event Categories
  • Hero

Instead, use the following 15 theme blocks to design and layout content on your pages.

Optional Accent Title

1. Card Grid Theme Block Title (h2)

Card Grid Block 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.

Add images to cards or select stroke or fill options in the settings. Additionally, adjust card layout, color, and padding in the settings.

Card Title (h3)

Card Title (h3)

Card Title (h3)

Card Title (h3)

2. Content Columns Theme Block 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 and adjust padding 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 Content Columns Theme Block must be unique to avoid accessibility errors.
  • Images must have a brief alternative description to describe purpose and function.
  • If images are 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 Content Columns theme block must be unique to avoid accessibility errors.
  • Images must have a brief alternative description to describe purpose and function.
  • If images are 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 Content Columns theme block must be unique to avoid accessibility errors.
  • Images must have a brief alternative description to describe purpose and function.
  • If images are purely decorative, leave both title and alternative text fields blank.

3. Countdown Theme Block Title (h2)

0
Days
0
Hours
0
Minutes
0
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.

4. Events Feed Theme Block Title (h2)

Content goes here. We do not recommend adding additional heading levels here. Keep text content brief. If adding featured images to the original event posts, include alternative text describing the event, not the image.

Dec 10, 2024: Gravity Forms Basics

Dec 10, 2024: LTS Help Session (virtual)

Dec 11, 2024: LTS Help Session (virtual)

Dec 12, 2024: LTS Help Session (virtual)

Dec 13, 2024: LTS Help Session (virtual)

5. FAQs Theme Block Title (h2)

Headings – Section Title (h3)

About Headings in Items- Item Title (h4)

Item content goes here.

Consider Adding Multiple Items – Item Title (h4)

Consider adding multiple items within a section to create heading structure instead of adding headings within item content.

Heading Levels – Item Title (h4)

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 Theme Blocks (h4)

Links in FAQs Theme Block should be unique to avoid accessibility errors. Names of sections in this panel should also be unique as they display on the “jump to section” area and display as a link on the page.

Images – Section Title (h3)

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.

Tables – Section Title (h3)

Using Tables within FAQs Blocks (h4)

Tables can be used withing FAQ blocks, but they must be reviewed for accessibility to ensure they are accessible on different screens.

Caution: Using Tables within the FAQs block may result in a poor user experience on mobile devices.

Keep tables simple, or use list items to group like content.

Using Multiple Theme Blocks – Section 4 Title (h3)

About Using Multiple FAQs Blocks – Item Title (h4)

We do not recommend using more than one FAQs Theme Block on a page.

Doing so creates accessibility errors for web users and you may be asked to remove the additional FAQs Blocks from your page.

7. iFrame Embed Theme Block Title (h2 and iFrame title description – do not leave blank)

Optional Accent Title (not a heading)

8. Image and Text Block 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 image layout, background color, and padding in panel settings.

Label is link text for text block should be unique and descriptive
Add brief alternative text description to the image properties and add an optional caption to the Image Caption field. (image caption)

9. Interstitial Theme Block 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 block. Adjust the layout options by reviewing the block settings.

Label is link text for interstitial theme block should be unique and descriptive

10. News Feed Theme Block Title (h2) recommend turning off excerpt in settings

New Accessibility Website Offers Comprehensive Resources and Information for Our Boise State Community
New Boise State WordPress Theme Editor Coming October 22
New WordPress Classes Scheduled for October – December
WordPress Gutenberg Blocks: Pre-Migration Spotlight

11. People List Theme Block Title (h2)

Description for people list goes here. Can be left blank. If you do add content, keep it brief.

  • 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.

    Adjust layout (one or two columns) and padding in settings. Note: Two column setting does not display the person description.

    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.

    Adjust layout (one or two columns) and padding in settings. Note: Two column setting does not display the person description.

Description of your stats goes here. We do not recommend using additional heading levels. Keep content brief. Adjust the background and card column layout in settings. Add stats using Add Stat button.

We do not recommend adding hyperlinks to the description field. Depending on the color of the background you select, adding hyperlinks could add contrast errors to your content.

# (h3)

7 character limit for stat, 78 character limit for description

# (h3)

7 character limit for stat, 78 character limit for description

# (h3)

7 character limit for stat, 78 character limit for description

# (h3)

7 character limit for stat, 78 character limit for description

13. Tabs Theme Block Title (h2)

Column Heading (h3)

We recommend the same heading 3 as your Tab Label at the beginning of each tab to help with accessibility and navigation. If additional headings are required, use heading level 4-6 in order. Content columns can be added as well and should start with either heading level 3 or 4, depending on your content.

Links (h4)

All links and images provided in tabs must meet accessibility requirements. This means links must be unique and images require alternative text that briefly describes the purpose and function of the image. For guidelines on using Tabs and how to configure them visit Tabs Block.

Tables (h4)

Caution: Using Tables within tabs may result in a poor user experience on mobile devices.

Multiple Tabs (h4)

We do not recommend using more than one tab block on a single page. This can create a difficult user experience for some users.

Optional Accent Title (not a heading)

14. Video and Text Theme Block Title (h2)

Content goes here. We do not recommend adding additional heading levels here. Keep text content brief. Adjust background color in block settings.

Note: Add a brief description about video accessibility and consider adding the transcript to a Details block following the video block or adding to the end of the page or linking to a new page with the text transcript.

Example: Video contains closed captions and a text transcript is available on this page following the video.

Video Transcript: Hunting Dust Devils

[Brian Jackson, Assistant Professor, Physics Department]: Dust devils are able to lift dust even when they shouldn’t be able to. The same thing is true for dust devils on Mars, and so we’re out here on The Alvord Desert to probe active dust devils and try to understand one: how they lift dust so easily into the atmosphere for the earth and then from that try to understand how they lift dust so easily on Mars.

Although dust devils have been studied for centuries even going back to the ancient Greeks, people have been thinking about dust devils and trying to puzzle them out. We still don’t really understand how they work and the way we’re trying to probe these dust devils is to actually fly instrumented drones through the active dust devils so the drones have a variety of different instruments on them including pressure and temperature loggers.

We also try to collect dust from the active dust devils so we have these sticky pads that we’ve cut up and put on the drone and so as the drone flies through the dust devil, the hope is that it will actually pick up some of the dust while making measurements of the physical properties of the dust devil and so we’re hoping to piece together what the physical properties are of the dust devil and how much dust that allows the dust devil to lift.

This is the only study that I’m aware of actually using drones to probe dust devils. Folks have done field studies of dust devils for decades, but it’s only in the last several years that we’ve had instrumentation that’s actually small and robust enough that we can stick it on a small drone and fly it through a dust devil.

[Nick Ellett, Masters Student, Geology Department]: My sort of sub-discipline within geology is called geomorphology which is the study of earth’s surface processes and so wind process like dust devils definitely fit in that category and just overall geomorphologists are interested in studying how the earth’s surface changes due to geological processes such as erosion, etc.

So the sort of mechanism of how these dust devils are working out on the playa and the existence of the playa in the first place are some overlaps between Brian’s physics-based stuff and our geoscience.

[Brian Jackson]: Why are we driving three hours out to the middle of nowhere to come study dust devils? They’re just really fascinating phenomenon.

If you look at almost any picture of the surface of Mars, very often you’re going to see dust devils towering over the surface casting these enormous shadows so they play a huge role in the climate on Mar and so if we can understand them out here in the desert on the earth, it really helps us to understand how Mars works.

This is a good example of what’s called comparative planetology where we use our understanding of one planet to try to understand another planet where it’s a little more difficult to go out into the field say and study the dust devils directly.  

Back to Top Button

If your page is particularly long, you can select the “Back to Top” button options on the page settings.

Back To Top