Uma CPU (do inglês, Central Processing Unit), ou Unidade Central de Processamento, é o cérebro do computador.

Assim como o cérebro humano, a CPU controla todas as funções do computador.

O trabalho da CPU é "escutar" a entrada de dados de dispositivos, como o mouse, ou de algum software. Então, ela procura instruções para aquele tipo de dado e executa essas instruções.

Por exemplo, se você digita o caractere "a" no seu computador, a CPU procurará o modo de lidar com esse pressionamento de tecla ou de botão. Ao receber as instruções, ela executa as funções para o pressionamento de botão e envia o resultado "a".

CPUs modernas conseguem lidar com bilhões ou até trilhões de instruções por segundo.

As CPUs são feitas de dezenas de milhares de hastes, chamadas de transístores. Cada transístor tem um estado acionado (sim) ou desativado (não), formando a base binária com a qual todos os computadores trabalham.

Com transístores suficientes fazendo essas perguntas simples de sim ou não, a CPU consegue realizar tarefas complexas.

As CPUs modernas geralmente são compostas de núcleos (em inglês, cores) diferentes, o que torna mais fácil executar diversas tarefas. Cada núcleo é apenas uma outra CPU no mesmo chip.

Por exemplo, uma CPU dual-core tem duas CPUs no mesmo chip. Hoje em dia, temos CPUs quad-core (4), hexa-core (6) ou até hexadeca-core (16).

CPUs modernas também podem usar um processo chamado multithreading ou hyperthreading para serem mais eficazes. Esse é o processo de dividir uma CPU em núcleos virtuais, chamados de threads.

Por exemplo, se temos um processador dual-core, é possível ver quatro núcleos ao conferir o monitoramento de sistema do seu computador.

Esses núcleos físicos e os núcleos virtuais ou threads podem tornar seu computador muito mais rápido em alguns casos.

Os jogos geralmente funcionam melhor com um único núcleo com potência suficiente. Outros programas, no entanto, como os softwares de edição de vídeo, ficam muito mais rápidos com mais núcleos e threads.

Confira este vídeo para ter uma visão geral sobre como a CPU lida com todas as entradas e saídas de seu computador (vídeo em inglês):

Termos em tecnologia relacionados:

• Definição de sistema operacional
• Definição de booleano
• Definição de hardware (ainda em inglês)

Qualquer pessoa deve poder usar os sites e aplicações que você cria – pessoas com ou sem deficiência. Isso é o que tornará o seu site acessível.

Pense no último site que você construiu ou no seu site favorito. Você tem certeza de que qualquer pessoa pode usar seu site e executar as ações críticas necessárias? Você já considerou pessoas com deficiência motora, deficiência visual, deficiência cognitiva e deficiência auditiva?

A acessibilidade é muitas vezes deixada de lado e tratada como uma reflexão tardia. Quando chega a hora de enviar um recurso, fazemos um teste de acessibilidade e descobrimos que nosso site não estava acessível, corrigindo tudo com gambiarras.

Tornar um site acessível é um grande empreendimento. Se, no entanto, mantivermos a acessibilidade em mente desde o início, será muito mais fácil criar um aplicação para a web acessível.

Neste artigo, abordarei 5 coisas que você deve ter em mente DURANTE a criação da sua aplicação para não ter que dar "aquele ajuste" no final.

5 coisas para se lembrar para ter uma boa acessibilidade

1. HTML Semântico
2. Tabindex
3. Atributos Aria
4. Roles (funções)
5. Navegação por teclado (do inglês, Keyboard) e leitores de tela

Em resumo, S.T.A.R.K.

Se você precisar de ajuda para se lembrar disso, pense no Tony Stark.

Vamos examinar cada um deles para entender como usá-los em suas aplicações para a web.

O que é o HTML semântico?

O uso de HTML semântico é importante para a acessibilidade. Isso ocorre porque tecnologias assistivas, como leitores de tela, são capazes de interpretar o que está na página analisando o HTML da página. Ele permite que os usuários executem ações com base nos elementos.

Por exemplo, se um leitor de tela encontra um botão, ele sinaliza ao usuário que deve clicar nele.

Vamos considerar alguns casos de uso do que pode acontecer quando você não usa HTML semântico:

Criar botões usando div em vez de button:

divs são elementos contêineres. Portanto, quando um leitor de tela encontra uma div, ele pensa automaticamente que é um elemento da apresentação.

Quando um usuário de leitor de tela encontra um elemento div que tem conteúdo ou filhos dentro dele, o leitor de tela anuncia role="group" e o usuário não perceberá que a div é interativa. Portanto, certifique-se de usar o elemento semântico adequado para sua finalidade. Você obtém acessibilidade gratuitamente.

Usar CSS para falsificar títulos em vez de usar as tags h1-6:

