Como usar acessibilidade web no seu projeto front end na prática!

No video

Como usar acessibilidade web no seu projeto front end na prática!

Рет қаралды 10,901

Күн бұрын

Meu desconto 15% na Alura: alura.tv/rafaba... 🤿
Lembrando que tem curso meu por lá de HTML e CSS, além de diversos outros, já que é a maior plataforma de ensino de tecnologia do Brasil!
Não esqueça de se inscrever no canal pra acompanhar os próximos vídeos
O que mais você quer ver aqui no canal? Comenta aqui embaixo pra eu saber!
------------------------------------------------------------------------------------------------------------------
Links importantes:
Guia WCAG: guia-wcag.com
Extensões do Chrome pra testar daltonismo: chrome.google....
Deficiência no Brasil: exame.com/bras...
Minhas redes sociais: beacons.ai/raf...
Desconto 15% da ALURA: alura.tv/rafaba... 🤿
-------------------------------------------------------------------------------------------------------------------
Índice do vídeo:
00:00 - O que é acessibilidade web
02:03 - HTML semântico
03:00 - Atributo lang
03:51 - Textos alternativos
05:03 - Text-transform no CSS
06:03 - Zoom e outline
07:09 - Links de direcionamento
07:46 - Descrever os links
08:39 - Constraste
09:24 - Não depender de cores
10:05 - Aria e WCAG
10:46 - Como testar acessibilidade?
#programador #programar #acessibilidadeweb

Пікірлер: 39

@lascmed 7 ай бұрын

Parabéns Rafaella! Excelente Conteúdo! Excelente ter uma referência feminina falando sobre o tema!

@Roberio.Leal2 6 ай бұрын

Rafaela você consegue passar o conteúdo de uma forma simples e agradável.

@tauaferreira3912 7 ай бұрын

eu tenho astigmatismo no foco horizontal, geralmente fontes que tem sombra ou algum efeito, causam muita dor de cabeça se eu ficar lendo por muito tempo. Muitas vezes eu não leio notícias por terem aquele formato estranho com sombra sabe? Adorei que você falou sobre acessibilidade, creio que também no design isso é importante para algumas pessoas. 🥰😊

@FernandaMarques-fg3mh 7 ай бұрын

Que demais essas dicas, Rafa! A maneira como abordou sobre acessibilidade me fez refletir muito mais sobre o tema, para além do texto alternativo para imagens que já conhecia. Parabéns e obrigada pelo conteúdo!

@everybodydance1210 7 ай бұрын

oi vc faz bots??

@Davy-Jhones9708 6 ай бұрын

Que tipo de Bot tu precisa.

@annaluizasantosgusmao7478 7 ай бұрын

Conteúdo incrível!! Se puder trazer um vídeo falando de técnicas para melhorar a performance no Front-end será muito interessante.

@VINIoy 7 ай бұрын

Rafa você não vai ensinar a concertar aquela Landing Page que você fez? ela ficou bem diferente do projeto que estava do figma, ficou incompleta e com 0 responsividade, achei que você ia lançar a parte II do vídeo.

@iamcoelho 7 ай бұрын

Além do WCAG, temos o eMAG. Uma versão do WCAG adaptada para os portais brasileiros. A cartilha está desatualizada, mas ainda traz uma base consistente para quem escreve código. Quer uma validador automático dessas regras, use o ASES do Governo Federal. E lembrem-se: para atingir um bom nível de acessibilidade, basta seguir do jeito certo!

@mauriciohenrique3525 7 ай бұрын

Fala meu amigo. Infelizmente existe a tal da IMAG. Mas não use se você for programador, por favor! Nada que tem lá pode ser levado em consideração. Apenas WCAG. Por isso que os portais governamentais são uma porcaria em acessibilidade

@iamcoelho 7 ай бұрын

@@mauriciohenrique3525 Pelo contrário... Que bom que ainda a temos, e sabe pq? Ela se torna o documento oficial para balizar a acessibilidade web. Via decretos, portarias... Existem vários. Mas como disse, é a base... E ela já é grande o suficiente para termos algo sustentável. Óbvio que é da responsabilidade de todos nós seguirmos os padrões... Vida longa amigo

@mauriciohenrique3525 7 ай бұрын

@@iamcoelho mas você não acha que sendo algo pertencente ao governo federal, deveria ser mais atualizado? Que o sistemas governamentais deveriam seguir o exemplo? trabalho com engenharia de qualidade e sou especialista em acessibilidade digital. não tem como seguir nada deles. apenas quando precisa trabalhar com algum sistema que seja do governo e aí eu diria que infelizmente. É terrível!

@iamcoelho 7 ай бұрын

@@mauriciohenrique3525 Já trabalhei com a SECOM, Embratur, Banco do Brasil. Muitos dos gestores não entendem a necessidade e a importância sobre o tema, e por muitas vezes, nós fazíamos as sugestões... A cartilha foi escrita em parceria com alguma universidade, mas não imagino como esteja esse projeto hoje. Você já assistiu o vídeo feito pela Leda Spelta sobre Acessibilidade Web? Impactante... Vendia o assunto, sensibilizando as pessoas com esse vídeo

@user-jm8qk1rc3d 7 ай бұрын

Rafaella parabéns pelo canal! Tudo muito interessante por aqui :D. Não sou da área... sou economista hahaha. Mas estou encantada!

@lukawalk627 7 ай бұрын

vídeos muito bons com boa didática com muito carisma parabéns

@hendelfeliciano6375 7 ай бұрын

Vídeo muito informativo, muito obrigado pelas dicas !

@marceloramos385 7 ай бұрын

Top demais Rafa, muito top o conteúdo

@bossledesenvolvimentoweb6045 7 ай бұрын

Excelente conteúdo, ajudou muito!! Muito obrigado!!!!

@lascmed 7 ай бұрын

No caso de bibliotecas para criação de interface como material ui e bootstrap, como funciona a ideia de utilizar as tags semânticas já que serão utilizados componentes "prontos"? Existe algum problema em questão de rankeamento com relação a utilização dessas bibliotecas?

@angelogarcia4803 7 ай бұрын

Ótimo vídeo, sobre um assunto mega importante

@Lala_kissy 7 ай бұрын

Obrigada pelas dicas prof 😊💖

@alvesmariadefatima 7 ай бұрын

Primeira a comentar por aqui!!! Parabéns pelo conteúdo, Rafa ❤

@MarcoMarchi29 7 ай бұрын

Amo estudar sobre esse assunto! Obrigado por compartilhar também, isso deixa mais devs ficarem cientes.

@Sagita1012 7 ай бұрын

Só fazendo um pequeno adendo na questão do "lang", caso o site possua algum termo/palavra em inglês (ou qualquer outra lingua q não seja a indicada em "lang"), fica legal utilizar uma fonte itálica e tbm indicar no html q aquela palavra se trata de uma palavra em "x" língua (justamente para evitar erros de pronuncias bizonhos por conta dos leitores de tela).

@astolfoFredor 7 ай бұрын

"lang" é um atributo global e você utiliza ele pra definir o idioma de um elemento, nesse caso, você o adiciona dentro da tag , ficando (text), que assim os leitores de telas saberão qual a língua daquela palavra/texto. Bom code! 😊

@Sagita1012 7 ай бұрын

Basicamente foi oq eu disse, porem exemplificado. Obrigado =) @@astolfoFredor