kjays
commented
6 years ago The following feedback comes from here: https://www.drupal.org/project/drupal/issues/2904243#comment-12353721
(We may have improved / fixed some of the following already)
I will start a v3 of the Styleguide PDF to tackle specific items where the styleguide makes good sense to lay it out and then update the issue here accordingly.
Thank you Andrew Macpherson!
- H5 and H6 are indistinguishable visually
- Link styles need work, for consistency and clarity. I'm not keen on the dotted link underline. A solid underline is a clearer indication of a link; dotted underlines are variously used for , , keywords, and who knows what else. The difference between dotted underline and solid underline my be lost on users with blurry vision, which in turn makes the focus style a borderline failure of use of colour. I should file an issue for this in Bartik too.
- Elsewhere, links inside sentences have different styles. In the status messages, there is no underline, and the links are presented in italics. Technically this does not rely on colour alone to distinguish the links, but an underline would be clearer. Itallics are a different shape, but an underline is an additional shape. A reader with colourblindness and dyslexia may have trouble perceiving links in the status messages.
- In the styleguide, I'd like to see examples of links in all of the specimen blocks of text. Example: blockquotes have a beige background. What if a block quote has a link inside, will it have sufficient contrast? Likewise links inside photo credits, recipe steps, etc.
- Still need focus styles for buttons, currently rely on colour change only. (Can't recall whether the styles sheets are suppressing user agent defaults or not.)
- A text input focus style would be nice, e.g for the search form block.
- The message status (error, warning, info) are currently distinguished by colour alone. Icons would be the easiest solution here. I really like the full-width background, that could help draw attention to the message area.
- The way the main nav uses tansparent bottom borders, is likely to break in windows high contrast mode. color: transparent is overridden, so all items will be underlined. I should test that for real. On a positive note, there are very few instances of the transparent keyword in the CSS, so we're off to a good start here with Windows High Contrast themes :-)
- Icons may need text alternatives, but it depends where they get used.
- The SVGs in the patch have elements. Note text alternatives should be translatable. For standalone SVGs which can be reused, isn't the best approach for text alternatives, which need to vary in context.
- Something really confusing: there's a form_alter which adds
.visually-hiddento the search form submit button. For a sighted keyboard user the button will be operable, but not perceivable. Could also cause difficulty for touch screen users, speech control, or users who input text with something other than a keyboard. A visible button is safer. - The burger-menu clearly needs work; I can see the button is commented-out in the template just now. The menu button is probably best created by JS, because it's serves no purpose without JS.
fuzzbomb
lyndsey
cehfisher
We got some accessibility review on slack from Andrew Macpherson. I suggest to add all related feedback here and create small and actionable related issues to fix or discuss each of them.