Editor de Texto Rico em Diretrizes de Acessibilidade

O Sakai usa um único Editor de Texto Rico em todas as áreas em que o texto pode ser adicionado, que é mais do que algumas linhas. Esse editor é baseado na versão estável mais recente do CKEditor.

Ao criar um conteúdo usando o editor de texto rico, é importante que o autor siga as orientações abaixo para garantir que o conteúdo possa ser lido e entendido por todos. Criar conteúdo bem estruturado e acessível é a melhor prática que garante que o conteúdo seja compatível com dispositivos de apoio, robusto o suficiente para copiar e colar outros contextos ou apresentar contextos inesperados, e é uma exigência legal em algumas jurisdições.

A medida técnica de acessibilitade do formato de um recurso baseado na web é a norma WCAG 2.0 do W3C .Os requisitos da WCAG2.0 são abreviados por quatro letras POUR:

  • Perceivable (Perceptível) - A informação deve ser apresentada aos usuários de forma que eles possam perceber.
  • Operable (Operável) - Os componentes de interface dos usuários, navegação e estrutura devem ser operados.
  • Understandable (Compreensível) - A informação e a operação da interface do usuário deve ser compreensível e a estrutura dos elementos são usadas de modo significativo.
  • Robust (Robusto) - O conteúdo deve ser robusto o suficiente para que possa ser interpretado de modo confiável por uma grande variedade de tecnologias, incluindo tecnologias assistivas.

Essas considerações relativamente simples fazem grande diferença, se aplicada quando o conteúdo é criado. O W3C fornece mais informações em sua Introdução à Noções sobre WCAG 2.0.

Imagens

Usuários com algumas incapacidades não será capaz de ver as imagens e/ou compreender o que elas tentam transmitir.

Quando Adicionar Descrições de Texto Alternativo para Imagens

  • Imagem simples com "significado simples" - adicionar o texto alternativo descritivo de 10-169 caracteres abaixo. O texto alternativo deve descrever o objeto educativo / informativo da imagem.
  • Imagem complexa com "significado rico" - adicionar um parágrafo acima ou abaixo com mais detalhes. Alguns ponteiros ("Próxima Imagem", "Imagem Anterior") ajudará a ligar imagens. Se a imagem referenciada de outros lugares no documento, poderá adicionar um parágrafo abaixo dela como legenda e, em seguida, referenciá-la. Se o texto alternativo  for longo não será viável, então poderá criar um link para uma página Web externa que contém uma descrição apropriada.
  • Imagem decorativa - se a imagem é meramente decorativa ou utilizada para formatação visual, a descrição do texto alternativo poderá ser deixada em branco para enconder de usuários de tecnologia assistiva.

Exemplos de Texto Alternativo

  • Alt Texto: "Cientista em um laboratório enche um frasco com líquido".
  • Descrição do texto antes ou depois da imagem: "Próxima Imagem / Imagem Anterior mostra um cientista forense do sexo feminino enchendo um frasco contendo uma pequena quantidade de sangue com líquido para desnaturar a amostra como parte do processo do método de análisa de DNA. No fundo está uma centrífuga que vai ajudar no processo de extração do DNA a partir da amostra de sangue".
  • Referência mais distante do corpo:

             "... A Figura 1.3 mostra a correlação entre o ...."

             [Imagem] Figura 1.3

 

Passos para Adicionar Texto Alternativo

  1. Ative o botão Imagem da barra de ferramentas.
  2. Localize a caixa de texto do "Texto Alternativo" na janela de diálogo que é carregado depois de ativar o botão. Coloque o texto alternativo adequado no campo do formulário fornecido.

[Figuras 1 e 2: Menu CKEditor e CKEditor Painel de Opções de Imagem. Para tela de leitura dos usuários que trabalham com o CKEditor veja o <link para a seção ckeditor> Documentação de acessibilidade </ link>]

Estrutura do Documento

Usuários de tecnologia assistiva dependem fortemente de cabeçalhos para navegar por conteúdo complexo. A estrutura do conteúdo complexo ajudará todos os usuários analisar melhor.

Quando Adicionar Estrutura com Cabeçalhos

