Opened 5 months ago

Last modified 5 months ago

#7146 new enhancement

underline links (in text widgets) in sidebar for accessibility

Reported by: travel_girl's profile Travel_girl Owned by:
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: needs-patch has-screenshots needs-design


Team Blogs under are having a sidebar. The links in the widgets are not underlined.

For some widgets, thats fine, because the links are stand alone links and don't need to be underlined.

But they are widgets, where links and texts are together and links don't have a visual indicator beside the color, that they are links and not text.

See screenshot.

Attachments (2)

Change History (9)

#1 @Otto42
5 months ago

They're not supposed to be underlined. That's part of the theme design.

The style.css explicitly has this in it: a { text-decoration: none; }

#2 @Travel_girl
5 months ago

@Otto42 but in this way it is not accessible, so it should be changed, or?

#3 @Otto42
5 months ago

What do you mean that it's not accessible? Please define "accessible" for this purpose.

#4 @Travel_girl
5 months ago

@Otto42 information and functions are not allowed to be signaled only by color, cause color blind people are likely to miss this information.

because of that, links need an additional design like underlined or border-bottom-styles. Othersie color blind people can't see, that there is a link.

For stand alone linkes like menu or post meta, its okay, as it is clear by there position that it is probably a link. but when there is text around, it is not clear.

I attache a screenshot in black and white. Its hard to spont the links in the text.

#5 @Travel_girl
5 months ago

BTW: 8% of all men are color blind, so this should be improved

#6 @Otto42
5 months ago

  • Keywords needs-design added
  • Type changed from defect (bug) to enhancement

#7 @Travel_girl
5 months ago

for consistency I would go with the same code as the links in the content, which is:

.entry-content p a, .comment-content p a, .entry-content li a, .comment-content li a {

text-decoration: underline;


So maybe:

.textwidget a {

text-decoration: underline;


Note: See TracTickets for help on using tickets.