Enhance Accessibility with Angular VLibras

Angular VLibras is a powerful tool designed to improve accessibility in your Angular applications. By integrating the VLibras widget, you can offer automatic translation of your content to Libras, making it more inclusive for users with hearing impairments.

👉 Get started now: Angular VLibras on npm

👉 For more information, visit: Angular VLibras Demo

Why Choose Angular VLibras?

Our library simplifies the process of adding accessibility features to your application. With just a few steps, you can implement the VLibras widget and provide a richer experience for users who rely on Libras.

About the Project

Angular VLibras is a social initiative aimed at increasing digital accessibility. This library empowers developers to make their applications more inclusive by integrating the VLibras accessibility widget seamlessly. The VLibras Widget is a resource developed to make web pages accessible to deaf individuals. With automatic translation from Brazilian Portuguese to Brazilian Sign Language (LIBRAS), this tool allows deaf users to consume text content on any website.

---

Installation

To install the Angular VLibras library, use npm:

npm install angular-vlibras

Or with yarn:

yarn add angular-vlibras

Usage

Follow these steps to integrate the VLibras widget into your Angular application:

1. Import the AngularVlibras Component

   In your application’s root module (usually app.module.ts), import the AngularVlibras component:

   import { Component } from '@angular/core';
   import { AngularVlibras } from 'angular-vlibras';
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [AngularVlibras],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
   })
   export class AppComponent { }
   

2. Use the <angular-vlibras /> Component

   Add the <angular-vlibras /> component to your template to activate the VLibras widget:

   <angular-vlibras />
   

Properties

The component accepts the following input properties:

• position: Defines the position of the VLibras widget on the screen. Possible values are:

  • left (default)
  • right
  • top
  • bottom
  • bottomLeft
  • topLeft
  • bottomRight
  • topRight

  Example:

  <angular-vlibras position="right" />
  

• avatar: Specifies the avatar used in the VLibras widget. Options include:

  • icaro
  • hosana
  • guga
  • random (default)

  Example:

  <angular-vlibras avatar="guga" />
  

• opacity: Sets the opacity of the VLibras widget. The value should be a number between 0 and 1, with the default being 1.

  Example:

  <angular-vlibras opacity="0.8" />
  

Example

Here is an example of how to configure the VLibras widget with custom properties:

<angular-vlibras
  position="left"
  avatar="hosana"
  opacity="0.9" />

This configuration will position the widget in the left corner of the screen, use the “hosana” avatar, and set the opacity to 0.9.

Technologies Used

• Angular
• TypeScript
• HTML5
• CSS3

Made with ❤️