Problem/Motivation

Theme screenshot alt-text and theme descriptions need improved text (and perhaps standardization) to provide more detailed explanations of the features supported by the theme (especially for non-sighted admins).

Proposed resolution

Several variations have been proposed - #922696: Follow-up: New methods, standards for describing core themes on themes admin page (was Theme screenshots do not have adequate alt text...) - such as:

The default administration theme for Drupal 8 was designed with clean lines, simple blocks, and san-serif font to emphasizes the tools and tasks at hand.

vs

A single-column, monochromatic theme, used for site administration.

Remaining tasks

The issue itself requests more than just improved descriptions:

two things in the .info file
standardized alt text for the screenshot
tagging for the core themes such as uses the color module, responsive, fixed width, 3 column

In addition see
comment #31
"If we're thinking long term, here's my proposal of an ideal classification for the core themes. I see several issues coming out of this:

description: (existing property) Describes the purpose, stylistic characteristics, and design philosophy of a theme, in 2-3 sentences. I think that Jen's proposed text for Seven is the best example of this.
alt text: (new .info property) Alt text for the theme screenshot - describes what the screenshot looks like, as per Everett's original request.
tags: (new .info property) Tags would match up with a new taxonomy vocabulary for themes on Drupal.org. If you clicked on a particular tag, then a lightbox would show up with Drupal.org download links for themes that matched that tag (i.e., like how things work for installing themes in WordPress). This would mean that you could click single-column, monochromatic, recolorable, multi-column, fluid, fixed, etc. and see what other themes had that characteristic.
Preview button: Each theme would also have a preview button that you could click that would be somewhat similar to "Demonstrate block regions" by switching your site into the given theme, with a back link that would take you back to themes administration. This would, I think address Bojhan's concern that we want people to actually try out themes.
Obviously, this is an ambitious plan, but we have a whole release cycle to make it happen. If only 2 parts end up getting implemented though, I would have it be points 1 & 2, since that would be a relatively easy fix and would address the accessibility issue, while at the same time improving the theme descriptions.

User interface changes

(see above)

API changes

n/a

n/a

Original report by Everett Zufelt

On /admin/appearance there is a list of all Core themes. Each theme provides a screen-shot, a name, and a description.

1. Every screen-shot has the alt text "Screen-shot for [theme-name] theme".

2. The theme descriptions are inconsistent in how they describe the themes.

3. None of the theme descriptions are close to being sufficient to inform a blind administrator about how the theme looks or how its regions are laid out.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

LewisNyman’s picture

mgifford’s picture

Thanks @LewisNyman - that patch changed it to 'A clean and friendly administration theme.'

I'm not sure I'd describe it as friendly. Maybe if it were yellow rather than grey.

Anyways, appreciate it.

LewisNyman’s picture

I think most of the inspiration for the wording came from the style guide and the interpretation of Drupal's basic principles into Seven's own principles:

  • powerful: confident, precise shapes and strong contrast, especially for user-controllable elements.
  • empathetic, responsive: choose calming colors and rounded forms; give emphasis to what matters;
  • clear, direct, concise: use crisp lines and simple, decisive shapes; avoid patterns, texture, and ornamentation; each element should serve a clear purpose; make measured use of whitespace: room to breathe, but avoid sterility and emptiness; use rules/boxes sparingly.
  • accessible, transparent: appeal to the greatest possible number of people; choose a legible typeface; set text for optimal readability; emphasize what matters; use consistent visual cues for affordances.
  • natural: desaturated tones: avoid neon/artificial colors; organic rather than geometric forms; choose a typeface that retains a trace of the human hand.
  • friendly, collaborative, democratic, respectful: choose cheerful colours; avoid high contrast at large scales (too bold/aggressive); prefer well-known design patterns, iconography and affordances; avoid visual indulgence, ensure visual style is extensible and flexible.

The objective of the style guide in summary:

  • A primarily light tone to appear bright and open
  • A neutral, desaturated color palette, both friendly and calming.
  • Legible, readable typography. Employs a typeface with some humanist characteristics in a few weights and styles.
  • Crisp lines and sufficient contrast, but not jarring. No large areas of bold colour.
  • Bold shapes reserved for headings and action elements.
  • Some rounded forms to communicate friendliness and naturalness.
  • Little or no ornamentation: no patterns, textures, gradients or shadow/emboss effects – except to communicate affordances.
  • Borders and background tone as grouping devices only: to clarify relationships and emphasize important elements.
  • Generous and consistent use of whitespace.
  • Aesthetically appealing, though minimal graphic style; should appeal simple but not sterile; gracious rather than opinionated; confident without overspeaking.

Maybe we aren't fully there in implementation, but they are the objectives.

mgifford’s picture

