Multi-Column Text Component
The Multi-Column Text component allows you to incorporate 2 to 3 columns of text across a specific page. It also provides an organized method to display larger amounts of text, without taking up too much vertical space on the page. Similar to a Text Block component, you can incorporate Link Lists (both internal and external) and images.
See below for an example.
Two Column Example Heading link
Descriptive text placed above the columns will span across them, whether there are two or three columns. Each text column can include an image.
Text Column One
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque lacus, blandit at consectetur non, pulvinar et ligula. Mauris sollicitudin lectus porta neque fermentum ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nulla et luctus interdum. Nulla et elit eu quam porttitor consectetur. Phasellus eu porttitor metus, nec fermentum dui. Sed iaculis, arcu sed placerat ultricies, sem lorem placerat nibh, eget hendrerit justo libero sed nisl.
Duis et dolor ac risus vehicula commodo. Etiam at fermentum dui. Duis condimentum imperdiet pellentesque. Pellentesque at lorem a lectus bibendum rutrum. Suspendisse malesuada dui nunc, a egestas orci feugiat congue. Duis laoreet nisi non odio pulvinar, ut finibus lectus condimentum. Aenean mollis, magna vel fringilla molestie, velit mauris posuere sem, vitae hendrerit augue ante eget mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque lacus, blandit at consectetur non, pulvinar et ligula. Mauris sollicitudin lectus porta neque fermentum ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nulla et luctus interdum.
Text Column Two
Nam sed purus fringilla, cursus diam vitae, auctor sem.
Accessibility Requirements Heading link
Title fields
Titles are required in most components to comply with the rule that headings H1-H6 must be used before a section of content to describe its context. You may select the “Hide Title” option if you don’t want it displayed, however, a site visitor using a screen reader will hear those titles. This means they should be descriptive and unique. If you only enter “Title” for example, the user will hear “title, title, title,” etc. as they tab through your content blocks. They will have no context to know if that is information they should read.
Image Alt Text Fields
Alt text should describe the image for visually impaired users who visit your website and for those whose browsers block images. The text should give a brief description of the image. DO NOT USE phrases like “image of,” “picture of,” or “screenshot of” in your ALT Text. In addition, if you use images that have text in the image itself, that cannot be read by a screen reader. That text should be included in the alt text, a caption or other text near the image.
Link Text
Text links in your content should not use a URL as the link text. It should have meaningful text rather than using “click here” or “read more” Instead, use the page title or a description of the page where the link leads.
Link text that is in context with the content where it is pointing gives all users better information about the purpose of the link.
Users interact with links in various ways, including:
- Screen reader users can generate a list of links and navigate them alphabetically.
- Redundant or ambiguous link text such as “More” is meaningless in this context.
- Users of speech recognition technology can select a link with a voice command like “click” followed by the link text. Therefore it is also helpful to use unique link text that is short and easy to say.
- Users who don’t need assistive technology often skim and scan your content, a link that gives more context can prompt them to click through to the content they seek.
- Meaningful link text may often align with key terms or phrases used by people searching for your site. Using them for link text may improve your SEO.