Skip to content

Add Screen Reader Only Text to the Insert Link menu for Accessibility WCAG 2.4.4 (Link Purpose)聽#11253

Description

@padarr

馃摑 Provide a description of the new feature or improvement

When using the Wave Tool I encountered the problem of a Phone number link failing because it didn't have any instructional text associated with it. Tiny MCE is included in the CMS Terminal Four and as an Admin I have access to the option for "Source Code" and can easily add the needed text. However, the problem that occurs is that a contributor that should not have access at the code level, doesn't have a way to enter the extra sr-only text. Adding a Screen Reader Only Text field with the option to make it pre or post or possibly both a pre/post option OR aria-label text field in the Insert Link tool menu can solve this providing a contributor the ability to include instructional text for use by screen readers.
<p>Phone <a href="tel:+18005550199"><span class="sr-only">Call </span>800-555-0199</a>.</p>
Without the sr-only span, when a user is tabbing to the tel link it only reads the number and not the surrounding text so it sometimes will show as an alert in the WAVE tool to provide instruction text.
Alternate way is using ARIA-Label
<a href="tel:+18005551999" aria-label="Call Company Name at 800-555-1999"> (800) 555-1999</a>
But the Insert Link option doesn't allow this without opening up access to Source Code

馃 What is the motivation?

Fixing the Accessibility issue for myself and others. Without the sr-only span OR aria-label when a user is tabbing to the tel link it only reads the number and not the surrounding text so it sometimes gives an alert in the WAVE tool to provide instruction text. It's strange because this doesn't always seem to get caught by the tool and other times it does.

馃敆聽What is the consequence of not having this feature?

The WAVE tool flags this because it is checking for WCAG 2.4.4 (Link Purpose). WAVE flags raw phone numbers as an "Alert" or structural note because a automated scanner cannot guarantee that a screen reader user will know what the number is for or who it connects to when tabbing through a list of links.
Non-descriptive links and accessibility issues primarily violate WCAG Success Criteria 2.4.4 Link Purpose (In Context) or 2.4.9 Link Purpose (Links Only) rather than 1.3.1 or 4.1.2, though they frequently intersect with 1.3.1 Info and Relationships and 4.1.2 Name, Role, Value when links are custom-coded widgets or lack proper semantic

馃殾聽How important would you rate the requested feature or improvement?

An argument can be made for all three categories nice-to-have, important or critical.
Nice to have: Opens it up to contributors being able to maintain in a CMS usage case.
Important: Helps with accessibility requirements.
Critical: It's an Accessibility Compliance issue, however there is a technical way to do this, the people maintaining content in the CMS cannot regularly do this without source code level access.


If you'd like to see this implemented sooner, add a 馃憤 reaction to this post.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions