带图标提交按钮的无障碍适配：value/alt/title属性该如何选择？

Great question! Let's unpack this step by step, based on WCAG (Web Content Accessibility Guidelines) standards and how assistive technologies like NVDA behave.

First, let's clarify a key point: the alt attribute you're using on <input type="submit"> is not a valid attribute for this input type. The alt attribute only applies to <input type="image">—submit buttons don't support it. So that alt value isn't being recognized by most assistive tech, even if NVDA seems to pick up something here.

Why your current setup works in NVDA (but isn't reliable) #

NVDA is likely reading the title attribute here, but relying on title for accessibility is not recommended. Here's why:

• Many screen readers don't read title attributes by default—users have to manually enable that behavior.
• Keyboard-only users can't see title text (it only appears on hover), so they won't get the context unless there's another label.

What's the correct approach? #

You have two solid, WCAG-compliant options to make this icon button accessible:

1. Use aria-label (modern and clean)
   Add an aria-label attribute directly to the submit button. This is designed specifically for providing accessible labels to elements that don't have visible text:

   <input type="submit" name="executeSearch" value="" title="Execute search" class="iconButton searchBtn" aria-label="Execute search">
   

   Assistive technologies will prioritize the aria-label value, ensuring consistent behavior across screen readers.

2. Use a visually hidden value (traditional, widely supported)
   If you prefer to use the value attribute, you can keep the text but hide it visually with CSS so only screen readers pick it up:

   <input type="submit" name="executeSearch" value="Execute search" class="iconButton searchBtn">
   

   Then add this CSS:

   .searchBtn {
     text-indent: -9999px;
     overflow: hidden;
     width: [your icon width];
     height: [your icon height];
     /* rest of your icon styles */
   }
   

   This ensures the button has a visible label for screen readers while maintaining your icon-only visual design.

Final verdict on your current implementation #

While NVDA reads it now, it's not a compliant or reliable solution. The alt attribute is invalid here, and relying on title leaves out many users. Switching to either aria-label or a visually hidden value will make your button properly accessible across all assistive technologies.

内容的提问来源于stack exchange，提问作者mosquito87