An HTML Thematic Break or Line Break was detected
| Field | Value |
|---|---|
| Rule code | Manual_Html_Break_Detected |
| WCAG conformance level | A |
| WCAG success criterion | 1.3.1 Info and Relationships |
| Must be fixed at source | No |
Description
We detected an 'hr' or 'br' tag on the page that may have caused an unforeseen announcement to Screen Readers. Creating separation of paragraphs by using 'br' tags is bad practice and can be problematic because Screen Readers typically announce these elements' presence without explaining their content or purpose. While 'hr' tags are generally more accessible than 'br' tags, we recommend using proper CSS styling or semantic headings to separate content sections instead.
How to fix
For better accessibility, avoid using 'br' tags to create paragraph spacing or layout structure. Instead, use proper paragraph elements with CSS margins for spacing. When a visual separator is needed, consider using semantic elements like section headings to indicate content changes. If a horizontal rule is necessary, ensure your 'hr' element includes an appropriate aria-label to explain its purpose to screen reader users. Remember that visual structure should be created with CSS while HTML should focus on semantic meaning.