The August date to meet the Digital Accessibility Policy is quickly approaching. So, the CALS/LAS Web Team is breaking down some of the most common accessibility issues and potential issues on Siteimprove to provide our website editors with a how-to reference for website accessibility improvements. Whether you are an accessibility pro or just joining the world of digital accessibility, this information can help you untangle the issues on your website! This blog post will not be inclusive of all issues possible on Siteimprove.
Need access to Siteimprove?
If your website is supported by the CALS/LAS Web Team but you are new to Siteimprove, you will need to submit the Request Access to Siteimprove Web Accessibility & Compliance tool form to the ISU Digital Accessibility team. Here's what you need to know to complete the form:
- Your departmental contact will vary by department.
- John VanDyk (jvandyk) is the technical contact for the website associated with the CALS/LAS Web Team.
- Web host is CALS/LAS IT.
- Content Management System (CMS) is Drupal.
Make sure the Siteimprove tile is added to your Microsoft Dashboard. If the Siteimprove tile is not there, Your Siteimprove Dashboard Explained can help you get it added.
A common question from folks who have been on Siteimprove is, "How do I dismiss falsely reported broken links?" That process has changed, and you will now need to email digitalaccess@iastate.edu to get broken links dismissed.
Fixing Siteimprove accessibility issues in this post will be broken down into accessible text content, images, tables, and color contrast.
Accessible Text Content
Issue: Headings are not structured
This occurs when the first heading in the body of the text is an H3. Properly using headings is addressed in the formatting pages with resources that are not formatting tools section of a previous blog.
Issue: Content missing after heading
This occurs when multiple lines are in the same heading format without paragraph text in between (see the screenshot below for an example of two H3 headings in a row). To fix this, make sure that your headings are followed by relevant text. Remember that the heading should introduce a section or topic; it is not just a styling tool.
Issue: Links in the same context with the same text alternative
We commonly see this issue when common phrases such as "Read more," "Here," or "Learn more" are linked on a page more than once. Incorrectly linking text is addressed in a previous blog post. This issue specifically refers to using the same text phrase when linking to two different websites To fix this, change the link text from “Read more” to unique text that reflects what the link will provide to your audience.
(1) "Go here to learn..." is in H3 text without any paragraph text in between.
(2) "Here" is linked for both scholarships, but the links go to different pages.
Issue: Empty headings
This issue is commonly caused by someone creating a line break (hitting enter) when they are in "Heading 3" or "Heading 2" format. This is identifiable when an empty line shows a vertical red text bar, and the editor toolbar reflects a heading text selected, as indicated in the blue boxes in the image below. To fix this, change the line break text format from Heading 3 to “Paragraph.”
- Tip: This issue is frequently observed when a line break (icon in the red box) would be beneficial. Try using the line break button if your intention for the extra line break was to keep content or images from overlapping between sections.
Accessible Images
Issue: Image missing a text alternative
All of the images on your website need alternative text, even if you've put a caption on them. This will help visitors using assistive technology and those with slow internet. Identify the images that are missing alternative text and add a descriptive reference by clicking the eye icon on the image.
Issue: Link missing a text alternative
This typically happens when a link has been added to an image. That image is either marked as decorative or alt text is missing entirely. A less common occurrence that causes this issue is when a link includes a space before or after the linked text.
Properly linking text is addressed in the missing alternate text on images section of a previous blog. The information provided in that blog post will assist you in correcting both of the previous issues.
Issue: Image file name is not an appropriate text alternative
You may review the potential issue "Is this image file name an appropriate text alternative?" that, if affirmative, will lead to this issue. This indicates that the image file name was used as the alt text, and the file name was not appropriate to serve as the alt text. To fix this issue, update the text alternative to be descriptive and unique.
Accessible Tables
Issue: Table cell missing context
The table is likely missing the header row or header column. To fix this, add a header section to your table.
Issue: Container element is empty
The table likely has a photo in it, or the header row or column is missing in a complex table.
Photos rarely belong in tables, and our platform likely has an image alignment option that lets you format your images without using a table!
Issue: No data cells assigned to table header
A table was used to format groups of text, and all of it is contained in a header row. Tables should be used for tabular data only, not layouts. For improved layout options contact websupport@iastate.edu for support.
Table tutorials to help address these issues
- Create Accessible Tables Using These Five Tips
- CALS/LAS Web Team Table tutorial
- Web Accessibility Initiative Table tutorial for complex tables
Accessible Color Contrast
Potential Issue: Is there a minimum contrast ratio between the text and background? (AAA issue)
This potential issue appears for each website. It wants you to review certain background colors and the text colors over them to ensure there is a certain level of contrast between the two. The AAA-level issue is caused by some components of the iastate22 theme, and we cannot fix those at the moment. However, if you have this issue in the AA-level issue section, please reach out to the CALS/LAS Web Team to have us review the content.
Follow the video tutorial above. Once the background color is in place, you should be able to refresh the page to clear the potential issue, or if you have a large number of issues, you may need to select all of the pages and then select “Update Results” to clear out the potential issue quickly.
Have additional issues or questions?
We are happy to review additional issues associated with your CALS/LAS Web Team-supported website! Reach out to our team at websupport@iastate.edu.
Websites that have not been updated to the iastate22 web theme will have additional issues; however, intense efforts are being put toward finishing the migration and theme updates of the remaining CALS/LAS Web Team-supported websites.
Note: As of the publishing date of this blog, the Siteimprove issue, "Page does not start with a level 1 heading," for websites hosted by the CALS/LAS Web Team, can be disregarded. This is an issue being addressed by our web team and the ISU digital accessibility team.
The Digital Accessibility Team is available to you for further accessibility questions. Contact them at digitalaccess@iastate.edu.