Accessibility: Add Text to Show Solution Button

[openstaxalina]

Report received from the IT Dept of Lakeland CC:

The OpenStax site is pretty good, although 49 errors there are really only 3 issues, and if the “show Solution” button had the text on it that would really take care of 47 of them.

The requested change is to add text on the Show Solution button, as it appears in the Check Your Understanding features at the end of this module: https://cnx.org/contents/Ax2o07Ul@14.79:EC6WBNqn@10/1-2-Physical-Quantities-and-Units

[openstaxalina]

(Note for Alina to follow up with Nicole on the email thread "OpenStax Accessibility" when this is resolved.)

[wilkus27]

@openstaxalina I can't reproduce this issue. This is how it looks for me in College Physics (I used link from above)

It acts the same in Calculus on production (https://cnx.org/contents/i4nRcikn@5.2:-xC--8XH@10/The-Limit-Laws)

Also in the baked book on katalyst01 (https://katalyst01.cnx.org/contents/i4nRcikn@4.1:-xC--8XH@9/2-3-The-Limit-Laws)

Veryfied also on mac:

OpenStax CNX

OpenStax CNX

[openstaxalina]

@wilkus27 I ran Wave on this page and do still get the error. Wave says, "Place text content within the <button>element or give the <input>element a value attribute.".

What if we adjusted these buttons to take the form <button class="btn-link ui-toggle" title="Show/Hide Solution">Show Solution</button> as shown in this article?

[wilkus27]

@openstaxalina I analized it and I think that such solution can be done in content. I have found that adding aria-label attribute to <button> tag also can help. I tried to do this manually on the page and then run Wave. After that there were no more error in this place which I changed, but I don't know if it's a good solution. Attribute can be added in content or in JS, but I'm not familiar with that. @Adrianltd @helenemccarron please give me your thoughts, maybe there is another option to fix that problem.

[Adrianltd]

I think that adding aria-label is best for accessibility. It proably can be added with JS or recipes, but we still would need adding a class to that button in the content, so it will be much easier to just add that aria-label in the content. There is already aria-label="show-solution" and aria-label="hide-solution" added to the parent element, but button should also contain that label.