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

Поделиться
HTML-код
  • Опубликовано: 19 ноя 2024

Комментарии • 59

  • @serliv
    @serliv  2 года назад

    ⭐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
    @FagnerAraujo-hr1dy 2 года назад +9

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

    • @serliv
      @serliv  2 года назад +2

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

  • @pedropolidoro
    @pedropolidoro 3 месяца назад +1

    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

  • @pedropolidoro
    @pedropolidoro Год назад

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

  • @rdgtog
    @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
      @serliv  Год назад

      Boa. Muito obrigado pela mensagem. Forte abraço

  • @edsonhh
    @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
      @serliv  Год назад

      Show Edson. valeu

  • @diegofranca92
    @diegofranca92 2 года назад +1

    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
      @serliv  2 года назад

      Muito obrigado Diego

  • @pedropolidoro
    @pedropolidoro Год назад +1

    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.

  • @rflbus
    @rflbus Год назад

    Parabéns pela iniciativa

    • @serliv
      @serliv  Год назад

      Muito obrigado Rafael ☺

  • @rafinha-dev
    @rafinha-dev 10 месяцев назад

    Exelente.

    • @serliv
      @serliv  10 месяцев назад

      Valeu Rafinha. forte abraço

  • @marcustapias2397
    @marcustapias2397 2 года назад +1

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

    • @serliv
      @serliv  2 года назад

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

  • @josimarmiranda9722
    @josimarmiranda9722 Год назад

    Eu não conhecia o último exemplo.

    • @serliv
      @serliv  Год назад

      Pois. Agora já conhece :)

  • @DepoisDaCena
    @DepoisDaCena 11 месяцев назад

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

    • @serliv
      @serliv  11 месяцев назад

      Opa. Fico feliz por saber. Muito obrigado pelo feedback

  • @bl1tz_x
    @bl1tz_x 2 года назад +2

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

    • @serliv
      @serliv  2 года назад +1

      Boa. Valeu Herison

  • @henriquetayler834
    @henriquetayler834 2 года назад +1

    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
      @serliv  2 года назад

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

  • @bpires4303
    @bpires4303 2 года назад

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

    • @serliv
      @serliv  2 года назад +1

      Que bom que ajudei. Abração

  • @Brendosl
    @Brendosl Год назад

    Essa dica do final foi a cereja do bolo !

    • @serliv
      @serliv  Год назад +1

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

  • @davidedson2281
    @davidedson2281 Год назад

    Muito BOM !

    • @serliv
      @serliv  Год назад

      Muito obrigado

  • @AriMauricio
    @AriMauricio 2 года назад

    O atributo tabindex eu não conhecia.

    • @serliv
      @serliv  2 года назад

      Pois. É muito útil para usabilidade e acessibilidade

  • @amauriblanco1282
    @amauriblanco1282 2 года назад

    Muito bom. Obrigado!

    • @serliv
      @serliv  2 года назад

      Opa. Eu que agradeço Amauri

  • @tadeuagostini4601
    @tadeuagostini4601 2 года назад

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

    • @serliv
      @serliv  2 года назад

      Muito obrigado Tadeu. Abração

  • @pedropolidoro
    @pedropolidoro Год назад

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

  • @henriquesnowing8762
    @henriquesnowing8762 Год назад

    bom vídeo.

    • @serliv
      @serliv  Год назад +1

      Muito obrigado Henrique

  • @kaualandi7073
    @kaualandi7073 2 года назад +2

    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
      @yurionthecode 2 года назад

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

    • @serliv
      @serliv  2 года назад

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

    • @pedropolidoro
      @pedropolidoro Год назад

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

  • @maahdonato5760
    @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
      @serliv  Год назад

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

  • @darlleybrito4198
    @darlleybrito4198 2 года назад

    essa segunda dica eu não fazia ideia

    • @serliv
      @serliv  2 года назад

      Boa. Obrigado pela mensagem

  • @JJVolfe
    @JJVolfe 2 года назад

    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
      @serliv  2 года назад

      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

  • @lele-artedapensadora237
    @lele-artedapensadora237 2 года назад

    👏👏👏👏👏👏👏

    • @serliv
      @serliv  2 года назад

      Obrigado Ale. 😊

  • @guitt-web-code
    @guitt-web-code 2 года назад

    dicas de ouro😍

    • @serliv
      @serliv  2 года назад

      Muito obrigado Francis. Abração

  • @PabloSilva-fu3yf
    @PabloSilva-fu3yf 2 года назад

    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
      @serliv  2 года назад

      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.

  • @elielmayrink3508
    @elielmayrink3508 2 года назад

    em pé na chuva foi boa🤣

    • @serliv
      @serliv  2 года назад

      kkkkkk obrigado Eliel