Ticket #11983 (reopened Bug)
Link styling for better accessibility
Reported by: | rmattb | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 5.0 |
Component: | Templates/CSS | Version: | 4.2 |
Keywords: | accessibility | Cc: | rmattb |
Description (last modified by rmattb) (diff)
Issue:
For Plone's default theme, hover of most links has substandard contrast, and content heading links aren't clearly styled as links. Though the theme will usually be customized, it should serve as a model of and starting point for good accessibility practice. The “read more” links bug #11982 depends on one aspect of these recommendations. Improvements to link styling can improve both accessibility and mobile usability. Specifically, these changes help users with low color vision, low vision, mobile use, outdoor / high ambient light use, low dexterity, one-hand operation, and touch / finger operation.
Recommendations:
- Light underline content heading links. The content inline link styles which utilize the light border-bottom instead of the underline decoration are wonderful. Extend this established pattern to content headings which are also links. Currently they are not underlined, giving no indication that they are links, other than color, which impacts users with low vision or low color vision. (Links in portlets, header, & footer are indicated as links fairly well by their position, and are not in need of this styling.)
- Invert link colors on hover or focus. Reversing foreground and background colors is widely regarded as a good practice for accessible link hover styling. It avoids indicating something by color alone, maintains your contrast ratio, and maintains your color palette, so you don’t have to choose another color for hover. The default top nav styling is like this to some extent. (For content area text, go ahead and keep the light border-bottom on hover, for consistency and as a secondary indicator.) This also meets the need to clearly show when a link has focus.
- Increase the clickable area of portlet targets. Use display: block for all links in portlets. Replace margins with paddings, except for ~1px margin.
- Increase the clickable area of breadcrumbs & site actions targets. Use display: inline-block with additional padding (0.25em, all sides).
- Increase content area default text size (0.85-0.9em would be nice).
WebAIM has a nice graphic summary of these approaches at http://webaim.org/resources/designers.
Attachments
Change History
comment:6 Changed 5 years ago by rmattb
This ticket was written regarding Sunburst. Plone Classic has other issues which are much less clearly solved.
Changed 5 years ago by birdie
-
attachment
sunburst_edits
added
Added content link underlines, and increased content font size.
Changed 5 years ago by birdie
-
attachment
classic_edits
added
Added content link underlines, and increased content font size.
Changed 5 years ago by birdie
-
attachment
sunburst_edits2
added
Increased clickable area of portal actions and breadcrumbs in Sunburst theme.
Changed 5 years ago by birdie
-
attachment
classic_edits2
added
Increased clickable area of portal actions and breadcrumbs in Classic theme.
comment:11 Changed 4 years ago by rmattb
- Version set to 4.1
Code for this in Plone 4.1 has been tested with JAWS, VoiceOver, and NVDA is at https://weblion.psu.edu/trac/weblion/browser/weblion/plonetheme.psuaccessiblesunburst/trunk/plonetheme/psuaccessiblesunburst/stylesheets/psuaccessiblesunburst.css
comment:14 Changed 4 years ago by rmattb
- Milestone changed from 4.3 to 4.x
Just found https://dev.plone.org/wiki/TriagingBugs , adjusting milestone.
comment:15 Changed 3 years ago by eleddy
- Status changed from confirmed to closed
- Resolution set to wontfix
This ticket has not been modified in over 9 months. In another brazen attempt to clean this tracker up, this is closed. If you really, REALLY care about this ticket, please re-verify that it is still an issue on the current supported releases (4.2 or 4.3) and reopen. Better yet, submit a pull request to fix the bug and then close the bug properly. We <3 you and all of your effort, but we can't go on like this anymore. I hope you aren't too mad and we can still be friends. Hugs.
comment:16 Changed 3 years ago by rmattb
- Status changed from closed to reopened
- Version changed from 4.1 to 4.2
- Resolution wontfix deleted
- Milestone changed from 4.x to Future
comment:17 Changed 3 years ago by rmattb
- Milestone changed from Future to 5.0
Changed milestone to next major version, due to theming backward incompatibility.