Por exemplo, os usuários que precisam ler o software de tela. Como front-end, como poderíamos suportá-lo? Eu sempre quis escrever esse artigo antes, compartilhando como criar uma página com melhor acessibilidade. O plano de hoje inclui uma combinação dos padrões HTML TA AG e WCAG. Eu recomendo que você escreva seu HTML como este para que a vida de algumas pessoas possa ser mais fácil.
O que quero compartilhar hoje é como usar nossa tag HTML para refletir os padrões do WCAG e as metas da rede semântica:
De fato, isso não tem nada a ver com o WCAG, mas para uma página com melhor compatibilidade, especialmente compatibilidade com versões anteriores, recomendo que você escreva assim:
<! Doctype html>
Quase a conexão com a Internet pode ser implementada usando <a>, como a tag mais comum em uma página. Como devemos tratá -lo?
<a href = title = accessKey = m rel =Hidefocus> Link </a>
Também é muito importante usar as tags HTML corretamente, o que é propício ao entendimento da estrutura da página dos usuários de software de leitura de tela. Especialmente ao usar rótulos como H1, H2, H3, etc., o abuso pode facilmente levar a confusão estrutural. Obviamente, o uso de tags gerais e depois o CSS para fazer contraste visual também é algo que as pessoas comuns podem reconhecer. Mas e os usuários de software de leitura de tela. Obviamente, aqui só precisamos prestar atenção ao uso de tags de página, e a coisa mais importante sobre o ABBR deve ser adicionar um atributo de título para descrever a abreviação. por exemplo:
<ABBR Title = Web Developer> WD </bbr>
Quando houver grandes parágrafos de citações, use <lockQuote>, enquanto citações embutidas Use <CITE> para facilitar sua estrutura:
<BlockQuote> Eu sempre quis escrever um artigo como antes, compartilhando como criar uma página com melhor acessibilidade. O plano de hoje inclui uma combinação dos padrões HTML TA AG e WCAG. Eu recomendo que você escreva seu HTML como este para que a vida de algumas pessoas possa ser mais fácil. </lockquote> <p> A frase mais impressionante de A é que, quando você está na frente, deve ter amor. Não use corpos ruindo em todos os tipos de pessoas a qualquer momento </cite>. </p>
Escrever algo no papel não pode ser feito como escrever algo em um computador. Você pode usar a tecla de desfazer para pressioná -la, mas o que devemos fazer quando queremos enfatizar que algo é excluído? Isto é, para usar a tag <l>. Por exemplo:
<el> Ao expressar ênfase no HTML, use o & lt; b & gt; Tag </el> Ao expressar ênfase no HTML, use o & lt; fort & gt; marcação
O efeito é assim:
Ao enfatizar o HTML, use a tag <b>Ao enfatizar o HTML, use a tag <strong>
Quando eu estava levando os recém-chegados para fazer o blog de front-end de Alipay no ano passado, o que mais me impressionou foi que eu gostei de usar <dl>. Naquela época, eu estava pensando que esses alunos eram muito bons e tinham um bom entendimento da semântica. Ainda raramente usamos listas de definições. Em vez disso, use os dois dos gerais <ul> <ol>. <dl> Também deve ser usado com cautela, é melhor usar apenas certas entradas definitivas, como o exemplo da escola W3, a definição de café e leite:
<dl> <dt> café </dt> <dd>- bebida quente preta </dd> <dt> leite </dt> <dd>- bebida fria branca </dd> </dl>
Lista, isso é muito familiar para cada front-end. Como a estrutura pode ser aplicada com muita flexibilidade, é frequentemente usada em navegação, lista, guia etc. Não há necessidade de dizer muito sobre isso. Mas há uma coisa que precisa ser entendida. Não acredite que <ul>/<ol> é um substituto para <table>. Em nossas tags HTML comumente usadas, cada tag tem sua própria função e ninguém substitui ninguém.
<ol> <li> café </li> <li> chá </li> <li> Milk </li> </ar>
Se for uma tabela, não use parágrafos, muito menos listas. A menos que seja absolutamente necessário, e eles sejam conversíveis. Além disso, há alguns pontos a serem observados na tabela:
<tabela resumo = status do blog de Sofish> <Thead> <tr> <th> data </th> <th> ip </th> <th> pv </th> </tr> </thead> <tbody> <tr> <td> 2011.3.11 </td> <td> 3000 </td> <td> 8000 </td>
<Code> refere -se ao texto do código do computador, enquanto <pre> refere -se ao texto pré -formado. <pre> é um alcance mais amplo e é um elemento em bloco que pode ser usado para formatar vários texto, especialmente o código. Não há necessidade de prestar atenção especial ao usá -lo, principalmente o uso semanticamente correto, como não usar <pre> em vez de geral <p>.
<Code> Texto-align: Center </code> <pre> {(1 * 102) + (9 * 101) + (3 * 100)} </pre>Nas páginas da web modernas, é muito raro usar <br>. O espaço em branco nas páginas da web é geralmente implementado usando o preenchimento e a margem do CSS. Isso é mais preciso e mais fácil de controlar. O uso recomendado agora é usar o parágrafo geral <p> para fazer quebras simples de linha em vez de controlar o espaço branco da página.
<p> Eu sou um parágrafo. <r /> A política é sempre quebrando de linha. </p>
<HR> tem um efeito semântico muito bom. Mas seus efeitos visuais são difíceis de controlar. Eu escrevi esses artigos antes sobre questões em vários navegadores. Geralmente, raramente é usado. Se você fornecer uma página separada especificamente para usuários de software de leitura de tela, ela pode ser de grande utilidade.
<H3> Título 1 </h3> <p> Lorem ipsum é ... </p> <hr/> <h3> Título 2 </h3> <p> Esta é a entrada de ... </p>
De fato, as duas tags <div>/<pan> têm semântica e ambas define uma seção em um documento. Sim, na verdade é o mesmo que <seção> em html5. É só que, devido aos mecanismos de pesquisa, os mecanismos de pesquisa pensam que são rótulos semânticos, para que se tornem rótulos semânticos. O uso recomendado é tentar usar outros contêineres como um quadro de página, como layout, adicionando efeitos visuais adicionais, em vez de substitutos para parágrafos, etc.
<div id = contêiner> <div id = content> </div> <div id = barra lateral> <ul> <li> <span> Deus </span>, oh meu zsh </span> </li> </ul> </div> </div>
É possível que essas tags sejam quase as tags mais importantes na hierarquia de uma tag de página. Podemos usar a estrutura de um livro para ilustrar essas tags e, quando construímos uma página, também devemos ter esse pensamento em nossa mente:
Sim, é claro que também existem citações <BlockQuote>, códigos fornecidos nos livros técnicos <pré -class = code>, listas de pontos que precisam de atenção <ul>, tabelas para facilitar a comparação, etc.
<h1> logo </h1> <h2> título </h2> <div class = entradas> <h3> resumo: </h3> <p> Lorem ipsum é ... <em> enfatize </em> </p> </div>
<em> enfatize a abreviação. E <strong> é forte enfatizar. Muitos estudantes que estão apenas começando não serão capazes de usar os rótulos de <em>, <strong>, <cite>, <i>, <b> e <b> com precisão. <i> e <b> são basicamente abandonados, equivalentes aos atuais e <strong>. De um modo geral, a ordem deles da importância do conteúdo é a seguinte: forte> em ≈ cite.
<strong> NOTA: </strong> Não use tags antigas, como <cite> fonte, centro </cite> etc., especialmente <em> font </em>.
Os itens de formulário são tags relativamente complexos no HTML, e há muitos pontos para prestar atenção:
<form método = pós -ação = http: //sofish.de> <bieldset> <legend> meu formulário </legend> <gravador para = primeironame>* primeiro nome: </cret> <input type = text id = primeironame/> <bret para = discurso> say algo: </label> <textário id = struming/> </> </fieldset> </morm>
Para fotos, as pessoas cegas não podem vê -las. Forneça Alt para representar texto alternativo. Diga a eles que tipo de imagem essa é.
<img src = http: //sofish.de/favicon.ico alt = felizes favoritos favicon/>
Tente evitar o uso de estruturas <frame>, mas quando você precisa usá -las, é melhor fornecer um atributo de título para descrevê -las.
<iframe src = http: //sofish.de title = felizes favoritos/</frame>
A mídia também é um formato relativamente complexo, que é mais problemático para processar. Normalmente podemos fazer isso:
<AUDIO SRC = mozart.mp4> Mozart 39 Symphony </udio>
A página deve conter o título e cada tag deve ser reconhecível. Por exemplo, isso se reflete em Alipay:
<Title> Entre em contato comigo-os favoritos da Happiness </title>
Tudo bem. Isso é tudo por enquanto. O WCAG não é apenas o uso dessas tags HTML simples, e as páginas semânticas da Web não são algo que pode ser escrito em um ou dois artigos. Sem pressa. Comece com as coisas mais comuns e desenvolva bons hábitos. Voltando à frase no início do artigo, você tem o coração para escrever a página tão difícil de usar?