My Modal Dialog has interactive and non-interactive content (screenshot 1). I'm expecting that the screen reader will read all content before the first focusable item and this focused item as well. But instead of that JAWS reads all content twice and then the focused item as well (screenshot 2).
Is there any way how to obligate the screen reader to read all content before the first focusable item and this focused item as well?
Demo here (last example).
Related
I have header and navigation and then next section with slider. since the slider section is having aria-live, screen readers read the slider contents directly. When i tab the menu navigation links, slider contents are read aloud and interuppted.
VoiceOver already reads in DOM order. If you have aria-live on an element and you update that element, you are telling VoiceOver to read the contents of that element. That's the whole point of aria-live.
I'm guessing by "slider" you mean something like a carousel and not something like:
<input type="range" min="1" max="100" value="50">
When a carousel rotates in new content, depending on how it's implemented, it might be updating the DOM and causing aria-live to be triggered. However, most carousels already have all the elements and just hide/unhide them as the scroll into view. Unhiding an element does not trigger an aria-live region.
If you have a carousel that rotates content in automatically, you will need a pause button to stop the carousel, otherwise you'd be violating WCAG 2.2.2 Pause, Stop, Hide
I have been having issues with using the ScrollToAsync function of a ScrollView when running on Android, not tested on iOS yet.
I'm using Xamarin.Forms version 2.5.1.444934 using .Net Standard
Testing on the Android Emulator (8.0, API26) and a Google Pixel (8.1 API27), both have the same issue.
I use NavigationPage and Navigation.PushAsync to move between pages (therefore have navigation bars on every page).
I want to create an auto populate field control, the user types in the first few letters and I look up the results in a database / static list of string and display the results below for the user to click/tap.
I have this working using a composite control (the contents of the frame marked interesting below).
The problem I have is scrolling the view to show the results.
My page has this layout hierarchy:-
ContentPage
StackLayout
ScrollView
StackLayout
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
Frame (the interesting one that deals with scrolling)
StackLayout
Heading Label
StackLayout
Label x:Name="ScrollToLabel"
Entry x:Name="ScrollToEntry"
Grid x:Name="ScrollToGrid"
Entry x:Name="Hidden" Text="I should stay visible as you type"
/StackLayout
/StackLayout
/Frame
Frame (some label and entry fields inside a stack layout)
Frame (some label and entry fields inside a stack layout)
/StackLayout
/ScrollView
StackLayout
Button Text = Done
/StackLayout
/StackLayout
/ContentPage
When the user clicks/taps in to ScrollToEntry, the keyboard opens and pans the control to above the keyboard (ok so far).
When the user starts typing in ScrollToEntry, the code populates ScrollToGrid with up to 5 results.
At this point I want to make sure that the grid results are visible for the user to tap on.
I have tried 2 different options, ScrollToAsync(ScrollToLabel, Start) and ScrollToAsync(Hidden, MakeVisible).
Neither work as I would like 100% of the time.
ScrollToAsync(ScrollToLabel, Start)
If the ScrollToEntry is at the bottom of the screen, the navigation bar is hidden and the view pans up too far.
The ScrollToLabel is now off the top of the screen.
When the second letter is clicked/tapped, the Navigation bar is restored and the scroll scrolls correctly, ScrollToLabel at the top of the screen.
If the ScrollToEntry is near the top of the screen, the navigation bar is not hidden and it scrolls correctly.
ScrollToAsync(Hidden, MakeVisible)
This is my preferred option because it would only scroll as far as needed to display all the results (not all the way to the top).
This works even worse than the first one.
In most cases, it does not scroll at all, I assume it thinks it already visible but is actually behind the keyboard?
If it does scroll, the label Hidden is still not displayed (I tested with both a HeightRequest="0" version and a visible version, both the same result).
I tried using the below code to change the adjust to resize.
Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
2 issues,
1. Because it resizes, the Done button now is above the keyboard, taking up space.
2. When clicking the hardware back button (not the done or navigation back button) the previous view now has a white space where the keyboard was.
If using the done or navigation back, the screen initially appears with the white space but then refreshes to full screen.
I have created a sample app that highlights the issues (by default using pan, not resize).
It's the most simple version of the layout I'm using...
Am I doing something wrong or is this just how it works? If its how it works, this must be a bug? If I'm doing it wrong, can someone tell me what or suggest a different way of doing it?
I have a list where every element has a share button, when I press on the
share button a box/bubble opens up with the social mdia buttons.
when the share box opens it should go over the list items (even if it covers the next elements on the list), how can I achieve that?
current state
The box shouldn't push the height of the item list it should be on top of everything
I have a flex component embedded in an HTML page. The flex component has a text box. A timer runs in flex which makes an external interface call after every 10 mins. This would in turn open a popup using HTML (window.open).
My problem is that when I am typing in the text box and the popup is displayed, I lose the focus from the text box. Is it possible that the popup will be displayed and i lI also be able to continue typing without any break or having to click on the text box again for regaining focus.
In my page - On scroll on some point of time I am cloning top navigation menu and making it as sticky menu. As I am making this fully accessibile. The JAWS link list dilog box shows two links for each anchor text. (i.e Food, Food, Drinks, Drinks, Special Offers Special offers etc.) It's due to top menu clone behavior.
Can any one suggest me how to ignore list of links or parent <div> from the link list dialog Box?
For your information I could ignore these text from tabbing by giving tab-index="-1", but could not prevent from Jaws Linked list dialog menu(insert + f7).