Tipo de documento: Declaração consolidada de alinhamento e inventário de implementação\ Língua: Inglês\ Última atualização: 2026-05-12
** Tipo de documento:** Declaração consolidada de alinhamento e inventário de implementação
** Língua:** Inglês
** Última atualização:** 2026-05-12
Este documento descreve **capacidades e padrões que estão presentes ** na engenharia de produtos. É not um certificado legal, VPAT, ou relatório de auditoria de terceiros.
Esta declaração descreve como a linha de produtos widget de chat ChatCase posiciona sua engenharia de interface de usuário em relação às normas de acessibilidade internacionalmente reconhecidas. Aplica-se ao widget baseado em Angular fornecido através de bootstrap dinâmico e um contexto de navegação incorporado, como usado em sites de clientes.
O escopo é a experiência interativa widget (launcher, conversas, formulários, mídia e sobreposições relacionadas) como implementado nesta base de código.
Esta declaração pode ser compartilhada com clientes, integradores ou especialistas em acessibilidade como contexto para como o widget é construído e mantido. Não substitui as avaliações de acessibilidade específicas de um determinado sítio web, a política de conteúdos ou a transposição nacional da legislação em matéria de acessibilidade.
O trabalho de acessibilidade sobre este produto é informado pelos seguintes níveis de referência técnicos e regulamentares, que as organizações utilizam habitualmente quando especificam a acessibilidade digital para os contratos públicos e a gestão do risco empresarial:
• W3C Web Content Accessibility Guidelines (WCAG) 2.2 (Nível AA como alvo de design) □ ** W3C Aplicações de Internet Acessíveis Ricos (WAI-ARIA) 1.2** Padrões para componentes personalizados, regiões, diálogos, regiões vivas e relacionamentos onde HTML nativo sozinho é insuficiente. □ ETSI EN 301 549 (norma europeia de acessibilidade para produtos e serviços TIC, incluindo os requisitos 2.x-aligned WCAG)
Os pedidos formais de conformidade para uma implantação específica continuam a ser da responsabilidade da organização de implantação e são normalmente apoiados por uma avaliação independente contra a versão aplicável da WCAG e qualquer transposição regional da EN 301 549.
O widget é implementado como uma aplicação de página única focada dentro de um iframe, com um script bootstrap pai-página responsável por incorporar. A atenção da engenharia é direcionada para:
buttonelementos onde o modelo de interação é ativacional; controles somente de ícones são pareados com translatablearia-label(ou equivalente) texto dos mapas de tradução do produto.role="region") e skip affordances para que os usuários de teclado possam mover-se eficientemente para o compositor de mensagens.role="dialog", aria-modal, rotulagem) consistente com a orientação de diálogo WAI-ARIA, com suporte de gerenciamento de foco via CDK Angular onde aplicado.Testes e garantia de qualidade combinam revisão de modelo estático, verificação de construção, diagnósticos, verificação manual de teclado, testes de fumaça de leitor de tela e verificação de movimento reduzido, de acordo com a prática da indústria comum para widgets complexos.
@chat21/chat21-web-widget□
Version (Versão) 5.1.33
□ Stack □ Angular 18.2.x (NgModule bootstrap), Angular CDK 17 (A11yModule), hospedado em iframe (launch.js) ;
□ Orientação das normas (WAI-ARIA 1.2)
□ Linguagem de documentosA tabela abaixo é o resumo de auto-avaliação ** usado internamente para acompanhar a amplitude do trabalho de acessibilidade em áreas de produtos. As pontuações numéricas refletem a amplitude da revisão interna e são não uma certificação de terceiros. Só são listadas as áreas onde as práticas de engenharia são ativamente aplicadas.
Área □ Pontuação (0–5)
HTML semântico 4.5 WCAG 2.2 AA Acessibilidade do teclado 4.5 WCAG 2.2 AA Compliance ARIA 4.5 WAI-ARIA 1.2 Formas de acessibilidade Dialogo / Acessibilidade modal > 4.5 O WAI-ARIA 1.2 (armadilha de foco via CDK Angular) Regiões vivas / Anúncios SR
Tópico
□ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Modo Bootstrap** NgModule (AppModule) viaplatformBrowserDynamic().bootstrapModule(AppModule) (src/main.ts). O pacote compilado é injetado em um iframe de mesma origem porsrc/launch.js, que constrói e estilos#chatcase-containerna página host.
Os componentes estandardizados** Não utilizados; os componentes são declarados emAppModule (src/app/app.module.ts).
Não utilizado em tempo de execução: navegação entrehome, list-conversations, conversation, selection-department, prechat-form, star-rating-widget, error-alerté conduzido por sinalizadores de modelo dentroAppComponent. |
| i18n | @ngx-translate/core16 com dicionários JSON emsrc/assets/i18n/{en,it,es,fr}.jsonmais um dicionário remoto opcional. A língua ativa é propagada para<html lang>no documento do widget.
@angular/cdk/a11y (A11yModule) — apoio à armadilha de foco para modais onde integrados. □O widget expõe mais de 30 componentes. As tabelas abaixo cobrem componentes interativos que fazem parte da superfície de execução; serviços de dados puros e ajudantes de apresentação são omitidos.
□AppComponent | chat-root□ Raiz da aplicação:focus-visibleAnel abrangido parachat-root; prefers-reduced-motionhonrado
□LauncherButtonComponent | chat-launcher-button | <button> | type="button", aria-labeldeBUTTON_OPEN_CHAT, foco visível
□EyeeyeCatcherCardComponent | chat-eyeeye-catcher-cardBotões Todas as áreas clicáveis são reais<button type="button">comaria-label |
| LastMessageComponent | chat-last-message□ Botões<button>comaria-label; close é um botão real
□HomeComponent | role="region" + aria-label | <h1>bem-vindos,<p>intro; close/maximize/minimize/center são botões; canais sociais rotulados de
□HomeConversationsComponent | role="list" + role="listitem""Mostre todas as conversas" e "Comece uma nova conversa" são botões comaria-label; usos de crachá arquivadosrole="img" |
| ListAllConversationsComponent | role="region" | <h2>título; volta é um botão; mortoaltIconTitleMarcação SVG removida
□ListConversationsComponent□ Listar itens □ Cada item ativa um botão; contadores/falhas marcadasaria-hidden="true" |
| SelectionDepartmentComponent | role="dialog" aria-modal="true" cdkTrapFocus | <h2>título, Escape fecha, as opções são botões reais
Componente □ Papel / ponto de referência
1-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
□ConversationComponent | role="region"• Visível- em- foco ignorar link → compositor (WCAG 2.4.1); rolagem- para- fundo é um botão comaria-label |
| ConversationHeaderComponent | <button>barra de ferramentas □ Cada controle é<button type="button">comaria-label; opções popover usaaria-expanded/aria-haspopup="true"/aria-controls; itens popover são botões reais agrupados sobrole="group"(Esc fecha)
□ConversationContentComponent | role="log" aria-live="polite"Cada mensagem envolto emrole="article"; slides de carrossel exporrole="group" + aria-roledescription="slide" |
| ConversationFooterComponent□ Região semelhante ao formulário □ Anexo/emoji/enviar/registro são botões; painel emoji érole="dialog"; área de alerta érole="alert" aria-live="assertive" |
| ConversationAudioRecorderComponent□ Botõesaria-pressed; play/pause/delete/enviar todas as etiquetas
□ConversationPreviewComponent | role="dialog" aria-modal="true" cdkTrapFocus | aria-labelledbyviaLABEL_PREVIEW; Esc fecha; fechar/enviar são botões
□ConversationInternalFrameComponentO painel tem o Iframetitle, sandbox, referrerpolicy, loading="lazy"; spinneraria-hidden |
| MenuOptionsComponent | role="group"popover □ A opção de som usaaria-pressed; Esc fecha; botão alternar anunciaaria-expanded/aria-haspopup="true"□
□PrechatFormComponent | role="dialog" aria-modal="true" cdkTrapFocus; <h2>título; Escape fecha
□FormBuilderComponentO botão Enviar étype="button"; semântica de forma nativa
□FormTextComponent | <label for> ↔ <input id>; aria-required, aria-invalid, aria-describedbyao errorole="alert"; :focus-visibleanel
□FormTextareaComponentO mesmo padrão queFormText, maisaria-multiline |
| FormCheckboxComponentNativo<input type="checkbox">ligado a<label>; Estados de validação ARIA
□FormRadioButtonComponentNativo<input type="radio"> |
| FormSelectComponentNativo<select> |
| FormLabelComponent□ Ranhura do rótulo pura
□BubbleMessageComponent□ Selector de classe que substitui o anterior duplicadoid="bubble-message"; carrega mapa de tradução para baixo
□TextComponentA raiz é<div>; markdown renderizado através demarkedpipe; CSS visa o.message_innerhtmlembrulho .
□HtmlComponentEmbrulhador de classe; desinfetante
□ImageComponent□ Embrulhado<button>comaria-label; lightbox é umrole="dialog"iframe com botão de fechamento, suporte Escape e restauração de foco
□FrameComponentIframe endurecido: dinâmicotitle, sandbox, referrerpolicy, loading="lazy" |
| AudioComponentReproduzir/pausar botões rotulados atravésBUTTON_PLAY_AUDIO / BUTTON_PAUSE_AUDIO |
| CarouselComponentO wrapper expõerole="region" aria-roledescription="carousel" aria-label; cada carta érole="group" aria-roledescription="slide" aria-label="Slide N of M"; setas e CTAs são botões
□ActionButtonComponent, LinkButtonComponent, TextButtonComponentReal<button> / <a>comaria-label |
| ReturnReceiptComponent, LikeUnlikeComponent, AvatarComponent, InfoMessageComponentIconografia decorativa sinalizadaaria-hidden="true"; conteúdo semântico carrega alternativas de texto
□ConfirmCloseComponent | role="dialog" aria-modal="true" cdkTrapFocus aria-labelledby="confirm-close-title"; <h2>cabeçalho; Escape fecha; cancel/confirmar são botões reais
□ErrorAlertComponentFornece mensagens de erro translatáveis
□StarRatingWidgetComponent□ Estrelas expostas como botões; a área de comentários é uma área de texto rotulada
A tabela a seguir lista ** critérios de sucesso para os quais o widget implementa padrões de suporte** que foram revistos na instrução de engenharia. Cada linha documenta o que está presente na linha de produtos.
1.1.1 Conteúdo não-texto Todos os ícones informativos carregamaria-label/alt; SVGs decorativos usararia-hidden="true"efocusable="false"□
Informações e Relacionamentos<h1>/<h2>posições,role="log", role="article", role="list", programático<label for> ↔ <input id>□
1.3.2 Sequência Significativa A ordem do passe do Tab segue ordem de leitura; altatabindexvalores removidos
Contraste (Mínimo) (AA) (Passo) (Passo) (Passo) (Passo) (Passo) (Passo) (Passo) (Paletas personalizadas)
□ 1.4.4 Redimensionar o texto O layout é baseado em; honra a escala de fonte do usuário □
□ 1.4.10 Refluxo □ AA □ Pass □ Disposição responsiva; sem rolagem horizontal a 320 pixels CSS
1.41 Contraste não-text2px solid #1a73e8, ≥ 3:1 contra fundos de widgets
Espaçamento de Texto Nenhuma linha fixa crítica-altura/carta-espaçamento substitui
Conteúdo em Hover ou Foco ..Passo ..:hover/:focus, descartável, persistente; nenhuma demissão baseada no tempo
2.1.1 Teclado Um passe Todos os elementos acionáveis são alcançáveis e operáveis a partir do teclado (botões reais, controles de forma nativa)
Não há armadilha de tecladocdkTrapFocuscaptura somente dentro de diálogos; Esc e foco de retorno de diálogo-fechar
2.1.4 Atalhos de Chave de Caracteres O widget não vincula atalhos de caracteres únicos globalmente .
2.2.2 Pause, Stop, Ocultar Um Passo As animações são decorativas e curtas; a consulta de mídia de movimento reduzido as desativa inteiramente
• 2.3.3 Animação a partir de Interaçõesprefers-reduced-motion: reduceneutraliza animações e transições dentrochat-root□
2.4.1 Blocos de bypass A Pass Pular link na superfície da conversa salta foco para o compositor de mensagens
□ 2.4.3 Focus Order (Ordem de Foco) A Pass (Ordem lógica): header → log → compositor → rodapé; altotabindexremovido
□ 2.4.7 Foco Visíveloutline: noneRemovido;:focus-visibleregra abrangidachat-root□
2.4.11 Focus Not Obscured (Min) (AA) AA Pass O cabeçalho/pé pegajoso deixam o controle ativo visível; verificado com o botão do lançador
2.5.7 Movimentos de Arrastamento AA Pass.O carrossel pode ser operado por botões de seta próximos / anteriores, além de arrastar
Tamanho do alvo (Mínimo)
3.1.1 Linguagem da Página<html lang>sincronizado com a língua i18n ativa porTranslatorService.syncDocumentLang□
3.2.1 Em Foco Nenhuma mudança de contexto no foco .
3.2.2 Na entrada .. Nenhuma alteração de contexto na entrada; o usuário sempre confirma □
Ajuda Consistente A Passarmenu-options) são consistentes em todas as visões ;
Identificação de Erros ..A ..Pass ..Os erros do formulário são anunciados comrole="alert"earia-invalid□
3.3.2 Etiquetas ou Instruções Todos os campos de formulário têm etiquetas programáticas e placeholder não é o único rótulo .
Sugestão de Erros ..3.3.3LABEL_ERROR_FIELD_NAME, LABEL_ERROR_FIELD_EMAIL, LABEL_ERROR_FIELD_REQUIRED) explicar a questão
□ 3.3.7 Entrada redundante A Pass □ Os dados do formulário pré-chat são persistidos e re-aplicados através da reabertura
4.1.2 Nome, Papel, Valor Todos os controles personalizados convertidos para HTML nativo ou carregam ARIA válido
4.1.3 Mensagens de Statusrole="log"/aria-live="polite"; usa alerta bloqueado emojirole="alert"□
Esta seção inventários ** práticas de engenharia de concreto** presentes na base de código.
*@angular/cdk/a11y (A11yModule) importados emAppModule.
cdkTrapFocus + cdkTrapFocusAutoCapture="true"em superfícies de diálogo incluindoConversationPreviewComponent, ConfirmCloseComponent, SelectionDepartmentComponent, PrechatFormComponent.@HostListener('keydown.escape')em componentes de diálogo para fechar em Escape e emitir o evento fechado.
*<h2>cabeçalho na janela confirmar- fechar ligadoaria-labelledby="confirm-close-title".
Nativo<dialog>comshowModal()quando utilizado para confirmar-fechar para que o navegador aplique o comportamento de foco, além do CDK.<button type="button">comaria-label.role="dialog", aria-modal="true"e explícitaaria-label.<button>comaria-labele contorno visível-foco.langherdado; transições desactivadas emprefers-reduced-motion.ConversationComponent (.c21-skip-link) que saltam para#chat21-main-message-contextviaskipToCompose().role="region" + aria-label on HomeComponent, ListAllConversationsComponent, ConversationComponent.<h1>para o título de boas-vindas;<p>Introdução;<h2>para o título lista-to-conversas.TranslatorServiceatualizaçõesdocument.documentElement.langquando um pacote de tradução carrega (somente documento widget iframe).
□CAROUSEL_LABEL | aria-labeldo recipiente de carrossel .
□CAROUSEL_SLIDE_LABEL□ Modelo paraaria-label="Slide {current} of {total}"por slide
□SKIP_TO_COMPOSERTexto do link de skip
Um bloco de pesquisa de mídiasrc/app/sass/animations.scssneutraliza duração da animação, atraso da animação, duração da transição escroll-behaviorpara descendentes dechat-rootquandoprefers-reduced-motion: reduceestá ativo.
9,6 Menu padrão
Menus de contextoconversation-headerechat-menu-optionssão modelados comorole="group"de nativo<button>elementos: gatilho expõearia-expanded, aria-haspopup="true", aria-controls; popover temaria-label; usos de alternância de somaria-pressed; Escape fecha o grupo.
9.7 Carrossel
role="region", aria-roledescription="carousel", localizadoaria-label.role="group", aria-roledescription="slide", aria-label="Slide N of M"(localizável).<button type="button">comaria-labeldeCAROUSEL_PREVIOUS / CAROUSEL_NEXT.<button>comaria-label.alt; Usos de substituiçãoalt="".9.8 Formulários
form-text, form-textarea, form-checkboxexpor o pareamento entre rótulos, entradas e regiões de erro (aria-describedby, aria-invalid, role="alert"sobre os erros).
9.9 Iframes
FrameComponenteConversationInternalFrameComponentdeclarartitle, sandbox, referrerpolicy, eloading="lazy"em quadros embutidos.
app.component.scssdefine:focus-visiblelinhas de açãochat-rootEntão o foco do teclado é visível sem os anéis de foco do mouse em cada clique.
• Revisão estática*.component.html), estilos (*.component.scss), e classes de componentes revisadas contra WCAG 2.2, WAI-ARIA 1.2 e EN 301 549 como referência informativa.
□ Verificação da compilaçãong builde verificação de tipo de modelo angular.
Diagnósticos do tipo e diagnósticos do modelo angular em arquivos modificados.
• Teclado manual passe-through • Tab / Shift+Tab / Enter / Space / Esc através do lançador → home → conversa → compositor (link skip), menu popovers, confirmar-fechar, prechat, seleção de departamento, caixa de luz de imagem, setas de carrossel. □
□ Leitor de tela smoke test □ NVDA, VoiceOver — cabeçalhos, anúncios de log, rótulos de diálogo, etiquetas de botões na língua ativa. □
prefers-reduced-motion: reduce, animações e transições dentrochat-rootsão neutralizados.Os seguintes caminhos são locais primários para verificar as práticas acima:
src/app/app.module.ts
src/app/app.component.html
src/app/app.component.scss
src/app/sass/animations.scss
src/app/providers/translator.service.ts
src/app/providers/brand.service.ts
src/app/utils/utils-resources.ts
src/app/utils/globals.ts
src/app/component/home/home.component.html
src/app/component/home/home.component.scss
src/app/component/home-conversations/home-conversations.component.html
src/app/component/list-all-conversations/list-all-conversations.component.html
src/app/component/list-all-conversations/list-all-conversations.component.scss
src/app/component/selection-department/selection-department.component.html
src/app/component/selection-department/selection-department.component.ts
src/app/component/conversation-detail/conversation/conversation.component.html
src/app/component/conversation-detail/conversation/conversation.component.scss
src/app/component/conversation-detail/conversation/conversation.component.ts
src/app/component/conversation-detail/conversation-header/conversation-header.component.html
src/app/component/conversation-detail/conversation-content/conversation-content.component.html
src/app/component/conversation-detail/conversation-footer/conversation-footer.component.html
src/app/component/conversation-detail/conversation-footer/conversation-footer.component.ts
src/app/component/conversation-detail/conversation-preview/conversation-preview.component.html
src/app/component/conversation-detail/conversation-preview/conversation-preview.component.ts
src/app/component/conversation-detail/conversation-internal-frame/conversation-internal-frame.component.html
src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.html
src/app/component/conversation-detail/conversation-audio-recorder/conversation-audio-recorder.component.ts
src/app/component/menu-options/menu-options.component.html
src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.html
src/app/component/eyeeye-catcher-card/eyeeye-catcher-card.component.scss
src/app/component/last-message/last-message.component.html
src/app/component/last-message/last-message.component.scss
src/app/component/launcher-button/launcher-button.component.html
src/app/component/send-button/send-button.component.html
src/app/component/star-rating-widget/star-rating-widget.component.html
src/app/component/form/prechat-form/prechat-form.component.html
src/app/component/form/prechat-form/prechat-form.component.ts
src/app/component/form/form-builder/form-builder.component.html
src/app/component/form/inputs/form-text/*
src/app/component/form/inputs/form-textarea/*
src/app/component/form/inputs/form-checkbox/*
src/app/component/message/bubble-message/bubble-message.component.html
src/app/component/message/text/text.component.html
src/app/component/message/text/text.component.scss
src/app/component/message/html/html.component.html
src/app/component/message/html/html.component.scss
src/app/component/message/image/image.component.html
src/app/component/message/image/image.component.scss
src/app/component/message/image/image.component.ts
src/app/component/message/audio/audio.component.html
src/app/component/message/audio/audio.component.ts
src/app/component/message/frame/frame.component.html
src/app/component/message/frame/frame.component.ts
src/app/component/message/buttons/action-button/action-button.component.html
src/app/component/message/carousel/carousel.component.html
src/app/component/message/carousel/carousel.component.scss
src/app/component/message/carousel/carousel.component.ts
src/app/modals/confirm-close/confirm-close.component.html
src/app/modals/confirm-close/confirm-close.component.scss
src/app/modals/confirm-close/confirm-close.component.ts
src/assets/i18n/en.json
src/assets/i18n/it.json
src/assets/i18n/es.json
src/assets/i18n/fr.json
`$([Environment]::NewLine)
***
12. Referências
O recurso O URL
-------------------------------------------------------------------------------------------------------------------------------
• WCAG 2.2<https://www.w3.org/TR/WCAG22/>□
Práticas de Criação da WAI-ARIA<https://www.w3.org/WAI/ARIA/apg/>□
• EN 301 549 v3.2.1 • Publicação ETSI — Requisitos de acessibilidade para produtos e serviços TIC
Acessibilidade Angular do CDK<https://material.angular.dev/cdk/a11y/overview>□
Acessibilidade MDN<https://developer.mozilla.org/en-US/docs/Web/Accessibility>□
***
13. Alinhamento contínuo
A ChatCase continua, dia após dia, a acompanhar os padrões de acessibilidade e o comportamento da plataforma em todos os navegadores e tecnologias assistivas. O objetivo é ampliar a cobertura de critérios de sucesso orientados para WCAG, práticas de autoria WAI-ARIA e expectativas alinhadas com a EN 301 549, onde quer que se apliquem a esta categoria de produtos, e refletir essas expectativas em projetos, implementação e testes de liberação. Os padrões e implementações do usuário-agente evoluem; a postura de acessibilidade é mantida como parte do ciclo de vida normal da engenharia.
***
14. Contacto e feedback
Para perguntas de acessibilidade ou atualizações para uma implantação personalizada, contate os mantenedores deste repositório:<https://github.com/ChatCase/chat21-web-widget>As questões que mencionam **acessibilidade** no título são encaminhadas para a equipe responsável por esta declaração.