You can see Calum using his screen reader on this website >>>>>>
can be frustrating for screen reader users for a couple of reasons:
- Lack of Context: "Read more" itself doesn't provide much information about the content behind the button. Screen reader users rely on clear labels to understand what clicking a link will do.
- Redundancy: If the article title is already a link, having a separate "Read more" button creates repetition for screen readers, announcing the title twice.
Here are some better options for handling article excerpts and screen reader accessibility:
Remove "Read More" and Link the Title: This is the simplest solution. Make the entire article title a link, eliminating the need for a separate button. The screen reader will naturally announce the full title before activating the link.
Use ARIA Labels: If you must keep the "Read more" button for design purposes, add an ARIA label (https://www.w3schools.com/accessibility/accessibility_labels.php) to provide more context. The ARIA label is text hidden from sighted users but read by screen readers. For example, your button could have an ARIA label like "Continue reading: [Article Title]".
Or simply if it is aesthetically pleasing for sighted users just hide for screen readers - aria-hidden="true".
Expand/Collapse Functionality: Consider using an expandable/collapsible section instead of a "Read more" button. This allows users to toggle between a summarized view and the full article. Screen readers can clearly announce the expandable section and its current state (expanded or collapsed).
