I have ran into issue in Jaws and chrome that screen reader is not notifying current item
Usually in NVDA it will announce as "current"
And this issue is obseverd in sliders and curosels whenever we are clicking on the dot of the slider the slide will change and focus is on the required dot but not notifying it as current item
And also same issue is there in the sub sections also
i have shared the required code can anyone guide me on this
<nav aria-label="Settings" data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-23f2CQ">
<ul class="tab-list" data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-gx3A3Q">
<li data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-eyXeHn" class="au-target tab-listitem" au-target-id="182">
<a class="tab-link au-target" href="javascript:void(0)" click.delegate="activateStep(eachStep.stepName)" data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-lKVp3L" au-target-id="183" id="accountSettings" aria-current="false">
<span data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-MK4WZK">
Account settings
</span>
</a>
</li><li data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-eyXeHn" class="au-target tab-listitem" au-target-id="182">
<a class="tab-link au-target" href="javascript:void(0)" click.delegate="activateStep(eachStep.stepName)" data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-lKVp3L" au-target-id="183" id="personalisationSettings" aria-current="false">
<span data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-MK4WZK">
Profile Information
</span>
</a>
</li><li data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-eyXeHn" class="au-target tab-listitem" au-target-id="182">
<a class="tab-link au-target" href="javascript:void(0)" click.delegate="activateStep(eachStep.stepName)" data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-lKVp3L" au-target-id="183" id="myApplications" aria-current="false">
<span data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-MK4WZK">
My Applications
</span>
</a>
</li><li data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-eyXeHn" class="au-target tab-listitem" au-target-id="182">
<a class="tab-link au-target" href="javascript:void(0)" click.delegate="activateStep(eachStep.stepName)" data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-lKVp3L" au-target-id="183" id="jobAlerts" aria-current="false">
<span data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-MK4WZK">
Job Alerts
</span>
</a>
</li><li data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-eyXeHn" class="au-target tab-listitem active" au-target-id="182">
<a class="tab-link au-target" href="javascript:void(0)" click.delegate="activateStep(eachStep.stepName)" data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-lKVp3L" au-target-id="183" id="contactInformation" aria-current="true">
<span data-ph-id="ph-fiju1-default-ph-candidate-profile-v1fiju1-MK4WZK">
Contact Information
</span>
</a>
</li><!--anchor-->
</ul>
</nav>
What version of JAWS are you running?
I have an older version, JAWS 2020, and it's reading it correctly. Your code snippet sounds like this:
list
with 5 items
Account settings Link
Profile Information Link
My Applications Link
Job Alerts Link
Contact Information Current Link
The output is from the speech history window (Ins+Space,H). Notice the "Current" on the last link because it has aria-current=true.
I used tab to navigate to all the links.
If I use the down arrow to navigate the DOM, I still hear "Current", although it's announced before the link text instead of after it, but that doesn't matter.
list of 5 items
• Link Account settings
• Link Profile Information
• Link My Applications
• Link Job Alerts
• Link Current Contact Information
JAWS says "bullet" for the bullet graphic symbol.
Related
When I tab into the following structure, the anchor tag (link) is focused and the screen reader says, list with three items XYZ Anchor. Is is possible to make the screen reader not say "list with three items" and just say "XYZ Anchor"?
<ul class="xyz">
<li class="abc">
<span>AAA</span>
</li>
<li class="def">
<a [href]="getLink(something)" target="_blank">
XYZ Anchor
<span class="xyz">({{ getSomething}})</span>
</a>
</li>
<li class="pqr">
<button class="btn btn-link (click)="openSomething"">
Something
<span class="tko">({{ something }})</span>
</button>
</li>
</ul>
Is is possible to make the screen reader not say "list with three items" and just say "XYZ Anchor"?
Yes, don't use a list!
Being serious for a second it is really useful information for a screen reader user as they then know that there are 3 items and it will announce that they are at item "2 of 3" for example.
Ideally you want to leave this in place for things that are, indeed lists such as navigation links.
However if you do ever need to remove the semantic meaning from a list you would use role="none presentation" as an attribute on each list item.
This essentially says to a screen reader "treat this like a <div>, it has no semantic meaning, I am using it purely for layout.
Note I used role="none presentation". role="none" is the future version of role="presentation" but support is not great, by providing both (in that order) it will fall back to role="presentation" and still work in 99% of screen readers.
Your example with role
<ul class="xyz">
<li class="abc" role="none presentation">
<span>AAA</span>
</li>
<li class="def" role="none presentation">
<a [href]="getLink(something)" target="_blank">
XYZ Anchor
<span class="xyz">({{ getSomething}})</span>
</a>
</li>
<li class="pqr" role="none presentation">
<button class="btn btn-link (click)="openSomething"">
Something
<span class="tko">({{ something }})</span>
</button>
</li>
</ul>
I know that you can't put a link inside a link, but how would link a button inside of an already linked ? I'm trying to recreate the aside on the pcfinancial website.
Here is what I did which I know is incorrect:
<a href="https://www.pcfinancial.ca/en/learning-hub/blog/introducing-the-new-pc-money-account/" target="_blank" title="Link to Article">
<article>
<img src="images/first-article.png" alt="Introducing the new PC Money Account">
<p>Financial Fluency</p>
<h3>Introducing the new PC Money™ Account</h3>
<p>By PC Financial Team</p>
<p>Read Article</p>
</article>
</a>
Now how does one get the button for "Financial Fluency" that is linked in the article like it is on this website: https://www.pcfinancial.ca/en/
I'm in a coding course and had to recreate this in HTML. We have not begun CSS yet.
Thank you.
Try to remove link on a top of <article> link and put its on your <img> <h3> and <p> tags like this:
<article>
<a href="https://www.pcfinancial.ca/en/learning-hub/blog/introducing-the-new-pc-money-account/" target="_blank" title="Link to Article">
<img src="images/first-article.png" alt="Introducing the new PC Money Account">
<p>Financial Fluency</p>
<h3>Introducing the new PC Money™ Account</h3>
<p>By PC Financial Team</p>
</a>
<a href="YOUR_LINK_HERE">
<p>Read Article</p> <!-- and use <button> element if you think it is a button-->
</a>
</article>
I want to present Tabs using Bootstrap 4 with bootstrap-native-v4 within an Angular 2 application. (I am including bootstrap-native-v4 via the angular.json file 'scripts' value "./node_modules/bootstrap.native/dist/bootstrap-native-v4.min.js" - note I can see bootstrap-native-v4 included within the source [scripts.js file] when viewed thru the Chrome Developer Tools)
I am using localhost:4200/myfolder to run my application locally however for the code below, when I hover-over/click the tabs the URL defaults to localhost:4200/#home (instead of localhost:4200/myfolder#home), localhost:4200/#profile (instead of localhost:4200/myfolder#profile), etc.
So what happens is that the page does a post back to a none existent URL
I've tried setting the BaseURL in the head, however although this fixes the URL issue the page doesn't refresh the content when I click on the tabs. I've also tried to set the href of each anchor to myfolder#home, myfolder#profile, etc however again although this fixes the URL issue (no postback), the tab content doesn't refresh
I really want to avoid using JQuery (hence the use of bootstrap-native-v4) - most/all of the examples seem to use JQuery - I am trying to go via Data API (JS within the bootstrap-native-v4 scope is OK tho)
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist" data-tabs="tabs">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">a...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">b...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">c...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">d...</div>
</div>
I am wanting the code to not postback to the server and to simply switch between tabs showing the corresponding tab's content
Can anyone help ?
BSN developer here. I want to say this: I'm no Angular expert, but I can tell my library goes away from traditional jQuery methods, events and plugin structure, you need to think Native JavaScript FIRST.
Supposing you're working with fully dynamic content, where content is added/changed/removed later into/from the DOM, you can try to work with it following the documentation:
init each of your newly added tabs with var myTab[N] = new Tab(element,options); (myTab[N]/myTab1 is the initialization object to work with)
interact with your object via method, EG myTab[N].show();
dispose the object via myTab[N] = null; then remove its respective tab+tabContent from the DOM
the Tab component (as well as all others in the library) does NOT handle #myTab URL navigation
Check the documentation and wiki for more info, you might find some guides to help you hopefully.
This markup is able to be read by JAWS arrow navigation in IE11, however in Microsoft Edge it only allows it to be fully read via tab navigation. Does anyone have any idea why Edge refuses to read this list item? We have other list items that are similar to this that are read just fine, but this one in particular doesn't seem to be available to be read via JAWS arrow navigation.
<li id="some-id">
<a href="/destination">
<span class="submenu"></span>
<span class="label"> Destination </span>
<span class="count">
<span class="value" data-info=0></span>
</span>
</a>
</li>
I've tried setting data-info=0 with and without quotes. I'm stumped.
I am trying to figure out how I can implement a tabbed site similar to the image below. Does anyone know/recognize this template or can guide me on how I can design something similar with bootstrap and css?
Bootstrap has a javascript tab plugin included to change tabs on clicking. You can checkout https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior
If you want the pages to load a new page on clicking you could do something like (I've used font awesome for the icons here)
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="/sourcing"><i class="fa fa-pie-chart"></i>Sourcing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/people"><i class="fa fa-user-o"></i>People</a>
</li>
</ul>
In bootstrap 4 this would get the basic example working and you could play around with the CSS to change the look of each a when it has the "active" class