Kode untuk Membuat Outline Berwarna Hanya Pada Saat Menggunakan Tab pada Keyboard dan Menghilangkan Ruang Putih di Antara Outline dan Tombol

Di era digital saat ini, aksesibilitas website menjadi faktor penting yang tidak hanya mendukung kebutuhan pengguna dengan keterbatasan tetapi juga memperbaiki pengalaman pengguna secara keseluruhan. Salah satu aspek aksesibilitas adalah memastikan bahwa elemen yang difokuskan pada halaman web dapat dilihat dengan jelas ketika di-navigasi menggunakan keyboard, khususnya tombol ‘Tab‘. Untuk memenuhi kebutuhan ini, saya akan berbagi sebuah skrip yang memungkinkan developer untuk menambahkan outline berwarna pada elemen tertentu seperti tombol, hanya saat menggunakan tab pada keyboard, sekaligus menghilangkan ruang putih yang sering kali muncul di antara outline dan tombol.

Catatan: Anggap saja, klien Anda tidak ingin ada outline berwarna jika focus terjadi karena mouse!

Tujuan Skrip

Skrip ini dirancang untuk meningkatkan aksesibilitas pada tombol-tombol yang menggunakan class .elementor-button.elementor-button-link pada website yang dibangun dengan WordPress dan Elementor. Outline berwarna akan muncul hanya ketika pengguna melakukan navigasi dengan tab pada keyboard, dan hilang ketika tombol tidak lagi difokuskan atau ketika tombol diklik menggunakan mouse.

Kode asli dari Elementor Builder (Contoh):

<div class="elementor-element elementor-element-7aba75a elementor-widget__width-auto elementor-tablet-align-left elementor-widget-tablet__width-auto elementor-hidden-mobile elementor-hidden-tablet callactionheader elementor-widget elementor-widget-button" data-id="7aba75a" data-element_type="widget" data-settings="{&quot;_animation_mobile&quot;:&quot;fadeInLeft&quot;}" data-widget_type="button.default">
				<div class="elementor-widget-container">
					<div class="elementor-button-wrapper">
			<a class="elementor-button elementor-button-link elementor-size-sm" href="#" style="">
						<span class="elementor-button-content-wrapper">
									<span class="elementor-button-text">Button label</span>
					</span>
					</a>
		</div>
				</div>
				</div>

Implementasi Skrip

Skrip ini menggunakan JavaScript untuk menangkap event keydown dan memeriksa apakah tombol yang ditekan adalah ‘Tab’. Jika ya, skrip akan mengatur sebuah flag yang menunjukkan bahwa pengguna sedang tabbing. Kemudian, untuk setiap tombol yang sesuai, skrip menambahkan outline berwarna ketika tombol tersebut difokuskan dan menghilangkan outline ketika fokus hilang atau tombol diklik dengan mouse.
Contoh:

Tidak ada ruang di antara outline dan tombol:

Gambar dengan ruang:

Hasil lebih baik:

Kode Skrip

function add_keyboard_focus_script() {
    ?>
    <script>
        // Flag untuk menunjukkan bahwa fokus dipicu oleh keyboard
        let userIsTabbing = false;
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Tab') {
                userIsTabbing = true; // Mengatur flag ketika user menggunakan tab
            }
        });

        // Menambahkan event listener pada semua tombol yang ditargetkan
        document.querySelectorAll('.elementor-button.elementor-button-link').forEach(button => {
            button.addEventListener('focus', function() {
                if (userIsTabbing) {
                    this.style.outline = '4px solid #160043'; // Mengaplikasikan outline dengan ketebalan dan warna yang ditentukan
                    this.style.outlineOffset = '-2px'; // Menarik outline lebih dekat untuk menghilangkan ruang putih
                }
            });

            button.addEventListener('blur', function() {
                this.style.outline = ''; // Menghapus outline ketika fokus hilang
                this.style.outlineOffset = ''; // Mengatur ulang outline offset ketika fokus hilang
            });

            button.addEventListener('mousedown', function() {
                userIsTabbing = false; // Mengatur ulang ketika tombol mouse diklik
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'add_keyboard_focus_script');

Manfaat Skrip Ini

Skrip ini tidak hanya meningkatkan aksesibilitas tetapi juga estetika dari navigasi keyboard, memberikan feedback visual yang jelas kepada pengguna yang mengandalkan navigasi keyboard. Dengan menghilangkan ruang putih di antara outline dan tombol, skrip ini memastikan bahwa indikasi fokus terlihat bersih dan profesional, sangat cocok untuk situs web modern yang menekankan baik fungsi maupun desain.

Kesimpulan

Mengimplementasikan skrip seperti ini pada situs Anda dapat sangat membantu dalam memenuhi standar aksesibilitas web dan memperbaiki pengalaman pengguna. Outline yang muncul hanya saat menggunakan tab membantu dalam navigasi yang intuitif, sedangkan penghapusan ruang putih memastikan tampilan yang rapi dan terorganisir. Skrip ini mudah diintegrasikan dan dapat disesuaikan dengan tema atau kebutuhan spesifik website Anda.