Opened 11 months ago

Closed 3 weeks ago

Last modified 2 weeks ago

#7146 closed enhancement (fixed)

underline links (in text widgets) in sidebar for accessibility

Reported by: travel_girl's profile Travel_girl Owned by: coffee2code's profile coffee2code
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 (12)

#1 @Otto42
11 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
11 months ago

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

#3 @Otto42
11 months ago

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

#4 @Travel_girl
11 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
11 months ago

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

#6 @Otto42
11 months ago

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

#7 @Travel_girl
11 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;


#8 @coffee2code
3 weeks ago

  • Owner set to coffee2code
  • Resolution set to fixed
  • Status changed from new to closed

In 13685:

Breathe: Underline sidebar links.

Props travel_girl.
Fixes #7146.

#9 @coffee2code
3 weeks ago

The Make/Accessibility team had already employed this styling change for their own site via "Additional CSS". Since this is now part of the theme, I've removed this site-specific style.

#10 @coffee2code
2 weeks ago

In 13694:

Breathe: Don't underline Handbook Pages widget links.

See #7146.

Note: See TracTickets for help on using tickets.