search

w3c / html-aam

HTML Accessibility API Mappings - new spec updates should be made in https://github.com/w3c/aria/tree/main/html-aam
https://w3c.github.io/html-aam/
Other
100 stars 27 forks source link

Consider prohibiting author naming certain elements #160

Open joanmarie opened 5 years ago

joanmarie commented 5 years ago

Question: Should div, span, i, b, and the like support aria-label and aria-labelledby? Technically they do. And maybe they should. But I'm leaning towards no. Consider:

<div aria-label="foo">A whole bunch of text goes here.</div>

I would think and hope a screen reader should present "A whole bunch of text goes here." rather than "foo". I suppose one could make the case that a screen reader should present "foo" followed by "A whole bunch of text goes here." But I've not seen any such guidance to that effect. And some discussion in the ARIA Working Group suggests that screen readers are all over the map on this front.

IF all elements should be author-nameable, then I think we need authoring guidance and AT developer guidance to ensure interoperability. IF all elements should not be author-nameable, then I think we need the HTML-AAM's name calculation section should state this.

Related: During an ARIA WG discussion on this matter, the concern was raised that maybe our prohibiting naming of elements now would break legacy content. If memory serves me, one of the maintainers of the HTML-AAM is also a master of querying what is out there in the wild. :smile: If my recollection is correct, having that data would be neat. :smile:

See also: https://github.com/w3c/aria/issues/833

stevefaulkner commented 5 years ago

Question: Should div, span, i, b, and the like support aria-label and aria-labelledby? Technically they do. And maybe they should. But I'm leaning towards no. Consider:

<div aria-label="foo">A whole bunch of text goes here.</div>

@joanmarie have asked @sideshowbarker if he could gather some data.

sideshowbarker commented 5 years ago

Question: Should div, span, i, b, and the like support aria-label and aria-labelledby?

Can you be more specific about which other elements fall under that “and that like”?

As far as HTML, does it basically mean any HTML elements that aren’t defined as labelable?

https://html.spec.whatwg.org/multipage/forms.html#category-label

…in other words, any element that’s not one of the following?

button, input, meter,output, progress, select, textarea

LJWatson commented 5 years ago

