Hi I have the following question in regards to accessibility, I'm using JAWS screen reader software to test my code and I have the following issue:
JAWS reads out the heading label for the category, but it doesn’t represent the category and its repeating twice. The software says "Create case dash link";"Create case dash link".
The software should read should be Ask a question"
Please advise, my HTML is below
<div class="col-12 col-sm-6 col-md-4">
<article class="icon-feature icon-feature--first">
<a class="icon-feature__link" href="/support/create-case/"></a>
<div class="icon-feature__icon bg--blue-primary" style="height: 150px;">
<a class="icon-feature__link" href="/support/create-case/">
<span class="icon icon--signs"></span>
<div class="imghoveropacity">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
</div>
<a class="icon-feature__link" href="/support/create-case/">
<h3 class="icon-feature__title">Ask a question</h3>
</a>
<p class="icon-feature__excerpt">Submit an enquiry</p>
</article></div>
JAWS is right, there's nothing to read from its perspective. Well, almost nothing.
If you want JAWS with default settings to read your links, they should have either A) link text, i.e., something meaningful between <a> and </a>, or B) The aria-label attribute that should not be empty.
You have here:
<a class="icon-feature__link" href="/support/create-case/"></a>
This link contains nothing to JAWS' eyes. I mean, nada. The easiest way to fix this is to add an aria-label attribute, like this:
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question"></a>
Then JAWS would know what to read when the focus lands on that link. Otherwise, as it is a link, so a priority piece of data that must be announced somehow, it tries to get at least something and reads the (relative) URL, that's why you hear "Create Case".
The other link is a more cumbersome case. You have a link, a div inside it, and an img inside that div. Here JAWS is also confused because the link text is blank again, so it probably should read the alt attribute of the image, but this image is in another div, so it is not sure if the div should be read as the link contents. Oh yes, and there is an empty span also, and it is the first element of the link, so even more confusion arises.
If I were you, I'd also simply add an aria-label if you need that link to be read, too. And if the span is not needed and is only for decoration purposes, hide it from JAWS' view, otherwise you also will get some hard-to-notice troubles. After that, if you hear "Ask Question" twice on that link, hide the div with the image, you don't need it anymore (this last point is to be discussed, needs to be tested more thoroughly):
<a class="icon-feature__link" href="/support/create-case/" aria-label="Ask Question">
<span class="icon icon--signs" aria-hidden="true"></span>
<div class="imghoveropacity" aria-hidden="true">
<img class="img-fluid" title="Ask a question" src="/Illustration__SS_illo_Ask_a_question" alt="Ask a question" width="150px" height="150px">
</div>
</a>
Related
The html structure looks like this
<div>
<a href="#"> some info
<div role="button" tabindex ="0"
aria-label = "close"
/>
</a>
</div>
When using screen reader the a tag get read "some info close" and then on focus on button it again read "close". All I want a tag to read is "some info" and button to read "close". What change should I make? I cannot change the HTML structure.
jsfiddle https://jsfiddle.net/5c1oywzg/1/
You can't have a focusable element inside another focusable element.
What change should I make? I cannot change the HTML structure.
Being given an HTML code, it's difficult to make a change without changing the code.
you're using a a[href] link for what seems to be a button
you have to separate the focusable elements
If you could have changed the HTML structure, this would be a better code:
<div>
<button> some info</button>
<button aria-label="close" />
</div>
Unfortunately, we can't change anything if you can't change the HTML structure as your structure is by nature malformed.
We can still use some hacks (using javascript for instance) like adding role=description and tabindex=-1 to the a[href] element and replace "some info" with an html button, but that would be against the second rule of ARIA :
Do not change native semantics, unless you really have to.
1.) The fiddle is different from the code you posted above. For my answer I used the fiddle code (and added a missing " for the href attribute...)
2.) The button is part of the link, so its content is read as part of the link. Do you really want the (same) link to work both when the button is clicked AND when "some info" is clicked. Looks like "some info" is supposed to be a label/comment for the link?
depending on what you want, I would either close the a tag before the button or only wrap the button into the a tag, labeling it wth the full text and hiding the text before that with aria-hidden = "true":
<div>
<a href="#">
some info
</a>
<button aria-label = "close">close</button>
</div>
OR
<div>
<span aria-hidden="true">some info</span>
<a href="#">
<button aria-label = "some info, close">close</button>
</a>
</div>
If you can only add attributes and not change the HTML structure at all you could do this:
<div>
<a href="#" tabindex="-1">
<div tabindex="0">some info</div>
<button>
close
</button>
</a>
</div>
Setting tabindex to -1 removes an element from the tab order while setting it to 0 adds an item. Generally on other values should be used. More info here.
Removing the a tag from the tab order and adding the div in instead will make the keyboard skip over the a tag and focus on both the div and button tags separately.
🎻 Fiddle
I've been reading about using ARIA to get screen readers to read labels that otherwise wouldn't be there. However, I'm having a hard time getting a dropdown menu (from Foundation 6) to be read. Consider this piece of code:
<li role="menuitem">
<label id="label1" class="sr-only">Testing click label</label>
<a class="submenu-link" href="/" tabindex="1">
<span class="has-tip right" data-tooltip aria-haspopup="true" data-disable-hover="false" title="Foundation tooltip">
<i class="fa fa-plus-circle"></i>
<span class="text" aria-hidden="true" aria-labelledby="label1">Click here</span>
</span>
</a>
</li>
There are two things I'm baffled about:
Why isn't the <a> tag being read by the screen reader like all others that aren't in a menu dropdown?
Why isn't the aria-labelledby being read?
I suspect it's the "aria-hidden" on the span. As far as the screenreader can tell, that link has nothing in it.
Also:
label might seem like a logical thing here, but it's actually only intended for use with inputs.
Putting aria-hidden and aria-labelledby on the same element doesn't really make sense.
Avoid tabindex=1; use 0 if you need it to be clickable/focusable by the user, or -1 if you just need to be able to focus it via javascript.
There's a lot going on in your code sample; can you explain or show what it is you're trying to achieve? Why is there a dropdown item with a label, with a tooltip with an icon in it? How is this menu item supposed to look and function? What do each of these labels actually represent?
Adding labels where appropriate is definitely good to think about, but wherever possible, let normal markup do the heavy lifting.
I'm trying to parse a html code for specific content, but the problem I'm running into is that certain websites require you to click a "Show more" button.
When I grab the URL there's no way to tell it I want the full code with the "Show more" button clicked. Is there a way to grab the full source code of the page, because it keeps getting cut off after a point.
Example website: https://play.google.com/store/search?q=fm%20radio&c=apps&hl=en
The source code gets cut off at the "Radio hungary" app, which is the last app that loads automatically.
This even happens when I load everything and then try to view the pages source code.
It ends in:
style="display:none"> Show More </button> <div class="bottom-loading" style="display:none"></div> <div class="footer"> <div class="footer-links-container"> <span class="copyright"> ©2016 Google</span> <a class="footer-link id-no-nav" href="https://play.google.com/intl/en_us/about/play-terms.html" target="_blank"> Site Terms of Service</a> <a class="footer-link id-no-nav" href="http://www.google.com/intl/en_us/policies/privacy/" target="_blank"> Privacy Policy</a> <a class="footer-link id-no-nav" href="http://developer.android.com/index.html" target="_blank"> Developers</a> <a class="footer-link id-no-nav" href="https://play.google.com/artists" target="_blank"> Artists</a> <a class="footer-link id-no-nav" href="https://support.google.com/googleplay/?p=about_play" target="_blank"> About Google</a> </div> </div> </div></div><div class="loading" jscontroller="EgJAl" jsaction="rcuQ6b:rcuQ6b" id="page-load-indicator"></div><div id="instrument-manager-parent"></div><script src="https://wallet.google.com/inapp/lib/buy.js"></script><script
Even if I click the show more button.
The purpose of this is to grab all the URL's of the images, and I can't do this by hand because well.. we have thousands of images.
I believe if you just take advantage of the Javascript HTML DOM methods you can accomplish what you want to achieve.
This will help: http://www.w3schools.com/js/js_htmldom_methods.asp
By using this, you can target specific elements/ids/classes and pull or modify the information you want.
Jquery will also help you a lot with this.
You can solve it using Javascript dom,steps to do are
keep your content in a div element
set its default height as a fixed value
on clicking the show more link execute a javascript function to make the div element height to auto
in this way you can show content excerpt with javascript
If you go for server side, you can create a new page for showing the content.
This is really weird to me. Here's my code
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
</a>
</div>
</div>
</section>
If you have a look here http://jsfiddle.net/H2YxH/1/ and inspect the h2 tag, you will (hopefully) see it everything inside work-desc wrapped in a tag. Why is this being generated, when it's not in my code?
When the browser sees the other <a> tag inside the first one, it concludes that it has to close the first tag before it can open a new one.
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" />
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
</a>
View project
But this is an invalid DOM structure: the div has to be closed before the anchor can be closed. Because closing the div now would be rather destructive (and there'd still be a stray </div> up ahead to handle), it decides that it's better to duplicate the anchor so that everything it encloses in the markup is enclosed in the DOM too.
This is what happens in Chrome. Other browsers might behave differently. With invalid HTML browser behavior is undefined and can be whatever the browser considers best.
You can't encapsulate links/ "a"-tags in each other. Although it makes sense sometimes, it's generally a bad idea.
In addition:
You probably use "Right-click"->"Inspect Element"? The code you will see may not be the code you've written. This is because the code you will see is the code, that the browser creates during parsing and the code you see may change on-the-fly (e.g. you change an attribute with JavaScript). To see your actual code you always have to use "show sourcecode" in the contextmenu, but this probably doesn't work on jsfiddle.
Please read the comments in the code below first...
<section class="work">
<div class="scw">
<div class="work-entry">
<a href="#" class="work-link">
<img src="project.jpg" alt="yeah yeah yeahhhh" /></a><!--// You might want to close your anchor here... //-->
<div class="work-desc">
<h2>Project</h2>
<p>This is a project</p>
View project
</div>
<!--// </a> and remove this one ;-) //-->
</div>
</div>
</section>
You can't open an anchor twice if you did not close the first anchor, so I kindly ask to close an open anchor before you open a new anchor, I hope this will be helpful to you. Happy coding!
I have an image
<img src="sample.jpg" alt="sample">
which is reading as LINK GRAPHIC by JAWS, I have to make JAWS to read as Sample Image.
Why would you try to make JAWS read something in particular?
The important part is the information and content your page is giving to your users. What's the purpose of this content?
Only then, verify that screen readers are reading out the information in a correct manner. a>img is a link graphic; JAWS is correct.
Ryan's Notes
There are two ways to maybe get it like that:
Make sure the user is in expert mode with specific settings. Asking a user to adjust their settings so your site reads nicer, probably won't happen.
Write a JAWS script to interpret <a><img> a certain way. _See #1, _
Wrap your text with invisible content markup and hide img-tag from JAWS via aria-hidden:
<a href="#">
<div style="font-size: 0; line-height: 0;">JAWS reads this text</div>
<img src="sample.jpg" alt="sample" aria-hidden="true">
</a>
More ways to create invisible content can be found here:
https://webaim.org/techniques/css/invisiblecontent/