Graças ao trabalho de @pmusaraj e ao meu, o Discourse agora inclui a opção de selecionar uma paleta de cores de alto contraste a partir do assistente de configuração.
Estão disponíveis versões clara e escura (elas são as duas últimas opções na lista). Sites existentes podem acessar as cores visitando community.yoursite.com/wizard/steps/color ou selecionando-as como paletas base ao criar uma nova em admin > personalizar > cores.
Uma vez criadas, essas paletas serão listadas em admin > personalizar > cores. Se você não estiver usando-as como as cores padrão do seu site, também pode permitir que os usuários selecionem essas paletas.
Quando configuradas como selecionáveis pelo usuário, os indivíduos podem escolher sua paleta de cores na seção de interface de suas preferências (community.yoursite.com/my/preferences/interface).
Se você encontrar qualquer problema com o contraste dessas paletas, por favor, nos avise para que possamos continuar atendendo aos padrões estabelecidos pelo WCAG!
Seria realmente bom se o esquema de cores padrão do Discourse atendesse aos padrões estabelecidos pelo WCAG. Você poderia comentar por que isso não é o caso?
Como o Discourse não foi originalmente projetado com cores de alto contraste, provavelmente seria necessário fazer alterações mais significativas além das cores para acomodar essas diferenças. Fazer isso como um primeiro passo permite que essas cores mais acessíveis sejam disponibilizadas hoje.
Um exemplo rápido é como mostramos a diferença entre tópicos lidos e não lidos. Por padrão, fazemos isso reduzindo o contraste após você ler um tópico:
Ao atender aos padrões WCAG, precisamos aumentar o contraste dos títulos lidos e, como resultado, há pouco contraste entre os tópicos lidos e não lidos… então, acredito que, a longo prazo, seria necessário considerar uma abordagem diferente do contraste para distinguir os dois.
Isso é fenomenal, e obrigado. Em nome de alguns dos meus usuários com deficiência visual que se queixaram disso, é muito apreciado. Já ativei isso imediatamente.
Depois de ler o primeiro post, fiquei com a impressão de que as novas cores precisavam ser selecionadas no Assistente para serem adicionadas a uma lista. Ao executar o assistente e chegar à página Cores, procurei uma maneira de selecionar todas as cores, pois queria adicionar as novas cores à lista. Aparentemente, minha compreensão estava incorreta. Pelo que estou vendo, com base na forma como as cores são selecionadas na página Cores, apenas um esquema de cores pode ser escolhido. Agora estou confuso.
O que é feito ao escolher um esquema na página Cores? Isso define o padrão para todos?
Por que apenas um esquema de cores é permitido no Assistente? Provavelmente a mesma resposta da pergunta 1.
Como estou escrevendo isso enquanto sigo o primeiro post, deixei as configurações da página Cores como estavam.
Avançando para admin > personalizar > cores. Após algumas experiências, descobri que:
Selecione Novo
Para Paleta base, abra o menu suspenso, que agora inclui WCAG Light e WCAG Dark.
Isso oferece uma maneira de selecionar os itens.
Então, selecionei WCAG Light e fui apresentado a um diálogo para nomear a Paleta de Cores e selecionar as cores. Como no exemplo, inseri o nome WCAG Light, selecionei Esquema de cores pode ser selecionado pelos usuários e cliquei em Salvar.
Avançando para community.yoursite.com/my/preferences/interface, não encontrei a seção Esquema de Cores.
Além disso, nosso site possui o Seletor de Tema de Hambúrguer. Eu pensava que eles apareceriam lá automaticamente, mas parece que preciso criar um novo Tema Base (Tema) para usá-los.
Isso não é uma reclamação, apenas algum feedback de alguém que está lendo o post pela primeira vez e fazendo um teste.
Olhei o seu site e não vejo a opção “Esquema de cores pode ser selecionado pelos usuários” habilitada em nenhum dos esquemas. Talvez você não tenha clicado na caixa de seleção para salvar a escolha?
Depois de adicionar algumas cores a mais que podem ser usadas pelos usuários, a opção de interface mudou para me dar uma escolha entre o modo Regular e o modo Escuro
Você pode detalhar o que isso significa? Estou prestes a configurar meu primeiro fórum e gostaria de personalizar o esquema de cores, além de suportar a troca automática para o modo escuro com base nas preferências do sistema do usuário.
Devo personalizar as cores usando esses novos esquemas como base?
Quais são os passos atuais para criar um esquema de cores personalizado, considerando as mudanças recentes na forma como os esquemas de cores são construídos para suportar o modo escuro (como discutido em tópicos recentes) e esses novos esquemas acessíveis?
Então, quando essas paletas WCAG são selecionadas, algum CSS adicional (encontrado aqui) é carregado para alterar as cores de vários elementos (geralmente para usar uma variável de cor com maior contraste do que a que usamos por padrão). Acredito que o CSS seja carregado com base no nome da paleta de cores…
Então, se você quiser modificar essas paletas e manter algumas das melhorias de contraste do CSS personalizado, acho que você só precisará não alterar o nome (isso está certo, @pmusaraj?).
Ou, alternativamente, você pode copiar o CSS do link acima e usá-lo em seu próprio tema (embora você perca as atualizações que fazemos).
Não, o CSS específico para WCAG é incluído se o esquema atual for uma derivação de um dos dois esquemas base do WCAG. Portanto, você pode nomear o novo esquema como quiser, mas se ele for criado a partir de um esquema base do WCAG, ele terá o CSS extra.
Ainda há um pouco mais de trabalho a fazer, mas não muito. Estamos a cerca de 99% do caminho e, atualmente, estamos trabalhando ativamente com um consultor de acessibilidade para fechar as últimas lacunas.
Seguindo este tópico, fico feliz em saber que o WCAG 2.0 é suportado. Posso ter perdido, mas não vi menção a legendas. O Discourse suporta legendas em ativos de vídeo? Existe algum mecanismo no Discourse para publicar vídeos com legendas?
Você pode adicionar legendas manualmente usando a tag de vídeo HTML5, e também há um componente de tema que oferece uma interface de usuário básica para isso.
