History: Theme quality and classification checklist

Source of version: 9 (current)

{syntax type="markdown"  editor="wysiwyg"} To follow up on the discussion at the Tiki Roundtable meeting in February (https://tiki.org/Roundtable-Meeting-2022-02), here's a list of check points to provide a basis for evaluating themes and possibly categorizing them as "Class A", "Class B", "Class C", etc. The plan is to make a new tracker at themes.tiki.org in which each theme is a tracker item, and the information below can be input for each theme. After a number of themes are evaluated, a compliance scale can be made and themes can be given a rating.

## What and how to check

### Method of testing

For accessibility standards compliance, one way is to check wiki pages like Bootstrap 5 Cheatsheet and Tiki and Bootstrap Sample Elements (todo: add URLs for these), along with a sampling of other Tiki feature and admin pages, with the [https://webaim.org/|WebAIM] WAVE web browser extension. The errors that are turned up vary according to the page content but the goal is to get the number of errors down to a low level.

Errors of insufficient contrast involving theme colors like "primary" and "warning" should be fixable by using the Bootstrap `$min-contrast-ratio` variable but so far my efforts with that haven't been successful. Maybe that can be worked out but what I've done in the meantime is add the simple CSS overrides for the handful of elements, like badges, that needed to be adjusted. {sign user="chibaguy" datetime="2022-06-20T05:38:32+00:00"}

### Checklist items

- **User Experience / Accessibility** (WCAG 2.1 compliance) 
    - Contrast (Minimum) - Level AA (https://www.w3.org/WAI/WCAG21/quickref/#distinguishable) 
        - The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
    - {icon name="square-o"} Meets WCAG 2.1 AA contrast standards
    - Contrast (Enhanced) - Level AAA 
        - The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1
    - {icon name="square-o"} Meets WCAG 2.1 AAA contrast standards
    - Problematic page elements (experience shows these tend to need attention) - Should each have a checkbox, or should there be just one checkbox + a textarea for details? 
        - text-muted
        - disabled text
        - pagination
        - form valid feedback text ( `.valid-feedback` )
        - form invalid text ( `.invalid-feedback` )
        - navbar links
        - badge ( `.badge.bg-danger` , etc.)
        - ...
- **Visual Presentation** — Level AAA (WCAG 2.1 compliance) 
    - For the visual presentation of blocks of text, a mechanism is available to achieve the following: 
        - Foreground and background colors can be selected by the user. 
            - {icon name="square-o"} Foreground and background colors can be selected by the user. (Enabled by Bootstrap 5.3 so will be available in Tiki thereafter.)
        - Width is no more than 80 characters or glyphs (40 if CJK). 
            - {icon name="square-o"} No text blocks are wider that 80 characters
        - Text is not justified (aligned to both the left and the right margins). 
            - {icon name="square-o"} Text is not justified
        - Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
        - Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window. 
            - {icon name="square-o"} Text can be resized. (Web browser zoom control handles or could be facilitated with Bootstrap 5.3 color mode control.)
    - Images of text (no exception) — Level AAA 
        - Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed. Note: Logotypes (text that is part of a logo or brand name) are considered essential. 
            - {icon name="square-o"} Images of text aren't used for essential information.
    - Clear headings hierarchy (not a WAI point, but each heading size and styling should make it distinct from other heading sizes)
- **Tiki feature support**
    - Support for new features in latest/upcoming Tiki version 
        - {icon name="square-o"} [[These could be listed for each version, or just a global yes/no and maybe text area for details.]
    - Continuing support for existing Tiki features 
        - {icon name="square-o"} [[These could be listed for each version, or just a global yes/no and maybe text area for details.]
        - Responsive web design (that is, all device screen sizes)
        - All three layouts (Classic Tiki, Classic Bootstrap, Single Container)
        - Admin pages including legacy and Unified Admin Backend
        - Feature pages (list of IRLs to test coming soon)
        - Any noted problematic pages such as calendar pages
        - Light and dark navbar options
        - ...
- **Basic theme information** for identification purposes (not evaluation items) 
    - Tiki version compatibility
    - ...

## Tags


{DIV(class="row")}{DIV(class="col-sm-4")}

### Design types

These design-type tags (some based on [https://en.99designs.jp/designer-resource-center/visual-design-styles] are descriptors of visual style, not of website use cases — site owners and administrators make the decision about the look they want for their website and its use case. A theme could have more than one of these tags:

- Flat design
- Material design
- [https://bashooka.com/inspiration/examples-of-memphis-design-websites/|Memphis design] — Also [https://en.99designs.jp/blog/design-history-movements/memphis-design/|Design history movements - Memphis design]
- Skeuomorphism
- Neomorphism
- Neumorphism
- Glassmorphism
- Claymorphism
- 3D
- Abstract
- Minimalist (clean)
- Conceptual art
- Flowing and delicate (formerly "Feminine")
- Fun and playful
- Geometric
- Grunge
- Illustrated
- Luxurious
- Bold and powerful (formerly "Masculine")
- Organic and natural
- Photorealism
- Professional/corporate
- Typographic
- Retro
- Vintage
- Light on dark
- Monochromatic
- Color gradient centered

{DIV}

{DIV(class="col-sm-4")}

### Other descriptions

These descriptions are more general than the design types at left:

- Artistic
- Unique
- Simple
- Elaborate
- Fanciful
- Adaptation from other software
- Re-implementation of classic
- ...

{DIV}

{DIV(class="col-sm-4")}

### Process-related

These can indicate the status of the theme, etc.:

- Update in progress
- Update coming soon
- Experimental
- Work in progress
- ...

{DIV}
{DIV}

### Links

https://www.editorx.com/shaping-design/digital-design-trends-2022
History: Theme quality and classification checklist

Source of version: 9 (current)

Switch Theme

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

History: Theme quality and classification checklist

Source of version: 9 (current)
