@DaviSoares-1
Posted
Ficou show teu projeto!! Apenas fique atento com a questão da semântica do teu HTML, pois como pode ver em "Accessibility report" faltou uma tag <main> que envolva o conteúdo principal, no caso o card qr-code, e um título de nível 1 <h1> no lugar do <h2>. Dessa forma, basta colocar a div .container dentro de uma tag <main> e mudar de <h2>para <h1>.
HTML semântico é de suma importância para que seu site tenha uma ótima acessibilidade, porque isso impacta diretamente no SEO (ranking do teu site em buscas no google), melhora a organização do código e determina regiões específicas do teu site (para quem utiliza leitores de tela, isso auxilia muito na navegação). Por isso deve sempre utilizar tags semânticas para demarcar regiões do teu site, que no caso são: <header> (cabeçalho), <nav> (links de navegação), <footer> (rodapé), <main> (conteúdo principal) e pelo menos um título <h1>.
Já sobre as tags <article> e <section> é uma boa utilizá-las também, contudo elas não marcam landmark (ponto de referência) oficialmente, por isso devem sempre estar contidas em uma tag semântica, e de preferência conter um atributo aria-label ou aria-labelledby (elas recebem um valor que será o nome da região que vão demarcar).
OBS; a principal diferença entre <article> e <section>, é que o article faz sentido por si só e não precisa de um contexto para fazer sentido (uma lista de produtos com preços por exemplo). Já o section necessita de contexto para fazer sentido (cursos realizados da sua formação profissional por exemplo), no caso isso só faria sentido no seu currículo.
Espero ter ajudado, é muito bom poder ver devs brasileiros por aqui, vamos pra cima e 🚀 Never Stop Learning!!
