Critério de Sucesso 2.4.13 Aparência do Foco

*Versão Original em Inglês*

When the keyboard focus indicator is visible, an area of the focus
indicator meets all the following:

   - is at least as large as the area of a 2 CSS pixel thick perimeter of
   the unfocused component or sub-component, and
   - has a contrast ratio of at least 3:1 between the same pixels in the
   focused and unfocused states.

Exceptions:

The focus indicator is determined by the user agent and cannot be adjusted
by the author, or
The focus indicator and the indicator's background color are not modified
by the author.

NOTE 1
What is perceived as the user interface component or sub-component (to
determine enclosure or size) depends on its visual presentation. The visual
presentation includes the component's visible content, border, and
component-specific background. It does not include shadow and glow effects
outside the component's content, background, or border.

NOTE 2
Examples of sub-components that may receive a focus indicator are menu
items in an opened drop-down menu, or focusable cells in a grid.

NOTE 3
Contrast calculations can be based on colors defined within the technology
(such as HTML, CSS and SVG). Pixels modified by user agent resolution
enhancements and anti-aliasing can be ignored.


*Tradução atual em português*

Quando o indicador do foco teclado estiver visível, uma área do indicador
de foco cumpre os seguintes requisitos:

   - é pelo menos tão grande quanto a área de um perímetro de 2 pixels CSS
   do componente ou subcomponente sem foco; e
   - tem uma razão de contraste de pelo menos 3:1 entre os mesmos pixels
   nos estados com foco e sem foco.

Exceções :

O indicador de foco é determinado pelo agente de usuário e não pode ser
ajustado pelo autor; ou
O indicador é determinado pelo agente usuário e não pode ser ajustado pelo
autor.

NOTA 1
O que é percebido como o componente ou subcomponente da interface de
usuário (para determinar a delimitação ou tamanho) depende da sua
apresentação visual. A apresentação visual inclui o conteúdo, borda e fundo
específico visuais do componente. Ela não inclui efeitos de sombra ou
brilho fora do conteúdo, fundo ou borda do componente.

NOTA 2
Exemplos de subcomponentes que podem receber um indicador de foco são itens
de menu em um menu pendente, ou células que podem ser focalizadas na grade.

NOTA 3
Cálculos de contraste podem ser baseados nas cores definidas dentro da
tecnologia (como HTML, CSS e SVG). Os pixels modificados por aumento e
anti-aliasing de resolução por agentes usuários podem ser ignorados.


*Minha sugestão*

Quando o indicador de foco do teclado estiver visível, uma área do
indicador de foco *atende a todos os seguintes requisitos:*

   - é pelo menos tão grande quanto a área de um perímetro de *2 pixels de
   espessura CSS* do componente ou subcomponente sem foco, e
   - tem uma *relação de contraste* de pelo menos 3:1 entre os mesmos
   pixels nos estados com foco e sem foco.

*Observação: *Nós usamos o termo "relação de contraste" nos critérios de
contraste, por isso devemos manter um padrão.

Exceções:

O indicador de foco é determinado pelo agente de usuário e não pode ser
ajustado pelo autor; ou
*O indicador de foco e a cor de fundo do indicador não são modificados pelo
autor.*

NOTA 1
O que é percebido como o componente ou subcomponente da interface de
usuário (para determinar a delimitação ou tamanho) depende da sua
apresentação visual. A apresentação visual inclui o *conteúdo visível, a
borda e o plano de fundo específico do componente.* Ela não inclui efeitos
de sombra ou brilho fora do conteúdo, fundo ou borda do componente.

NOTA 2
Exemplos de subcomponentes que podem receber um indicador de foco são itens
de menu *em um menu suspenso (drop-down menu), ou células que podem ser
focalizadas em uma grade.*

NOTA 3
Cálculos de contraste podem ser baseados nas cores definidas dentro da
tecnologia (como HTML, CSS e SVG).
*Os pixels modificados por melhorias de resolução do agente do usuário e
suavização de serrilhado (anti-aliasing) podem ser ignorados.*

*observação: *Talvez seja melhor deixar palavras em inglês que são termos
importantes no desenvolvimento entre parênteses, como (drop-down menu) e
(grid).
[image: Acesso para Todos] <https://www.acessoparatodos.com.br/>
Cláudia Martin Nascimento
Co-fundadora
claudia@acessoparatodos.com.br
Tel   +55 11 3865 5202  |  Cel   + 55 11 9 7161 2122
www.acessoparatodos.com.br

[image: Plataforma de Sites Acessíveis. Acesse em meumoduli.com.br]
<https://meumoduli.com.br/>

>
>