SkelVanilla : a11y and usuability > Documentation

Tuesday 19 February 2019

Review of some SkelVanilla improvement and options.

Some functionality can be checked on Test du theme SkelVanilla et de ses fonctionnalité, Test du theme SkelVanilla sans validation directe or Skelvanilla group in group with columns

You can test yourself theme options on Sample survey with Fruity theme on SkelVanilla.

A complete theme with improvement on aria labelledby and describedby, using clean HTML to be more updatable.

More contrast allow better compatibility with WCAG 2.0.

Using em and not fixed font size respect user choice about font-size set in his browser. Grid-view respect base font-size and zoom too.

Theme and variations

SkelVanilla include themes based on bootswatch like core bootswatch LimeSurvey template, SkelVanilla include too colored theme inspirated by LimeSurvey Fruity theme.

Each theme come in 4 variations :

Aria : label, describe, live and hidden

LimeSurvey 3 already added some a11y improvement with usage aria-labelledby, SkelVanilla add more :

The question help added to aria-describedby
The dynamic help tips added to aria-describedby
Usage of aria-live for dynamic text
Usage of aria-hidden for question hidden by condition
Usage of invalid with custom validity for input (can be deactivated)

Custom validity

SkelVanilla allow to set validity according to question settings.

This system is currently deactivated by default. If you use a lot of conditions and some workaround : it can disable submit survey without any visible information to participant. Before using it in production : test the functionality in your survey.

You can test it on Test dynamic validate.

Relevant and mandatory question are set to required and validity is set with the text used by LimeSurvey for tips.

User still allowed to move previous or use index, but validation or move next is disable since validity of input is not fixed.

Using h2 or h3 for question

HTML5 allow usage of section and header : SkelVanilla use it by default for group, and allow you to use for question using an h2 or h3 title.

This option must be activated in Survey option (or globally) : when activated html is shown with header and section:

<body>
  <header><h1>Survey name</h1></header>
  <main>
    <section>
      <header><h2>Group title</h2>
      Group desctiption</header>
      <section>
        <header><h3>Question text</h3></header>
        Question help
        Answer part
      </section>
    </section>
  </main>
</body>

You can disable the head and the section on specific question: add skel-tagnoheader class on question Class name.

Default header size is h3 if group title are shown and h2 if not. You can force to be h2 with skel-tagH2 and h3 with skel-tagH3.

If you don’t enable global header and section : you can enable it for each question manually adding skel-tagheader to the question css classes. Bu default it’s a h2 header, you can set it to h3 with skel-tagH3. This can be used with Sub-group inside group.

Some decoration options

You can choose how question was wrapped : default one is none (something like Fruity core template). You have well wrapped (like vanilla core template) or inside a panel (more like boostswatch core template).

But you can choose too : the color of the question text and the question (using color helper of boostrap)

Decoration options different for each question

You can use Question CSS classe in advanced settings to set different value for each question.

Wrapper

skel-wrap-well Use well wrapper for this question
skel-wrap-panel Use panel wrapper for this question
skel-wrap-none deactivate wrapper for this question

Color

skel-color-none Use default body color for this question
skel-color-primary Use primary color for this question
skel-color-info Use info color for this question
skel-color-success Use success color for this question
skel-color-warning Use warning color for this question

Size

skel-size-body Use default body size for this question
skel-size-h2 Use h2 size for this question
skel-size-h3 Use h3 size for this question
skel-size-h4 Use h4 size for this question
skel-size-h5 Use h5 size for this question
skel-size-lead Use lead size for this question

Other tool

skel-noquestion do not display question
skel-inside put panel-body margin to have a sub-question without usage of skel-group
skel-help-nothelp how help without the help icon
no-footer-spacer disable margin after the question
show-in-previous a fixed right or left margin of 3em

Sub-group inside group

SkelVanilla add some helper to create sub group of question. Usage of this system is powerfull but can be difficult.

To create sub group you have this css class:

skel-start-group : start a group by adding a start tag before the question. The skelvanilla question class are set to this group, original question didn’t have class set by skelvanilla. The skel-group is added to the class.
skel-end-group : close the group by adding a close tag.
skel-start-group-question : remove the close tag of this question. Then hidding this question hide the whole group
skel-no-question : remove whole question text part.

Remind to use previous part to set different wrapper for the question inside group. Usage with well and panel are tested. For panel, with skel-start-group class: panel header is the question. For question inside the group : 2 solution : you leave panel system and have multiple panel heading or you use panel-body skel-wrap-none class to be seen without the heading.

You have a complete demonstration of this function on Skelvanilla group in group with columns

Table fixed or no-more-table

For table question type : default behaviour for little screen is to show it with “no more table” system this shown table like a list of element. Like the default LimeSurvey template.

With SkelVanilla : you can add table-fixed and table-responsive class to disable this update. You can see the difference on this demo survey.

By default table have a fixed header, this system was tested with Chrome, Firefox and IE edge. You can test it at demo.sondages.pro.

You can globally disable the option, and set by question adding table-fixed-header CSS class to a question.

Some other minor functionality

– Show clear all : you can hide all clear all action with an On/Off button
– Top link action : you can choose to show or hide all possible action in the header. You can hide the core action, but you can show the next and the previous button if needed.
– Survey description : allow you to show description of survey i all page, not only on welcome page.
– Survey title : you can choose to hide surey title.
– Logo as banner : with logo as banner : you use it like a banner on whole header.
– and a lot of other functionality, best is to try !

Variation and adaptation

If you want only too fix some part : theme.css and custom.css are empty in SkelVanilla and stay empty. Then you can extend SkelVanilla and update one of this 2 files. You can choose to extend theme.css for your base theme, and use custom.css for specific survey.

Create your own theme

If you already know boostrap and less : the less generator of the default css file and of all variations can be found on less-skelvanilla git repo.

Theme restriction

You can restrict the theme list to your theme only in global theme options. You have to update manually the available variation list. The available variation list is a json encode string, the most easy way is to update it directly inside config.xml file. If you don’t have access to this file : you can update it on Advanced options , Options.

For example to allow only Contrast theme : "availablevariations":"{\"contrast\":{\"name\":\"Contrast\",\"base\":\"1\",\"button\":\"1\",\"awesome\":\"1\",\"button_awesome\":\"1\"}}

Extend LimeSurvey Plugins and extend for LimeSurvey