{"id":3578,"date":"2017-04-11T08:50:05","date_gmt":"2017-04-11T13:50:05","guid":{"rendered":"https:\/\/www.tpgi.com\/what-is-an-accessible-name\/"},"modified":"2026-02-25T20:50:29","modified_gmt":"2026-02-26T04:50:29","slug":"what-is-an-accessible-name","status":"publish","type":"post","link":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/","title":{"rendered":"What is an accessible name?"},"content":{"rendered":"
<\/div>

Many HTML elements have an accessible name. It can be derived from different sources, and browsers use an algorithm called the Accessible Name and Description Computation<\/a> to figure it out.<\/p>\n

<\/p>\n

The accessible name for a HTML element<\/a> is exposed in the browser’s accessibility tree<\/a>. It is the piece of information used by Assistive Technologies (AT) to identify the element. For example, someone using a speech recognition tool can target the element using its accessible name, or someone using a screen reader will hear the accessible name announced as they moved focus to that element.<\/p>\n

The accessible name for an element can be derived from the element’s content, an attribute, or from an associated element.<\/p>\n

Using the element’s content<\/h2>\n

The content of an <a><\/code> element gives the link its accessible name. The accessible name for the following link is “Chamukos tequila”.<\/p>\n

<a href=\"tequila.html\">Chamukos tequila<\/a><\/code><\/pre>\n
So someone using a speech recognition tool would say something like “Click chamukos tequila link”, and a screen reader would hear something like “Chamukos tequila link” when they move focus to it. Check out this screen reader demo<\/a> to hear how an HTML link sounds.<\/p>\n
Using an attribute<\/h2>\n
The accessible name for an image is derived from the alt<\/code> attribute. The accessible name for the following image is “Chamukos tequila”.<\/p>\n
<img src=\"tequila.png\" alt=\"Chamukos tequila\"><\/code><\/pre>\n
These two sources for an accessible name can be combined. When an image is the only content of a link, the image’s alt<\/code> attribute gives the link its accessible name.<\/p>\n
<a href=\"tequila.html\"><img src=\"tequila.png\" alt=\"Chamukos tequila\"><\/a><\/code><\/pre>\n
When a link contains both an image and some text, the two combine to form the link’s accessible name. The accessible name for the following link is “Chamukos tequila \u00a340”.<\/p>\n
<a href=\"tequila.html\"><img src=\"tequila.png\" alt=\"Chamukos tequila\"> \u00a340<\/a><\/code><\/pre>\n
Using an associated element<\/h2>\n
The accessible name for a form control can be derived from an associated element. The accessible name for the following checkbox is “Chamukos tequila”.<\/p>\n
<input type=\"checkbox\" id=\"tequila\">\r\n<label for=\"tequila\">Chamukos tequila<\/label><\/code><\/pre>\n
The for<\/code> attribute on the <label><\/code> and the id<\/code> attribute on the <input><\/code> share the same value. This creates an association between the two elements that instructs the browser to expose the content of the label as the accessible name for the checkbox.<\/p>\n
Using ARIA<\/h2>\n
The accessible name for an element can be altered using ARIA. The aria-label<\/code> and aria-labelledby<\/code> attributes work in different ways, but the important thing to remember is that ARIA trumps all; the accessible name provided with the native HTML will be overridden by the accessible name provided with ARIA.<\/p>\n
With aria-label<\/code><\/h3>\n
The aria-label<\/code> attribute takes a string as its value. It can be used to provide an alternative accessible name for an element.<\/p>\n
<button aria-label=\"Add Chamukos tequila to cart\">Add to cart<\/button><\/code><\/pre>\n
The accessible name for this button is “Add Chamukos tequila to cart”, not “Add to cart” because the ARIA overrides the HTML.<\/p>\n
\n
This can seem like a good way to provide meaningful accessible names for screen reader users, whilst presenting a shorter label for the button to sighted people. The trouble is that someone using a speech recognition tool will not be able to see the accessible name for the button, only its visible label – which makes it difficult for them to accurately target the button using a voice command.<\/p>\n
If there is only one “Add to cart” button on the page, tools like Dragon Naturally Speaking will correctly target the button because it doesn’t need the complete accessible name to be spoken. But if there are multiple “Add to cart” buttons on the page, then Dragon will assign each one a number, and the person using speech recognition will have to specify which of the “Add to cart” buttons they want.<\/p>\n<\/div>\n
With aria-labelledby<\/code><\/h3>\n
The aria-labelledby<\/code> attribute takes an id<\/code> ref as its value. It’s used when the text you want to use as an accessible name is located elsewhere on the page.<\/p>\n
<input type=\"search\" aria-labelledby=\"this\">\r\n<button id=\"this\">Search<\/button><\/code><\/pre>\n
Choosing accessible names<\/h2>\n
Choose accessible names with care. If there are two things on a page that do exactly the same thing, give them the same accessible name. For example, two links that point to the same destination should have the same accessible name. Conversely, if there are six buttons on a page that all do different things, each one should have an accessible name that is unique and distinct from the rest.<\/p>\n
Thanks to Eric Wright<\/a> for help understanding Dragon behaviour.<\/p>\n
<\/div>\n","protected":false},"excerpt":{"rendered":"
Many HTML elements have an accessible name. It can be derived from different sources, and browsers use an algorithm called the Accessible Name and Description Computation to figure it out.<\/p>\n","protected":false},"author":51,"featured_media":16171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[81],"tags":[],"hub":[413],"class_list":["post-3578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","hub-accessibility-practice"],"acf":[],"yoast_head":"\nWhat is an accessible name? - Vispero<\/title>\n<meta name=\"description\" content=\"An accessible name for a HTML element is the piece of information used by Assistive Technologies (AT) to identify the element.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is an accessible name? - Vispero\" \/>\n<meta property=\"og:description\" content=\"An accessible name for a HTML element is the piece of information used by Assistive Technologies (AT) to identify the element.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/\" \/>\n<meta property=\"og:site_name\" content=\"Vispero\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-11T13:50:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T04:50:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"LeonieWatson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"LeonieWatson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/\"},\"author\":{\"name\":\"LeonieWatson\",\"@id\":\"https:\/\/vispero.com\/#\/schema\/person\/e9fcac21a4c2f11d764b68f3d2c6968e\"},\"headline\":\"What is an accessible name?\",\"datePublished\":\"2017-04-11T13:50:05+00:00\",\"dateModified\":\"2026-02-26T04:50:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/\"},\"wordCount\":689,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\/\/vispero.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/\",\"url\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/\",\"name\":\"What is an accessible name? - Vispero\",\"isPartOf\":{\"@id\":\"https:\/\/vispero.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp\",\"datePublished\":\"2017-04-11T13:50:05+00:00\",\"dateModified\":\"2026-02-26T04:50:29+00:00\",\"description\":\"An accessible name for a HTML element is the piece of information used by Assistive Technologies (AT) to identify the element.\",\"breadcrumb\":{\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#primaryimage\",\"url\":\"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp\",\"contentUrl\":\"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Vispero\",\"item\":\"https:\/\/vispero.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is an accessible name?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vispero.com\/#website\",\"url\":\"https:\/\/vispero.com\/\",\"name\":\"Vispero\",\"description\":\"Empowering Independence\",\"publisher\":{\"@id\":\"https:\/\/vispero.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vispero.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vispero.com\/#organization\",\"name\":\"Vispero\",\"url\":\"https:\/\/vispero.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vispero.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vispero.com\/wp-content\/uploads\/2025\/06\/cropped-Vispero_icon.png\",\"contentUrl\":\"https:\/\/vispero.com\/wp-content\/uploads\/2025\/06\/cropped-Vispero_icon.png\",\"width\":512,\"height\":512,\"caption\":\"Vispero\"},\"image\":{\"@id\":\"https:\/\/vispero.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vispero.com\/#\/schema\/person\/e9fcac21a4c2f11d764b68f3d2c6968e\",\"name\":\"LeonieWatson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/vispero.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/053ff5c359c6f4530658fadce3dbb5d08f450e2fad4fa5f9c6058ef93d28d481?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/053ff5c359c6f4530658fadce3dbb5d08f450e2fad4fa5f9c6058ef93d28d481?s=96&d=mm&r=g\",\"caption\":\"LeonieWatson\"},\"url\":\"https:\/\/vispero.com\/resources\/author\/leoniewatson\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is an accessible name? - Vispero","description":"An accessible name for a HTML element is the piece of information used by Assistive Technologies (AT) to identify the element.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/","og_locale":"en_US","og_type":"article","og_title":"What is an accessible name? - Vispero","og_description":"An accessible name for a HTML element is the piece of information used by Assistive Technologies (AT) to identify the element.","og_url":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/","og_site_name":"Vispero","article_published_time":"2017-04-11T13:50:05+00:00","article_modified_time":"2026-02-26T04:50:29+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp","type":"image\/webp"}],"author":"LeonieWatson","twitter_card":"summary_large_image","twitter_misc":{"Written by":"LeonieWatson","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#article","isPartOf":{"@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/"},"author":{"name":"LeonieWatson","@id":"https:\/\/vispero.com\/#\/schema\/person\/e9fcac21a4c2f11d764b68f3d2c6968e"},"headline":"What is an accessible name?","datePublished":"2017-04-11T13:50:05+00:00","dateModified":"2026-02-26T04:50:29+00:00","mainEntityOfPage":{"@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/"},"wordCount":689,"commentCount":6,"publisher":{"@id":"https:\/\/vispero.com\/#organization"},"image":{"@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#primaryimage"},"thumbnailUrl":"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp","articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/","url":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/","name":"What is an accessible name? - Vispero","isPartOf":{"@id":"https:\/\/vispero.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#primaryimage"},"image":{"@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#primaryimage"},"thumbnailUrl":"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp","datePublished":"2017-04-11T13:50:05+00:00","dateModified":"2026-02-26T04:50:29+00:00","description":"An accessible name for a HTML element is the piece of information used by Assistive Technologies (AT) to identify the element.","breadcrumb":{"@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#primaryimage","url":"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp","contentUrl":"https:\/\/vispero.com\/wp-content\/uploads\/2026\/02\/Vispero_background.webp","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/vispero.com\/resources\/what-is-an-accessible-name\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Vispero","item":"https:\/\/vispero.com\/"},{"@type":"ListItem","position":2,"name":"What is an accessible name?"}]},{"@type":"WebSite","@id":"https:\/\/vispero.com\/#website","url":"https:\/\/vispero.com\/","name":"Vispero","description":"Empowering Independence","publisher":{"@id":"https:\/\/vispero.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vispero.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/vispero.com\/#organization","name":"Vispero","url":"https:\/\/vispero.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vispero.com\/#\/schema\/logo\/image\/","url":"https:\/\/vispero.com\/wp-content\/uploads\/2025\/06\/cropped-Vispero_icon.png","contentUrl":"https:\/\/vispero.com\/wp-content\/uploads\/2025\/06\/cropped-Vispero_icon.png","width":512,"height":512,"caption":"Vispero"},"image":{"@id":"https:\/\/vispero.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vispero.com\/#\/schema\/person\/e9fcac21a4c2f11d764b68f3d2c6968e","name":"LeonieWatson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/vispero.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/053ff5c359c6f4530658fadce3dbb5d08f450e2fad4fa5f9c6058ef93d28d481?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/053ff5c359c6f4530658fadce3dbb5d08f450e2fad4fa5f9c6058ef93d28d481?s=96&d=mm&r=g","caption":"LeonieWatson"},"url":"https:\/\/vispero.com\/resources\/author\/leoniewatson\/"}]}},"_links":{"self":[{"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/posts\/3578","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/comments?post=3578"}],"version-history":[{"count":1,"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/posts\/3578\/revisions"}],"predecessor-version":[{"id":22171,"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/posts\/3578\/revisions\/22171"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/media\/16171"}],"wp:attachment":[{"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/media?parent=3578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/categories?post=3578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/tags?post=3578"},{"taxonomy":"hub","embeddable":true,"href":"https:\/\/vispero.com\/wp-json\/wp\/v2\/hub?post=3578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}