Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • What is UI Options
    • "The User Interface Options component (UI Options) allows users to transform the presentation of the user interface and content resources so that they are personalized to the individual user's needs."
    • "Learner Options allows learners to personalize user interfaces and content to meet their individual needs and preferences. With Learner Options, a learner can choose from a variety of customizations including:

          • Text size and style

          • Line spacing

          • Colour and contrast

          • Display a table of contents

          • Emphasize links

          • Simplify layout

          • Enable text-to-speech without additional plugins or software

      Learner Options is designed to be integrated into a website or application's overall design with relatively minimal effort. Learner Options and the First Discovery Tool are developed using the Preferences Framework (part of Fluid Infusion), which supports the development of extensible user interfaces for editing preferences and "enactor" components that can change the structure, layout, and presentation of web-based content."

    • A user can choose various adjustments to suit their needs and preferences such as:
      • larger text
      • different colour and contrast styles
      • simplified layout
      • etc
    • Adjustments are applied right away, so it's easy to experiment and discover what works for you. Settings can be easily reverted.
    • Note: Maybe should mention something about UIO being "non-destructive" to existing styling. Also maybe should mention something about how UIO settings are saved.
  • What does it do
    • Overrides the CSS of a website to suit personal preferences. CSS is injected via JavaScript and controlled using adjusters in the UI Options drop-down panel.
    • Can help toward some WCAG 2.0 AA compliance
      • 1.4.1 Use of Colour
      • 1.4.3 Minimum Contrast
      • 1.4.4 Resize Text
      • 1.4.6 Contrast Enhanced
      • 1.4.8 Visual Presentation
      • 2.4.7 Focus Visible
  • What it doesn't do
    • UI Options is a content style personalizer and not intended as an accessibility compliance tool. It will not solve fundamental issues related to usability, accessibility, and inclusion.
      • Resource like the ILDH and the Design Guide can help with that.
    • Does not solve core issues to POUR problems on a site
      • i.e. if you have images of text (1.4.5), UI Options will not magically fix this
  • How you can extend, customize, or add to it.
    • You can use UI Options as is with the default styling, or you can change the way it looks so it matches your site's style.
    • You can also write your own adjusters (Note: How? Is there a link to a "How to create your own adjuster" type of doc?)
  • How do you install it
    • You can install UIO multiple ways - the easiest is using npm
      • Link to docs or another video.
    • There is also a Wordpress plugin which simplifies the installation.
  • How to fix some common problems
    • Font sizing and layout issues - rem to rule them all
    • Fixing CSS issues with UIO - how to override or fix styles
    • Colours and images