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
sitekey
Tipo: StringNo editable
Esta propiedad se genera automáticamente y no debe modificarse.
Valor por defecto: Autogenerado
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
position como valor único
Tipo: StringEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: left
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
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']
Idioma
Menulang
Tipo: StringNo editable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: EN
- 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
forceBtnAppearance
Tipo: BooleanEditable
Esta propiedad tiene valores por defecto si no se pasa.
Valor por defecto: undefined
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
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.
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
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.