Outline Blue dan Aksesibilitas pada Chakra UI

Insight Jun 07, 2021

Pernah tidak, teman-teman saat pergi berkunjung ke setiap website yang menggunakan Chakra UI terdapat sebuah kesamaan? Seperti ini misalnya

Sudah mendapatkan kesamaannya? Benar, yaitu munculnya garis biru pada setiap element a dan saat state element tersebut focus: .

Hal ini membuat saya bertanda tanya, kenapa Chakra UI memberikan focus:box-shadow yang ternyata adalah property box-shadow bukan border atau outline pada setiap element.

Ternyata, setelah saya mencari cari, itu terkait dengan Accesibility yang mengacu kepada WAI-ARIA standards. WAI-ARIA merupakan Web Accessibility Initiative's Accessible Rich Internet Applications atau bisa disebut secara singkat adalah ARIA merupakan Strategi, standar, informasi untuk membuat Web aksesibel bagi penyandang disabilitas.

Lantas, apa hubungannya penggunaan box-shadow pada tag element a di HTML? Berdasarkan Tips dari a11yproject disebutkan bahwa

Menghapus outlines di CSS dapat mempersulit / memunculkan masalah bagi para orang-orang yang menavigasikan web dengan menggunakan keyboard.

Sumber : https://www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/

Alasannya, dengan menghapuskan box-shadow atau mungkin outline di CSS menjadikan sebuah element link atau element tidak memiliki indikator focus kepada para pengguna yang menggunakan keyboard untuk melakukan navigasi.

Masalah lainnya, bagi para pengguna mouse atau klien merasa bahwa box-shadow atau outline css di element link atau indikator fokus ini secara visual menjadi cukup buruk dan mungkin malah menginginkan fokus yang lain. Malah paling ekstrim ada kalanya, klien meminta dihilangkan sebuah focus elementnya.

Solusi

Beruntungnya, pada salah satu pembahasan outline ini di Issues Github Chakra UI ada yang memberikan sebuah tautan mengenai cara memanipulasinya.

Menggunakan Package focus-visible

Salah satu packages yang bisa menghilangkan focus pada pengguna mouse namun bisa memunculkan focus pada pengguna keyboard.

Cara Pemasangan :

Install Packagesnya pada Folder root

npm install focus-visible

Import Focus Visible

Kalau menggunakan menggunakan NextJS, import `'focus-visible/dist/focus-visible' pada file _app.js misalnya

import { useEffect } from 'react';

import { ChakraProvider, ColorModeProvider } from '@chakra-ui/react';
// import focus visible
import 'focus-visible/dist/focus-visible';


import Fonts from '@/styles/fonts';
import customTheme from '@/styles/customTheme';
import '@/styles/global.css';

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider resetCSS theme={customTheme}>
      <Fonts />
      <ColorModeProvider
        options={{
          useSystemColorMode: true,
        }}
      >
        <Component {...pageProps} />
      </ColorModeProvider>
    </ChakraProvider>
  );
}

export default MyApp;

Menambahkan Style CSS

Ini dimaksudkan, agar focus masih bisa muncul saat user menggunakan keyboard. Namun, tidak muncul saat user menggunakan Mouse.

Tambahkan kode berikut pada file global.css

  .js-focus-visible :focus:not([data-focus-visible-added]) {
     outline: none;
     box-shadow: none;
   }

Sehingga menjadi seperti ini

/* Global CSs Here */
.js-focus-visible :focus:not([data-focus-visible-added]) {
  outline: none;
  box-shadow: none;
}

global.css

Pastikan, file global.css diimport pada aplikasi NextJS kita dan Bimsalabim! Selesai!

Hasilnya, dapat dipastikan apabila kita menggunakan Mouse tidak muncul box-shadow lagi para element yang sedang focus namun akan muncul saat menggunakan Keyboard.

Sehingga munculah pertanyaan baru. Apakah yang akan terjadi apabila kita hanya menggunakan Keyboard untuk navigasi di halaman website kita? Ini akan jadi pembahasan menarik pada tulisan selanjutnya.