p5 editor link accessibility improvement #3550
Description
Increasing Access
Background and purpose
The p5 editor aims to be compliant at a AA standard with the WCAG 2.2 accessibility guidelines, which include many different dimensions of access, including access for color blind users.
This issue will focus on the links within the p5 editor and compliance with the 1.4.1 - perceivable: use of color guideline. This guideline states that “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.” This includes links.
The A11Y Project checklist item for links was also referenced, which states “Color alone is not sufficient to indicate the presence of a link. Underlines are a popular and commonly-understood way to communicate the presence of link content.”
I documented all of the links I could find in the p5 editor and how they were styled to indicate that they were a link. I discovered issues with contrast, which are outside the scope of this current issue, but will be documented in a separate issue about color palettes. This issue will specifically address making links perceivable without the use of color alone.
How to meet guidelines
Accessibility guidelines require that links are distinguishable as links without using color as the only means of communicating that information, but does not require a specific implementation to meet this guideline.
Each guideline comes along with examples of success and failure to meet guidelines. The two ways to distinguish links are through adequate color contrast (with both surrounding text and the background color) or by different non-color styling from surrounding text. Links must be perceivable as links through one of these methods by default (meaning not just when hovered over). Additional changes on hover can be nice from an aesthetic standpoint as long as they do not cause a link to become invisible to someone who is color blind.
For more information on these techniques, see Technique G183:Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them , F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision, and G182: Ensuring that additional visual cues are available when text color differences are used to convey information.
Most links on the editor page likely do not directly violate this guideline, as they are either not perceivable to anyone or use color with an appropriate contrast difference to surrounding text and the background. However, I would still recommend changing the link styling in addition to the color change. This will ensure usability for color blind users (and all users). Additionally, it will make it easier for all contributors to style components in compliance with accessibility guidelines, especially considering that there are three different color themes all with several colors that could reasonably be used for text and links but only some of which meet contrast requirements relative to one another.
Feature enhancement details
Summary of Recommendations
My recommendation overall is to change all links in the editor to be distinguishable without the use of color through using underlines, as this is the most used convention online. To maintain the style choice of adding an underline upon hover, my recommendation is to increase the thickness of the underline using text-decoration-thickness in the style sheets for links.
For each sub-issue I have included a specific quick and long-term recommendation. The quick fix does not decrease current accessibility and increases link differentiation from body text without the use of color, and the long-term fix addresses differentiating links from the background to make links truly color blind accessible, which would make sense to do as part of a full site color palette change.
Long-term, it may be worth having all links inherit the same default and hover behavior in terms of underlining. As a beginner to scss, I was not sure exactly how this would work!
Issue Findings
Overview
Overall, links are not styled consistently across different pages. Many links are not distinguishable as links until being hovered over causes a change in color. There is also inconsistency in hover behavior between similarly styled pages (sketches, collections, and assets). Many links are only distinguishable by color, and while they meet the surrounding text contrast requirement in some themes, they often do not have enough contrast with the background color for small text. I will address this in more detail in the contrast issue. Some links are distinguishable as links based on web design style conventions, such as being in the footer of a web page, but do not have any specific styling to make them appear as links otherwise without being hovered over.
1. Sketches, collections, and assets
In each of these pages, the links are styled the same as informational text such as the date created and uploaded. All text is the same size, color, and all non-underlined.
In the sketches tab, links change color on hover in all color themes (light, dark, and high contrast) to the accent color (pink or yellow).
Despite the assets page being styled the same overall as the sketches page, links do not change at all on hover for any theme. This example uses the high contrast theme.
On the collections page, links are styled the same by default as sketches and assets. Links only change color on hover in high contrast mode.
Quick fix recommendation: underline the links and increase the thickness of the underline on hover in all themes. Remove the color changes on hover outside of high contrast mode, as they do not meet contrast requirements on some of the backgrounds of the rows on these pages.
Long term fix recommendation: update the color palette so that the color of links meets contrast requirements on all possible backgrounds. Underline links and make them the link color by default, increase the thickness of the underline on hover.
Files in repository: _sketch-list.scss, _asset-list.scss. Unclear on where link styling is for collections (Seems to be from _placeholders.scss).
2. Settings: Library Management Tab
Links are positioned within the body text. They are the accent color of the theme and non-underlined.
There is a color contrast of 3:1 between link text and body text in light and dark modes, which meet the minimum AA standard for contrast, but the contrast between the link text and body text is only 1.4:1 in high contrast mode. This is illustrative of my point about how relying on color palette to differentiate links becomes complicated because there must be a text color, link color, and background color that all have high contrast relative to each other, instead of just worrying about text vs background contrast.
There are also issues with the contrast between link text and the background in light and dark mode.
Links become underlined on hover in light, dark, and high contrast themes.
Short term fix recommendation: add underlines by default and increase the thickness of underlines on hover.
Long term fix: Update color palette in light and dark mode to remove contrast issues between links and background and maintain underline behavior from the short fix.
Files in repository: _preferences.scss
3. About page
Links in the main body of the page are in a subheading position, bold, and a different color from the rest of the text. In light, dark, and high contrast mode, these links get underlined upon hover and turn a different color. The difference in color between default and hover is below the requirement of 3:1 in all themes. There are no contrast issues for this type of link with the background colors in any theme. One could make a case that the positioning of the links makes them obvious as links, but due to the use of bold text on other areas of the page, I would still recommend making them underlined by default.
Links in the footer of the page are styled the same in terms of size, font, and boldness as non-clickable text. Links are the accent color of the theme (pink or yellow). Upon hover, they become underlined in all modes, and in dark and light mode turn another color. There are contrast issues between the link color and the background in light and dark mode.
Quick fix recommendation: underline all links by default and on hover, increase the thickness of the underline and maintain the change in color in light and dark themes.
Long term recommendation: update the color palette to eliminate the contrast issues between the link color and the background color in light and dark themes.
Files in repository unclear. Seems to be from _placeholders.scss
Further work
There could be more in-depth work done to ensure that links are as accessible as possible for keyboard users, color blind users, and screen reader users. Some of these areas are:
- Clearly differentiating Links (external page redirection) vs buttons (action on same page) Button versus Link |Introduction to Accessibility
- Checking that hover links change style for keyboard-only users by using focus and not just hover: Making Hover Links Accessible: 4 Quick Tips, Focus! |Introduction to Accessibility
- Ensuring that links are all descriptive (meaning they say what page they are going to instead of an ambiguous message like “click here”) Link texts |Introduction to Accessibility