Skip to content
Blog post thumbnail: Keyboard Accessibility A to Z: Building Websites Everyone Can Use Without a Mouse - A complete guide to making websites fully usable without a mouse. Learn focus management, Tab order, and custom widget implementation with practical code examples. (https://www.codeslog.com/en/posts/keyboard-accessibility-a-to-z/)

Keyboard Accessibility A to Z: Building Websites Everyone Can Use Without a Mouse

Introduction Have you ever tried using the internet without a mouse? Most people take their mouse for granted. But there are many people who can’t use one. People with physical disabilities who can’t operate a mouse People with repetitive strain injuries like carpal tunnel syndrome People with temporary arm injuries Power users who simply find keyboards more efficient For these users, the question “Can I use this site with just a keyboard?” is crucial. ...

Published date: 2026-02-03 · Reading time: 18 min · Word count: 3648 words · Author: Isaac
Blog post thumbnail: Improving Multilingual Blog UX: Building a Smart Language Suggestion Banner - Built a banner that detects browser language and automatically suggests the appropriate language version. Designed to meet WCAG 2.2 AA with keyboard navigation and screen reader support. (https://www.codeslog.com/en/posts/language-switcher-banner/)

Improving Multilingual Blog UX: Building a Smart Language Suggestion Banner

Introduction Running a blog in both Korean and English revealed an interesting problem. When sharing blog links internationally, visitors often land on the Korean page. Those who can’t read Korean are confused, right? Similarly, when Korean readers click on English post links shared in Korean communities, they face the same issue. While there’s a language switcher button in the header, new visitors often struggle to find it. This isn’t user-friendly, and from an accessibility perspective, it’s not ideal either. ...

Published date: 2026-01-23 · Reading time: 13 min · Word count: 6082 words · Author: Isaac
Blog post thumbnail: ARIA Practical Guide: Implementing Accessible Web Interfaces - How do we apply ARIA in real projects? This guide shows when to use it and how to use it effectively, with live regions, custom widgets, and modal patterns. (https://www.codeslog.com/en/posts/aria-practical-guide/)

ARIA Practical Guide: Implementing Accessible Web Interfaces

Developers often make the same mistake after learning ARIA. They understand the concept, but they are unsure when and how to apply it in real projects. ARIA practical guide main visual with ARIA attributes highlighted in a code editor Cover image example: visual that symbolizes applying ARIA attributes · Generated by Nanobanana AI You may have heard the phrase: “ARIA is a last resort.” Use semantic HTML first, and add ARIA only when native HTML is not enough. This guide follows that principle and shows how to use ARIA effectively in real work. ...

Published date: 2026-01-22 · Reading time: 17 min · Word count: 3511 words · Author: Isaac
Blog post thumbnail: Code Block Accessibility Improvement: Line Numbers That Screen Reader Users Can Choose - We've improved the accessibility of code blocks in our Hugo blog for screen reader users. (https://www.codeslog.com/en/posts/code-block-accessibility-improvement/)

Code Block Accessibility Improvement: Line Numbers That Screen Reader Users Can Choose

Introduction Recently, I started building and operating a blog using Hugo with the PaperMod theme. Using someone else’s theme has the advantage of quick setup, but not everything fits my needs perfectly. After customizing many parts to match my preferences, I noticed some issues with the code blocks. Line numbers were implemented with <table> tags. While this doesn’t violate accessibility guidelines, it felt not semantic. Moreover, I wondered: what’s the experience for screen reader users? I found a better approach using CSS Counters. ...

Published date: 2026-01-09 · Reading time: 16 min · Word count: 3376 words · Author: Isaac
Blog post thumbnail: Web Accessibility in the AI Era: Universal Values That Must Evolve With Technology - Explore how AI technology impacts web accessibility and learn essential principles every developer must know, with practical examples. (https://www.codeslog.com/en/posts/web-accessibility-ai-era/)

Web Accessibility in the AI Era: Universal Values That Must Evolve With Technology

Introduction We live in an age where generative AI like ChatGPT, Claude, and Gemini has become part of daily life. AI chatbots have established themselves on websites, and automated content generation has become commonplace. Amid this rapid technological advancement, we must ask an important question: “Is the web created by AI usable by everyone?” Web Accessibility means ensuring that everyone—people with disabilities, elderly users, those with slow network connections, and more—can use the web equally. In the AI era, or rather because it is the AI era, web accessibility has become even more critical. ...