Kirabug: Created page with "Category: Accessibility ''This is totally a stub'' ==On Aria-label attributes== [https://twitter.com/AmeliasBrain/status/1093626722124058625 This thread by Amelia Bellamy..."

2019-02-09T20:08:51Z

Created page with "Category: Accessibility ''This is totally a stub'' ==On Aria-label attributes== [https://twitter.com/AmeliasBrain/status/1093626722124058625 This thread by Amelia Bellamy..."

New page

[[Category: Accessibility]]
''This is totally a stub''

==On Aria-label attributes==
[https://twitter.com/AmeliasBrain/status/1093626722124058625 This thread by Amelia Bellamy-Royds] explains the impact of applying aria-labels to links and buttons.

<blockquote>
FYI to every front-end developer:
An aria-label attribute on a button or link effectively replaces the text content of that element with the new label.

Do not use it when you want to include a description or additional information—use `title`, or even better, real visible text!

You usually only want aria-label on a button or link to provide a text version of an icon:

<nowiki><button aria-label="search"></button></nowiki>

<nowiki><a href="/" aria-label="home"></a></nowiki>

For wider support, use clipped text content.

Again, this only applies on certain element roles, where child content is used as the accessible element name.

<nowiki> For container elements, like <nav> or <section>, aria-label behaves as an extra identifier. For <input> etc, it replaces on-screen labels but not the actual value. </nowiki>
</blockquote>

WAI-ARIA - Revision history

Kirabug: Created page with "Category: Accessibility ''This is totally a stub'' ==On Aria-label attributes== [https://twitter.com/AmeliasBrain/status/1093626722124058625 This thread by Amelia Bellamy..."