[SUPER DICAS] HTML e Acessibilidade. 6 erros comuns que até devs mais experientes podem cometer

[@serliv]

⭐Se quiser conhecer mais sobre HTML, considere conhecer meu curso Web Design Fundamentos. Aprenda HTML CSS e Javascript: serfrontend.com/cursos/web-fundamentos-html-css/index.html

[@FagnerAraujo-hr1dy]

Cara, muito bom!! Sou pessoa com deficiência visual e, sofro muito com isso as vezes .

[@serliv]

Muito obrigado pelo feedback Fagner. A web precisa servir à todas as pessoas, todas, sem distinção. Forte abraço

[@pedropolidoro]

Quanto a textos sobre imagem me previno de que pode demorar a carregar a imagem ou falhar. Portanto estilizo o texto alternativo img { color: white }. É falível background-img, logo convém adicionar background-color. E há os textos que estão em cima de um elemento img mediante top, left, bottom, right, insight ou grid-area

[@rdgtog]

Maravilhoso o vídeo. Dos 6 recursos ensinados eu não sabia nenhum. Atualmente existem no canal somente 3 vídeos sobre acessibilidade. Três entre 583. Gostaria de ver mais vídeos assim. Os únicos temas que eu acho mais interessantes que acessibilidade são a analise de portfólio e as simulações de entrevistas de emprego. As simulações de entrevistas de emprego são de longe o melhor na minha opinião.

[@serliv]

Boa. Muito obrigado pela mensagem. Forte abraço

[@rflbus]

Parabéns pela iniciativa

[@serliv]

Muito obrigado Rafael ☺

[@edsonhh]

10:50 q top! eu q to fazendo um site com idioma em portugues, ingles, chines tradicional e simplificado.. tava ficando tudo em portugues kkkkkk

[@serliv]

Show Edson. valeu

[@diegofranca92]

Video muito bom. direto ao ponto. Ainda tem poucos videos mais praticos sobre Acessibilidade, mas é um assunto muito importante para todos que trabalham TI.

[@serliv]

Muito obrigado Diego

[@DepoisDaCena]

caraca achei esse vídeo por acaso e essa dica do tabindex me ajudou dms em um projeto

[@serliv]

Opa. Fico feliz por saber. Muito obrigado pelo feedback

[@marcustapias2397]

Muito legal essas dicas! Realmente não fazia ideia da última rsrs

[@serliv]

Hahaha. Que bom que gostou mano. Obrigado pelo apoio 😉

[@pedropolidoro]

Na linha 220 no tempo 20:23, por que usou "keyup" ao invés de "keydown" ou "keypress"?

[@davidedson2281]

Muito BOM !

[@serliv]

Muito obrigado

[@pedropolidoro]

Um grande problema de acessibilidade é a tecla tab em quando ela está sendo usada para inserir caractere de tabulação.

[@henriquetayler834]

Vídeo incrível professor! Comecei seu curso da Udemy e estou maravilhado nos seus vídeos. É tão gratificante começar a entender esses códigos. Parabéns!

[@serliv]

Muito obrigado pela mensagem. Fico muito feliz em saber que está gostando. Sucesso

[@rafinha-dev]

Exelente.

[@serliv]

Valeu Rafinha. forte abraço

[@josimarmiranda9722]

Eu não conhecia o último exemplo.

[@serliv]

Pois. Agora já conhece :)

[@bpires4303]

Aula incrível professor! Essa do tabindex eu não sabia

[@serliv]

Que bom que ajudei. Abração

[@tadeuagostini4601]

bem bom teu conteúdo, gratdão por isso

[@serliv]

Muito obrigado Tadeu. Abração

[@bl1tz_x]

Top demais professor! E se der faz um vídeo tbm falando dos atributos ARIA mais importantes 😊

[@serliv]

Boa. Valeu Herison

[@pedropolidoro]

As vezes alguns códigos alteram o outline, e sem perceber o programador remove o outline do focus-within. Quem tentar navegar pelo teclado, terá problemas em saber qual elemento está selecionado. Em um site com muitos elementos, seria interessante algum keyacess ou tecla de atalho em javascript.

[@amauriblanco1282]

Muito bom. Obrigado!

[@serliv]

Opa. Eu que agradeço Amauri

[@Brendosl]

Essa dica do final foi a cereja do bolo !

[@serliv]

Opa. Que bom que gostou. Fico feliz. Abração

[@henriquesnowing8762]

bom vídeo.

[@serliv]

Muito obrigado Henrique

[@AriMauricio]

O atributo tabindex eu não conhecia.

[@serliv]

Pois. É muito útil para usabilidade e acessibilidade

[@darlleybrito4198]

essa segunda dica eu não fazia ideia

[@serliv]

Boa. Obrigado pela mensagem

[@maahdonato5760]

Preciso de ajuda!!! No vídeo, qual é a ordem de acesso a pagina web utilizando a tecla “TAB” para navegar? O que você fez para deixar os cards em ordem? Ao navegar pelas páginas utilizando a tecla TAB, depois que ele acessou todos os elementos HTML, ele deu foco em quais elementos?

[@serliv]

O foco fica no browser em si, como barra de endereço, botões etc

[@JJVolfe]

Eu sou iniciante e só não conhecia a última dica. Vi todas elas principalmente na documentação da MDN, e acessibilidade é algo que me preocupa desde que eu dava aula em escolas públicas. Obrigado por compartilhar isso tudo, eu achei ótimo. Ahhh Não sei se o professor COMPROU o microfone de lapela... Eu tenho um microfone de lapela que nem uso, da época que eu trabalhava como filmmaker. Ele tá meio velho e remendada a presilha mas tá ótimo ainda hahah. Se o professor morasse mais perto eu poderia fazer uma doação. :/

[@serliv]

Opa. Agradeço por ter oferecido. Muito obrigado mesmo, de coração. Que Deus multiplique essa generosidade em tua vida. Mas eu realmente moro muito longe. Abração

[@guitt-web-code]

dicas de ouro😍

[@serliv]

Muito obrigado Francis. Abração

[@kaualandi7073]

Eu vi exemplos e passei adotar mesmo sem saber se é certo. colocar o input dentro do label, assim: User Assim não necessito do for=" " no label. Mas não sei se é certo, saberia me responder? Sou aluno e seu fã!! OBS: Escrever isso no celular foi um pesadelo.

[@yurionthecode]

Está correto, no caso dos inputs checkbox, radius, que tenha uma descrição do lado.

[@serliv]

Exato. É perfeitamente válido também. Forte abraço

[@pedropolidoro]

Tenho visto em alguns sites, que é bom especificar o for, mesmo que o label esteja envolvendo ambos os elementos.

[@elielmayrink3508]

em pé na chuva foi boa🤣

[@serliv]

kkkkkk obrigado Eliel

[@PabloSilva-fu3yf]

A tag "a" pode ser usada como botão para outra página dentro do próprio site ou envia para sites externos. Não entendi mto bem

[@serliv]

A tag a é link para outra página, seja do mesmo site ou não. Esse link pode até se parecer como um botão, usando css, mas a tag é sempre a.

[@lele-artedapensadora237]

👏👏👏👏👏👏👏

[@serliv]

Obrigado Ale. 😊