Some bold links, when rendered on the site, do not have the link color that indicates that they are links. This makes them basically invisible, which is a major accessibility issue. This problem is shared across all site themes.
For example, the links in the instructions append for Space Age on the Python track, when rendered on the site here, look just like normal bold text and not links.
Screenshot
Here, the first four bold texts are actually links. The last link is an example of it rendering properly.
This problem seems to only happen when the bold characters in the markdown are inside the link title, rather than around the whole link.
For example, this does not render properly:
[**example link**][this-is-a-reflink]
While this does render correctly:
**[example link][this-is-a-reflink]**
(This one actually displays the same without the bold, as links have a greater font-weight that overrides the bold’s font-weight.)
There seems to be two possible fixes:
-
Once the Exercism staff are no longer busy, a staff member updates the site’s CSS so the links render properly.
-
Contributors manually fix the affected files. In this case, a note about this known issue should probably be added to the Exercism markdown docs.
I believe this is the preferred version for accessibility since it turns into
<a href="this-is-a-reflink"><strong>example link</strong></a>. The link text itself is being emphasized as semantically important, not the link itself.
1 Like
That makes sense; I hadn’t thought about that distinction. I suppose option 1 is the only correct fix then.
@SleeplessByte knows accessibility a lot better than me so he’ll know for sure.
1 Like
From a semantic HTML standpoint: yes strong has semantic meaning and it should “emphasize” content. You usually would add this to single words or word groups, not necessarily entire links, but it’s not “wrong” to add it to the entire link. It doesn’t really matter if it’s inside or outside, as far as I know (re-reading the spec).
From an assisitve technology standpoint: Many screenreaders have support for strong and will read things differently when used. It generally doesn’t matter if it’s inside or outside of the link – this is because those tools will look at the context the link is in if you focus them and it starts reading them aloud. This is needed because an outer element for example could define lang="nl", and if it skipped that on-focus, it would read the link in the default language (English).
Personally I think it should be
[**example link**][this-is-a-reflink]
3 Likes
