For some reason the titles of my featured images are being appended to their links. I can't figure out why it's happening.. any ideas?
"Test image" is the text that appears next to the image.
<a href="http://localhost/mysite/test/" class="post-thumbnail" aria-hidden="true">
<img src="http://localhost/mysite/wp-content/uploads/ds/2017/12/sample2-1080xauto-c-default.jpg" class="featured-image tease-featured-image " alt="<span itemprop=" name"="">Test Image" />
</a>
And it's the post title, not the image title that's displaying. Removing the image title doesn't do anything. Changing the title of the post changes the text.
Why would you have a span inside your alt?
The alt is for people who can't see images -
Normally the rules for alts is :
No special characters. This includes UTF-8 characters such as unencoded curly quotes, as well as HTML Character Entities.
No HTML.
No more than 125 characters.
Just identify the picture. No need to refer to it (“This is a picture
of…”).
Read more at: https://html.com/attributes/img-alt/
Also - the span created is not closed properly.
Related
I am using a WordPress theme that I am trying to make 100% accessible. I cant get any help from the developer and I am not very good at the back end of WordPress. I need help with this:
[ 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are. ]
a (anchor) element must contain text. The text may occur in the anchor text or in the title attribute of the anchor or in the Alt text of an image used within the anchor.
This is the code in the theme:
<div class="qodef-mobile-menu-opener">
<a href="javascript:void(0)">
<span class="qodef-mobile-opener-icon-holder">
<i class="qodef-icon-font-awesome fa fa-bars " ></i> </span>
</a>
</div>
Where in WordPress is this code located so I can insert a title attribute or Alt text.
Thank You!
Recently I noticed in my Wordpress website that in all the pages, when I have an image to display, it displays the image and right after it displays the path to the image, including the image properties. The entire
Can someone helpe, please?
enter image description here
Seems like your HTML Structure breaks with your PHP Code. you need to check your code where you getting this Image. This is how its showing from Inspect Element:
<img src="http://antiparosbeauty.gr/wp-content/uploads/2014/03/weding.jpg" alt="weding" class="alignleft size-full wp-image-140" srcset="http://antiparosbeauty.gr/wp-content/uploads/2014/03/weding.jpg 345w, <a href=" http:="" antiparosbeauty.gr="" wp-content="" uploads="" 2014="" 03="" weding-300x141.jpg"="" target="_blank" height="163" width="345">
I have a view for news content type
I overrige the view's template grid style output
In Row style output:views-view-fields.tpl.php overriding every thing seems ok except image field!
I print tilte and description and every other thing using print
`$fields['fieldname']->content;
but print $fields['field_teamimage']->content; " class="img-respo" alt="team img 1">
displaying nothing!
How can I print image field inside Only local images are allowed. inside my custom views-view-fields.tpl.php
I spent all my day trying and searching without a result
Thanks
For this you need to override filed template file Field Content: Images of property (ID: field_teamimage) and after that you can add img src there, something like
<img class="img-responsive" alt="team img 1" src="<?php print file_create_url($row->_field_data['nid']['entity']->field_teamimage['und'][0]['uri']); ?>"/>
You can even add image src directly in src.
Wordpress strips out <p> and <br> tags when switching between the visual and the text editors. Well, to be specific, it doesn't actually strip them out of the content, but it does not display them in the text editor view. Is there a way to stop it from hiding those tags?
I know about the tinymce advanced plugin, but is there a way to stop this behavior on a per-post/per-page basis without having to install the plugin?
If you add a meaningless data attribute to the <p> and <br> tags, they will continue to show.
Example
When switching from text to visual editor and back, the following text
<p>Some paragraph text <br> and a second line.</p>
becomes
Some paragraph text
and a second line.
However,
<p data-x>Some paragraph text <br data-x> and a second line.</p>
makes the tags remain visible:
<p data-x="">Some paragraph text <br data-x="" /> and a second line.</p>
This is useful on pages with more complex layouts that can shift around when the tags get stripped.
If the post is custom post type, you can add meta box with add_meta_box and there you can initialize your own editor with wp_editor which can be customized. For example you can pass settings to the tinymce like force_p_newslines which should force every new line to start with new paragraph
I am using a CMS for images which is by default not generating alt attributes in image tags unless the alt text is provided.
I can provide an empty space " " into the alt tag to produce :
<img src="../.." alt=" "/>
Would this be a problem with screen readers, and web accessibility ?
There are three ways that HTML authors can write ALT text on their images:
With no ALT attribute given
With an ALT attribute that doesn't contain any readable characters
With an ALT attribute that can be read
These are handled in different ways.
In the case of an image that lacks an ALT attribute, like this:
<img src="fruit.png" width="100" height="100" />
... the default screen reader behavior is read the SRC attribute aloud. So, assuming that this image was hosted in the images folder on example.com, the screen reader would say: Graphic: h ttp://www.example.com/images/fruit.png. Omitting the ALT attribute is bad practice, because blind visitors wind up having to wade through tons of irrelevant gibberish.
In the case of an image that has an ALT attribute which does not contain any readable information, like either of these two:
<img src="fruit.png" width="100" height="100" alt="" />
<img src="fruit.png" width="100" height="100" alt=" " />
... the default behavior is to silently pass over that image. The screen reader cannot pronounce a space or an empty string; and so it says nothing. This is the correct way to suppress the announcement of purely decorative images. Note, however, that the most recent WebAIM screen reader usage survey found that most blind users want to know an image is there even if it doesn't convey much to them. So be judicious in suppressing images with empty alt text; use it only when there really is zero information conveyed by the image.
Lastly, of course, is regular alt text:
<img src="fruit.png" width="100" height="100" alt="Photo of apples." />
In this case the screen reader will say "Graphic: Photo of apples." Putting a period in makes the screen reader pause at the end of the ALT text.
Picking good ALT text is important, and can be hard. In general, if your image contains a picture of text, then you should reproduce that text (or a suitable abbreviation of it) in your ALT text. If it is illustrative or photographic, your ALT text should be a concise description of the photo's contents. If it's a complex image like a diagram, well, you may need to use the ALT text to direct the user to a more complete description elsewhere in the page. (The LONGDESC attribute was designed for this purpose, but isn't widely supported by screen readers.)
If your image is also a link, it's absolutely vital to have sensible ALT text; otherwise your blind visitors won't have any idea what the link does.
I recommend getting a screen reader (such as NVDA, which is open source) and testing with it. It can be -- excuse the bad pun -- an eye-opener.
If you are not using an alt text, you can go without the alt attribute. It won't validate, but it won't change a thing, it will work exactly the same. You are just pleasing the validator.
Using a space shouldn't bring any problems.
only problem is the customer wants the site to state that it is XHTML compliant - so we need the pages to validate :(