kss icon indicating copy to clipboard operation
kss copied to clipboard

Add some kind of translation support

Open luntta opened this issue 7 years ago • 1 comments

Would be great to able to translate the styleguide to multiple languages using only one source file + maybe multiple translation files. Would make working in an international environment a bit more hassle free.

luntta avatar Jan 18 '18 09:01 luntta

An example of how the markup in the CSS source could look like (from cehfisher/a11y-style-guide)

// Audio
//
// <ul>
//  <li>{{li1}}</li>
//  <li>{{li2}}</li>
//  <li>{{li3}}</li>
//  <li>{{li4}}</li>
// </ul>
//
// <blockquote>{{blockquote}}</blockquote>
//
//
//
// Markup: audio.twig
// Locales: en_US.json, fi_FI.json
//
// Style guide: Media.audio

Example of a translation file:

// en_US.json

en_US: {
  "li1": "Build your media with accessibility in mind! It is much easier to work accessibility into the beginning than trying to tack it on later. This is true of all components, but especially for media components.",
  "li2": "Make sure your player is accessible and includes control elements to pause, stop, and play your media.",
  "li3": "Do not auto-play your media. This can cause confusion as well as annoyance.",
  "li4": "Make sure your media has alternative methods to get to the content. For example, add transcripts of your audio files.",
  "blockquote": "There are a ton of WCAG Guidelines for media on websites for a reason...there are a lot of factors to consider. Don't let that scare you though, there are also some easy wins. Just including alternatives to the media you present (ex. transcript for a video) is half the battle."
}

luntta avatar Jan 18 '18 09:01 luntta