Tags de títulos, como <h1> e <h2>, permitem que uma tecnologia assistiva saiba que este é um texto importante e o leitor de tela anunciará "Título".

Quando você usa o CSS para fazer um título em vez de usar o HTML semântico correto, o significado do texto é perdido para um leitor de tela.

Portanto, certifique-se de usar HTML semântico sempre que possível.

O que é tabindex?

Adicionar um tabindex torna os elementos interativos navegáveis pelo teclado. Quando você adiciona um tabindex a um elemento, um usuário pode navegar até ele usando apenas o teclado e/ou tecnologias assistivas.

1. Você usa um tabindex de 0 para definir o foco para um elemento na ordem de tabulação padrão,
2. Você usa um tabindex de -1 para focar programaticamente um elemento usando JavaScript.
3. Não atribua um valor >1 a tabindex.

Um aviso importante – você só deve adicionar tabindex a elementos interativos. Não é uma boa prática adicionar tabindex a elementos como divs.

Em vez de adicionar tabindex, nesse caso, use um elemento semântico, como um button, pois os elementos semânticos já podem ser tabulados e não precisam de um valor tabindex adicional.

O que são atributos ARIA?

Atributos Aria, como aria-checked e aria-label, fornecem informações adicionais para tecnologias assistivas.

Os atributos Aria são um conjunto de atributos do HTML que você usa para fornecer informações adicionais sobre a finalidade e o estado dos elementos em uma página da web. Esses atributos são especialmente benéficos para tecnologias assistivas para fornecer mais contexto e melhor navegação para os usuários.

Alguns atributos Aria comuns incluem:

1. aria-label: usado para fornecer um rótulo ou nome para um elemento.
2. aria-hidden: usado para indicar que um elemento deve ser ocultado das tecnologias assistivas. Isso pode ser útil para elementos usados para fins de layout, mas não relevantes para o conteúdo da página.
3. aria-describedby: usado para associar um elemento a uma descrição, o que ajuda a fornecer o contexto de um elemento.
4. aria-live: usado para indicar que o conteúdo de um elemento pode mudar dinamicamente e que as tecnologias assistivas devem prestar atenção às mudanças no conteúdo do elemento.

Você pode usar esses atributos em combinação entre si e com atributos HTML padrão para criar conteúdo para a web mais acessível e fácil de usar.

O que é o atributo aria-role?

Você usa o atributo aria-role para definir a finalidade de um elemento HTML e fornecer seu significado semântico.

Por exemplo, se estiver construindo um componente de grade (grid) com a ajuda de CSS e divs, você pode usar role="grid" para permitir que as tecnologias assistivas saibam sobre a semântica do componente.

Alguns aria-roles comuns incluem:

1. button: usado para indicar que um elemento deve ser tratado como um botão.
2. alert: usado para indicar que um elemento é uma caixa de alerta.
3. presentation: usado para indicar que um elemento é apenas de apresentação.

É importante ter cuidado com aria-role. Lembre-se de não exagerar.

Como tratar da navegação por teclado e leitores de tela

Muitos usuários com deficiência motora dependem de seu teclado e tecnologias assistivas para navegar na web. Portanto, é fundamental que cada componente seja navegável usando um teclado e um leitor de tela.

Você pode testar a acessibilidade do teclado navegando em um site usando apenas o teclado. Aqui estão algumas teclas comuns:

1. a tecla tab ajuda a navegar pelas diferentes seções do site.
2. a barra de espaço ajuda a selecionar elementos, como uma caixa de seleção.
3. a tecla enter serve para pressionar os botões.

Ao testar a navegação por teclado, certifique-se de pensar no seguinte:

1. O foco permanece visível: verifique se você pode ver claramente qual elemento está sendo focado na página. O foco deve permanecer sempre visível.
2. Ordem das tabulações: ao percorrer as seções, a ordem das tabulações deve seguir o fluxo natural e a estrutura lógica do site. Ele não deve pular para frente e para trás entre as seções.
3. Armadilhas do teclado: certifique-se de que, ao navegar com o teclado, o foco não fique preso em um elemento. Por exemplo, isso pode acontecer quando um modal é aberto ou o foco é navegado para um widget, como um calendário ou o seletor de emojis. Certifique-se de que, ao selecionar um elemento no widget, você possa navegar de volta ao site.

Resumo

Em geral, testar a acessibilidade durante o desenvolvimento é uma parte importante do processo que pode ajudar a criar um software mais utilizável e acessível para todos os usuários. Testar a acessibilidade com antecedência ajuda a fornecer uma ótima experiência de usuário para todos.

No próximo artigo, a autora fala sobre as várias ferramentas de acessibilidade e sobre como depurar um problema de acessibilidade. Você pode se inscrever para recebê-lo em sua caixa de entrada aqui.

Até lá, boa programação para você!