Se o documento for esboçado ou você tem um esboço em mente ao escrevê-lo, então, adicionar cabeçalhos transmitirá a sua estrutura. Algumas notas:

  • Cabeçalhos apropriados:
  • Título 1 > Título 2
  • Título 2 > Título 3, Título 3, Título 3
  • Use títulos curtos como cabeçalhos que descrevem o conteúdo que se segue.
  • Se o conteúdo que você está criando em Recurso HTML começa com Título 1, em todos os outros casas, começar com um Título 4, uma vez que a aplicação já está usando Título 1 a Título 3. Seu conteúdo, nesses casos, será sempre um filho pré-existente do Título 3.

Exemplos de Estruturas

Esse documento é um exemplo.

Passos para Adicionar Cabeçalhos

Os título estão disponíveis a partir do menu Formatar. Como no exemplo acima.

[Figura 3: Menu Formatar do CKEditor. Para a tela de leitura dos usuários que trabalham com o CKEditor veja o <link para a seção ckeditor> Documentação de acessibilidade </ link>]

Nota: o tamanho padrão dos títulos sempre pode ser ajustado no menu Tamanho. O tamanho padrão de alguns Títulos mais elevados (H5 - H6) pode precisar de ajuste. Por outro lado, não use títulos para efeitos tipográficos.

Usando Elementos Semanticamente Úteis

Usuários de tecnologia assistiva se beneficiam quando os elementos utilizados na página têm uma relação com o significado que eles estão tentando transmitir visualmente.

Parágrafos

Um parágrafo (tecla Enter ou Return) é sempre mais significativo do que uma quebra de linha (Shift + Enter ou Return).

Listas

Se você pensar em uma série de itens na vertical como uma lista, você deve incluí-lo em sua página como uma lista. Selecione as linhas envolvidas e clique sobre a opção de lista numerada ou com marcadores.

[Figura 4: Botões Listar do CKEditor. Para a tela de leitura dos usuários que trabalham com o CKEditor veja o <link para a seção ckeditor> Documentação de acessibilidade </ link>]

Estilos de Linha

Usanr o estilo de formatação de texto correto é muito útil quanto "códigos" adequados. Estes estão disponíveis no menu "Estilos":

  •    Cited work
  •   Inline Quotation
  •    Computer Code
  •    Sample text
  •    Inserted e Deleted text

Se você está curioso para ver o que eles  fazem, adicione um estilo e mude para "Código Fonte" - esta é a forma como um leitor de tela irá "vê-lo". Citação em linha usará <q>, o que significará a abertura de uma citação em linha, muito útil. Obra citada irá criar um elemento que se apresenta como tal. Por outro lado, evite usar esses formatos especiais para conseguir um efeito tipográfico. Obra citada produz texto em itálico. Mas seria confuso para um leitor de tela, se você usou apenas por esse motivo.

[Figura 5: Menu de Estilos do CKeditor. Para a tela de leitura dos usuários que trabalham com o CKEditor veja o <link para a seção ckeditor> Documentação de acessibilidade </ link>]

Não use cor ou posição para transmitir informações

Por exemplo, "clique no botão verde à esquerda." Usuários cegos não são capazes de distinguir a cor do botão. Para a tela de leitura os usuários não têm noção de "esquerda" - a melhor solução é para citar o rótulo de destino:

Clique em "Iniciar Atividade", ou clique no botão "Salvar".

Uso adequado de contraste de cor

Muitos usuários que têm impedimentos visuais exigirão um bom contraste nos documentos que você produz. A melhor maneira de ajudar esses usuários é ter certeza de que o contraste entre o fundo eo primeiro plano tem uma proporção de 4.5: 1 ou superior. Deixando os padrões do editor  é melhor - como que provavelmente será o texto preto no branco, com uma proporção de 21: 1.

Exemplos de contrastes

Etapas para alterar primeiro plano e cores de fundo

Se você precisa editar a cor de fundo e a cor do texto, clique em qualquer controle mostrado acima (os botões serão parecidos com uma das opções acima, com cor de de primeiro plano na esquerda e cor de fundo à direita).

