frontend icon indicating copy to clipboard operation
frontend copied to clipboard

feat: improving accessibility by using semantic tags and aria-related props

Open risaddex opened this issue 1 year ago • 3 comments

Esse PR tenta resolver alguns dos problemas mencionados na issue#246

  • [x] Foram adicionados aria-labels a alguns botões ( de voltar / refresh / hamburger menu, etc)
  • [x] Trocados algumas tags "h1" usadas para deixar aspecto negrito por "strong"
  • [x] Adicionados algumas tags/roles como aria-role="list" e aria-role="listitem" às listas de abrigos

Demais mudanças por favor me atualizem

Em relação ao problema das ruas, a seguinte "gambiarra" poderia ser usada para tentar substituir os nomes das ruas a nível de cliente (o q optei por não colocar pq além de ser má prática envolve regexp, que costuma quebrar bastante a performance, ainda mais sendo itens que rodam em alguns loops)

const streetAbbrvRegexp = /^[R]\./i
// Leitores como JAWs da vida/ 
const SemanticAddress = ({ address }) => {
    return (
        <>
            {address.match(streetAbbrvRegexp) ? (
                <>
                    <span
                        className="text-muted-foreground text-sm md:text-lg font-medium"
                        aria-label="Rua"
                    >
                        R.
                    </span>
                    {address.replace(streetAbbrvRegexp, '')}
                </>
            ) : (
                address
            )}
        </>
    )
}

risaddex avatar May 19 '24 03:05 risaddex

Quanto à gambiarra do "R." das ruas, ela funcionou no Windows Narrator, mas não no NVDA. Não sei se é possível resolver isso.

marcossanhudo avatar May 20 '24 01:05 marcossanhudo

As mudanças feitas melhoram a usabilidade com o Windows Narrator e o NVDA, dentro do escopo proposto.

Então, eu não cheguei a implementar essas mudanças, apenas mencionei a possibilidade. Assumo que vc testou localmente? (Não leve a mal, quero apenas ter ctz que estamos falando da mesma situação)

falo pq não sei se ativar o TalkBack do Google é o suficiente pra satisfazer o critério, e ~~não tenho boas recordações de instalar o NVDA ou JAWs no Ubuntu ~~

risaddex avatar May 21 '24 10:05 risaddex

Eu clonei sua branch pra testar localmente, sim. Só para agilizar as coisas :).

marcossanhudo avatar May 21 '24 12:05 marcossanhudo