Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Accessibility][Headings and Labels - Property Pane_Ask a question]: Heading structure is not correct as the name of the pane should be defined under heading tags. #2080

Closed
ashish315 opened this issue Feb 25, 2020 · 25 comments
Closed

[Accessibility][Headings and Labels - Property Pane_Ask a question]: Heading structure is not correct as the name of the pane should be defined under heading tags. #2080

ashish315 opened this issue Feb 25, 2020 · 25 comments
Assignees
@cwhitten @beyackle
Labels
A11yCT A11yMAS A11yMediumImpact A11ySev3 Accessibility HCL- BotFrameworkComposer MAS2.4.6 MovedFromE+D Severity3

Comments

@ashish315
Copy link

ashish315 commented Feb 25, 2020 •
edited
Loading

User Experience
Users who rely on AT will face difficulty and easily confused if the headings are not defined correctly.

Test Environment
Browser: Microsoft Edge Canary Version: 82.0.425.0 (Official build)
OS build: 2004 (19564.1005)
Screen Reader: Narrator
Tool Used: ANDI
URL: Bot Framework Composer
Prerequisite Here

Repro Steps:

  1. Open the above mentioned URL in EDGE and turn on narrator.
  2. Navigate to already created dialog tree item and activate it. Such as- Greetings, Actions, EndDialog etc.
  3. Click on "+" and select 'Ask a question'. Then select any of the available options except Oauth login.
  4. Navigate to property pane appeared at right side of the screen and navigate with 'H' i.e. shortcut for Headings.
  5. Observer the issue in Property Pane.

Actual:
Their is no heading is defined for the Property Pane of the node.

Expected:
Every pane must have a heading, so, that the user will able to navigate quickly through the heading shortcut.

Note:
Issue is observed for all the Property Pane appeared at right side of the screen

MAS Impacted: MAS2.4.6

Attachment:
MAS2.4.6_No heading is defined for the page
@cwhitten cwhitten removed the Needs-triage A new issue that require triage label Feb 25, 2020
@corinagum
Copy link
Contributor

@DesignPolice Looping you in; Inputs cannot have headings in them, so it's possible the input location would need to be changed in favor of the heading. Does this require design input? (I'm assuming yes).

If I'm wrong, feel free to unassign yourself :P

@DesignPolice
Copy link

Good morning. Happy to help, I'm trying to duplicate the issue, to make a decision on it... In the screen grab, Prompt for text with Prompt for text under it is odd, but is this saying there should be a header above it called Prompt of Text instead of under?

I'm seeing this.. OAuth login - but nothing with prompt. So I assume I'm doing it wrong.

Screen Shot 2020-02-27 at 8 22 00 AM

Anyway.

They are saying we need a header above Prompt for text - which makes sense, but I wouldn't want a header to say Prompt for Text, then a Fill in the blank Prompt for Text and then below it again...

@corinagum

@corinagum
Copy link
Contributor

Ah, directions say pick any option except OAuth option. Could you take a look at a different one? Let me know if you want to call over Teams

@corinagum
Copy link
Contributor

@DesignPolice ping on this guy

@DesignPolice
Copy link

alright ya that is on me - will take to the 11am meeting today - thanks

@mareekuh
Copy link
Contributor

From what I am seeing in the initial screenshot, it looks like there is a delta between the sections as we see them and have labeled them from what the Screen Reader sees/reads.
So, specifically with respect to the Properties pane: The pane should be labeled 'Properties (pane)' and the title shown provides the specifics: Text Input Properties.

@cwhitten - from a dev side, how can we make sure the UX-area grouping and labels are reflected correctly in accessibilty mode/through the screen reader?

more info...

Also:
This document captures how the areas in the UX are grouped and labeled:

Note: for the 'design flow', the 'filter box' should be part of the toolbar vs part of the nav. the nav is where the results show.

https://github.com/MicrosoftDocs/composer-docs-pr/blob/SM-NamingConventions-Composer/contributor-guide/Naming%20conventions%20for%20the%20Bot%20Framework%20Composer.md

Screen Shot 2020-04-10 at 4 39 00 PM

Screen Shot 2020-04-10 at 4 38 37 PM
Screen Shot 2020-04-10 at 4 38 27 PM

@beyackle
Copy link
Contributor

beyackle commented May 5, 2020

@cwhitten @zxyanliu @DesignPolice Where are we on this? If there's something that needs fixing I'd like to be able to clear this ticket out, but I need guidance on what.

@DesignPolice
Copy link

Hey Ben,

Yes this is ready to go, from what I was able to understand, is that in the code on the site these areas need to have titles for a Screen Reader. @mareekuh outlined the areas and gave them names, The visual key is just to make sure you can tell what area is what.

I will be around if you have more questions, just ping me, I'm working on Build stuff.

@beyackle
Copy link
Contributor

beyackle commented May 6, 2020

Okay, I see exactly what needs doing now. I'll knock this out in the morning.

@beyackle beyackle self-assigned this May 6, 2020
@beyackle
Copy link
Contributor

beyackle commented May 6, 2020

This is how it ends up looking in Narrator's list of landmarks:
image

@beyackle beyackle mentioned this issue May 6, 2020
Merged
@mareekuh
Copy link
Contributor

