WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Query on the MAC voice over

for

From: suman damera
Date: Jan 29, 2020 7:49PM

apologies for the delay response as i had to take permission to share the
code snippet and here is the code snippet
<div class="ph-autocomplete-input-wrapper ph-combobox-dropdown-area"
data-ph-id="ph-default-ph-find-your-fit-v1LJCdpO">
<div role="search" aria-expanded="false"
aria-owns="recenttitle-list" aria-haspopup="listbox" aria-label="What is
your most recent job title?"
key-aria-label="6ty93o-ph-find-your-fit-v1-default-stepTwoLabel"
data-ph-id="ph-default-ph-find-your-fit-v1rcBjuu">
<input type="text" id="recentTitles"
name="recentTitles" showresultsonfocus="false" ph-a11y-autocomplete=""
aria-label="Search for Job title"
key-aria-label="6ty93o-ph-find-your-fit-v1-default-fyfStepRecentTitleSearchBoxAriaLabel"
data-ph-autocomplete-input="recentTitle" autocomplete="off"
placeholder.bind="widgetBundle['fyfRecentTitlePlaceHolderText']"
aria-autocomplete="list" aria-controls="recenttitle-list"
value.bind="fyfStepConfig.recentTitle.value"
aria-labelledby="ph-fyf-jobTitle"
disabled.bind="fyfStepConfig.recentTitle.flag"
data-ph-at-id="input-search-box"
data-ph-id="ph-default-ph-find-your-fit-v1iJDCpn" class="au-target
search-box" au-target-id="1877" placeholder="Your most recent job title"
aria-activedescendant="">
</div>
<button click.trigger="clearSearch()"
class="cancel au-target" show.bind="fyfStepConfig.recentTitle.value.length"
focus.trigger="setFocusField('recentTitles')"
blur.trigger="setFocusField('recentTitles',true)" aria-label=" clear the
search"
key-aria-label="6ty93o-ph-find-your-fit-v1-default-fyfStepRecentTitleClearSearchText"
data-ph-at-id="clear-text-link"
data-ph-id="ph-default-ph-find-your-fit-v12aCu5L" au-target-id="1878">
<i aria-hidden="true" class="icon
icon-cancel" data-ph-id="ph-default-ph-find-your-fit-v1XLMF0x"></i>
</button>
<ul role="listbox"
aria-labelledby="recenttitle-list" id="recenttitle-list"
class="search-dropdown-list au-target aurelia-hide"
show.bind="stepData.showRecentTitleDropdown"
data-ph-at-id="suggested-data-list"
data-ph-id="ph-default-ph-find-your-fit-v1jSQDUz" au-target-id="1879"
data-ph-at-data-count="10" aria-expanded="false">
<li role="option"
aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_0"
au-target-id="1880" id="recentTitles-result-item-0"
data-ph-at-job-title-text="Secretory"
aria-label="Secretory"><em>Se</em>cretory</li><li role="option"
aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_1"
au-target-id="1880" id="recentTitles-result-item-1"
data-ph-at-job-title-text="Security Sergeant" aria-label="Security
Sergeant"><em>Se</em>curity <em>Se</em>rgeant</li><li role="option"
aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_2"
au-target-id="1880" id="recentTitles-result-item-2"
data-ph-at-job-title-text="Sergeant"
aria-label="Sergeant"><em>Se</em>rgeant</li><li role="option"
aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_3"
au-target-id="1880" id="recentTitles-result-item-3"
data-ph-at-job-title-text="Secret Security Clearance" aria-label="Secret
Security Clearance"><em>Se</em>cret <em>Se</em>curity Clearance</li><li
role="option" aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_4"
au-target-id="1880" id="recentTitles-result-item-4"
data-ph-at-job-title-text="Servant Lead" aria-label="Servant
Lead"><em>Se</em>rvant Lead</li><li role="option"
aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_5"
au-target-id="1880" id="recentTitles-result-item-5"
data-ph-at-job-title-text="Seriologist 1" aria-label="Seriologist
1"><em>Se</em>riologist 1</li><li role="option"
aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_6"
au-target-id="1880" id="recentTitles-result-item-6"
data-ph-at-job-title-text="Secretary"
aria-label="Secretary"><em>Se</em>cretary</li><li role="option"
aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_7"
au-target-id="1880" id="recentTitles-result-item-7"
data-ph-at-job-title-text="Self Service Manager" aria-label="Self Service
Manager"><em>Se</em>lf <em>Se</em>rvice Manager</li><li role="option"
aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_8"
au-target-id="1880" id="recentTitles-result-item-8"
data-ph-at-job-title-text="SEO Expert" aria-label="SEO Expert"><em>SE</em>O
Expert</li><li role="option" aria-selected.bind="eachTitle.aria.selected"
click.delegate="populateSelectedData(eachTitle, $index)"
data-ph-at-id="suggested-data-list-item"
innerhtml.bind="eachTitle.title_html | sanitizeHTML"
data-ph-id="ph-default-ph-find-your-fit-v1T0s83I" class="au-target
ph-autocomplete-input-listbox-item search-list-item title_9"
au-target-id="1880" id="recentTitles-result-item-9"
data-ph-at-job-title-text="Seafood Clerk" aria-label="Seafood
Clerk"><em>Se</em>afood Clerk</li><!--anchor-->
<!--anchor-->
</ul>
</div>









On Wed, Jan 29, 2020 at 9:13 AM Jonathan Cohn < <EMAIL REMOVED> > wrote:

> There are several ways to compose custom select boxes, and none is likely
> to be as accessible as the native HTML. I believe Mac's have historically
> had issues with the active-descendent attribute especially if the list used
> to indicate completions is at the end of the DOM instead of adjacent to the
> entry area.
> So, without specifics it is hard to tell what could be at issue for you.
> Can you share a sample?
>
> Best wishes,
>
> Jonathan Cohn
>
>
>
> > On Jan 27, 2020, at 11:13 PM, Ashwin Kumar V < <EMAIL REMOVED> >
> wrote:
> >
> > Hi,
> > I am using Mac desktop with latest OS. I don't see any problem in
> selecting
> > items in the list I can do that using up and down arrow.
> >
> > On Mon, 27 Jan 2020 at 11:27 AM, suman damera < <EMAIL REMOVED> >
> wrote:
> >
> >> Hello all,
> >> i am kind of new to MAC and voice over(safari) testing. while
> performing
> >> accessibility testing, i have got the below query
> >>
> >> The options in the type ahead(typeahead is custom list with input
> >> textbox) are not exposed to the voice over users while up and down arrow
> >> keys are used. However, keyboard focus moves from one option to other
> >> option while up and down arrow keys are used. Except voice over on MAC,
> all
> >> the screen readers are exposing those options during arrow key
> navigation.
> >> What could be the problem here why voice over on mac is not exposing
> those
> >> options during arrow key navigation? To see the working example, open
> the
> >> below Microsoft URL, navigate to the search button, , activate the
> search
> >> element, type any character, and then use arrow keys
> >> https://www.microsoft.com/en-in
> >>
> >> Looking forward for your response.
> >> > >> > >> > >> > >>
> > --
> > **
> >
> > Best regards,
> > Ashwin Kumar V.
> > Certified Web Accessibility Specialist
> > Mob: 9008980065
> > Linkedin: https://www.linkedin.com/in/ashwinkumar1/
> > > > > > > > >
> > > > >