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 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.

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
  • 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
  • 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.
      • 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).
      • No text blocks are wider that 80 characters
    • Text is not justified (aligned to both the left and the right margins).
      • 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.
      • 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.
      • 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
    • [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
    • [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

Links

https://www.editorx.com/shaping-design/digital-design-trends-2022