Crea tu propio botón personalizado
NOTA – Cuando crees un botón propio, es tu responsabilidad hacerlo accesible, para ello, aquí tienes algunas pautas importantes:
Añade el atributo aria-label si el botón no tiene texto en su interior o no está asociado a una etiqueta.
Si utiliza un elemento
<div>o<a>para el botón, proporciónele el rol button .Verifique con el comprobador de contraste WCAG 2.1 que los colores del botón están bien contrastados.
Métodos
- Crea un
<button>propio con el ID de nuestro botón INDmenu-btn. Esto añadirá nuestro evento click a tu botón, y no creará un nuevo botón. IMPORTANTE : Asegúrese de que el botón existe en la página antes de que nuestro script se cargue, de lo contrario, no funcionará. - Crea un
<button>propio y oculta nuestro botón con el siguiente CSS:Recomendado:
Añade este fragmento a tu archivo css:#INDmenu-btn {
display: none !important
}
También puedes añadir CSS en línea con Javascript:
document.getElementById('INDmenu-btn').style.display = 'none !important';
Puede utilizar uno de estos 2 métodos para abrir el menú:
Proporcione a su nuevo botón el siguiente método onclick:
<button onclick="window.interdeal.a11y.openMenu()"> custom button </button>
let btn = document.getElementById('INDmenu-btn');
btn.addEventListener('click',window.interdeal.a11y.openMenu);
$('#INDmenu-btn').on('click',window.interdeal.a11y.openMenu);
<button v-on:click="window.interdeal.a11y.openMenu"> custom button </button>
<button onclick="{window.interdeal.a11y.openMenu()}"> custom button </button>
<button (click)="window.interdeal.a11y.openMenu()"> custom button </button>
Este método abrirá el menú de accesibilidad.
Una vez que haya hecho clic en su botón, haga clic entre bastidores en nuestro botón oculto ( #INDmenu-btn ).
Personalizar la referencia del botón
Clave del sitio
32 Dígitos que son generados por el sistema como un id único para su sitio web.
sitekey
Tipo: StringNo editable
Esta propiedad se genera automáticamente y no debe modificarse.
Valor por defecto: Autogenerado
Valores opcionales: asd7890asdhlkas87ohjasd98yohasd9
Generado automáticamente, ¡no cambies nada aquí! de lo contrario, el widget no funcionará.
Descripción:
Generado automáticamente, ¡no cambies nada aquí! de lo contrario, el widget no funcionará.
//Get method
interdeal.sitekey
//Establecer método
//none
Position
Define el lado del botón de accesibilidad.
position como valor único
Tipo: StringEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: left
Valores opcionales: left/right
Define el lado del botón de accesibilidad, tanto en escritorio como en móvil
Descripción:
Define el lado del botón de accesibilidad, tanto en escritorio como en móvil
//Get method
interdeal.menuPos
//Establecer método
'left'
position como un array
Tipo: String ArrayEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: ‘left’ como una sola cadena
Valores opcionales: [left,right]
El lado izquierdo es para el escritorio,
el lado derecho es para el móvil
Descripción:
[«Left»,»Right»], define lados diferentes, para escritorio y para móvil aparte.
//Get method
interdeal.menuPos
//Establecer método
['left', 'right']
Estilo del botón
Puede cambiar el estilo predeterminado de los botones
vPosition
Tipo: String ArrayEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: Escritorio – top: 24px, Móvil – bottom: 24px;
Valores opcionales: 10px, 20%, …
Acepta cualquier valor css top/bottom
Descripción:
Posición del eje Y del widget, el lado izquierdo se refiere a la versión de escritorio, el lado derecho es para móviles. Si desea definir sólo una de las opciones, el otro necesita obtener «indefinido», se utilizará el valor predeterminado.
//Get method
interdeal.btnStyle.vPosition
//Establecer método para escritoriop>
['24px',undefined]
//Establecer método para móvil>
[undefined, '24px']
//Establecer método para ambos>
['50px', '24%']
Scale
Tipo: float ArrayEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: [«0.9», «0.5»]
Valores opcionales: 10px, 20%, …
Acepta cualquier valor css top o bottom
Descripción:
Tamaño del widget, el lado izquierdo se refiere a la versión de escritorio, el lado derecho es para móviles. Si desea definir sólo una de las opciones, el otro tiene que obtener «indefinido», se utilizará el valor predeterminado.
//Get method
interdeal.btnStyle.scale
//Establecer método sólo para escritorio
[undefined, 0.6]
//Establecer método sólo para móviles
[0.7, undefined]
//Establecer método para ambos
[0.7, 0.6]
icon
Tipo: ObjectoEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: 7
Valores opcionales:
String: Define el botón del widget con diseño textual ( tomará la cadena y la pondrá en el botón) ,Integer: escribe el número del icono elegido.
Descripción:
Define el icono del widget.
//Get method
interdeal.btnStyle.scale
//Establecer método para el icono
{'type': 1}
//Establecer método para el texto
{'type', 'Accessibility'}
color
Tipo: stringEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: main: darkblue ,second: white
Valores opcionales: main – string second – string
main: define el color de fondo del botón de accesibilidad ,second: define el color del img de accesibilidad
Descripción:
Define los colores del botón.
IMPORTANTE : LOS COLORES DEBEN MANTENER UNA RELACIÓN DE CONTRASTE DE 1 A 4,5.
Para comprobar el contraste de los colores, visite la siguiente web
//Get method
interdeal.btnStyle.color
//Método para el color de botón
{'main': 'black'}
//Método para texto o svg
{'second': '#122231'}
Icono de botón
Define el icono del menú de accesibilidad(explicación ampliada). las partes internas del mismo son inicializadas por el sistema con valores predefinidos.
outline
Tipo: BooleanNo editable
Esta propiedad se genera automáticamente y no debe modificarse.
Valor por defecto: false.
Valores opcionales: true/false
Descripción:
Añade un diseño de contorno al botón.
//Get
interdeal.btnStyle.icon.outline
//Set
//Predefinido
shape
Tipo: StringNo editable
Esta propiedad se genera automáticamente y no debe modificarse.
Valor por defecto: circle.
Valores opcionales: circle rectangle rounded semicircle
Predefinido.
Descripción:
Cambia la apariencia del botón.
//Get
interdeal.btnStyle.icon.shape
//Set
//Predefinido
Idioma
Establece el idioma del widget, predefinido por el en el código.
Menulang
Tipo: StringNo editable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: EN
Valores opcionales:
- AR - العربية
- BG - bălgarski
- CA - català
- CS - čeština
- DA - dansk
- DE - Deutsch
- EL - ελληνικά
- EN - English (American)
- EN-AU - English (Australian)
- EN-GB - English (Canadian)
- EN-ZA - English (British)
- ES - Español
- ES-MX - Español (Mexicano)
- ET - eesti keel
- EU - euskara
- FR - Français
- GL - galego
- HE - עברית
- HI - हिन्दी
- HR - hrvatski
- HU - magyar nyelv
- IT - Italiano
- JA - 日本語
- KO - 한국어/韓國語 (South Korea)
- LT - lietuvių kalba
- LV - latviešu valoda
- LB - Norsk Bokmål
- NB - Nederlands (Dutch)
- PL - polski
- PT - Português (Brasileiro)
- PT-PT - Português (Europeu)
- RO - limba română
- RU - Русский
- SK - Slovenský jazyk (Slovak)
- SL - Slovenščina (Slovene)
- SV - svenska
- TR - Türkçe
- UK - украї́нська мо́ва
- ZH - 正體字/繁體字 (Traditional)
- ZH-CN - 正体字/繁体字 (Simplified)
No cambies el idioma manualmente; depende del sistema WeAllWeb.
Descripción:
Establece el idioma del widget, tomado del atributo lang del elemento HTML
//Get method
interdeal.Menulang
//Set method
//none
Opciones de funcionalidad adicionales
Script de accesibilidad
Estas banderas sólo se pueden establecer en el script que tienes que implementar en el sitio web.
forceBtnAppearance
Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: undefined
Valores opcionales: cualquier valor que pueda utilizarse como Boolean.
1, 0, undefined, true, false, etc…
Descripción:
Si utiliza iframes en su sitio web, esta bandera obligará a que el botón de accesibilidad aparezca también dentro del iframe (lo ocultamos por defecto y controlamos la accesibilidad con un solo botón)
//Sólo funcionará si se establece desde el script de accesibilidad.
window.interdeal = {
sitekey : ... ,
Position : ... ,
Menulang : ... ,
forceBtnAppearance : true ,
btnStyle : {
...
},
domains : {
...
}
}
waitForTop
Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: undefined
Valores opcionales: cualquier valor que pueda utilizarse como Boolean.
1, 0, undefined, true, false, etc…
Descripción:
Si el widget se carga dentro de un iframe, existe la posibilidad de que la carga del iframe sea más rápida que la de la página superior. Esta bandera obliga al widget a esperar una respuesta de la parte superior.
IMPORTANTE: el widget esperará una respuesta y no funcionará hasta que la obtenga, aunque tarde una eternidad.
//Sólo funcionará si se establece desde el script de accesibilidad.
window.interdeal = {
sitekey : ... ,
Position : ... ,
Menulang : ... ,
waitForTop : true ,
btnStyle : {
...
},
domains : {
...
}
}
Mics.
Varias banderas que se pueden fijar en cualquier momento.
draggable
Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: undefined
1, 0, undefined, true, false, etc…
Descripción:
Establece si el botón de accesibilidad es arrastrable,El botón puede ser arrastrado en el eje y y hacia los bordes izquierdo y derecho de la pantalla. Sólo funciona en el botón por defecto, si inyecta su propio botón no funcionará.
//Sólo funcionará si se establece desde el script de accesibilidad.
window.interdeal = {
sitekey : ... ,
Position : ... ,
Menulang : ... ,
draggable : true ,
btnStyle : {
...
},
domains : {
...
}
}
//Desde un script en cualquier lugar y en cualquier momento.
interdeal.draggable = false
noLogs
Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: undefined
1, 0, undefined, true, false, etc…
Descripción:
Deshabilitar los logs del widget en la consola, Por defecto, nuestro widget está inyectando logs a la consola con cierta información, si quieres deshabilitarlo, usa esta bandera.
//Sólo funcionará si se establece desde el script de accesibilidad.
window.interdeal = {
sitekey : ... ,
Position : ... ,
Menulang : ... ,
noLogs : true ,
btnStyle : {
...
},
domains : {
...
}
}
//Desde un script en cualquier lugar y en cualquier momento.
interdeal.noLogs = false
Eventos
Varios eventos que dispara el widget.
INDbuttonRevealed
Ejecutado por: body
Localización: Sin listener, sólo envío
Descripción:
Este evento se dispara cuando el botón termina su proceso de inicialización.
INDdragEnd
Ejecutado por: accessibility-button
Localización: interdeal.a11y.a11yBtn
Descripción:
Este evento se dispara cuando el botón termina su proceso de inicialización.