35

I am currently making a navbar and came accross the aria-expanded html attribute. I know of course that the element is used to let an element either expand or collapse. I could find very little information with regard to this and the W3C docs aren't that clear IMO.

Question

How does this attribute work exactly?

Willem van der Veen
  • 33,665
  • 16
  • 190
  • 155
  • 2
    The attribute doesn't change anything in regards to the visual representation of an element: _"When authors use collapsible content, for example, to hide navigation menus or lists of content, the triggering link or button **should indicate to screen reader users** whether the collapsable content below is in the expanded or in the collapsed state. **The aria-expanded attribute is used for this purpose**."_ – Andreas Feb 03 '18 at 17:10
  • 1
    "I know of course that the element is used to let an element either expand or collapse" Not quite. It's used to inform screenreaders whether the element is expanded or not (and incidentally that it can be expanded/collapsed, which might otherwise not be discoverable by blind users.) ARIA attributes don't *do* anything to the document, they're informational cues about the document state. – Daniel Beck Feb 03 '18 at 17:11
  • 1
    @Andreas So this means that you need to manage the value of the aria-expanded manually / "programmatically"? – Jnr Feb 20 '19 at 17:01

5 Answers5

33

The aria-expanded attribute is simply a flag for the user agent. It

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

...where that indication is for the element's contents, or if aria-controls is also specified, for the target element.

You set its value to indicate what you've done to the page (e.g., you've expanded or contracted a section). It doesn't have any particular behavior associated with it, it's for letting the user agent know what's going on so it can interpret that for its audience (who may be vision-impaired and need some other indication that a section is/isn't expanded).

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
13

ARIA attributes are related to accessibility. In this particular case, it's to let users with assistive technology (e.g. screen readers) know whether an element is expanded or not. It does not have any native effect on the styling of the element, but you can target that with CSS attribute selectors: [aria-expanded="true"]. You can toggle the value with JavaScript as needed.

chriskirknielsen
  • 2,839
  • 2
  • 14
  • 24
3

As mentioned here:

WAI-ARIA is a spec defining support for accessible web apps. It defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantics of the various elements to assistive technologies like screen readers.

WAI stands for: Web Accessibility Initiative

ARIA stands for: Accessible Rich Internet Applications

Hope it helps

kjones
  • 1,339
  • 1
  • 13
  • 28
dstrants
  • 7,423
  • 2
  • 19
  • 27
3

Aria attributes in general are used to make web applications accessible to people with disabilities. They are used primarily by screen readers to determine how to treat html elements.

The aria-expanded attribute provides information about whether an element is in an expanded or collapsed state.

For example, if you have a collapsible element which contains a text, then a screen reader would know that the text is not currently displayed on the screen when the aria-expanded attribute is set to true.

dybzon
  • 1,236
  • 2
  • 15
  • 21
0

It depends on whether your anchor element or any other element is active, Just like dropdown from bootstrap then

which color you wants to apply on the parent while it is on clicked state!

Sumit
  • 16
  • 3
  • 1
    I think this is actually an attempt to answer. But for making it easier to understand, some rephrasing would be helpful. I recommend more numerous and shorter sentences. A line break or two might also help. Maybe sell the exclamation marks and invest in some more silent punctuation. – Yunnosch Nov 29 '19 at 09:22
  • is that okay or should I change the flow – Sumit Nov 29 '19 at 09:36
  • I appreciate your effort. But for me (just my opinion) clarity and readability have not improved. Apart from that, if you quote (i.e. use the quoting format) then you probably want to attribute it to the original author. Maybe that author had a good reason for using an exclamation mark, but I do not see it here. – Yunnosch Nov 29 '19 at 09:47
  • As an example for phrasing in more and shorter sentences and formatting (though the technical content might be completly wrong; which would illustrate what I mean by "unclear"): The behaviour is different depending on which element is active. When your anchor element happens to be active it behaves ... . But if any other element is active then it behaves ... . Compare it to the behaviour when you use the dropdown from bootstrap. As somebody else (authors name) described it: "which color ...". – Yunnosch Nov 29 '19 at 09:52
  • I do not really know what you mean by "flow". But at a guess - yes, please change it. – Yunnosch Nov 29 '19 at 09:54