search

w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.2k stars 334 forks source link

Review FAQ disclosure example #265

Closed mcking65 closed 7 years ago

mcking65 commented 7 years ago

The example of using a disclosure for answers in a FAQ is ready for review.

Requested reviews

mcking65 commented 7 years ago

Seems to me it would be better if we preserve and expose the definition list semantics by putting the button role on a span inside of the dt element instead of having role button on the dt element. If we don't do this, then we should have role presentation on the dl element.

annabbott commented 7 years ago

Looks good.

jnurthen commented 7 years ago

The dl, dd and dt are troubling me. I'm not sure we need both the Definition list semantics AND the hide/show with the aria-controls relationship. Indeed - the DT without a DD (when it is hidden) bothers me as it implies a relationship which is not present in the page at that time. I think this warrants further discussion in the meeting on monday.

mcking65 commented 7 years ago

Maybe the content that is controlled by the disclosure (the answer to the question) should be in a div inside the dd so that the dd is always present. Both for structure and fall back, I kind of like the dl semantics.

jongund commented 7 years ago

Created a pull request to address the use of entities for displaying state and changed FAQ example to use DIV elements instead of DL/DT/DD elements

mcking65 commented 7 years ago

@jongund, I thought the outcome of the meeting discussion was to keep the dl since this is a list of questions. To do this, we put the question button inside of the dt and the element controled by that button inside of the dd.

I included these remarks in my review of PR #282.

In the PR, everything is a div, which gives 0 semantic structure except for the intervening button elements.

jongund commented 7 years ago

Matt,

OK. It wasn’t clear to me from the issue discussion what the group decided, but I can add it back in and use the button element and make a new pull request.

Jon

