Semantically correct html for react accordion componentShould I make HTML Anchors with 'name' or 'id'?HTML 5: Is it <br>, <br/>, or <br />?HTML5 best practices; section/header/aside/article elementsHTML5 and ARIA Semantics: DHTML Sub NavigationHow to create a user-impaired accessible website: surfing without a mouse?Is there a Standardized method of Form Accessibility and Semantics?What is the best practice semantic and accessible element for a tag in a list of tags with expanding information?Accessible Bootstrap Accordion inside DropdownShould ARIA labels provide context?Semantic HTML best practice for a screen reader
How to tell a professor the answer to something he doesn't know?
What is the meaning of "shop-wise" in "… and talk turned shop-wise"?
What does "drop" mean in this context?
Is it plausible that an interrupted Windows update can cause the motherboard to fail?
What are the consequences for downstream actors of redistributing a work under a wider CC license than the copyright holder authorized?
Drawing Super Mario Bros.....in LaTeX
Why is CMYK & PNG not possible?
Novel set in the future, children cannot change the class they are born into, one class is made uneducated by associating books with pain
Why is lying to Congress a crime?
Can this string operation to split on punctuation be better?
How do you translate "Don't Fear the Reaper" into Latin?
Giving a character trauma but not "diagnosing" her?
How much income am I getting by renting my house?
bash - sum numbers in a variable
Find command with regular expressions
Is data science mathematically interesting?
"Dear Stack Exchange, I am very disappointed in you" - How to construct a strong opening line in a letter?
What is a light-year, really?
The translation of 重ねていた
An employee has low self-confidence, and is performing poorly. How can I help?
Is self-defense mutually exclusive of murder?
How to use an equalizer?
Is it possible to do a low carb diet for a month in Sicily?
How could "aggressor" pilots fly foreign aircraft without speaking the language?
Semantically correct html for react accordion component
Should I make HTML Anchors with 'name' or 'id'?HTML 5: Is it <br>, <br/>, or <br />?HTML5 best practices; section/header/aside/article elementsHTML5 and ARIA Semantics: DHTML Sub NavigationHow to create a user-impaired accessible website: surfing without a mouse?Is there a Standardized method of Form Accessibility and Semantics?What is the best practice semantic and accessible element for a tag in a list of tags with expanding information?Accessible Bootstrap Accordion inside DropdownShould ARIA labels provide context?Semantic HTML best practice for a screen reader
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;
I currently have a functional react accordion component that has the following semantics:
<AccordionWrapper(div)>
<AccordionTab(div)>
<AccordionHeader(div)></AccordionHeader(/div)>
<AccordionContent(div)></AccordionContent(/div)>
<AccordionTab(/div)>
</AccordionWrapper(/div)>
I have read a few articles suggesting that it is best practice to use a button html element for the accordion header. I have read this gitHub post. This post also link to a example by which shows a button being used.
Another example I found was from accessible-accordion-pattern it also shows the use of a button and div approach. What justification is there for using a button over a div for an accordion container?
Another article I found was from Carnegie Museums of Pittsburgh and their accessibility. The example also shows a use of a button for their accordion header. This also leads me onto another question. In their example they use ul and li html tag. Is this the correct approach? I haven't managed to find another example which looks like this.
I'm currently trying to increase accessibility for my accordion component but unsure on the semantics. Also below I have added the aria tags I am using. Is the below sufficient or should I be using any additional aria tags?
<AccordionWrapper>
<AccordionTab role='tab'>
<AccordionHeader aria-expanded=... tabIndex=...>
heading name here
</AccordionHeader>
<AccordionContent aria-hidden=...>
Any content I choose here
</AccordionContent>
<AccordionTab>
</AccordionWrapper>
How does my semantics I am using above stand for my goal to increase my accessibility, should I be using button for accordion header and also incorporate ul and li or is it best practice doing something completely different? Any simple examples displayed like above would be greatly appreciated.
html5 accessibility wai-aria
asked Mar 28 at 20:56
CorbukCorbuk
4242 silver badges10 bronze badges
add a comment
|
I currently have a functional react accordion component that has the following semantics:
<AccordionWrapper(div)>
<AccordionTab(div)>
<AccordionHeader(div)></AccordionHeader(/div)>
<AccordionContent(div)></AccordionContent(/div)>
<AccordionTab(/div)>
</AccordionWrapper(/div)>
I have read a few articles suggesting that it is best practice to use a button html element for the accordion header. I have read this gitHub post. This post also link to a example by which shows a button being used.
Another example I found was from accessible-accordion-pattern it also shows the use of a button and div approach. What justification is there for using a button over a div for an accordion container?
Another article I found was from Carnegie Museums of Pittsburgh and their accessibility. The example also shows a use of a button for their accordion header. This also leads me onto another question. In their example they use ul and li html tag. Is this the correct approach? I haven't managed to find another example which looks like this.
I'm currently trying to increase accessibility for my accordion component but unsure on the semantics. Also below I have added the aria tags I am using. Is the below sufficient or should I be using any additional aria tags?
<AccordionWrapper>
<AccordionTab role='tab'>
<AccordionHeader aria-expanded=... tabIndex=...>
heading name here
</AccordionHeader>
<AccordionContent aria-hidden=...>
Any content I choose here
</AccordionContent>
<AccordionTab>
</AccordionWrapper>
How does my semantics I am using above stand for my goal to increase my accessibility, should I be using button for accordion header and also incorporate ul and li or is it best practice doing something completely different? Any simple examples displayed like above would be greatly appreciated.
html5 accessibility wai-aria
asked Mar 28 at 20:56
CorbukCorbuk
4242 silver badges10 bronze badges
add a comment
|
I currently have a functional react accordion component that has the following semantics:
<AccordionWrapper(div)>
<AccordionTab(div)>
<AccordionHeader(div)></AccordionHeader(/div)>
<AccordionContent(div)></AccordionContent(/div)>
<AccordionTab(/div)>
</AccordionWrapper(/div)>
I have read a few articles suggesting that it is best practice to use a button html element for the accordion header. I have read this gitHub post. This post also link to a example by which shows a button being used.
Another example I found was from accessible-accordion-pattern it also shows the use of a button and div approach. What justification is there for using a button over a div for an accordion container?
Another article I found was from Carnegie Museums of Pittsburgh and their accessibility. The example also shows a use of a button for their accordion header. This also leads me onto another question. In their example they use ul and li html tag. Is this the correct approach? I haven't managed to find another example which looks like this.
I'm currently trying to increase accessibility for my accordion component but unsure on the semantics. Also below I have added the aria tags I am using. Is the below sufficient or should I be using any additional aria tags?
<AccordionWrapper>
<AccordionTab role='tab'>
<AccordionHeader aria-expanded=... tabIndex=...>
heading name here
</AccordionHeader>
<AccordionContent aria-hidden=...>
Any content I choose here
</AccordionContent>
<AccordionTab>
</AccordionWrapper>
How does my semantics I am using above stand for my goal to increase my accessibility, should I be using button for accordion header and also incorporate ul and li or is it best practice doing something completely different? Any simple examples displayed like above would be greatly appreciated.
html5 accessibility wai-aria
asked Mar 28 at 20:56
CorbukCorbuk
4242 silver badges10 bronze badges
I currently have a functional react accordion component that has the following semantics:
<AccordionWrapper(div)>
<AccordionTab(div)>
<AccordionHeader(div)></AccordionHeader(/div)>
<AccordionContent(div)></AccordionContent(/div)>
<AccordionTab(/div)>
</AccordionWrapper(/div)>
I have read a few articles suggesting that it is best practice to use a button html element for the accordion header. I have read this gitHub post. This post also link to a example by which shows a button being used.
Another example I found was from accessible-accordion-pattern it also shows the use of a button and div approach. What justification is there for using a button over a div for an accordion container?
Another article I found was from Carnegie Museums of Pittsburgh and their accessibility. The example also shows a use of a button for their accordion header. This also leads me onto another question. In their example they use ul and li html tag. Is this the correct approach? I haven't managed to find another example which looks like this.
I'm currently trying to increase accessibility for my accordion component but unsure on the semantics. Also below I have added the aria tags I am using. Is the below sufficient or should I be using any additional aria tags?
<AccordionWrapper>
<AccordionTab role='tab'>
<AccordionHeader aria-expanded=... tabIndex=...>
heading name here
</AccordionHeader>
<AccordionContent aria-hidden=...>
Any content I choose here
</AccordionContent>
<AccordionTab>
</AccordionWrapper>
How does my semantics I am using above stand for my goal to increase my accessibility, should I be using button for accordion header and also incorporate ul and li or is it best practice doing something completely different? Any simple examples displayed like above would be greatly appreciated.
html5 accessibility wai-aria
html5 accessibility wai-aria
asked Mar 28 at 20:56
CorbukCorbuk
4242 silver badges10 bronze badges
asked Mar 28 at 20:56
CorbukCorbuk
4242 silver badges10 bronze badges
asked Mar 28 at 20:56
CorbukCorbuk
4242 silver badges10 bronze badges
asked Mar 28 at 20:56
CorbukCorbuk
4242 silver badges10 bronze badges
asked Mar 28 at 20:56
CorbukCorbuk
4242 silver badges10 bronze badges
4242 silver badges10 bronze badges
add a comment
|
add a comment
|
1 Answer
1
active
oldest
votes
I would recommend going to the source and use the accordion pattern on the WAI-ARIA Authoring Practices 1.1 page.
It sounds like all the other sites you referenced are using the same pattern on the aformentioned W3C page, which is great. Consistency across applications is the purpose of having the pattern.
You shouldn't be useing role="tab" on an accordion. That's for the Tabs pattern.
answered Mar 29 at 5:07
slugoliciousslugolicious
7,1281 gold badge14 silver badges23 bronze badges
add a comment
|
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55406731%2fsemantically-correct-html-for-react-accordion-component%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I would recommend going to the source and use the accordion pattern on the WAI-ARIA Authoring Practices 1.1 page.
It sounds like all the other sites you referenced are using the same pattern on the aformentioned W3C page, which is great. Consistency across applications is the purpose of having the pattern.
You shouldn't be useing role="tab" on an accordion. That's for the Tabs pattern.
answered Mar 29 at 5:07
slugoliciousslugolicious
7,1281 gold badge14 silver badges23 bronze badges
add a comment
|
I would recommend going to the source and use the accordion pattern on the WAI-ARIA Authoring Practices 1.1 page.
It sounds like all the other sites you referenced are using the same pattern on the aformentioned W3C page, which is great. Consistency across applications is the purpose of having the pattern.
You shouldn't be useing role="tab" on an accordion. That's for the Tabs pattern.
answered Mar 29 at 5:07
slugoliciousslugolicious
7,1281 gold badge14 silver badges23 bronze badges
add a comment
|
I would recommend going to the source and use the accordion pattern on the WAI-ARIA Authoring Practices 1.1 page.
It sounds like all the other sites you referenced are using the same pattern on the aformentioned W3C page, which is great. Consistency across applications is the purpose of having the pattern.
You shouldn't be useing role="tab" on an accordion. That's for the Tabs pattern.
answered Mar 29 at 5:07
slugoliciousslugolicious
7,1281 gold badge14 silver badges23 bronze badges
I would recommend going to the source and use the accordion pattern on the WAI-ARIA Authoring Practices 1.1 page.
It sounds like all the other sites you referenced are using the same pattern on the aformentioned W3C page, which is great. Consistency across applications is the purpose of having the pattern.
You shouldn't be useing role="tab" on an accordion. That's for the Tabs pattern.
answered Mar 29 at 5:07
slugoliciousslugolicious
7,1281 gold badge14 silver badges23 bronze badges
answered Mar 29 at 5:07
slugoliciousslugolicious
7,1281 gold badge14 silver badges23 bronze badges
answered Mar 29 at 5:07
slugoliciousslugolicious
7,1281 gold badge14 silver badges23 bronze badges
answered Mar 29 at 5:07
slugoliciousslugolicious
7,1281 gold badge14 silver badges23 bronze badges
7,1281 gold badge14 silver badges23 bronze badges
add a comment
|
add a comment
|
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55406731%2fsemantically-correct-html-for-react-accordion-component%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
