Structural Markup

Levoric Learn’s styling and layout can be applied to a variety of markup structures. This documentation points to give designers with best hone cases, illustrating the utilize of Levoric Learn and outlining suitable semantic markup, counting ways to address potential availability concerns.

Interactive Components

Levoric Learn’s intuitively components—such as modular dialogs, dropdown menus, and custom tooltips—are planned to work consistently for touch, mouse, and console clients. By utilizing relevant WAI-ARIA roles and attributes, these components are understandable and operable with assistive technologies like screen readers.

Because these components are designed to be fairly generic, authors may need to include additional ARIA roles and attributes, as well as JavaScript behaviors, to more accurately convey the precise nature and functionality of their components. This is as a rule famous in the documentation.

Color Contrast

Some color combinations in Levoric Learn’s default palette—used for button variations, alert variations, form validation indicators, etc.—may lead to insufficient color contrast, falling below the recommended WCAG 2.1 text color contrast ratio of 4.5:1 and non-text color contrast ratio of 3:1. Authors are encouraged to test their specific uses of color and, if necessary, manually modify these default colors to ensure adequate color contrast ratios.

Visually Hidden Content

Content that should be visually hidden but accessible to assistive technologies can be styled using the .visually-hidden class. This is valuable for passing on extra visual data or prompts to non-visual clients.

 
<p class="text-danger">
<span class="visually-hidden">Danger: </span>
This action is not reversible
</p>

For outwardly covered up intelligently controls, such as "skip" joins, utilize the .visually-hidden-focusable course. This guarantees the control gets to be unmistakable once centered (for located console clients). Unlike the .sr-only and .sr-only-focusable classes in previous versions, Levoric Learn's .visually-hidden-focusable is a standalone class and must not be combined with the .visually-hidden class.

 
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>

Reduced Motion

Levoric Learn includes support for the prefers-reduced-motion media feature. In browsers and environments that allow users to specify their preference for reduced motion, most CSS transition effects in Levoric Learn (such as when a modal dialog is opened or closed, or the sliding movement in carousels) will be debilitated, and important activitys (like spinners) will be moderated down.

On browsers that support prefers-reduced-motion, and where users have not explicitly signaled a preference for reduced motion (i.e., where prefers-reduced-motion: no-preference), Levoric Learn enables smooth scrolling using the scroll-behavior property.

Notes

Levoric Learn is dedicated to providing an accessible and inclusive learning environment. By adhering to accessibility standards and implementing best practices, we strive to ensure that all users have equal access to our educational resources. We encourage authors to follow these guidelines to create accessible content and welcome feedback to continually improve our platform.