At present aria-label, aria-labelledby, and aria-describedby, only work on a subset of elements/elements with certain explicit roles. There is information in the Using ARIA Note and also this [blog post[(https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/).

FWIW I tend to agree with @joanmarie. Hearing an accessible name for something without knowing what that something is, would be confusing to me as a consumer. For example: <span aria-label="Tequila"><i></i></span>

May look like an icon but a screen reader would simply announce "Tequila". No information about whether it's text, an image, a button, or any other thing.

sideshowbarker commented 5 years ago

So I notice that https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/ says:

The aria-label, aria-labelledby, and aria-describedby attributes can be used with… elements that have a landmark role – either implicit (header, footer, main, nav, aside, section, and form) or explicitly set via the role attribute

…but https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby says:

For most assistive technology it's fine to use aria-label or aria-labelledby on the <nav>, and <main> elements but not on <footer>, <section>, <article>, or <header>

So would we want to include <footer>, <section>, <article>, and <header> in the set of elements for which we don’t support aria-label or aria-labelledby?

stevefaulkner commented 5 years ago

So would we want to include <footer>, <section>, <article>, and <header> in the set of elements for which we don’t support aria-label or aria-labelledby?

No as these are implementation (AT bugs), the info is correctly conveyed in the acc tree and it is desirable to provide accessible names for such elements, to disambiguate multiple instances of the same element.

asurkov commented 5 years ago

From browser implementation perspective having lesser checks is a good thing, thus if @aria-label is exposed as accessible name on any accessible object, then it's nice and simple code. Having said that if has no use case and thus considered useless, then it makes sense to say this is en author error, but should the browser attempt to fix it, I'm not sure.

dd8 commented 5 years ago

There are definitely elements where aria-label makes no sense - meta script and style for example.

But are there any use cases for using it as replacement text (ignoring AT support for now) to improve voicing? For example:

<title aria-label='King James the Sixth - Wikipedia'> King James VI - Wikipedia</title>
<span aria-label='King James the Sixth'>King James VI</span>
<option aria-label='A M - before noon'>AM</span>
<option aria-label='P M - afternoon'>PM</span>
Dan503 commented 5 years ago

I was directed here from this comment.

https://github.com/validator/validator/issues/776#issuecomment-491294884

<article> is one of the four "sectioning content" elements: <article>, <aside>, <nav>, <section> https://www.w3.org/TR/html5/dom.html#sectioning-content

These elements are all very similar to one another.

Also see these links:

https://www.w3.org/TR/html5/sections.html#headings-and-sections https://www.w3.org/TR/html5/sections.html#the-article-element

aria-label is one of the key ways of labelling a sectioning element. <article> is a sectioning element. That means no warning should be shown if the author uses aria-label on an <article> element.

scottaohara commented 5 years ago

@Dan503 please see: section and grouping element accessible name computation as this covers what you're asking about.

@stevefaulkner already noted in this thread to @sideshowbarker that article, among other elements should be allowed to have an aria-label and aria-labelledby.

dd8 commented 5 years ago

What should happen for elements with the contenteditable attribute? Seems that AT has supported aria-label on these for a long time: https://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_an_invisible_label#Example_1:_A_quiz_using_divs_set_to_contentEditable

Also looks like you need to allow aria-label on unexpected places like style elements when contenteditable=true. See the second example using <style contenteditable=true> for live CSS editing in the HTML Living Standard: https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable

(BTW the CSS live editing example works in FF, Chrome and Safari)

dd8 commented 5 years ago

Another edge case - the title attribute on link elements specifies a stylesheet name that's used to name a stylesheet set. Should link allow aria-label ? This is displayed in the UI of some browsers - the Page Style menu item on Firefox and some versions of IE.

<link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-title

carmacleod commented 5 years ago

Here's some data for "aria-label[ledby] on div/span with no role" in the wild. Attribution and appreciation to Majestic Million for their list of the top million websites! I only scanned the first 20,000 URLs because it was taking about a half-hour per 1000 sites. I also only kept start tags so that the output would be legible; check out the specific site to see the whole element "in situ".

Glancing through the data below, it looks to me like many of the places where authors put aria-label[ledby] on a div or span with no role are just bugs (forgotten role, unnecessary aria-label, etc). :)

However, I did notice a couple of valid use cases that we need to ensure we don't invalidate. Would love to have others look through the data too, please, to see if there are any other potentially valid use cases.

  1. Glyph icon links such as this example on http://www.toastmasters.org/ are valid, and AT support is good, according to @scottaohara's Test 4: Link containing span with aria-label.

    <a href="/shop/cart" class="cartTotal">
<span class="glyphicon glyphicon-shopping-cart" aria-label="Shopping cart"></span>
</a>

  2. I noticed a number of class names that contained the word "dropdown". Looking at several of these, I see that these dropdowns are in link-based navigation menus, and they are being labelled by their corresponding anchor/button (which has aria-haspopup and aria-expanded). JAWS and VO read the dropdown's label; NVDA does not, but it could. Here's an example from: http://naa.gov.au/

    <a id="informationManagement" class="nav-link" data-target="#" href="/information-management" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Information management <span class="ion-ios-arrow-down"></span>
</a>
<div class="dropdown-menu mega-menu" aria-labelledby="informationManagement">
... dropdown menu containing list of links goes here ...
</div>

Data for aria-label[ledby] on div/span with no role:

Scanned: 20,000 sites
Labelled generics found: 230 (many of which are dups on the same site)

http://rpi.edu
    Labelled generics: 1
    Examples: [<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">]

http://ou.edu
    Labelled generics: 6
    Examples: [<div class="carousel-image" aria-label"Image">, <div class="carousel-image" aria-label"Image">, <div class="carousel-image" aria-label"Image">, <div class="carousel-image" aria-label"Image">, <div class="carousel-image" aria-label"Image">, <div class="carousel-image" aria-label"Image">]

http://ets.org
    Labelled generics: 5
    Examples: [<div class="measurement-educator" aria-labelledby="tab-educator">, <div class="measurement-english" aria-labelledby="tab-english">, <div class="measurement-higher" aria-labelledby="tab-higher">, <div class="measurement-k" aria-labelledby="tab-k">, <div class="measurement-workplace" aria-labelledby="tab-workplace">]

http://alaska.gov
    Labelled generics: 1
    Examples: [<span tabindex="0" class="closebtn" aria-label="Close Button" onclick="this.parentElement.style.display='none';">]

http://ttu.edu
    Labelled generics: 3
    Examples: [<div id="feature-text-slider" class="slider feature-slider" aria-label="List of feature news stories">, <div id="second-slider-text" class="slider slider-fade secondary-slider" aria-label="First set of minor news stories">, <div id="third-slider-text" class="slider slider-fade secondary-slider" aria-label="Last set of minor news stories">]

http://seattle.gov
    Labelled generics: 7
    Examples: [<span class='fas fa-chevron-left' title="Back to" aria-label="Back to icon">, <span class='fas fa-chevron-right' title='Services & Information' aria-label='Services & Information Icon'>, <span class='fas fa-chevron-right' title='Events' aria-label='Events Icon'>, <span class='fas fa-chevron-right' title='Visiting Seattle' aria-label='Visiting Seattle Icon'>, <span class='fas fa-chevron-right' title='About Our Digital Properties' aria-label='About Our Digital Properties Icon'>, <span class='fas fa-chevron-right' title='Content Policies' aria-label='Content Policies Icon'>, <span class="fas fa-times fa-2x" title="Close Icon" aria-label="Close icon">]

http://slu.edu
    Labelled generics: 1
    Examples: [<div class="hero hero--video" style="background-image: url(/img/hero/home.jpg)" aria-labelledby="hero-video">]

http://hollywood.com
    Labelled generics: 3
    Examples: [<div class="dropdown-menu" aria-labelledby="search-button">, <div class="dropdown-menu" aria-labelledby="search-button">, <div class="dropdown-menu" aria-labelledby="search-button">]

http://mta.info
    Labelled generics: 6
    Examples: [<div id="views_slideshow_cycle_div_news_rotator-block_1_1_0" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-1 views-row-first views-row-odd" aria-labelledby='views_slideshow_pager_field_item_bottom_news_rotator-block_1_1_0'>, <div id="views_slideshow_cycle_div_news_rotator-block_1_1_1" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" aria-labelledby='views_slideshow_pager_field_item_bottom_news_rotator-block_1_1_1'>, <div id="views_slideshow_cycle_div_news_rotator-block_1_1_2" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-3 views_slideshow_cycle_hidden views-row-odd" aria-labelledby='views_slideshow_pager_field_item_bottom_news_rotator-block_1_1_2'>, <div id="views_slideshow_cycle_div_news_rotator-block_1_1_3" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-4 views_slideshow_cycle_hidden views-row-even" aria-labelledby='views_slideshow_pager_field_item_bottom_news_rotator-block_1_1_3'>, <div id="views_slideshow_cycle_div_news_rotator-block_1_1_4" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-5 views_slideshow_cycle_hidden views-row-odd" aria-labelledby='views_slideshow_pager_field_item_bottom_news_rotator-block_1_1_4'>, <div id="views_slideshow_cycle_div_news_rotator-block_1_1_5" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-6 views_slideshow_cycle_hidden views-row-last views-row-even" aria-labelledby='views_slideshow_pager_field_item_bottom_news_rotator-block_1_1_5'>]

http://bme.hu
    Labelled generics: 4
    Examples: [<div id="views_slideshow_cycle_div_slideshow-block_0" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-1 views-row-first views-row-odd" aria-labelledby='views_slideshow_pager_field_item_bottom_slideshow-block_0'>, <div id="views_slideshow_cycle_div_slideshow-block_1" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" aria-labelledby='views_slideshow_pager_field_item_bottom_slideshow-block_1'>, <div id="views_slideshow_cycle_div_slideshow-block_2" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-3 views_slideshow_cycle_hidden views-row-odd" aria-labelledby='views_slideshow_pager_field_item_bottom_slideshow-block_2'>, <div id="views_slideshow_cycle_div_slideshow-block_3" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-4 views_slideshow_cycle_hidden views-row-last views-row-even" aria-labelledby='views_slideshow_pager_field_item_bottom_slideshow-block_3'>]

http://gog.cn
    Labelled generics: 1
    Examples: [<div class="jp-title" aria-label="title">]

http://lth.se
    Labelled generics: 5
    Examples: [<div class="dropdown-menu font-size-base" aria-labelledby="dropdown-Utbildning">, <div class="dropdown-menu font-size-base" aria-labelledby="dropdown-Forskning">, <div class="dropdown-menu font-size-base" aria-labelledby="dropdown-Samverkan">, <div class="dropdown-menu font-size-base" aria-labelledby="dropdown-Kontakt">, <div class="dropdown-menu font-size-base" aria-labelledby="dropdown-Om LTH">]

http://toastmasters.org
    Labelled generics: 1
    Examples: [<span class="glyphicon glyphicon-shopping-cart" aria-label="Shopping cart">]

http://aig.com
    Labelled generics: 1
    Examples: [<div class="img-container" aria-labelledby="artdirectedimagetitle8722487">]

http://homestarrunner.com
    Labelled generics: 1
    Examples: [<div class="dropdown-menu" aria-labelledby="dropdown04">]

http://pa.gov.br
    Labelled generics: 1
    Examples: [<div class="jp-title" aria-label="title">]

http://rasmeinews.com
    Labelled generics: 2
    Examples: [<div class="td-drop-down-search" aria-labelledby="td-header-search-button">, <div class="td-drop-down-search" aria-labelledby="td-header-search-button">]

http://ku.ac.ke
    Labelled generics: 1
    Examples: [<div class="dropdown-menu" aria-labelledby="dropdownMenu1">]

http://centralparknyc.org
    Labelled generics: 1
    Examples: [<div class="close bottom-link" data-dismiss="modal" aria-label="Close">]

http://colgate.edu
    Labelled generics: 21
    Examples: [<span class="title red" aria-label="Pinchin Hall">, <span class="title red" aria-label="Burke Hall">, <span class="title red" aria-label="Commencement">, <span class="title red" aria-label="&lt;em>, <span class="title red" aria-label="Student Research">, <span class="title red" aria-label="Off-Campus Study">, <span class="title red" aria-label="Colgate at 200 Years">, <span class="title red" aria-label="Financial Aid">, <span class="title red" aria-label="Clubs &amp; Organizations">, <span class="title blue" aria-label="Diversity &amp; Inclusion">, <span class="title red" aria-label="Pre-Orientation">, <span class="title red" aria-label="Careers &amp; Entrepreneurship">, <span class="title blue" aria-label="Liberal Arts">, <span class="title red" aria-label="Service Learning">, <span class="title red" aria-label="Sustainability">, <span class="title red" aria-label="Welcome to Colgate">, <span class="title blue" aria-label="9:1 Student to Faculty Ratio">, <span class="title red" aria-label="Explore Colgate">, <span class="title red" aria-label="Raiders at the Dance">, <span class="title red" aria-label="All-Class Reunion">, <span class="title red" aria-label="Robert H.N. Ho">]

http://web.archive.org
    Labelled generics: 1
    Examples: [<div              id="navbar_search_options"            class="search-options js-search-options"      aria-expanded="false"      aria-label="Search Options"      data-keep-open-when-changed="false"    >]

http://xinhuanet.com
    Labelled generics: 1
    Examples: [<div class="jp-title title" aria-label="title">]

http://lefigaro.fr
    Labelled generics: 110 (I deleted 106 duplicate tags)
    Examples: [<span class="fig-tools__value" aria-label="Commenté 101 fois">, <span class="fig-profile-tools-item" aria-label="Partagé 23 fois">, ... , <span class="fig-wg-kiosque__arrow fig-wg-kiosque__arrow--left fig-wg-kiosque__arrow--disabled" aria-label="Défiler à gauche">, <span class="fig-wg-kiosque__arrow fig-wg-kiosque__arrow--right" aria-label="Défiler à droite">]

http://uno.edu
    Labelled generics: 4
    Examples: [<div aria-labelledby="block-footercontactinfo-menu" id="block-footercontactinfo" data-block-plugin-id="system_menu_block:footer-contact-info" class="settings-tray-editable mdl-cell mdl-cell--3-col" data-drupal-settingstray="editable">, <div aria-labelledby="block-footerlearnmenu-menu" id="block-footerlearnmenu" data-block-plugin-id="system_menu_block:footer-learn-menu" class="settings-tray-editable mdl-cell mdl-cell--3-col" data-drupal-settingstray="editable">, <div aria-labelledby="block-footerexperiencemenu-menu" id="block-footerexperiencemenu" data-block-plugin-id="system_menu_block:footer-experience-menu" class="settings-tray-editable mdl-cell mdl-cell--3-col" data-drupal-settingstray="editable">, <div aria-labelledby="block-footersocialmenu-menu" id="block-footersocialmenu" data-block-plugin-id="system_menu_block:footer-social-menu" class="settings-tray-editable mdl-cell mdl-cell--3-col" data-drupal-settingstray="editable">]

http://broward.org
    Labelled generics: 3
    Examples: [<div aria-label="Increase Font" id="accessibility-font" class="js-acessibility btn btn-sm p-0 notranslate" style="font-size:13px;box-shadow:0 0 0 0">, <div aria-label="Add Contrast" id="accessibility-contrast" class="js-acessibility btn btn-sm p-0 notranslate " style="font-size:13px; box-shadow:0 0 0 0">, <div aria-label="Translate Text" id="translate" class="btn btn-sm p-0 notranslate" type="button" style="font-size:13px;box-shadow:0 0 0 0">]

http://funtrivia.com
    Labelled generics: 3
    Examples: [<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">, <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">, <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">]

http://vfl.ru
    Labelled generics: 2
    Examples: [<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Изменить название">, <span class="qq-upload-cancel-selector qq-upload-cancel" aria-label="Удалить">]

http://websolutionsdone.com
    Labelled generics: 2
    Examples: [<div class="td-drop-down-search" aria-labelledby="td-header-search-button">, <div class="td-drop-down-search" aria-labelledby="td-header-search-button">]

http://santepubliquefrance.fr
    Labelled generics: 2
    Examples: [<span class="ico ico-calendar-light" aria-label="Event date">, <span class="ico ico-pin-light" aria-label="Event place">]

http://bonex.it
    Labelled generics: 3
    Examples: [<div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordionExample">, <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">, <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">]

http://ufc.br
    Labelled generics: 1
    Examples: [<div class="jp-title" aria-label="title">]

http://fedpress.ru
    Labelled generics: 1
    Examples: [<div aria-labelledby="weather-dropdown-label" class="dropdown-menu weather-dropdown__menu">]

http://dublincore.org
    Labelled generics: 4
    Examples: [<div class="dropdown-menu" aria-labelledby="navbarDropdown">, <div class="dropdown-menu" aria-labelledby="navbarDropdown">, <div class="dropdown-menu" aria-labelledby="navbarDropdown">, <div class="dropdown-menu" aria-labelledby="navbarDropdown">]

http://boatus.com
    Labelled generics: 2
    Examples: [<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">, <div class="dropdown-menu" aria-labelledby="dropdownMenuButtonMobile">]

http://forbeschina.com
    Labelled generics: 3
    Examples: [<span class="dropdown-menu" aria-labelledby="WXQR">, <span class="dropdown-menu" aria-labelledby="WXQRR">, <div class="close" aria-label="Close">]

http://naa.gov.au
    Labelled generics: 4
    Examples: [<div class="dropdown-menu mega-menu" aria-labelledby="collection">, <div class="dropdown-menu mega-menu" aria-labelledby="informationManagement">, <div class="dropdown-menu mega-menu" aria-labelledby="engage">, <div class="dropdown-menu mega-menu" aria-labelledby="collection">]

http://sfbg.com
    Labelled generics: 2
    Examples: [<div class="td-drop-down-search" aria-labelledby="td-header-search-button">, <div class="td-drop-down-search" aria-labelledby="td-header-search-button">]

http://ncagr.gov
    Labelled generics: 2
    Examples: [<div aria-label="First level" class="">, <div aria-label="Second level">]

http://daveandbusters.com
    Labelled generics: 6
    Examples: [<div type="button" tabindex="0" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-label="Locations submenu" aria-haspopup="true" aria-expanded="false">, <div type="button" tabindex="0" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-label="Eat &amp; Drink submenu" aria-haspopup="true" aria-expanded="false">, <div type="button" tabindex="0" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-label="Play Games submenu" aria-haspopup="true" aria-expanded="false">, <div type="button" tabindex="0" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-label="Watch Sports submenu" aria-haspopup="true" aria-expanded="false">, <div type="button" tabindex="0" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-label="Parties &amp; Events submenu" aria-haspopup="true" aria-expanded="false">, <div type="button" tabindex="0" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-label="Rewards submenu" aria-haspopup="true" aria-expanded="false">]

http://iheima.com
    Labelled generics: 1
    Examples: [<div class="close" data-dismiss="modal" aria-label="Close">]
scottaohara commented 5 years ago

Thanks for this @carmacleod

Per the ARIA WG meeting yesterday, it seems consensus has moved to div, span and the new generic role should prohibit use of aria-label and labelledby. While it does work well in certain instances, it's erratic in others. And even in the instances where it does work correctly, there are better ways those could be marked up.

e.g.

<button>
  <span aria-label="foo"></span>
</button>

should just be

<button aria-label="foo"></button>

still some things to further consider in this thread though... need to confer with @stevefaulkner on how we want to move forward.

scottaohara commented 5 years ago

@dd8 presently <link href> doesn't accept roles or global aria-* attributes, nor does adding an aria-label to one appear to do anything in Firefox.

dd8 commented 5 years ago

@scottaohara Yep - just flagged it up as an edge case. It's unlike everything else ARIA applies to because it's exposed through the browser UI and not through the document - although it's arguably like the <title> element in that respect.

scottaohara commented 5 years ago

though the title element also shouldn't have ARIA applied to it :)

dd8 commented 5 years ago

<body> is a sectioning element https://html.spec.whatwg.org/multipage/sections.html#sections

So it has a name calculation in: https://www.w3.org/TR/html-aam-1.0/#section-elements-and-grouping-content-elements-not-listed-elsewhere

and is allowed by: https://w3c.github.io/html-aria/#body

Does this make sense, and at what point would the label be voiced?

LJWatson commented 5 years ago

I've just run a couple of quick tests using:

And:

...
<h1 id="title">Lorem ipsum</h1>
...
</body>

I can't get NVDA, Jaws, or Narrator, to report the accessible name of the body element, using Chrome, Edge beta, or Firefox.

This was a very quick test though.

dd8 commented 5 years ago

On macOS VoiceOver/Safari 12 the aria-label is read, but the voicing seems confusing:

<body class="cdo-cdc" aria-label="This is the aria label">
This is the first sentence.

With the aria-label on body this is voiced as :

In, this is the first sentence, this is the aria label, group, in, this is the first sentence, this is the aria label, group.

Without an aria-label on body this is voiced as :

In text, this is the first sentence"

scottaohara commented 5 years ago

body is definitely in the prohibited if not "not allowed' list...

Dan503 commented 5 years ago

…in other words, any element that’s not one of the following?

button, input, meter,output, progress, select, textarea https://github.com/w3c/html-aam/issues/160#issuecomment-469588610

<a> elements really need to be added to that list of allowed elements for the same reason why <button> elements are on that list.

<a href="/" aria-label="home">
    <i class="icon icon-home"></i>
</a>
scottaohara commented 5 years ago

no one is disputing that @Dan503 ?

There's already a naming algorithm for anchor elements.

Dan503 commented 5 years ago

That comment didn't include <a> in the list of allowed elements and no one seemed to have brought it up yet so I just wanted to make sure it was clear that aria-label needs to work on <a> elements.

scottaohara commented 5 years ago

a is not categorized as a labelable element which is why it wasn't in the list.

That is different than being allowed to be given an accessible name via aria-label or aria-labelledby.

JAWS-test commented 5 years ago

I would think and hope a screen reader should present "A whole bunch of text goes here." rather than "foo".

It should be noted that the screen reader outputs the label differently depending on the navigation method. I.e. with many elements, which are labelled with aria-label, the text content is nevertheless output when reading with the arrow keys:

<nav aria-label=test>content</nav>

The label in the aria-label is used, however, e.g., to give the element in the element overview a label, in quick navigation or in tab navigation or to output the beginning and the end of a grouping with a label. This behavior may be meaningless for some elements like i, because there is no element overview and quick navigation for them. For div, p and span, however, this exists and therefore an explicit label would be very useful if the text content is still output during linear reading.

This already works very well with JAWS, for example with the following test file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>div/span with aria-label</title>
    </head>
    <body>
        <div aria-label=1 tabindex=0>test1</div>
        <div aria-label=2 tabindex=0>test2</div>
        <span aria-label=3 tabindex=0>test3</span>
        <span aria-label=4 tabindex=0>test4</span>
    </body> 
</html>
scottaohara commented 5 years ago

As Joanie noted "screen readers are all over the map on this front"

While it's true that JAWS may handle such examples in some cases, it's not a reliable way to expose information, and also not consistent with how other screen readers can handle similar patterns, making it problematic and something that should be advised against.

JAWS-test commented 5 years ago

@scottaohara

It seems to me that it is not defined which HTML elements and ARIA roles are transparent despite explicit labeling (e.g. with aria-label), i.e. their text content is output anyway. For some elements this is very clear, like nav, for others obviously the opposite applies like button. But what about div and many others? I.e. I think the first step should be to define that (https://github.com/w3c/accname/issues/59). And as a second step it could be defined which HTML elements and ARIA roles can't be labeled by the author (like possibly i or span).

If my assumption is correct, I can make suggestions on which elements should be transparent.

JAWS is just an example, because it seems to me that it is some of the rare cases where screenreaders are better than the specification. If the screenreader were to label all elements equally according to AccName, most web pages would not work.

scottaohara commented 5 years ago

@JAWS-test noted, and this sort of information will be incorporated into the current work that's being done to address this issue already.

As per my comment here

asurkov commented 4 years ago

Here's scottaohara comment from https://github.com/w3c/html-aam/issues/282#issuecomment-591644760, which I like how it summarizes the issue:

"A bit of clarity there though. The naming prohibited in ARIA 1.2 is not a MUST, as naming such elements/roles is done in the wild now and it was not ARIA's intent to completely remove any naming mechanisms for those elements, but rather to inform authors that the elements shouldn't receive a name due to lack of consistently in it being exposed / desire that these elements really shoudn't be named."

So if it reflects accurately the consensus on the issue, then the next thing left is to figure out which elements are affected and then how to inform authors that naming of such elements should be avoided. Does it sound about right?

jcsteh commented 4 years ago

FWIW, I wrote a blog post several years ago which explains some of the complexity here and why screen readers ignore aria-label/ledby in cases like these. I think these proposed changes would address most of this, but I thought it worth providing the additional reference.

sideshowbarker commented 4 years ago

…then the next thing left is to figure out which elements are affected

Yes, it would be great if the group could decide that and then update the ARIA spec with some normative document-conformance requirements.

and then how to inform authors that naming of such elements should be avoided

To help with that, the https://validator.w3.org/nu/ HTML checker has for quite a while now been emitting warnings for cases where aria-label is specified for elements that it shouldn’t be. To determine which cases to emit that warning for, I’ve been following the guidance in the documents at https://www.w3.org/TR/using-aria/#practical-support-aria-label-aria-labelledby-and-aria-describedby and https://developer.paciellogroup.com/blog/2017/07/short-note-on-aria-label-aria-labelledby-and-aria-describedby/.

But neither of those documents is normative.

So what would be great is if we had actual authoritative, normative document-conformance requirements for this. And to be clear I don’t mean that the requirements need to be “must” requirements; they can be “should not” requirements and still be normative.

oliviertassinari commented 3 years ago

In Material-UI, we use this pattern for the tooltip implementation:

<span aria-label="Foo is commonly used with bar">Foo</span>

It seems that there are not yet any official guidelines https://github.com/w3c/aria-practices/issues/128. cc @eps1lon.

scottaohara commented 3 years ago

@oliviertassinari please see role=generic in the ARIA 1.2 specification which recently entered candidate recommendation.

div and span would be considered role=generic and naming them, without also supplying a role that allows for naming, is prohibited.