mareekuh commented May 7, 2020

What is 'navigation' the left-most panel? If so, we call that the Menu.
Main = the title/header of the page (Settings, Bot Responses etc)? If so, let's call that 'Title'
What is the 'navigation path'?

Please use Sentence capitalization

@DesignPolice
Copy link

I have been having too many access issues today... So sadly here are the screenshots from the Teams chat that Ben and I had.

We just need to define areas and labels for the other screens as well.

Screen Shot 2020-05-06 at 5 14 29 PM

Screen Shot 2020-05-06 at 5 14 44 PM

Screen Shot 2020-05-06 at 5 14 52 PM

@mareekuh
Copy link
Contributor

mareekuh commented May 7, 2020

User input

  • left nav = Navigation panel
  • Title
  • body of the page = List view

Notifications
(I asked Chris to turn the dropdown into a leftnav to be parallel to the other pages

  • Title
  • List view (The columns can be referred to the column names)

Publish profiles (note: sentence cap!)

  • Navigation panel
  • Title
  • List view

Skills
hmm. Listview and settings?
Next round this page will look like the others: Navigation panel and Listview

  • Navigation panel
  • Title
  • List view

Settings

  • Navigation panel
  • Title
  • List view

@zxyanliu
Copy link
Contributor

zxyanliu commented May 7, 2020 •
edited
Loading

FYI. This is the naming convention shared in the writers' team. The screenshots are not up to date, but the naming and labeling of the areas might be helpful. :)

  • User Input
    user-input

  • Notifications
    notifications

  • Settings
    settings

@cwhitten cwhitten added the Fixed label May 8, 2020
@mareekuh
Copy link
Contributor

mareekuh commented May 8, 2020

A few comments:
User input

@cwhitten @zxyanliu @DesignPolice @beyackle

User input - Do we need to mark the 'title'?

  • What do we call the view if the editor switch is turned on vs turned off? If it's on, 'User input Editor' makes sense to me, when on, User Input listview makes sense

Notifications - please use 'page control' as a label vs navigation control. We'll be moving the 'all-warnings- errors' dropdown into the navigation pane and the page control will remain at the bottom or go somewhere else.
Settings - this page will be undergoing some UI changes also:

  • 'Settings' will in the 'title' area, just like the publishing page etc.
  • the settings menu will be looking the same as all of the left navs, so we can call this 'settings navigation pane' and it should take the same visual conventions as all other leftnavs in the app (right now 'configuration' has a special treatment which we'll want to remove'
  • Settings editor works for me if the editor switch is on. We're also planning to have a GUI version of the settings page

@beyackle beyackle removed the Fixed label May 8, 2020
@beyackle
Copy link
Contributor

beyackle commented May 8, 2020

Re-opened due to #2956 . Will redo.

@beyackle beyackle mentioned this issue May 8, 2020
Closed
@mareekuh
Copy link
Contributor

mareekuh commented May 9, 2020 via email

@mareekuh
Copy link
Contributor

mareekuh commented May 9, 2020

@zxyanliu

@zxyanliu
Copy link
Contributor

@mareekuh Yes. We should make the terms consistent. I will update the naming conventions as suggested. Thanks!

@beyackle
Copy link
Contributor

I've updated the labels in #2959 as well.

@DesignPolice DesignPolice removed their assignment May 18, 2020
@beyackle beyackle mentioned this issue Jun 1, 2020
Merged
@cwhitten cwhitten added the Fixed label Jun 1, 2020
@ashish315
Copy link
Author

ashish315 commented Jun 8, 2020 •
edited
Loading

@cwhitten As checked the only one heading i.e. chart name is defined as heading still the property pane didn't have any headings.

Test Environment
Browser: Microsoft Edge Canary Version: 85.0.531.1 (Official build)
OS build: 2004 (19635.1)
Screen Reader: Narrator
URL: Bot Framework Composer
Prerequisite Here
Master folder downloaded on 05-06-2020

@ashish315 ashish315 removed the Fixed label Jun 8, 2020
@zxyanliu
Copy link
Contributor

zxyanliu commented Aug 3, 2020

Are we still working on this ticket? What is the status? What is needed from the docs?

@beyackle
Copy link
Contributor

beyackle commented Aug 3, 2020

We implemented navigation landmarks (https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/aria-landmarks/) as a way for SR users to navigate around the page; this is IMO a better option than messing up the visual design by putting literal headings everywhere. I'd be okay closing this.

@zxyanliu
Copy link
Contributor

zxyanliu commented Aug 3, 2020

Hey @beyackle, thanks for the info.
If there is nothing required on the docs side, I am going to unassign myself from this thread.

@zxyanliu zxyanliu removed their assignment Aug 3, 2020
@Amit8527510735
Copy link

#Nonbenchmark;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cwhitten cwhitten

@beyackle beyackle

Labels
A11yCT A11yMAS A11yMediumImpact A11ySev3 Accessibility HCL- BotFrameworkComposer MAS2.4.6 MovedFromE+D Severity3
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

a11y: add labeled aria regions to pages microsoft/BotFramework-Composer
8 participants
@cwhitten @corinagum @zxyanliu @DesignPolice @mareekuh @Amit8527510735 @ashish315 @beyackle