{"id":4846,"date":"2018-07-06T12:37:52","date_gmt":"2018-07-06T15:37:52","guid":{"rendered":"http:\/\/blog.handtalk.me\/?p=1954"},"modified":"2023-08-25T18:01:20","modified_gmt":"2023-08-25T21:01:20","slug":"acessibilidade-web-responsabilidade-time","status":"publish","type":"post","link":"https:\/\/www.handtalk.me\/br\/blog\/acessibilidade-web-responsabilidade-time\/","title":{"rendered":"Acessibilidade Web como responsabilidade de todo o time do projeto"},"content":{"rendered":"

Qual o papel de cada pessoa envolvida no projeto com rela\u00e7\u00e3o \u00e0 acessibilidade?<\/em><\/p>\n

Quando falamos sobre desenvolver sites e aplica\u00e7\u00f5es web acess\u00edveis<\/span><\/a>, logo associamos como um trabalho relacionado a designers e desenvolvedores front-end: escolha de cores adequadas, fontes com boa legibilidade, c\u00f3digo acess\u00edvel a softwares leitores de tela.<\/p>\n

Todos estes requisitos s\u00e3o importantes para garantir que a solu\u00e7\u00e3o esteja acess\u00edvel, mas o planejamento de acessibilidade come\u00e7a muito antes das especifica\u00e7\u00f5es t\u00e9cnicas<\/strong>. O layout<\/i> e o front-end do projeto est\u00e3o nas \u00faltimas camadas do desenvolvimento. Na Figura 1, temos um modelo em camadas que ilustra como o desenvolvimento de um site ou aplicativo envolve v\u00e1rias etapas.<\/p>\n

O gr\u00e1fico mostra que o desenvolvimento inicia em um plano de concep\u00e7\u00e3o abstrata e vai sendo concretizado e amadurecido ao longo do tempo. O design da interface e o desenvolvimento front-end podem ser enquadrados na camada de superf\u00edcie (Design Visual), como a ponta de um iceberg. Percebam que, abaixo desta superf\u00edcie, h\u00e1 v\u00e1rios aspectos a serem definidos que envolvem outros profissionais, inclusive n\u00e3o relacionados \u00e0 tecnologia, e que sustentam a superf\u00edcie.<\/p>\n

Em cada um destes elementos de Experi\u00eancia do Usu\u00e1rio (UX), h\u00e1 requisitos de acessibilidade que precisam ser trabalhados por profissionais espec\u00edficos<\/strong>, envolvendo at\u00e9 redatores de conte\u00fado.<\/p>\n

\"\"<\/p>\n

Figura 1. <\/b>Os elementos de Experi\u00eancia do Usu\u00e1rio, baseado em \u201cThe Elements of User Experience\u201d de Jesse James Garrett, traduzido por Caelum. Descri\u00e7\u00e3o completa da imagem em:\u00a0https:\/\/bit.ly\/2KTglD3<\/a><\/span>.\u00a0<\/span>Fonte: <\/span>https:\/\/www.caelum.com.br\/apostila-ux-usabilidade-mobile-web\/experiencia\/<\/span><\/a> <\/span><\/p>\n

A primeira camada, que envolve a estrat\u00e9gia ao identificar as necessidades dos usu\u00e1rios<\/strong>, passa pela identifica\u00e7\u00e3o das necessidades de todos<\/strong> os usu\u00e1rios, inclusive pessoas com defici\u00eancias<\/strong>. Quando a pessoa com defici\u00eancia j\u00e1 exclu\u00edda nesta primeira camada, pode ser que n\u00e3o seja contemplada nas demais.<\/p>\n

Os requisitos funcionais e de conte\u00fado definem o escopo, onde precisamos incluir o que o site pode ou n\u00e3o pode fazer em termos de acessibilidade.<\/p>\n

Em seguida, o design da intera\u00e7\u00e3o e arquitetura da informa\u00e7\u00e3o transformam os requisitos na estrutura do produto, definindo como as informa\u00e7\u00f5es s\u00e3o organizadas e comunicadas, como o sistema responde \u00e0s a\u00e7\u00f5es e como o site e os seus elementos ir\u00e3o se comportar para que sejam de f\u00e1cil utiliza\u00e7\u00e3o para usu\u00e1rios com e sem defici\u00eancia.<\/p>\n

A pen\u00faltima camada \u00e9 o esqueleto, que concretiza a estrutura e come\u00e7a a definir elementos visuais da interface. E, por fim, a superf\u00edcie \u00e9 o refinamento do esqueleto.<\/p>\n

Vamos entender o papel de cada profissional no planejamento de acessibilidade?<\/p>\n

Gerente de Projetos \/ Produtos<\/h3>\n

Nos preocupamos em capacitar as equipes t\u00e9cnicas de projetos, mas esquecemos que as pessoas respons\u00e1veis pela gest\u00e3o do projeto ou produto tamb\u00e9m devem estar cientes da import\u00e2ncia da acessibilidade.<\/p>\n

A pessoa respons\u00e1vel pela gest\u00e3o do projeto\/produto que est\u00e1 a par da acessibilidade ir\u00e1 pensar nas necessidades dos usu\u00e1rios com defici\u00eancias, incluir\u00e1 \u00a0requisitos relacionados \u00e0 acessibilidade no projeto e pode direcionar o time de desenvolvimento para produzir o projeto ou produto de modo acess\u00edvel.<\/strong><\/p>\n

Ela tamb\u00e9m ir\u00e1 considerar no cronograma o tempo para testes de acessibilidade e ir\u00e1 defender a import\u00e2ncia dos requisitos de acessibilidade junto a outras partes interessadas do projeto, sendo uma grande aliada que garante que a acessibilidade n\u00e3o ser\u00e1 \u201ccortada\u201d do projeto.<\/p>\n

Redatores e Equipe de Comunica\u00e7\u00e3o<\/h3>\n

H\u00e1 empresas que possuem uma equipe especializada para redigir todo o conte\u00fado de um site, incluindo legendas de imagens, t\u00edtulos de p\u00e1ginas, texto de links, r\u00f3tulos de bot\u00f5es e mensagens informativas ou de erro, o que chamamos de microcopy<\/i> na \u00e1rea de UX. Estes profissionais redigem tamb\u00e9m textos de blogs corporativos e do conte\u00fado das p\u00e1ginas.<\/p>\n

Os profissionais de comunica\u00e7\u00e3o devem estar a par do conceito de acessibilidade para que possam redigir conte\u00fados que tenham linguagem adequada ao p\u00fablico<\/strong>, sejam descritivos e informativos, sem erros ortogr\u00e1ficos, representando sem ambiguidade o conte\u00fado. A parte dos erros ortogr\u00e1ficos \u00e9 significativa porque um texto com erro ser\u00e1 lido de forma errada pelo leitor de telas e tamb\u00e9m podem impactar pessoas com dislexia.<\/p>\n

At\u00e9 mesmo os links devem ser bem descritos para que possam ser lidos de forma correta por pessoas com defici\u00eancia visual que usam leitores de tela. Caso a equipe de comunica\u00e7\u00e3o ou Web Writing<\/i> seja respons\u00e1vel por descrever as imagens do site, eles tamb\u00e9m devem estar cientes em como fazer isso de forma adequada.<\/p>\n

UX Designer \/ Arquiteto de Informa\u00e7\u00e3o<\/h3>\n

Tanto UX Designers quanto Arquitetos de Informa\u00e7\u00e3o<\/a> trabalham em conjunto no design de intera\u00e7\u00e3o, arquitetura de informa\u00e7\u00e3o e no design de interface, navega\u00e7\u00e3o e informa\u00e7\u00e3o. Esta etapa \u00e9 a base para a constru\u00e7\u00e3o do layout<\/i> final e tem impacto direto em como as pessoas conseguem compreender o funcionamento do site e encontrar as informa\u00e7\u00f5es necess\u00e1rias.<\/p>\n

Estes profissionais precisam projetar a intera\u00e7\u00e3o e a navega\u00e7\u00e3o sob a lente do design inclusivo<\/strong> para considerar se n\u00e3o est\u00e3o projetando uma escada: a escada est\u00e1 dispon\u00edvel para todos, mas nem todos conseguem utiliz\u00e1-la, por isso, n\u00e3o \u00e9 acess\u00edvel.<\/p>\n

Que tipo de navega\u00e7\u00e3o ser\u00e1 utilizada? Haver\u00e1 busca? Como as informa\u00e7\u00f5es ser\u00e3o dispostas na tela? Como o site ir\u00e1 se comportar em dispositivos m\u00f3veis? Como pessoas canhotas poder\u00e3o clicar neste bot\u00e3o ao usar um celular? Os elementos utilizados na interface s\u00e3o facilmente reconhec\u00edveis? As cores possuem um bom contraste? As fontes s\u00e3o leg\u00edveis? Os conte\u00fados est\u00e3o bem organizados de forma que n\u00e3o causam uma sobrecarga cognitiva para leitura? Estas s\u00e3o apenas algumas quest\u00f5es relacionadas \u00e0 acessibilidade que UX Designers e Arquitetos de Informa\u00e7\u00e3o podem pensar.<\/p>\n

\"Imagem<\/a><\/p>\n

Front-end<\/h3>\n

Profissionais de front-end s\u00e3o as pessoas mais demandadas quando se fala em desenvolver uma solu\u00e7\u00e3o web acess\u00edvel<\/strong>, afinal, a camada de front-end de um site \u00e9 o meio pelo qual as pessoas ir\u00e3o interagir. Embora responsabilidade da acessibilidade seja delegada em grande parte a esta atividade, a tarefa da equipe de front-end reflete tudo o que foi definido nas etapas anteriores.<\/p>\n

A equipe de front-end ir\u00e1 construir a interface de acordo com o layout <\/i>projetado, ir\u00e3o inserir os textos alternativos e conte\u00fados definidos por Web Writers<\/i> e far\u00e3o com que os componentes se comportem de acordo com a intera\u00e7\u00e3o definida. E tudo isso deve ser desenvolvido de forma que possam ser acess\u00edvel com o uso de tecnologias assistivas, como leitores de tela.<\/p>\n

Back-end<\/h3>\n

Profissionais de back-end s\u00e3o respons\u00e1veis pela programa\u00e7\u00e3o de funcionalidades e componentes do lado do servidor<\/strong>, lidando, por exemplo, com banco de dados, integra\u00e7\u00f5es e a l\u00f3gica da aplica\u00e7\u00e3o. S\u00e3o informa\u00e7\u00f5es que depois s\u00e3o refletidas na camada de front-end. Se back-end n\u00e3o \u00e9 respons\u00e1vel por artefatos que interagem diretamente com os usu\u00e1rios, como podem contribuir com a acessibilidade?<\/p>\n

Back-end tamb\u00e9m trata de performance<\/i> (desempenho) da solu\u00e7\u00e3o. Uma baixa performance impede que o site seja carregado em dispositivos mais limitados. Al\u00e9m disso, a demora para carregar pode causar desconforto em pessoas com alguns transtornos de desenvolvimento, como o autismo.<\/p>\n

H\u00e1 casos em que o time de back-end desenvolve alguns componentes de front-end, como formul\u00e1rios. Por isso, devem estar cientes tamb\u00e9m de como utilizar os atributos corretos para que estes formul\u00e1rios sejam acess\u00edveis e de f\u00e1cil navega\u00e7\u00e3o via teclado e softwares leitores de tela. \u00a0Valida\u00e7\u00f5es e mensagens de erro tamb\u00e9m devem ser tratadas para que comuniquem de forma correta os erros apontados para ajudar pessoas com defici\u00eancia cognitiva.<\/p>\n

Analista de Teste<\/h3>\n

Por fim, temos o time de analistas de testes ou QA (Quality Assurance, Garantia de Qualidade). Profissionais de QA s\u00e3o respons\u00e1veis por encontrar os erros (bugs) e falhas de uma aplica\u00e7\u00e3o antes que ela seja disponibilizada ao cliente<\/strong> para garantir que ser\u00e1 entregue um projeto de qualidade.<\/p>\n

A equipe de QA pode contar com especialistas em acessibilidade que fa\u00e7am testes espec\u00edficos para garantir que as funcionalidades e o conte\u00fado est\u00e3o acess\u00edveis, realizando verifica\u00e7\u00e3o com diferentes leitores de tela e navegadores de internet, utilizando listas de verifica\u00e7\u00e3o e ferramentas que simulem diferentes tipos de defici\u00eancia.<\/p>\n

…<\/p>\n

Estas s\u00e3o algumas considera\u00e7\u00f5es sobre como toda a equipe deve estar comprometida com a Acessibilidade Web. Tem algo para acrescentar ou compartilhar conosco? Conte para n\u00f3s nos coment\u00e1rios \ud83d\ude42<\/p>\n

Por Talita Pagani<\/span>\u00a0<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Qual o papel de cada pessoa envolvida no projeto com rela\u00e7\u00e3o \u00e0 acessibilidade? Quando falamos sobre desenvolver sites e aplica\u00e7\u00f5es web acess\u00edveis, logo associamos como um trabalho relacionado a designers e desenvolvedores front-end: escolha de cores adequadas, fontes com boa legibilidade, c\u00f3digo acess\u00edvel a softwares leitores de tela. Todos estes requisitos s\u00e3o importantes para garantir […]<\/p>\n","protected":false},"author":2,"featured_media":4847,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,14],"tags":[52,91,92,311,93,426,427,428,429,430,431,432,433,434,435,283,285,436,437,438],"class_list":["post-4846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-acessibilidade","category-acessibilidade-digital","tag-acessibilidade","tag-acessibilidade-digital","tag-acessibilidade-na-web","tag-acessibilidade-no-site","tag-acessibilidade-web","tag-back-end","tag-conteudo","tag-desenvolvimento","tag-desenvolvimento-de-sites","tag-design","tag-designer","tag-dev","tag-experiencia-do-usuario","tag-front-end","tag-projeto-de-acessibilidade","tag-site-acessivel","tag-sites-acessiveis","tag-user-experience","tag-ux","tag-web-acessivel"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/4846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/comments?post=4846"}],"version-history":[{"count":0,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/posts\/4846\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/media\/4847"}],"wp:attachment":[{"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/media?parent=4846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/categories?post=4846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.handtalk.me\/br\/wp-json\/wp\/v2\/tags?post=4846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}