Accessibility and inclusion: Using content features for their intended purpose
Web accessibility has always been a requirement for UMaine websites, and has been a regular feature in our monthly newsletter— and ensuring your content is accessible is part of an inclusive communication strategy. This month, we focus on how different website features should be used for their intended purpose
Heading tags
A well structured page will have headings that help the reader scan the page and find the section of content that is of interest. It is always a good idea to have an “h2” style heading at the top of content pages, but home pages and landing pages that are showcasing the important areas of your site do not necessarily need to adhere to a strict heading structure.
What to avoid: try not to use heading styles on paragraphs of text, and avoid using headings out of their intended hierarchy. If you have a message at the top of a page, it is better to create it as bold text.
For more information about headings, please see our October 2019 article.
Tables
We rarely see tables being used for page layout purposes these days, our “content blocks” page building system is understood to be more mobile-friendly, and the upcoming Gutenberg page editor will be an improvement for page editors.
However, even properly built tables used for their intended purpose can pose problems for our website when viewed on mobile devices— and Google gives importance to how website content behaves for mobile and tablet users. For this reason, it is best to avoid using tables altogether unless the table is 3 columns or less.
What to avoid: Do not use a table for your content if it will not be fully visible when viewed on a mobile device. An easy way to check for this is to narrow your web browser window as much as possible, and check to see if the table can fit in that narrow width. If some of the table is cut off to the right margin, that content is unavailable to mobile users (you cannot scroll sideways to see more of the table).
For more information about tables, please see our June 2019 article.
Images
All images that are displayed in your content should have an understandable text alternative, also known as “alt text.” This can be as simple as “portrait of Jane Smith” for a photo of Jane Smith, or as complicated as necessary to describe everyone in a group photo.
What to avoid: Do not use images of text rich content, such as tables, flyers, or documents. It is much better to recreate this content in a way that the text is understandable to a screen reader, and in the case of complicated tables, a download of the table file or a link to an online-hosted version of the table (such as Google Sheets or Microsoft Excel in Office 365) is preferable over a PDF copy of the information.
For more information about images and alt text, please see our September 2018 article.
Blockquotes
Our website gives a shaded box treatment when using the blockquote style, and Digital Communications has at times advised to use this feature to help call attention to text on a page. While this is our preference over using a heading style to make text larger and colorful, web accessibility best practices tell us that blockquotes should only be used for quotes.
What to avoid: If you are simply using the blockquote feature to create a shaded box around your content, consider changing to the new “call to action” shortcode, mentioned in this October 2020 article. It is a better solution for pages that are using this element improperly.
If you have any questions about web accessibility, or want to see us cover an accessibility topic in a future newsletter, please get in touch with us at um.weboffice@maine.edu.