From: Matt King notifications@github.com<mailto:notifications@github.com> Reply-To: w3c/aria-practices reply@reply.github.com<mailto:reply@reply.github.com> Date: Tuesday, February 14, 2017 at 2:15 AM To: w3c/aria-practices aria-practices@noreply.github.com<mailto:aria-practices@noreply.github.com> Cc: Jon Gunderson jongund@illinois.edu<mailto:jongund@illinois.edu>, Mention mention@noreply.github.com<mailto:mention@noreply.github.com> Subject: Re: [w3c/aria-practices] Review FAQ disclosure example (#265)

@jongundhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_jongund&d=DwMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=ITdzvSoQ5TlYmSRF6WVxS40rs8tMEb2KCddyBxUYUYQ&s=b6rTsCflc8aFOodlHM6gftkmKs8piN35F7QX3rjtxOg&e=, I thought the outcome of the meeting discussion was to keep the dl since this is a list of questions. To do this, we put the question button inside of the dt and the element controled by that button inside of the dd.

I included these remarks in my review of PR #282https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_pull_282&d=DwMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=ITdzvSoQ5TlYmSRF6WVxS40rs8tMEb2KCddyBxUYUYQ&s=8BqXCEa8eaP7QAVJaubUM2QaS74dJ2G4GlPAjbG8Tbw&e=.

In the PR, everything is a div, which gives 0 semantic structure except for the intervening button elements.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_issues_265-23issuecomment-2D279636628&d=DwMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=ITdzvSoQ5TlYmSRF6WVxS40rs8tMEb2KCddyBxUYUYQ&s=vf9kn_Tai1QFV_B0_490WJ-jlZbCeWVwTh_jTAIO8dY&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ABcE7GCqeg-2DD3ZZZXNyXIfnCxkuJN1uoks5rcWKQgaJpZM4LyFNL&d=DwMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=ITdzvSoQ5TlYmSRF6WVxS40rs8tMEb2KCddyBxUYUYQ&s=uDsKqkfFX7IeaEY5hEZQilKsNrawpMuCJ7Ut6TZML7A&e=.

jongund commented 7 years ago

Matt,

I have created a new pull request:

  1. Restored the use of DL/DT/DD in FAQ example and use button element for toggling each FAQ
  2. Updated long description to use figure caption and changed the SPAN to a button element, updated the labeling of the button element, not sure about suggested changes to the ALT text for the image. Maybe discuss on call.

Jon

From: Jon Gunderson jongund@illinois.edu<mailto:jongund@illinois.edu> Date: Tuesday, February 14, 2017 at 8:32 AM To: w3c/aria-practices reply@reply.github.com<mailto:reply@reply.github.com>, w3c/aria-practices aria-practices@noreply.github.com<mailto:aria-practices@noreply.github.com> Cc: Mention mention@noreply.github.com<mailto:mention@noreply.github.com> Subject: Re: [w3c/aria-practices] Review FAQ disclosure example (#265)

Matt,

OK. It wasn’t clear to me from the issue discussion what the group decided, but I can add it back in and use the button element and make a new pull request.

Jon

From: Matt King notifications@github.com<mailto:notifications@github.com> Reply-To: w3c/aria-practices reply@reply.github.com<mailto:reply@reply.github.com> Date: Tuesday, February 14, 2017 at 2:15 AM To: w3c/aria-practices aria-practices@noreply.github.com<mailto:aria-practices@noreply.github.com> Cc: Jon Gunderson jongund@illinois.edu<mailto:jongund@illinois.edu>, Mention mention@noreply.github.com<mailto:mention@noreply.github.com> Subject: Re: [w3c/aria-practices] Review FAQ disclosure example (#265)

@jongundhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_jongund&d=DwMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=ITdzvSoQ5TlYmSRF6WVxS40rs8tMEb2KCddyBxUYUYQ&s=b6rTsCflc8aFOodlHM6gftkmKs8piN35F7QX3rjtxOg&e=, I thought the outcome of the meeting discussion was to keep the dl since this is a list of questions. To do this, we put the question button inside of the dt and the element controled by that button inside of the dd.

I included these remarks in my review of PR #282https://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_pull_282&d=DwMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=ITdzvSoQ5TlYmSRF6WVxS40rs8tMEb2KCddyBxUYUYQ&s=8BqXCEa8eaP7QAVJaubUM2QaS74dJ2G4GlPAjbG8Tbw&e=.

In the PR, everything is a div, which gives 0 semantic structure except for the intervening button elements.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_w3c_aria-2Dpractices_issues_265-23issuecomment-2D279636628&d=DwMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=ITdzvSoQ5TlYmSRF6WVxS40rs8tMEb2KCddyBxUYUYQ&s=vf9kn_Tai1QFV_B0_490WJ-jlZbCeWVwTh_jTAIO8dY&e=, or mute the threadhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_notifications_unsubscribe-2Dauth_ABcE7GCqeg-2DD3ZZZXNyXIfnCxkuJN1uoks5rcWKQgaJpZM4LyFNL&d=DwMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=REZD8fc2AwufInstfW3L5jSLVS8bjZtAodDOhat7yAI&m=ITdzvSoQ5TlYmSRF6WVxS40rs8tMEb2KCddyBxUYUYQ&s=uDsKqkfFX7IeaEY5hEZQilKsNrawpMuCJ7Ut6TZML7A&e=.

annabbott commented 7 years ago

Correct typo in first paragraph: The following example demonstrates using the disclosure design pattern to create a set of frequently asked questions where the answers may be independently shown or hidiven. Suggested edit: The following example demonstrates using the disclosure design pattern to create a set of frequently asked questions where the answers may be independently shown or hidden.

annabbott commented 7 years ago

Correct typo in Role, Property, State, and Tabindex Attributes > aria-expanded="false": Indicates that the container controlled by the disclosure button is hidiven . Suggested edit: Indicates that the container controlled by the disclosure button is hidden .

annabbott commented 7 years ago

In the Keyboard Support section: Space or Enter Activates the disclosure button, which toggles the visibility of the answer to the question.

Only Enter toggles the visibility. Space blinks the visibility, but doesn't leave it open in order to read.

Using FF and keyboard only to navigate.

annabbott commented 7 years ago

Enter and Space now toggle visibility = fixed.

a11ydoer commented 7 years ago

I am also hesitant to use DL,DT and DD for this example. My understanding for these tags are for listing "data" like a data table instead of using table tag. This FAQ example seems to be that they are rather the list of questions. We have a FAQ example using bootstrap library.

a11ydoer commented 7 years ago

I agreed with advantages of semantics by using dl, dt and dd (ex: how many items in the list and skip to the list item if a user wants) so we are closing this issue as it is.

mcking65 commented 7 years ago

Team, Thank you for all the feedback on this Example. All task force reviews are now complete, and I am closing the task force review process.