Icon text alternative is not accessible

[garethslinn]

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.

[lseeman]

flag for testing to @eric

[ehind67]

@ehind67 to test

[ehind67]

The icon in this case is really just decorative and there would be minmal value in providing screen reader text. The other icons in the Summary do not have focus or screenreader text.

Propose closing as working as intended.

[ehind67]

Reassigned to @lseeman to OK before closing.
@julierawe This summary may not exist in the new Content Usable anyways?