The wording doesn't need to be perfect for the release of D8. But it should be better.

I do think that too much time has gone into this. It really shouldn't be this difficult to craft a paragraph of text....

holly.ross.drupal’s picture

Assigned: Unassigned » holly.ross.drupal
holly.ross.drupal’s picture

Status: Active » Needs review
FileSize
754 bytes

Updated the description per Jen's suggestion in comment 27 as suggested. Added Alt text and tags as well. Changes are as follows:

description:
  'The default administration theme for Drupal 8 was designed with
  clean lines, simple blocks, and san-serif font to emphasizes the tools and
  tasks at hand.'
alt text:
  'Default administration theme for Drupal 8 with simple blocks and
  clean lines.'
tags: 'multi-column, fluid, responsive, san-serif, accessible'

Status: Needs review » Needs work

The last submitted patch, 6: seven-theme-descriptors-2193691-6.patch, failed testing.

martin107’s picture

@holly.ross

by way of support ... here is the relevant extract from the log file ... it is quite well hidden

Unable to parse core/themes/seven/seven.info.yml: Unable to parse at     [error]
line 4 (near "'The default administration theme for Drupal 8 was
designed with").

Hope this helps... I am in IRC if you need a nudge in the right direction.

holly.ross.drupal’s picture

Status: Needs work » Needs review
FileSize
554 bytes

Updated "alt text" indentifier to read "alttext"

Status: Needs review » Needs work

The last submitted patch, 9: seven-theme-descriptors-2193691-8.patch, failed testing.

holly.ross.drupal’s picture

Status: Needs work » Needs review
FileSize
1.08 KB

Updated patch to remove line endings for descriptions and change arrange key spaces to underscores.

Status: Needs review » Needs work

The last submitted patch, 11: seven-theme-descriptors-2193691-10.patch, failed testing.

holly.ross.drupal’s picture

Status: Needs work » Needs review
FileSize
945 bytes

Reverted array key spaces, kept line endings as changed above.

Status: Needs review » Needs work

The last submitted patch, 13: seven-theme-descriptors-2193691-11.patch, failed testing.

holly.ross.drupal’s picture

FileSize
662 bytes

Finally learned to test locally first and not spam the issue queue. Sorry!

martin107’s picture

Status: Needs work » Needs review
BLadwin’s picture

FileSize
662 bytes

re-rolled Holly's patch to correct the spelling of the 'sans-serif' tag. When this is committed to core, please pass attribution to holly.ross.drupal, bladwin, and tedbow [core sprint mentors at DCATX14]

Status: Needs review » Needs work

The last submitted patch, 17: seven-theme-descriptors-2193691-17.patch, failed testing.

BLadwin’s picture

FileSize
663 bytes

re-rolled Holly's patch to correct the spelling of the 'sans-serif' tag. When this is committed to core, please pass attribution to holly.ross.drupal, bladwin, and tedbow [core sprint mentors at DCATX14]

EDIT: new line missing from end of file. applied cleanly to local 8.x branch.

BLadwin’s picture

Status: Needs work » Needs review

needs review

LewisNyman’s picture

Status: Needs review » Needs work

Sorry y'all I spotted a typo.

+++ b/core/themes/seven/seven.info.yml
@@ -1,6 +1,8 @@
+description: ‘The default administration theme for Drupal 8 was designed with clean lines, simple blocks, and sans-serif font <strong>to emphasizes the tools </strong>and tasks at hand.'

This could either say " to emphasize the tools" or "that emphasizes the tools"

Nothing else apart from that.

Bojhan’s picture

Status: Needs work » Needs review
FileSize
662 bytes

Fixed that to "to emphasize the tools".

Thanks Holly! It nicely captures the core focus of the Seven theme :)

dixon_’s picture

Status: Needs review » Needs work
+++ b/core/themes/seven/seven.info.yml
@@ -1,6 +1,8 @@
+description: ‘The default administration theme for Drupal 8 was designed with clean lines, simple blocks, and sans-serif font to emphasize the tools and tasks at hand.'

The description field seems to have a weird leading quote mark. Otherwise it looks good.

Bojhan’s picture

Assigned: holly.ross.drupal » Unassigned
Status: Needs work » Needs review
FileSize
660 bytes

Nice catch.

dixon_’s picture

Status: Needs review » Reviewed & tested by the community

Looks good. Should come back green :)

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 2858a83 and pushed to 8.x. Thanks!

  • Commit 2858a83 on 8.x by alexpott:
    Issue #2193691 by holly.ross.drupal, Bojhan, BLadwin | mgifford: New...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

star-szr’s picture

Just a heads up to anyone interested, a newer issue is proposing to remove the 'tags' data because it's not currently being used: #2471619: Remove tags from all core theme.info.yml files