SkelVanilla : a11y and usuability > Documentation

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 :

Base variation
Button variation
Awesome variation
Button and awesome variation

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.

required on radio list
customValidity on checkbox
required on text
customValidity on text

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:

Heading structure

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

well wrapped
panel wrapper

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.

SkelVanilla : usage of advanced class with panel
SkelVanilla : usage of advanced class with well
SkelVanilla : usage of advanced class with panel , alternative (...)
SkelVanilla : usage of advanced class with no wrapper

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.

Default table on little screen
Table with table-fixed class on little screen

Table with fixed header

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\"}}

P.S.

If you need your own variation or theme : we can offer quote at Contact.