Leadster - Acessibilidade

Links Importantes:

Filtro de vídeo

Remodelei o componente de forma semântica.

Antes:

<!--parte do código omitida por brevidade-->

<section>
  <button value="Agências">
    <p>Agências</p>
  </button>
  ...
</section>

Depois:

<!--parte do código omitida por brevidade-->

<h3 id="filtro-de-videos-titulo">
  <span class="VisuallyHidden">Filtrar por:</span>
</h3>
<div role="group" aria-labelledby="filtro-de-videos-titulo">
  <ul>
    <li>
      <input type="radio" name="filtro-de-videos" value="todos" />
      <label>Todos</label>
    </li>
    ...
  </ul>
</div>

Isso deixou muito mais clara a função do componente em leitores de tela, como mostra o vídeo (ative o som):

Resumo do vídeo:

  • Antes, eram apresentados botões sem contexto algum;
  • Agora, o leitor de tela mostra um filtro de 6 itens e indica o item ativo.

Componente no github

Select

Agora o componente usa o <select> nativo do HTML. Componentes nativos são acessíveis por padrão e poupam o uso de javascript.

Antes:

//parte do código omitida por brevidade

import * as Styled from './styles';
import Option from './Option';
import FilterContext from '../../context/FilterContext/FilterContext';
import {FilterContextData} from '../../context/FilterContext/interfaces';

const Select: React.FC<SelectProps> = ({handleSortChange}) => {
  const {selectedSort, options} = React.useContext < FilterContextData > FilterContext;
  const optionsDiv = React.useRef(null);
  const select = React.useRef(null);

  function handleSelect($select: HTMLButtonElement) {
    const expanded = $select.getAttribute('aria-expanded') === 'true';

    $select.setAttribute('aria-expanded', (!expanded).toString());
    optionsDiv.current?.setAttribute('aria-hidden', expanded);
  }

  function handleOptionClick({currentTarget}: React.MouseEvent<HTMLButtonElement>) {
    handleSortChange(currentTarget.value);
    handleSelect(select.current);
  }

  function handleSelectClick({currentTarget}: React.MouseEvent<HTMLButtonElement>) {
    handleSelect(currentTarget);
  }

  return (
    <Styled.SortBy>
      <Styled.Label htmlFor="select">Ordenar por:</Styled.Label>

      <Styled.SelectWrapper>
        <Styled.Select
          ref={select}
          onClick={handleSelectClick}
          aria-expanded="false"
          aria-controls="options"
          id="select"
        >
          <Typography>{selectedSort}</Typography>
        </Styled.Select>
        <Styled.Options id="options" aria-hidden="true" ref={optionsDiv}>
          {options.map(option => (
            <Option key={option} value={option} onClick={handleOptionClick} />
          ))}
        </Styled.Options>
      </Styled.SelectWrapper>
    </Styled.SortBy>
  );
};

export default Select;

Depois:

//parte do código omitida por brevidade
const Select = ({id, value, onChange, children, ...props}: TSelect) => {
  const displayedValue = getDisplayedValue({value, children});

  return (
    <Wrapper>
      <NativeSelect id={id} value={value} onChange={onChange} {...props}>
        {children}
      </NativeSelect>
      <PresentationalBit>
        {displayedValue}
        <IconWrapper>
          <ChevronDown size={24} />
        </IconWrapper>
      </PresentationalBit>
    </Wrapper>
  );
};

const Wrapper = styled.div`...`;
const NativeSelect = styled.select`...`;
const PresentationalBit = styled.div`...`;
const IconWrapper = styled.div`...`;

export default Select;

Resumo do componente:

  • Antes, possuia muito js desnecessário;
  • Agora, usa o <select> nativo, acessível por padrão, com um código mais limpo;
  • Antes, só era possível usá-lo na galeria de vídeo;
  • Agora, pode ser usado em qualquer parte do site.

Componente no github

Card de vídeo

Recriei o componente com base nesse guia.

Antes:

<!--parte do código omitida por brevidade-->

<button value="{id-do-video}">
  <figure>
    <div>
      <img src="{thumb}" />
    </div>
    <figcaption>
      <p>{titulo}</p>
    </figcaption>
  </figure>
</button>

Depois:

<!--parte do código omitida por brevidade-->

<li class="videoCard">
  <div class="thumb">
    <div aria-hidden="true" class="iconWrapper">
      <svg>{play}</svg>
    </div>
    <img src="{thumb}" />
  </div>
  <h3>
    <a href="{link-do-video}">{titulo}</a>
  </h3>
</li>

O problema da abordagem antiga é que não funcionava em leitores de tela (ative o som):

Resumo:

  • Antes, o leitor não lia o título dos vídeos;
  • Agora, o problema foi corrigido.

Componente no github

Outros

  • O modal de vídeo agora usa a tag <dialog>;
  • A paginação da galeria agora segue esse padrão;
  • No rodapé, email e telefone foram transformados em uma description list;
  • A versão antiga usava <nav> para cada grupo de links no rodapé. Isso foi corrigido.