Image Buttons Must Have Alternate Text Axe Rules - Deque University
Có thể bạn quan tâm
Check that the <input type="image"> has a non-empty alt, aria-label or aria-labelledby attribute.
Image buttons use the alt attribute as the label. The alt attribute value must be provided, and it must be clear and concise and representative of the action performed when the button is activated by the user (not a description of the image itself).
Image Button Example
<input type="image" src="submit.png" name="submit" height="36" width="113" alt="Submit">Check that all images used as buttons have accessible alternate text.
How to add alt text to an image
- Using an alt attribute i.e. <input type="image" alt="submit button">
- Using an aria-label i.e. <input type="image" aria-label="submit button">
- Using an aria-labelledby attribute i.e. <input type="image" aria-labelledby="someElementID">
If you are using an alt attribute or an aria-label, ensure it is not empty. If you are using an aria-labelledby attribute, ensure that the ID to which it points exists and is accessible to a screen reader (i.e. is not hidden using CSS with display: none or aria-hidden="true").
Tips on writing alt text
When writing the alt text, keep in mind that the purpose of the alt text is to relay information to blind users about the image’s contents and purpose - blind users should be able to get as much information from alt text as a sighted user gets from the image itself. alt text should give the intent, purpose, and meaning of the image.
When writing alt text, it is helpful to keep the following questions in mind:
- Why is the non-text content here?
- What information is it presenting?
- What purpose does it fulfill?
- If I could not use the non-text content, what words would I use to convey the same information or function?
Be sure that all text contained in the alt attribute is useful. Words like "chart," "image," "diagram," or image file names tend not to be very useful and thus should not be used in alt text.
Từ khóa » Html Button Alt Text
-
HTML Input Alt Attribute - W3Schools
-
HTML Alt Attribute - W3Schools
-
Can The Alt Attribute Be Used For An Input Type Button - Stack Overflow
-
H36: Using Alt Attributes On Images Used As Submit Buttons - W3C
-
Image ALT Tag Tips For HTML - Accessibility At Penn State
-
HTML Input Alt Attribute - Dofactory
-
Alt Text: Why It's Important For Accessibility & SEO - Moz
-
HTML Tag With The 'alt' Attribute
-
A Guide: The Right Way To Write Alt Text - Clique Studios
-
Alternative Text: Web Content - Accessibility - Indiana University
-
t - Web APIs | MDN
-
- HTML: HyperText Markup Language | MDN"> - HTML: HyperText Markup Language | MDN
-
Alternative Text - IT Accessibility - NC State University
-
HTML Img Alt Tags For SEO Best Practice - Search Engines Love ...