search

w3c / coga

Cognitive and Learning Disabilities Accessibility Task Force deliverables
Other
67 stars 28 forks source link

Icon text alternative is not accessible #353

Open garethslinn opened 4 days ago

garethslinn commented 4 days ago

Request for Code Update

Context

To enhance the accessibility of the document for screen readers, particularly focusing on how icons are described. This change is intended as a guide to improve the user experience for visually impaired users.

Issue

The 'start here' icon contains graphic text that is not accessible to a screen reader. Due to the method of implementation i.e. css background we can approach this with minimal disruption.

Current CSS Implementation

#user_needs section.objective:nth-of-type(1) h3::before {
    content: url(img/StartHere.svg);
}

Suggested enhancement

#user_needs section.objective:nth-of-type(1) h3::before {
    display: inline-block;
    background: url(img/StartHere.svg) no-repeat;
    background-size: contain;
    content: "Start Here: "; 
    color: transparent; 
}

Note

This works well in VoiceOver however it may require some adjustment and rigorous testing on different platforms.