{"id":486,"date":"2022-06-30T11:03:55","date_gmt":"2022-06-30T14:03:55","guid":{"rendered":"https:\/\/www.performaweb.com.br\/blog\/?p=486"},"modified":"2022-06-30T11:04:50","modified_gmt":"2022-06-30T14:04:50","slug":"web-design-acessivel","status":"publish","type":"post","link":"https:\/\/www.performaweb.com.br\/blog\/sem-categoria\/web-design-acessivel\/","title":{"rendered":"Web design acess\u00edvel: como deixar seu site acess\u00edvel para todos na internet"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Como voc\u00ea se sentiria se estivesse realmente animado para navegar em um site mas, ao entrar nele, n\u00e3o conseguisse acessar nenhum de seus conte\u00fados por falta de um web design acess\u00edvel? Imaginamos que n\u00e3o muito bem, n\u00e9?\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea n\u00e3o tiver um web design acess\u00edvel, essa \u00e9 a situa\u00e7\u00e3o que voc\u00ea ir\u00e1 criar para muitas pessoas que acessam o seu site.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Seguir as diretrizes de acessibilidade para web design n\u00e3o \u00e9 f\u00e1cil se voc\u00ea nunca fez isso antes, mas vamos descrever algumas coisas que voc\u00ea pode fazer para come\u00e7ar.\u00a0<\/span><\/p>\n<h2><\/h2>\n<h2><b>O que \u00e9 um site acess\u00edvel?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Primeiramente, \u00e9 importante entender que acessibilidade em um site significa que seu site foi projetado para que pessoas com defici\u00eancia possam us\u00e1-lo. O objetivo do web design acess\u00edvel \u00e9 remover as barreiras tecnol\u00f3gicas para que qualquer pessoa possa interagir com seu conte\u00fado.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">De acordo com o <\/span><a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro\/#what\"><span style=\"font-weight: 400;\">World Wide Web Consortium, tamb\u00e9m conhecido como W3C,<\/span><\/a><span style=\"font-weight: 400;\"> um site acess\u00edvel funciona para pessoas com defici\u00eancia auditiva, cognitiva, neurol\u00f3gica, f\u00edsica, de fala e visual.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N\u00e3o se preocupe se voc\u00ea n\u00e3o sabe por onde come\u00e7ar. O W3C possui uma documenta\u00e7\u00e3o que informa o que seu site deve incluir para atender aos seus padr\u00f5es.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Esta documenta\u00e7\u00e3o inclui:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/atag\/\"><span style=\"font-weight: 400;\">Diretrizes de acessibilidade de ferramenta de autoria (ATAG)<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\"><span style=\"font-weight: 400;\">Diretrizes de acessibilidade de conte\u00fado da web (WCAG)<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/uaag\/\"><span style=\"font-weight: 400;\">Diretrizes de acessibilidade de agente de usu\u00e1rio (UAAG)<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Em resumo, as <\/span><b>ATAG <\/b><span style=\"font-weight: 400;\">se concentram em ferramentas que as pessoas usam para criar conte\u00fado da Internet. Por outro lado, as <\/span><b>UAAG <\/b><span style=\"font-weight: 400;\">analisam a acessibilidade de ferramentas que renderizam conte\u00fado da web.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Neste artigo, vamos nos concertar nas <\/span><b>WCAG<\/b><span style=\"font-weight: 400;\">, que s\u00e3o as diretrizes para tornar o conte\u00fado de um site acess\u00edvel a todos.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Com as WCAG, voc\u00ea tem tr\u00eas n\u00edveis diferentes de conformidade: A, AA e AAA. \u00c0 medida que voc\u00ea for de um n\u00edvel para outro, voc\u00ea estar\u00e1 seguindo mais <\/span><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/\"><span style=\"font-weight: 400;\">padr\u00f5es estabelecidos pelas WCAG<\/span><\/a><span style=\"font-weight: 400;\"> e tornar\u00e1 seu site acess\u00edvel a um n\u00famero maior de pessoas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ent\u00e3o, como voc\u00ea sabe se voc\u00ea tem um site acess\u00edvel? Fa\u00e7a uma auditoria!<\/span><\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_489\" aria-describedby=\"caption-attachment-489\" style=\"width: 750px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-489 size-full\" src=\"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-5.jpeg\" alt=\"Tradu\u00e7\u00e3o: eu projeto e desenvolvo experi\u00eancias que simplificam a vida das pessoas | Foto de Ben Kolde no Unsplash - web design acess\u00edvel\" width=\"750\" height=\"410\" srcset=\"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-5.jpeg 750w, https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-5-300x164.jpeg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption id=\"caption-attachment-489\" class=\"wp-caption-text\">Tradu\u00e7\u00e3o: eu projeto e desenvolvo experi\u00eancias que simplificam a vida das pessoas | Foto de Ben Kolde no Unsplash<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h2><b>Como auditar o web design acess\u00edvel do seu site\u00a0<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Voc\u00ea n\u00e3o precisa fazer uma auditoria por conta pr\u00f3pria. Se preferir terceirizar sua auditoria, entre em contato com a <\/span><a href=\"https:\/\/www.performaweb.com.br\/fale-conosco\"><b>Performa Web<\/b><\/a><span style=\"font-weight: 400;\">, que n\u00f3s podemos te ajudar com isso.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Agora, se voc\u00ea preferir lidar com as coisas internamente, voc\u00ea tem muitas op\u00e7\u00f5es.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Primeiramente, voc\u00ea pode vasculhar as p\u00e1ginas do seu site e procurar problemas manualmente, mas isso provavelmente consumir\u00e1 muito do seu tempo.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Logo, voc\u00ea pode querer usar algumas ferramentas para ajud\u00e1-lo. Conecte seu URL a um <\/span><a href=\"https:\/\/wave.webaim.org\/\"><span style=\"font-weight: 400;\">verificador de acessibilidade como o <\/span><b>WAVE<\/b><\/a> <span style=\"font-weight: 400;\">para ver o que voc\u00ea precisa atualizar em uma p\u00e1gina. Voc\u00ea tamb\u00e9m pode usar um <\/span><a href=\"https:\/\/www.experte.com\/accessibility\"><span style=\"font-weight: 400;\">verificador de acessibilidade em massa<\/span><\/a><span style=\"font-weight: 400;\"> para analisar v\u00e1rias p\u00e1ginas de uma s\u00f3 vez.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O site do W3C tem uma grande lista de <\/span><a href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\"><span style=\"font-weight: 400;\">ferramentas de acessibilidade<\/span><\/a><span style=\"font-weight: 400;\">, ent\u00e3o voc\u00ea n\u00e3o precisa fazer tudo sozinho.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tamb\u00e9m temos uma lista de cinco elementos importantes para sua acessibilidade e alguns exemplos de design acess\u00edveis \u2013 sobre os quais falaremos a seguir \u2013 ent\u00e3o continue por aqui.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>5 diretrizes de acessibilidade para web design<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Primeiramente, lembre-se de que estes s\u00e3o breves resumos das diretrizes <\/span><b>WCAG<\/b><span style=\"font-weight: 400;\">. Recomendamos que voc\u00ea fale com um dos nossos especialistas para entender melhor esse assunto e que leia o <\/span><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/\"><span style=\"font-weight: 400;\">guia de refer\u00eancia r\u00e1pida<\/span><\/a><span style=\"font-weight: 400;\"> da W3C para aprender t\u00e9cnicas mais aprofundadas de web design acess\u00edvel.<\/span><\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_490\" aria-describedby=\"caption-attachment-490\" style=\"width: 750px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-490 size-full\" src=\"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-6.jpeg\" alt=\"Foto de Eftakher Alam no Unsplash - web design acess\u00edvel\" width=\"750\" height=\"410\" srcset=\"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-6.jpeg 750w, https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-6-300x164.jpeg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption id=\"caption-attachment-490\" class=\"wp-caption-text\">Foto de Eftakher Alam no Unsplash<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h4><b>1. Certifique-se de que o texto esteja leg\u00edvel<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">\u00c9 claro que qualquer texto de tamanho normal que comunique informa\u00e7\u00f5es importantes precisa ser f\u00e1cil de ler.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O contraste desempenha um papel importante nisso. Atualmente, um texto grande (como os t\u00edtulos principais) precisa de uma propor\u00e7\u00e3o de contraste de texto para fundo de 3:1. Um texto normal (ou menor), como o texto que comp\u00f5e o corpo do seu conte\u00fado, precisa de uma taxa de contraste de 4,5:1.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Um exemplo de contraste muito pequeno seria um texto verde claro em um fundo verde um pouco mais escuro. Ao alterar o texto para talvez preto ou branco, \u00e9 poss\u00edvel ter muito mais contraste em seu site.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Al\u00e9m disso, os usu\u00e1rios tamb\u00e9m devem poder ampliar o texto de uma forma que n\u00e3o afete a funcionalidade do seu site ou fazer com que eles percam o conte\u00fado.\u00a0<\/span><\/p>\n<p>&nbsp;<\/p>\n<h4><b>2. Otimize as imagens para serem vistas e lidas<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Em seguida, outra dica que n\u00f3s damos \u00e9 adicionar texto alternativo \u00e0s imagens. Essa n\u00e3o \u00e9 apenas uma pr\u00e1tica comum de SEO, ela tamb\u00e9m ajuda as pessoas que n\u00e3o podem ver imagens a entender o que est\u00e1 nelas.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">O texto alternativo \u00e9 um texto que explica claramente o que est\u00e1 acontecendo em uma imagem. Al\u00e9m disso, se encaixa perfeitamente nos c\u00f3digos de incorpora\u00e7\u00e3o de suas imagens.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h4><b>3. D\u00ea ao seu p\u00fablico mais maneiras de entender seus v\u00eddeos<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Se voc\u00ea nunca adicionou legendas aos seus v\u00eddeos antes, agora \u00e9 a hora de come\u00e7ar. E n\u00e3o confie apenas nas que o YouTube ou outro provedor de hospedagem for capaz de gerar automaticamente.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ent\u00e3o, se voc\u00ea tiver tempo e paci\u00eancia, d\u00ea uma olhada nas legendas geradas automaticamente e fa\u00e7a edi\u00e7\u00f5es. Elas n\u00e3o s\u00e3o perfeitas quando veem de uma IA.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Incluir transcri\u00e7\u00f5es com seus v\u00eddeos os torna mais acess\u00edveis. Se voc\u00ea escreveu um roteiro, j\u00e1 tem uma transcri\u00e7\u00e3o preparada!<\/span><\/p>\n<p><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Techniques\/general\/G78.html\"><span style=\"font-weight: 400;\">As \u00e1udiodescri\u00e7\u00f5es<\/span><\/a><span style=\"font-weight: 400;\"> adicionam outra camada de acessibilidade. Estas s\u00e3o faixas de \u00e1udio separadas que descrevem o que est\u00e1 acontecendo em seu v\u00eddeo entre as lacunas do di\u00e1logo.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ent\u00e3o, se voc\u00ea tiver duas pessoas falando sobre um passeio de compras, e ent\u00e3o o v\u00eddeo cortar para algumas imagens de uma pessoa experimentando roupas, a audiodescri\u00e7\u00e3o explicar\u00e1 o que est\u00e1 acontecendo no v\u00eddeo.\u00a0<\/span><\/p>\n<figure id=\"attachment_491\" aria-describedby=\"caption-attachment-491\" style=\"width: 750px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-491 size-full\" src=\"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-7.jpeg\" alt=\"Foto de Visual Design no Unsplash - web design acess\u00edvel\" width=\"750\" height=\"410\" srcset=\"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-7.jpeg 750w, https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-7-300x164.jpeg 300w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption id=\"caption-attachment-491\" class=\"wp-caption-text\">Foto de Visual Design no Unsplash<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<h4><b>4. Projete seu site para ser compat\u00edvel com mouse e teclado<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Nesse sentido, \u00e9 claro que nem todo mundo usa um mouse para navegar na Internet e o seu site deve estar pronto para isso.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Isso n\u00e3o significa apenas que voc\u00ea precisa garantir que algu\u00e9m possa interagir com seu site por meio de um teclado. Mas tamb\u00e9m exige que voc\u00ea tenha maneiras vis\u00edveis de destacar qual parte do seu site est\u00e1 em foco.\u00a0<\/span><\/p>\n<h4><\/h4>\n<h4><b>5. Torne a navega\u00e7\u00e3o do seu site f\u00e1cil de entender<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Essa dica vai al\u00e9m da acessibilidade. Em outras palavras, \u00e9 bom tornar a navega\u00e7\u00e3o em seu site simples e clara.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Escreva t\u00edtulos de p\u00e1gina e t\u00edtulos que tenham um prop\u00f3sito claro. Use um texto \u00e2ncora linkado que facilite a compreens\u00e3o do conte\u00fado ao qual voc\u00ea est\u00e1 vinculando.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Novamente, use indicadores de foco para que as pessoas saibam onde est\u00e3o em uma p\u00e1gina. Ofere\u00e7a mais de uma maneira de acessar uma p\u00e1gina da Web, como por meio de um mapa do site, navega\u00e7\u00e3o principal ou \u00edndice.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mas ent\u00e3o, como voc\u00ea pode fazer isso? Tendo uma navega\u00e7\u00e3o consistente. Isso significa que, se voc\u00ea tiver um cabe\u00e7alho de navega\u00e7\u00e3o principal, ele realmente n\u00e3o deve mudar quando um usu\u00e1rio pular de uma p\u00e1gina para outra.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">E como foi dito anteriormente, esta com certeza n\u00e3o \u00e9 uma lista abrangente do que se precisa fazer para se seguir as diretrizes para ter um web design acess\u00edvel.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Afinal, essas diretrizes tamb\u00e9m podem mudar a qualquer momento. Portanto, fa\u00e7a sua pesquisa quando estiver pronto para avaliar sua acessibilidade e conte com um empresa especializada para te ajudar neste quesito.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A <a href=\"https:\/\/www.performaweb.com.br\/\">Performa Web<\/a> pode te ajudar nisso e em tudo o que envolve o amplo mundo do marketing digital. Ent\u00e3o, <a href=\"https:\/\/www.performaweb.com.br\/fale-conosco\">fale conosco<\/a>!\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Como voc\u00ea se sentiria se estivesse realmente animado para navegar em um site mas, ao entrar nele, n\u00e3o conseguisse acessar nenhum de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":488,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[29,42,15],"class_list":["post-486","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria","tag-agencia-de-marketing-digital-full-service","tag-desenvolvimento-de-sites","tag-dicas-de-marketing-digital"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Web Design Acess\u00edvel: como deixar seu site acess\u00edvel para todos<\/title>\n<meta name=\"description\" content=\"Ignorar um web design acess\u00edvel deixa de fora uma parte significativa do seu p\u00fablico. Aprenda os conceitos b\u00e1sicos de acessibilidade aqui!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Design Acess\u00edvel: como deixar seu site acess\u00edvel para todos\" \/>\n<meta property=\"og:description\" content=\"Ignorar um web design acess\u00edvel deixa de fora uma parte significativa do seu p\u00fablico. Aprenda os conceitos b\u00e1sicos de acessibilidade aqui!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/\" \/>\n<meta property=\"og:site_name\" content=\"Performa Web Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/performaweb\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-30T14:03:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-30T14:04:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-4.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Performa Web\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@performaweb\" \/>\n<meta name=\"twitter:site\" content=\"@performaweb\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Performa Web\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/\"},\"author\":{\"name\":\"Performa Web\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/78638aefa223483434567f5f88d2f902\"},\"headline\":\"Web design acess\u00edvel: como deixar seu site acess\u00edvel para todos na internet\",\"datePublished\":\"2022-06-30T14:03:55+00:00\",\"dateModified\":\"2022-06-30T14:04:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/\"},\"wordCount\":1394,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Dimensoes-personalizadas-750x410-px-4.jpeg\",\"keywords\":[\"Ag\u00eancia de Marketing Digital Full Service\",\"desenvolvimento de sites\",\"Dicas de marketing digital\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/\",\"url\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/\",\"name\":\"Web Design Acess\u00edvel: como deixar seu site acess\u00edvel para todos\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Dimensoes-personalizadas-750x410-px-4.jpeg\",\"datePublished\":\"2022-06-30T14:03:55+00:00\",\"dateModified\":\"2022-06-30T14:04:50+00:00\",\"description\":\"Ignorar um web design acess\u00edvel deixa de fora uma parte significativa do seu p\u00fablico. Aprenda os conceitos b\u00e1sicos de acessibilidade aqui!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Dimensoes-personalizadas-750x410-px-4.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/Dimensoes-personalizadas-750x410-px-4.jpeg\",\"width\":750,\"height\":410,\"caption\":\"Foto de Firmbee.com no Unsplash\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/desenvolvimento\\\/web-design-acessivel\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web design acess\u00edvel: como deixar seu site acess\u00edvel para todos na internet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/\",\"name\":\"Blog Performa Web\",\"description\":\"No blog da Performa Web voc\u00ea encontra as principais novidades sobre marketing digital, m\u00eddia e performance.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#organization\",\"name\":\"Performa Web\",\"url\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/07\\\/logo.png\",\"width\":1266,\"height\":354,\"caption\":\"Performa Web\"},\"image\":{\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/performaweb\",\"https:\\\/\\\/x.com\\\/performaweb\",\"https:\\\/\\\/www.instagram.com\\\/performaweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/4987081\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/78638aefa223483434567f5f88d2f902\",\"name\":\"Performa Web\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3f94a271c5a35b04611b82274d086f66147c0194bcedd421db46f807436c65f8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3f94a271c5a35b04611b82274d086f66147c0194bcedd421db46f807436c65f8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3f94a271c5a35b04611b82274d086f66147c0194bcedd421db46f807436c65f8?s=96&d=mm&r=g\",\"caption\":\"Performa Web\"},\"description\":\"Conhe\u00e7a nossa equipe de autores da Performa Web\",\"sameAs\":[\"https:\\\/\\\/www.performaweb.com.br\\\/blog\"],\"url\":\"https:\\\/\\\/www.performaweb.com.br\\\/blog\\\/author\\\/pw\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Design Acess\u00edvel: como deixar seu site acess\u00edvel para todos","description":"Ignorar um web design acess\u00edvel deixa de fora uma parte significativa do seu p\u00fablico. Aprenda os conceitos b\u00e1sicos de acessibilidade aqui!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/","og_locale":"pt_BR","og_type":"article","og_title":"Web Design Acess\u00edvel: como deixar seu site acess\u00edvel para todos","og_description":"Ignorar um web design acess\u00edvel deixa de fora uma parte significativa do seu p\u00fablico. Aprenda os conceitos b\u00e1sicos de acessibilidade aqui!","og_url":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/","og_site_name":"Performa Web Blog","article_publisher":"https:\/\/www.facebook.com\/performaweb","article_published_time":"2022-06-30T14:03:55+00:00","article_modified_time":"2022-06-30T14:04:50+00:00","og_image":[{"width":750,"height":410,"url":"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-4.jpeg","type":"image\/jpeg"}],"author":"Performa Web","twitter_card":"summary_large_image","twitter_creator":"@performaweb","twitter_site":"@performaweb","twitter_misc":{"Escrito por":"Performa Web","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/#article","isPartOf":{"@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/"},"author":{"name":"Performa Web","@id":"https:\/\/www.performaweb.com.br\/blog\/#\/schema\/person\/78638aefa223483434567f5f88d2f902"},"headline":"Web design acess\u00edvel: como deixar seu site acess\u00edvel para todos na internet","datePublished":"2022-06-30T14:03:55+00:00","dateModified":"2022-06-30T14:04:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/"},"wordCount":1394,"commentCount":3,"publisher":{"@id":"https:\/\/www.performaweb.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/#primaryimage"},"thumbnailUrl":"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-4.jpeg","keywords":["Ag\u00eancia de Marketing Digital Full Service","desenvolvimento de sites","Dicas de marketing digital"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/","url":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/","name":"Web Design Acess\u00edvel: como deixar seu site acess\u00edvel para todos","isPartOf":{"@id":"https:\/\/www.performaweb.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/#primaryimage"},"image":{"@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/#primaryimage"},"thumbnailUrl":"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-4.jpeg","datePublished":"2022-06-30T14:03:55+00:00","dateModified":"2022-06-30T14:04:50+00:00","description":"Ignorar um web design acess\u00edvel deixa de fora uma parte significativa do seu p\u00fablico. Aprenda os conceitos b\u00e1sicos de acessibilidade aqui!","breadcrumb":{"@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/#primaryimage","url":"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-4.jpeg","contentUrl":"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2022\/06\/Dimensoes-personalizadas-750x410-px-4.jpeg","width":750,"height":410,"caption":"Foto de Firmbee.com no Unsplash"},{"@type":"BreadcrumbList","@id":"https:\/\/www.performaweb.com.br\/blog\/desenvolvimento\/web-design-acessivel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.performaweb.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Web design acess\u00edvel: como deixar seu site acess\u00edvel para todos na internet"}]},{"@type":"WebSite","@id":"https:\/\/www.performaweb.com.br\/blog\/#website","url":"https:\/\/www.performaweb.com.br\/blog\/","name":"Blog Performa Web","description":"No blog da Performa Web voc\u00ea encontra as principais novidades sobre marketing digital, m\u00eddia e performance.","publisher":{"@id":"https:\/\/www.performaweb.com.br\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.performaweb.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/www.performaweb.com.br\/blog\/#organization","name":"Performa Web","url":"https:\/\/www.performaweb.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.performaweb.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2021\/07\/logo.png","contentUrl":"https:\/\/www.performaweb.com.br\/blog\/wp-content\/uploads\/2021\/07\/logo.png","width":1266,"height":354,"caption":"Performa Web"},"image":{"@id":"https:\/\/www.performaweb.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/performaweb","https:\/\/x.com\/performaweb","https:\/\/www.instagram.com\/performaweb","https:\/\/www.linkedin.com\/company\/4987081"]},{"@type":"Person","@id":"https:\/\/www.performaweb.com.br\/blog\/#\/schema\/person\/78638aefa223483434567f5f88d2f902","name":"Performa Web","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/3f94a271c5a35b04611b82274d086f66147c0194bcedd421db46f807436c65f8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3f94a271c5a35b04611b82274d086f66147c0194bcedd421db46f807436c65f8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3f94a271c5a35b04611b82274d086f66147c0194bcedd421db46f807436c65f8?s=96&d=mm&r=g","caption":"Performa Web"},"description":"Conhe\u00e7a nossa equipe de autores da Performa Web","sameAs":["https:\/\/www.performaweb.com.br\/blog"],"url":"https:\/\/www.performaweb.com.br\/blog\/author\/pw\/"}]}},"_links":{"self":[{"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":4,"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/486\/revisions"}],"predecessor-version":[{"id":494,"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/posts\/486\/revisions\/494"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/media\/488"}],"wp:attachment":[{"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/media?parent=486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/categories?post=486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.performaweb.com.br\/blog\/wp-json\/wp\/v2\/tags?post=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}