WCAG 1.3.1 — Info and Relationships — List Not Marked Up As List

Who Is Affected

Screen reader users who rely on list navigation shortcuts to jump between list items, skip over lists, or get a count of items. Users of voice control software who navigate by saying "click list item 3" or similar commands.

What This Means

When content is visually formatted like a list (with bullets, numbers, or line breaks) but isn't coded with proper HTML list tags, assistive technology can't identify it as a list. Screen readers won't announce "list with 5 items" or allow users to navigate item by item using list-specific keyboard shortcuts.

This commonly happens when content creators manually type bullet characters (• or -) or use line breaks instead of using the list formatting buttons in their content editor. The visual result looks correct, but the underlying code is just paragraphs or plain text.

Fix: Content Editor

Most list markup issues can be fixed by content editors without technical knowledge:

1. Identify the problem content — Look for text that appears as a list but uses manual formatting:

   • Lines starting with typed bullet characters (• - *)
   • Numbered lines typed manually (1. 2. 3.)
   • Related items separated only by line breaks

2. Select all the list content including any manual bullet characters or numbers.

3. Remove manual formatting:

   • Delete any typed bullet characters or numbers
   • Remove extra line breaks between items

4. Apply proper list formatting:

   In WordPress Classic Editor:

   • Select the text
   • Click the "Bulleted List" or "Numbered List" button in the toolbar

   In WordPress Block Editor (Gutenberg):

   • Convert the paragraph block to a List block
   • Or type /list and select "List" from the menu

   In Joomla:

   • Select the text
   • Click the "Insert/Remove Bulleted List" or "Insert/Remove Numbered List" button

5. Review the result — Each item should appear as a proper list item, and the HTML source should show <ul> (unordered) or <ol> (ordered) tags with <li> items.

Fix: CMS / Theme

If list styling appears incorrect after applying proper markup:

1. Check your theme's CSS — Some themes have poor default list styling that makes properly marked lists look broken.

2. Add custom CSS if needed:

   .content ul li {
     margin-bottom: 0.5em;
   }
   
   .content ol li {
     margin-bottom: 0.5em;
   }
   

3. Ensure list styles aren't being stripped — Some themes or plugins remove default list styling. Verify that list-style-type isn't set to none unless replaced with custom styling.

Standard Reference

WCAG 2.1 Success Criterion 1.3.1 — Info and Relationships, Level A

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

• W3C Understanding SC 1.3.1
• WCAG Technique H48 — Using ol, ul and dl for lists
• WCAG Technique G115 — Using semantic elements to mark up structure
• WCAG Failure F43 — Using structural markup in a way that does not represent relationships