Na maioria dos casos o contraste vai ser óbvio, mas se você precisa verificar, clique na opção "mais cores", anote o número do hex para a cor que você selecionou (começando com #) e verifique as duas cores por meio de uma ferramenta on-line como de WebAIM Color Contraste Checker.

[Figura 6: cor do texto e do fundo CKEditor botões. Para a tela de leitura dos usuários que trabalham com o CKEditor veja o <link para a seção ckeditor> Documentação de acessibilidade </ link>]

[Figuras 7 e 8: CKeditor "Mais Cor" de opções. Para a tela de leitura dos usuários que trabalham com o CKEditor veja o <link para a seção ckeditor> Documentação de acessibilidade </ link>]

Usar tabelas

Os usuários de tela de leitura não podem ler tabelas da mesma maneira como os usuários avistados fazem. Usuários com visão podem dizer em poucas palavras o que uma coluna e uma linha de uma determinada célula está associada, um usuário que precisa de uma tela de leitura com a  tabela corretamente codificada. Para fazer tabelas utilizáveis é preciso colocar em um pouco de trabalho para eles.

Exemplos de Tabelas: Tabela Simples

Tabela simples: livros lidos por 2 pessoas. Só os cabeçalhos de coluna são necessários

Exemplos de Tabelas: Tabela Complexa

Tabela Complexa: livros lidos por 2 pessoas a cada semana. Cabeçalhos de coluna e linha necessário.

No segundo exemplo, um usuário com leitor de tela saberá que O Sound and Fury foi o livro lido por Tomiko na Semana 3.

 

Etapas para fazer tabelas acessíveis

Ao adicionar uma tabela adiciona-se uma linha e / ou coluna a ser utilizada como um cabeçalho para cada uma conforme apropriado. O menu de criação de tabela contém algumas opções cabeçalhos que permite a seleção da primeira linha, coluna ou ambos.

Adicionar um Sumário da tabela. O menu de criação de tabela oferece uma linha para adicionar um sumário que informará aos leitores sobre o conteúdo da tabela. Bons exemplos são: "Os dados do estudo recente," "Tabela de entradas e saídas" etc.

Tabelas só devem ser usadas para dados tabulares, não para layout.

[Figura 9: Painel de Tabela do CKEditor. Para os usuários com leitor de tela que trabalham com o CKEditor veja o <link para a seção ckeditor> Documentação de acessibilidade </ link>]

Links

Usar Links de Texto únicos e descritivos

Usuários com tecnologia assistiva utilizam listas de links para navegar pelo conteúdo. Isso significa que eles não podem confiar no contexto de dizer o que um link faz. É por isso que cada link deve ser exclusivamente descritivo do que ele faz. O melhor lugar para o identificar um link está no texto do link. Bons exemplos são: "Ver Atividade 34", "Visite Sociedade Americana Entomológica", etc.

  1.  Nas listas onde cada item possui vários links associados seria fazer o primeiro exemplo mostrado acima.
  2.  O segundo exemplo acima seria melhor, se um pouco detalhado.

Adicionar texto alternativo para links de imagem

Para cada web link HTML incorporado ao editor de texto rico que contém apenas uma imagem e nenhum conteúdo textual, o texto alternativo conciso e descritivo é obrigatória (ver acima para obter instruções). O texto alternativo deve descrever a finalidade do link (por exemplo, O "destino" onde usuário será levado para após a ativação do link.)

Etapas para adicionar texto alternativo

  1. Ative o botão "imagem" na barra de ferramentas.
  2. Localize o "Texto alternativo" no formulário de entrada na caixa de diálogo que é carregado depois de ativar o botão.
  3. Coloque o texto alternativo apropriado no controle de formulário seguindo as orientações na seção heurísticas.

Identificar tipos de arqvuivos em link para download

Usuários com tecnologia assistiva se beneficiam de saber qual o tipo de arquivo que eles estão baixando. Quando você conecta a um arquivo no Editor, incluia a informação no texto do link.

Exemplo: redação (MS Word), relatório (PDF), apresentação (MS Powerpoint).

Usar títulos de páginas únicos e descritivos

Usuários com tecnologia assistiva confiam nos títulos das páginas. Você só vai se deparar com a necessidade de especificar isso quando você está criando uma página HTML na ferramenta de Recpositório. O título do novo documento será o mesmo que o nome do item, como mostra na lista.