A Adobe Experience Manager suporta muitos recursos de acessibilidade padrão de acordo com vários padrões de acessibilidade. Além disso, os desenvolvedores podem personalizar ou estender para fornecer recursos que ajudam a criar conteúdo acessível usando componentes do Experience Manager que usam o Editor de Rich Text (RTE).
Ao projetar páginas da Web e adicionar conteúdo às páginas, os desenvolvedores e autores de conteúdo podem usar os recursos do RTE para fornecer informações relacionadas à acessibilidade. Por exemplo, adicione informações estruturais por meio de cabeçalhos e elementos de parágrafo.
Para configurar e personalizar esses recursos, configure os plug-ins RTE para o componente. Por exemplo, o plug-in paraformat
permite que você adicione elementos semânticos de nível de bloco adicionais, incluindo a extensão do número de níveis de cabeçalho suportados além dos H1
básicos, H2
e H3
fornecidos por padrão.
O RTE está disponível em diversos componentes para a interface do usuário habilitada para toque e a interface do usuário clássica. No entanto, o componente principal para usar o RTE é o componente Text que está disponível para ambas as interfaces. As imagens a seguir mostram o ERT com vários plug-ins ativados, incluindo paraformat
:
Figura: O componente Texto na interface do usuário habilitada para toque.
Figura: O componente Texto na interface do usuário do Classic.
Para obter as diferenças entre os recursos do RTE disponíveis nas várias interfaces, consulte Plug-ins e seus recursos.
Para obter as instruções completas para configurar o RTE, consulte configurar a página Editor de Rich Text. Isso abrange todos os problemas, incluindo as etapas principais:
Ao configurar um plug-in dentro da sub-ramificação rtePlugins
apropriada no CRXDE Lite, você pode ativar todos os recursos ou recursos específicos desse plug-in.
Podem ser disponibilizados novos formatos de blocos semânticos para seleção através de:
Dependendo do RTE, determine e navegue até o local de configuração.
Ativar o campo de seleção Parágrafos; ativando o plug-in.
Especifique os formatos que deseja que estejam disponíveis no campo de seleção Parágrafos.
Os formatos de parágrafo ficam disponíveis para o autor do conteúdo nos campos de seleção no RTE. Eles podem ser acessados:
Com os elementos estruturais disponíveis no RTE por meio das opções de formato de parágrafo, o AEM fornece uma boa base para o desenvolvimento de conteúdo acessível. Os autores de conteúdo não podem usar o RTE para formatar tamanho de fonte ou cores ou outros atributos relacionados, impedindo a criação de formatação em linha. Em vez disso, eles devem selecionar os elementos estruturais apropriados, como cabeçalhos e usar estilos globais escolhidos na opção Estilos. Isso garante a limpeza da marcação, maiores opções para usuários que navegam com suas próprias folhas de estilos e conteúdo estruturado corretamente.
Em alguns casos, os autores de conteúdo acharão necessário examinar e ajustar o código fonte HTML criado usando o RTE. Por exemplo, um conteúdo criado no RTE pode exigir marcação adicional para garantir a conformidade com o WCAG 2.0. Isso pode ser feito com a opção source edit do RTE. Você pode especificar o recurso sourceedit
no plug-in misctools
.
Use o recurso sourceedit
com cuidado. Erros de digitação e/ou recursos não suportados podem causar mais problemas.
Para estender ainda mais os recursos de acessibilidade do AEM, é possível estender os componentes existentes com base no RTE (como os componentes Text e Table) com elementos e atributos adicionais.
O procedimento a seguir ilustra como estender o componente Table por um elemento Legenda que fornece informações sobre uma tabela de dados para usuários de tecnologia assistiva:
No construtor do TablePropertiesDialog
, adicione um campo de entrada de texto adicional que seja usado para editar a legenda. Observe que itemId
deve ser definido como caption
(isto é, o nome do atributo DOM) para manipular automaticamente seu conteúdo.
Em Tabela, defina explicitamente ou remova o atributo do elemento DOM. O valor é transmitido pela caixa de diálogo no objeto config
. Observe que os atributos DOM devem ser definidos/removidos usando os métodos CQ.form.rte.Common
correspondentes ( com
é um atalho para CQ.form.rte.Common
) para evitar armadilhas comuns com as implementações do navegador.
Esse procedimento é adequado apenas para a interface do usuário do Classic.
O RTE pode usar as tags strong
e em
no lugar de b
e i
. Adicione o seguinte nó como um irmão aos nós uiSettings
e rtePlugins
na caixa de diálogo.
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
<typeConfig jcr:primaryType="nt:unstructured"
useSemanticMarkup="{Boolean}true">
<semanticMarkupMap
b="strong"
i="em"/>
</typeConfig>
</docType>
</htmlRules>
CRXDE Lite de start. Por exemplo: http://localhost:4502/crx/de/
Copiar:
/libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
para:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
Talvez seja necessário criar pastas intermediárias se elas ainda não existirem.
Copiar:
/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
para:
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
.
Abra o arquivo a seguir para edição (abra com clique no duplo):
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
No método constructor
, antes da leitura da linha:
var dialogRef = this;
Adicione o seguinte código:
editItems.push({
"itemId": "caption",
"name": "caption",
"xtype": "textfield",
"fieldLabel": CQ.I18n.getMessage("Caption"),
"value": (this.table && this.table.caption ? this.table.caption.textContent : "")
});
Abra o seguinte arquivo:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
.
Adicione o seguinte código no final do método transferConfigToTable
:
/**
* Adds Caption Element
*/
var captionElement;
if (dom.firstChild && dom.firstChild.tagName.toLowerCase() == "caption")
{
captionElement = dom.firstChild;
}
if (config.caption)
{
var captionTextNode = document.createTextNode(config.caption)
if (captionElement)
{
dom.replaceNode(captionElement.firstChild,captionTextNode);
} else
{
captionElement = document.createElement("caption");
captionElement.appendChild(captionTextNode);
if (dom.childNodes.length>0)
{
dom.insertBefore(captionElement, dom.firstChild);
} else
{
dom.appendChild(captionElement);
}
}
} else if (captionElement)
{
dom.removeChild(captionElement);
}
Salve as alterações usando Salvar tudo…
Um campo de texto sem formatação não é o único tipo de entrada permitido para o valor do elemento de legenda. Você pode usar qualquer widget ExtJS, que fornece o valor da legenda por meio do método getValue()
.
Para adicionar recursos de edição para outros elementos e atributos adicionais, verifique se ambos:
itemId
para cada campo correspondente está definida como o nome do atributo DOM apropriado (TablePropertiesDialog
).Table
).