---
title: "Accessible name - Glossary | MDN"
chunk: 1/3
source: "https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name"
category: "reference"
tags: "web, html, css, javascript, documentation"
date_saved: "2026-05-05T05:24:00.161921+00:00"
instance: "kb-cron"
---

  * [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name#content)
  * [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name#search)

[ MDN ](https://developer.mozilla.org/en-US/)
HTML
[HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) 

HTML reference
    
  * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements)
  * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes)
  * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references")

HTML guides
    
  * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images)
  * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet)
  * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides")

Markup languages
    
  * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)
  * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML)
  * [XML](https://developer.mozilla.org/en-US/docs/Web/XML)

CSS
[CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) 

CSS reference
    
  * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties)
  * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors)
  * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules)
  * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references")

CSS guides
    
  * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction)
  * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using)
  * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts)
  * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides")

Layout cookbook
    
  * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts)
  * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element)
  * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook)

JavaScriptJS
[JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 

JS reference
    
  * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects)
  * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
  * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements)
  * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references")

JS guides
    
  * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling)
  * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
  * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects)
  * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides")

Web APIs
[Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) 

Web API reference
    
  * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API)
  * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
  * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API)
  * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API)
  * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
  * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides")

Web API guides
    
  * [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API)
  * [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
  * [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API)
  * [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API)
  * [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers)

All
[All web technology](https://developer.mozilla.org/en-US/docs/Web) 

Technologies
    
  * [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
  * [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP)
  * [URI](https://developer.mozilla.org/en-US/docs/Web/URI)
  * [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions)
  * [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)
  * [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver)
  * [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references")

Topics
    
  * [Media](https://developer.mozilla.org/en-US/docs/Web/Media)
  * [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance)
  * [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy)
  * [Security](https://developer.mozilla.org/en-US/docs/Web/Security)
  * [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)

Learn
[Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) 

Frontend developer course
    
  * [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started)
  * [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core)
  * [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/)
  * [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar)

Learn HTML
    
  * [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content)

Learn CSS
    
  * [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics)
  * [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout)

Learn JavaScript
    
  * [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting)

Tools
Discover our tools 
  * [Playground](https://developer.mozilla.org/en-US/play)
  * [HTTP Observatory](https://developer.mozilla.org/en-US/observatory)

  * [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator)
  * [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator)
  * [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator)
  * [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter)
  * [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer)
  * [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator)

About
Get to know MDN better 
  * [About MDN](https://developer.mozilla.org/en-US/about)
  * [Advertise with us](https://developer.mozilla.org/en-US/advertising)

  * [Community](https://developer.mozilla.org/en-US/community)
  * [MDN on GitHub](https://github.com/mdn)

[Blog](https://developer.mozilla.org/en-US/blog/)
  1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary)
  2. [Accessible name](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name)

# Accessible name
An **accessible name** is the name of a user interface element; it is the text associated with an HTML element that provides users of assistive technology with a label for the element.
Accessible names convey the purpose or intent of the element. This helps users understand what the element is for and how they can interact with it. In general, accessible names for elements should be unique to a page. This helps users distinguish an element from other elements and helps users identify the element they want to interact with.
Depending on the element and the HTML markup, the value of the accessible name may be derived from visible (e.g., the text within [`<figcaption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figcaption)) or invisible (e.g., the `aria-label` attribute set on an element) content, or a combination of both. How an element's accessible name is determined is based on the [accessible name calculation](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/#name_calculation), which is different for different elements.
It is best to use visible text as the accessible name. Many elements, including [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a), [`<td>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/td) and [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button), can get their accessible name from their content. For example, given `<a href="foo.html">Bar</a>`, the accessible name of this hyperlink is "Bar."
Other elements get their accessible name from the content of associated elements. For example, when a [`<fieldset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/fieldset) or [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) element contains a descendant [`<legend>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/legend) or [`<caption>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/caption) element, respectively, the association of the nested element providing an accessible name for the parent is automatic. For form elements like [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/textarea) and [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input), the accessible name comes from the associated [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label) element. The association needs to be explicitly defined by setting the `for` attribute in the `<label>` element to match the form element's `id`. Alternatively, an implicit association is created when the form control is directly nested within the `<label>` element.
For some elements, the accessible name comes from the element's attributes; for example, the `alt` attribute in the case of [`<img>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img). Given `<img src="grape.jpg" alt="banana"/>`, the image's accessible name is "banana."
To create an association between visible content and an element or multiple text nodes and an element, the [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) attribute can be used. If there is no visible text to associate with a UI element needing an accessible name, the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute can be used. Names should not be added to elements marking up inline text, like [`<code>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/code), [`<del>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del), and [`<mark>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/mark).
Many elements, such as sections of textual content, don't need an accessible name. All controls should have an accessible name. All images that convey information and aren't purely presentational do too.
Assistive technologies provide users with the accessibility name property, which includes the accessible name along with the element's role. While many elements don't need an accessible name, it's necessary to provide an accessible name to override or supplement the content of elements with specified [roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles). For example, a [`tabpanel`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tabpanel_role) is a section of content that appears after a user activates the associated element with a [`tab`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role) role. This role can be set on an element with no needed name, like the [`<div>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div) element. The `tab` is the control and must have an accessible name. The `tabpanel` is the child (content section) of the `tab`. Adding `aria-labelledby` to the `tabpanel` is a best practice.
## In this article
  * [See also](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name#see_also)

##  [See also](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name#see_also)
  * [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles)
  * [ARIA attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes)
  * [Accessible Name and Description Computation 1.2 (accname)](https://w3c.github.io/accname/#mapping_additional_nd_description)
  * [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility)
  * [Learn accessibility](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility)
  * [Web accessibility](https://en.wikipedia.org/wiki/Web_accessibility) on Wikipedia
  * [Web Accessibility In Mind](https://webaim.org/)
  * [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
  * [The W3C Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/)
  * [Accessible Rich Internet Applications (WAI-ARIA)](https://w3c.github.io/aria/)
  * Related glossary terms: 
    * [Accessibility](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility)
    * [Accessibility tree](https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree)
    * [Accessible description](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description)
    * [ARIA](https://developer.mozilla.org/en-US/docs/Glossary/ARIA)