History: Theme quality and classification checklist

Source of version: 5

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. (Does Tiki allow for this in general? Check standard practice -- is it common for websites to provide this? *** 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. (Doesn't web browser zoom control take care of this?) ** 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. * __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}

History

Enable pagination rows per page

HTML diff Side-by-side diff Side-by-side diff by characters Inline diff Inline diff by characters Full side-by-side diff Full side-by-side diff by characters Full inline diff Full inline diff by characters Unified diff Side-by-side view HTML diff Side-by-side diff Advanced

Information	Version
Wed 13 of Jul, 2022 11:51 GMT chibaguy Added point about clear headings hierarchy.	7
Tue 12 of Jul, 2022 17:20 GMT chibaguy Added a link.	6
Tue 28 of Jun, 2022 03:13 GMT chibaguy Fixed my syntax typo.	5
Tue 28 of Jun, 2022 03:12 GMT chibaguy Added Memphis design to the tags list.	4
Mon 20 of Jun, 2022 05:41 GMT chibaguy Added space around code tags.	3
Mon 20 of Jun, 2022 05:39 GMT chibaguy Turned off unneeded autotoc.	2
Mon 20 of Jun, 2022 05:38 GMT chibaguy Page created and content copied from local site.	1

Select action to perform with checked... Remove OK