The Cover Block offers an accessible solution for displaying text over an image. Unlike embedded text in JPEG or PNG image files, which screen readers cannot interpret, the text within a Cover Block is fully readable by screen readers, ensuring inclusivity for visually impaired users.

1 – Where Do I Start?

There are two ways that you can do a Cover Block:

• Adding text to an image block
• Selecting the Cover Block icon

2 – Adding Text to an Image Block

Add the Image Block to the webpage and upload an image to WordPress or select an image from the Media Library.

Click on the Add Text icon in the toolbar.

This turns the image above into a cover image:

NOTE: The cover image will take up the whole width of the viewport. The row layout will need to be used if the image needs to be a smaller size.

Heading and paragraph blocks can be used in the Cover Block. You can now insert a heading or paragraph block in the cover block. Remember to use the correct heading structure so accessibility guidelines are met.

3 – Using the Cover Block

Type your desired heading and paragraph blocks in the Cover Block.

4 – Finished Product

The finished product using step 2 makes the heading block bolded as default while the finished product using step 3 does not bold the heading block.

Accessibility Tips

• Use minimal text in the Cover Block image.
• Cover Block images are unable to be converted into a featured image for the page.
• Ensure that the foreground and background colors have enough contrast in them with the opacity overlay.

Disclaimer

As a public university it is crucial to ensure our information is accessible to everyone that visits our websites. To assist content owners in this effort, UTIA has created certain boundaries within the UTIA WordPress environment. These boundaries are designed to help content owners from inadvertently violating established accessibility standards. Therefore, instructions at external websites may show features that we have disabled.