I am using certain text in place of an icon or image which I dont want to read out to users using screen readers like JAWS. How can I prevent this? I had tried aria-hidden but it still reads out the content. Is there any effective way ONLY to prevent certain texts on screen from reading out?
There are multiple ways you can do this. If it is just an image, then any of the following will cause the image to disappear to a screen reader user:
<img src="whatever.ext" alt=""/>
<img src="whatever.ext" role="presentation" />
Of course, you can double-up too with this to make it abundantly clear what you mean
<img src="whatever.ext" role="presentation" alt="" />
These should also work in newer browsers that are strictly ARIA compliant but I have not tested them in all browsers
<img src="whatever.ext" aria-label="" />
<img src="whatever.ext" aria-hidden="true" />
<img src="whatever.ext" title="" />
Related
<p style="text-align: center">
<img class="alignnone size-full wp-image-759 aligncenter" /><img
src="https://steamboateramuseum.org/wp-content/uploads/2021/01/ViFLverttransparent.gif"
/>
</p>
This is what I have now, I have been asked to link it but every time I add my <a tag and url to hyperlink it just doesn't work! Where would I fit a hyperlink into this? I am sorry for the stupid question in advance.
Okay so based on your comments I think I have understood your problem. Do following ->
<p style="text-align: center;">
<a href="here goes your link e.g. https://google.com">
<img src="i.imgur.com/I5DFV.jpg" />
</a>
</p>
Depending on your usecase you might have to update style to show it in better way, but this will work functionally
Although you question wasn't clear, but what i understood is your hyperlink containing an image is not working. Maybe you're missing Something in your quotes? anyway here is an example of a working hyperlink with an image.
<img src="images/someimage.jpg" title="Image hyper link" width="300" height="200" />
I have replaced lazy loading with native chrome loading="lazy" attribute but it seems to be not working. I am using Chrome 76 latest version.
I checked my page speed in https://developers.google.com/speed/pagespeed/insights and it still shows to Defer offscreen images!
Not sure what exactly I have missed?
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
<img class="img-fluid" loading="lazy" src="my-image-path" />
I answered a related question some time ago:
After some research I found that I was missing something on my images. Images should include dimension attributes
As mentioned here: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
While it's not necessary, it is desired or expected to specify the dimension attributes on your images because without dimensions specified, layout shifts can occur. Resulting in unexpected behavior.
The browser needs to know the dimensions of your images to reserve sufficient space on a page for them.
Related question: https://stackoverflow.com/a/64330480/10757314
I have an incoming HTML that contains img tags.
I need to force the images to be max the size of the viewport: iPhone or iPad.
Currently the text fits the screen nicely, but the images overflow the screen size.
I can force to [_wvContent setScalesPageToFit:YES];, but then the text is too small.
Any way to make the images the screen size?
Couple of incoming examples:
<img alt="Comparison " src="http://www.sample.com/wp-content/uploads/wp-post-thumbnail/dsa_k4iI.jpg" class="wppt_float_left" title="Comparison Photo" />
<img class="alignnone size-full wp-image-107864" alt="320d Comparison " src="http://www.sample.com/wp-content/uploads/590px4_2526_RT.jpg" width="590" height="329" title="20d Comparison" />
<img alt="" src="http://www.sample.com/wp-content/uploads/wp-post-thumbnail/dsa_ka.jpg" class="wppt_float_left" title="2013 BMW 320i: Track Tested by Edmunds Photo" />
<img class="alignnone size-medium wp-image-107859" alt="" src="http://www.sample.com/wp-content/uploads/201_-655x436.jpg" width="655" height="436" title="" />
Thanks for your help.
What you need to do is construct an objective-c string containing javascript that will run inside the webview to change the image sizes to fit inside the bounds CGRect of the web view. Then tell the web view to execute this javascript by calling stringByEvaluatingJavaScriptFromString:
Here are several small icons on the page that looks the same, but display different information.
Classes message1, message2, .., messageN are used for ajax to display a message (could be the same on the same page, so classes instead of ids are used).
I can create css class .defaultcursor{cursor:default;} to improve the code below. Are there any better idea so the code takes as few space (bytes) as possible with the same functionality?
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
...
<img src="help.png" alt="" />
Thank you.
I have a page in the cms part of my website (javascript is enabled and can force a browser choice), it is a calendar with lots of images:
<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />
<img src='1.gif' />
<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />
<img src='2.gif' />
the same image can be used over 250 times, with about 1000-1500 images on the page.
Is the browser smart enough to figure out that these are all the same image, or is there some JavaScript/jQuery trickery that I can use to improve performance?
I think there is a subtlety to the question that has not been addressed. It's the same image on the same page. #Alex's answer is more appropriate for case of the same image across multiple pages.
When you are loading multiple copies of the same image within one page, the browser shouldn't care about cache/expiry headers. It should just re-use the image it loaded.
For this DOM fragment:
<img src='1.gif' />
<img src='1.gif' />
Looking at the network tab in Chrome, Firefox or IE9, you can see that there is only one call to the server by the browser. If the image has expired then the image is returned otherwise you'll get a 304 Not modified.
In short there should be no overhead from having a hundred copies of the same image on the same page, and the expiry headers don't matter.
If they have the same real path, then the browser will cache them, unless you have aggressive anti cache headers, such as expiry headers in the past.