亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Table of Contents
Use appropriate semantic HTML
Support keyboard interaction
Provide visual and state feedback
Home Web Front-end H5 Tutorial How to make a custom control, like a button, accessible?

How to make a custom control, like a button, accessible?

Jun 24, 2025 am 12:13 AM
Custom controls accessibility

To make custom controls have good accessibility, you need to use semantic tags correctly, support screen readers and keyboard operations. 1. Use ARIA attributes to supplement semantics, such as role="button", tabindex="0" and aria-label; 2. Support keyboard focus and Enter key trigger events; 3. Provide visual feedback, such as focus profile, disabled status, and loading prompts. For example:

?
Use the above steps to ensure that all users can operate the controls smoothly.

To make your custom controls (such as a button) have good accessibility, the key is to use semantic tags correctly, provide enough information to the screen reader, and ensure smooth keyboard operation. This not only improves the user experience, but also meets barrier-free standards.

Use appropriate semantic HTML

If possible, try to use the native HTML button <button></button> directly, because it comes with accessibility attributes. But if you do need to customize a button (such as using <div> or <code><span></span> ), you need to use ARIA (Accessible Rich Internet Applications) to make up for the missing semantics.

  • Add role="button" to the control to tell the screen reader that this is a button.
  • Set tabindex="0" so that it can be focused via the keyboard.
  • If the button has an icon but no text, remember to add aria-label description function, such as aria-label="關(guān)閉" .

For example:

 <div role="button" tabindex="0" aria-label="Submit Form">?</div>

Support keyboard interaction

Even if the user does not use the mouse, he should be able to complete the operation through the keyboard. Make sure your button:

  • Can be focused via the Tab key
  • Support Enter key to trigger click event
  • Does not block the default behavior of the keyboard or cause loss of focus

You can listen to keydown events to implement the Enter trigger function:

 element.addEventListener(&#39;keydown&#39;, function(e) {
  if (e.key === &#39;Enter&#39;) {
    // Execute click logic}
});

The advantage of this is that the screen reader user can also operate normally after focusing on this button.

Provide visual and state feedback

In addition to being friendly to assistive technology, don't forget visible design feedback. This is important for all users, especially those with vision impairment:

  • When the button is focused, there must be clear contour lines (do not outline: none )
  • If the button is disabled, use aria-disabled="true" and cooperate with visual ashing
  • If the button is loading, you can use aria-busy="true" to load the animation prompts with the aria-busy="true"

For example, a loading button can be written like this:

 <button role="button" aria-busy="true">Loading...</button>

Basically that's it. It is not complicated to do these details well, but they are easily overlooked. Just remember: semantics, keyboard support, status feedback, and three points in place to make the custom button truly "available".

The above is the detailed content of How to make a custom control, like a button, accessible?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

ArtGPT

ArtGPT

AI image generator for creative art from text prompts.

Stock Market GPT

Stock Market GPT

AI powered investment research for smarter decisions

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Amap API document analysis: How to implement map custom controls in PHP Amap API document analysis: How to implement map custom controls in PHP Jul 30, 2023 pm 11:57 PM

Amap API document analysis: How to implement map custom controls in PHP. Map custom controls refer to adding user-defined function modules to the map, which can expand and customize functions according to actual needs. In PHP, we can use the Amap API combined with the functions of custom controls to achieve more personalized and rich map applications. This article will introduce how to implement a custom map control in PHP and give code examples. Preparation work First, we need to apply for API on the Amap open platform

How to build a responsive and accessible website using PHP How to build a responsive and accessible website using PHP Sep 12, 2023 am 08:24 AM

How to Build Responsive and Accessible Websites Using PHP Summary: In today’s digital world, building responsive and accessible websites is becoming more and more important. This article will introduce how to use the PHP programming language to build a website with responsive design and accessibility features, and provide some practical tips and tools. Introduction With the popularity of mobile Internet and smart devices, people's demand for accessing websites is also increasing. Whether on a computer, tablet or mobile phone, users want to be able to access websites that fit their needs on any device

Improve website accessibility with Webman Improve website accessibility with Webman Aug 13, 2023 pm 11:13 PM

Improving website accessibility through Webman With the rapid development of the Internet, more and more people have begun to rely on the Internet to obtain information and complete various tasks. However, many websites ignore people's different needs and abilities when designing them, resulting in many users being unable to access and use these websites well. To solve this problem, Webman is a great tool that helps developers increase the accessibility of their websites. Webman is a powerful JavaScript library that provides many functions and methods,

Guide to using CSS properties to improve web accessibility Guide to using CSS properties to improve web accessibility Nov 18, 2023 pm 03:44 PM

Guidelines for using CSS attributes to improve the accessibility of web pages. With the continuous development of the Internet, web pages have become one of the important channels for people to obtain information and participate in communication. However, some users with vision, hearing or other special needs may have difficulty accessing the web. In order for web pages to better serve all users, it is particularly important to improve the accessibility of web pages. As an important part of web design, CSS (Cascading Style Sheets) can improve the accessibility of web pages through the use of some attributes. This article will focus on this

How can CSS be used to create accessible focus indicators for keyboard navigation? How can CSS be used to create accessible focus indicators for keyboard navigation? Jun 18, 2025 am 12:11 AM

TocreateaccessiblefocusindicatorswithCSS,use:focusand:focus-visibletogether.1.Use:focus-visibleforkeyboardnavigationonly,applyingstrongvisualstyleslikeaboldoutlineorbackgroundcolor.2.Combineborderchanges,backgroundcolors,orboxshadowstoensurevisibilit

Integration of Java RESTful APIs with Responsive Design: Build APIs that are friendly to all devices Integration of Java RESTful APIs with Responsive Design: Build APIs that are friendly to all devices Mar 09, 2024 am 09:46 AM

Preface RESTful APIs have become the cornerstone of modern application development, and responsive design ensures that applications always provide the best user experience across a variety of devices. Combining these two technologies creates APIs that are friendly to all devices, increasing user satisfaction and expanding the reach of your application. JavaRESTfulAPI JavaRESTfulAPI follows REST principles and uses Http verbs such as GET, POST, PUT and DELETE to communicate with clients. Through REST API, clients can create, read, update, and delete resources on the server. REST API is known for its flexibility, scalability and reusability. responsive design responsive

Java program to check accessibility of static method to static variable Java program to check accessibility of static method to static variable Aug 26, 2023 pm 05:25 PM

Introduction In Java, we can define variables and methods as static. Static variables or methods belong to the class itself, not to individual objects of that class. Therefore, we can access a static variable or method using the class name without creating an object of that class. In this program, we will explore how to check the accessibility of static variables through static methods. We will define a class with a static variable and a static method to access the variable. Then we will call the static method to check if it can access the static variable. Defining static The static keyword is very useful in Java to create utility methods or variables that can be accessed from multiple classes without creating an object of that class. It is also used to maintain the same constant value across all instances of a class. But static variables

How to make an audio player with custom controls in HTML5? How to make an audio player with custom controls in HTML5? Sep 16, 2025 am 04:21 AM

First create hidden audio elements and build a custom control UI, and then connect functions such as playback, pause, progress adjustment and volume control to the audio API through JavaScript to achieve a fully personalized audio player.

See all articles