CKEditor 4 and figure widget, how to express "title caption" or two figcaptions? - html

The CKEditor 4.3 demo show an example of widget for work with HTML5 figure tag.
As a user (editing the demo text) I can not edit a second figcaption (one before image, as "figure title", and other after image, as caption): when edit (by CKEditor's source code) before, it goes after, when I add a paragraph (p tag) before image, also goes after. So, there are no way to user express distinct "head-caption" and "foot-caption", always CKeditor put after image.
There are some configuration to enable "head-captions"?
The edited source code:
<figure class="caption" style="float:right">
<figcaption>HEAD - Test</figcaption>
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
So, CKEditor transforms into,
<figure class="caption" style="float:right">
<img alt="Apollo-CSM-LM"
src="http://b.cksource.com/a/1/img/demo/apollo-csm-lm.png" width="200" />
<figcaption>HEAD - Test</figcaption>
<figcaption>FOOT - Apollo CMS-LM spacecraft</figcaption>
</figure>
Idem with <p>HEAD - Test</p>. If I use only the <figcaption>HEAD - Test</figcaption>, it also goes after image (impossible to express a "before img caption").
NOTE-1: "head" and "foot" figcaptions are both valid in HTML5, as showed in this fiddle.
NOTE-2: another problem is a caption with more than one paragraph. CKEditor transforms it in a BR, that is not what author need in a typical journal.
NOTE-3: for this related needs — use of paragraphs, use of "before image" caption, and use of two captions —, see all needs of a typical journal at an stable standard like JATS fig element, or millions of article examples at PMC.

Short answer - no, there is no config option for that.
Some details - you're using the image widget, which is supposed to handle figure.caption>img+figcaption case. Specific widget may not work with every possible input and it happens in this case.
If you want to remove that limitation there are two ways:
Don't use the image widget by disabling it or remove class="caption" from your HTML. For example this HTML will not be changed:
<figure>
<figcaption>1</figcaption>
<img src="..." ...>
<figcaption>2</figcaption>
</figure>
Also, the enter key will work in a standard way inside figcaptions (will create <p> tags).
The other way, if you want to use the image widget, is to modify its behaviour. In case of simple widgets it can be done without touching widget code, inn the widgetDefinition event listener. However, image widget is pretty complex, so you'd have to change its code.
To change enter key behaviour, just change the widgetDefinition.editables.caption.allowedContent - it has to contain a p tag. This part can be done in widgetDefinition listener.
In order to be able to use two captions, you'd have to add another nested editable and modify the plugin code, because it handles only img+figcaption case.

Related

Accessibility: better place to place tabindex=-1 to avoid duplicate links?

This question is about Accessibility.
Here is my code:
<a href="https://example.com/url-to-details">
<img src="https://example.com/item.png" alt="some description">
</a>
some description
It's not perfect, as we know we should avoid Adjacent links go to the same URL (this is what the WAVE accessibility tool says for me on my webpage about this piece of code).
With another words, the problem here is you use th Tab key consequently and still appear on the same link. This is not perfect.
My solution is to set tabindex="-1" for one of the links.
So, my questions are:
1. is it a good idea, or you have a better approach?
2. Which code is better from the Accessibility point of view:
<a href="https://example.com/url-to-details" tabindex="-1">
<img src="https://example.com/item.png" alt="some description">
</a>
some description
or
<a href="https://example.com/url-to-details">
<img src="https://example.com/item.png" alt="some description">
</a>
some description
P.S. There is a 3rd approach: to unite two <a></a><a></a> into one such as <a> picture + some description</a>, but I would avoid it for some reasons.
P.P.S. The description text "some description" is equal for both the image description and the text in the anchor tag.
I don't see a use case for having both an image link and an adjacent textual link that use the same URL. It should be a single link, so you have three options:
get rid of the image link,
get rid of the textual link,
combine the image and the text into a single link, where the image has an empty alt attribute:
<img src="https://example.com/item.png" alt=""> some description
In the third case, the alt attribute should be empty in order to avoid duplication of text (screen reader users don't want to hear the link text twice). This also results in simpler code that does not rely on tabindex="-1". See also WCAG Technique H2: Combining adjacent image and text links for the same resource.
Note that using two adjacent links, both with the href attribute and one of them having tabindex=-1, as proposed in the question, will result in both links being listed in a screen reader's list of links. This duplication should be avoided.
Assuming that your alt description should be equal to your link text is a misguided approach, in my opinion.
Let's say you are designing a products list page for an online store.
If the link goes to a product detail page, then the link text should describe that detail page. However, the image alt should describe the image itself, not the detail page.
.link {
display: flex;
flex-direction: column;
align-items: center;
}
<a class="link" href="https://www.mywebsite.org/detail-page-100">
<img class="link-img" src="https://picsum.photos/200" alt="2 puppies running through a meadow in the summer sun">
<span class="link-desc">Buy organic pet food - 5kg</span>
</a>
The tabindex only changes the keyboard order, but screen reader will still announce the same link twice.
Making the img clickable using javascript will avoid annoying keyboard users or screenreader users, letting mouse users click on the image itself.
From a purely WCAG accessibility point of view, nothing has to change in the original code. That fact that WAVE points it out is just an artifact of that tool. It's not an error, but an "alert" (in WAVE terms). The doc for WAVE says this about "alerts":
The goal should not be to get rid of all icons, except for the errors. Alerts will require close scrutiny - the[y] likely represent an end user issue.
The key being that alerts are "end user" issues, meaning usability or user experience issues. Not accessibility failures.
So, if you're trying to comply to WCAG AA, having a redundant link is not a failure and does not have to be fixed. But if you're looking at the user experience, reducing the number of tab stops and links that point to the same destination is always a good thing.
How you fix that issue seems to be the crux of the OP. When two links that are adjacent point to the same location, the best way is to combine the links into one. Adding tabindex="-1" to one is generally a bad idea because that only affects keyboard users and not screen reader users.
I would keep them both, because if a person using a screen reader is tabbing through your website you would like them to hear the image description as well as the text in the anchor tag.
The correct answer is - it depends.
If your image better describes your link, then use the image.
If your anchor tag better describes it - then use the <a>.
Some info for tabindex
Please see all the accessibility you can add to a link here

Markdown - icon on the left of a title

so what I want is on a given H1 main title to have an icon on the left-hand side. Unfortunately, so far I did not find any way to achieve this. One potential variant is to write bare bone HTML for both, however, I don't get the benefit of the markdown inside the title.
Does anyway know any better way to do this?
First to show what I actually want is this (this was done with picture editor for demonstration):
I have tried this:
![image-title-here](https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png)
# Quite a long title, potentially going over several lines
Quite a long title, potentially going over several lines
This does not work at all
![](https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png){:style="float: right;margin-right: 7px;margin-top: 7px;"}
# Quite a long title, potentially going over several lines
{:style="float: right;margin-right: 7px;margin-top: 7px;"}
Quite a long title, potentially going over several lines
Using html like so, does not recognize the markdown:
<p align="center">
![]((https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png)
</p>
Using direct html also:
<div style="float: left;"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="128" height="128"/></div>
# Quite a long title, potentially going over several lines
Here if the title is not on a new line it is not recognized as markdown.
EDIT The suggested answer looks correct on stackoverflow, but on my github it looks like this:
The question is can we make the title to be aligned with the top of the image?
I used image html tag and a space before the header for my GitHub project repository README.md file. to set my image on the left and title on the right. Here is the code for it.
<img align="left" width="80" height="80" src="https://raw.githubusercontent.com/akarsh/akarsh-seggemu-resume/master/akarsh%20seggemu%20resume/Assets/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60%403x.png" alt="Resume application project app icon">
# Resume application project
This is how it looks,
You can see the project readme by clicking on this link to the GitHub repository
Bad news, GitHub does not support the full set of HTML elements in a README.md file. Here is a write-up about what is supported. I also found out a bit more in this StackOverflow question from 4 years ago.
One of the resources mentioned in that question is this whitelist.
If it worked, what you would need is similar to what is below, which I have kept for your reference. The description is aimed at your problem description. Unfortunately, it looks like GitHub overrides the style attribute, replacing it with width: 100% and forcing the text to wrap below the image.
What should work (but doesn't): The style is attached to the image itself. Attaching it to the div affects the entire div. Note: the <h1> consists of both the image and the text.
<h1> <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"
width="128"
height="128"
style="float:left;">
# Quite a long title, potentially going over several lines and on and on and on and on and on and on and on and on and on

Tooltip of an "img tag" inside an "a tag"

I'd like to know the difference between title attr of the tag "a" and alt attr of the tag img.
Also, which should I use when I have an image inside an a? Just like in this case:
<a class="duplicar" href="#"><img src="Images/btnSegDuplicar.gif" alt ="Duplicar" width="76" height="20" /></a>
Right now, as you can see, I'm using the alt but I'm having a little issue. No matter the browser in my development server the tooltips is shown, but in my production server it is not. I tried using both of them (alt and title) and it worked, but it is kind of ugly. Why is that difference between both servers?
You should always use the title attribute for tooltips. With images as well as with anchors.
The alt attribute is solely for the purpose of displaying a text when the image can not be viewed for some reason. That this text is sometimes shown as a tooltip is an incidental artifact of some implementations, and by no means a part of its specification.

Semantic Thumbnail Indication

Given the following link to an image:
Title
What is the most semantically sound method for indicating the location of a thumbnail?
The best I could come up with so far is using data- attributes like so:
Title
However, it doesn't seem very semantically sound. Is there a better or more correct way to do this?
Why not use an <img> element? You can give it a class to indicate that it's a thumbnail and hide it with progressive enhancement if you need to. That way, the thumbnail of the image will be shown in the absence of JavaScript/CSS:
<a href="path/to/img.jpg">
<img src="path/to/thumbnail.jpg" class="thumb" alt="Thumbnail" />
Title
</a>
Or am I being too naïve?
Title
Simple and keeps the original path intact while just adding a suffix to indicate that the image is a thumbnail. We use this all the time on our sites and it makes things easy.

For images, what is the benefit of using the name element? name="...."

I want to know what the difference is between alt="" and name=""
Would it be better to put the filename within the alt tag, or the description of the photo?
What makes better sense, both from SEO and validation stand-point?
Using the ALT attribute is more useful in terms of search engine optimalisation. Using the NAME attribute is mainly useful for internal page anchors.
The ALT attribute is intended to provide an alternate text that describes the image for people who use screen-readers, or search engines, for example.
The name attribute is mainly used for internal anchoring, which allows you to navigate within a page using anchors.
Example usage of the name attribute:
<!-- following ancor can be referenced as http://<your_url>#post-123 -->
<a name="post-123">permanent link to some post</a>
Example usage of alt attribute:
<!-- following image shows "FooBar Company Logo" when images can't be shown -->
<img src="logo.jpg" alt="FooBar Company logo" />
For more information regarding links in general: http://www.w3.org/TR/REC-html40/struct/links.html
For more information about how and when to use the ALT attribute, see:
http://www.w3.org/QA/Tips/altAttribute.
The name attribute exists only to provide a name to refer to in JavaScript.
The alt attribute provides an alternate description for search engines, blind people, when the image could not be loaded, etc.
The title attribute provides a description which will be shown when the user hovers over the image with his mouse - some (but not all) browsers will use the alt attribute for this purpose when there is no title
I'd be a little wary of putting the file name in the ALT tag, since it would be displayed if images are turned off. Typically you set the ALT tag to server as a place holder with something like "Site Logo" or something else to indicate what the image is.
The NAME tag is used for anchoring and the like. If you wanted to create a link that scrolled a long page to your image, you would reference it through this.
Yeah, definitely put a description in the alt tag. It is really important for the visually impaired as this is what the screen readers will read when they come across an image. The only potential catch with this is that the alt tag is treated as tool tip text by some browsers, however, you can override that behavior with setting title="".
The alt attribute is intendet to supply an descriptive alternative in text form for the image. So if you have an image that shows a sunflower, you could use:
<img src="sunflower.jpg" alt="image of a sunflower on a sunny day">
The name attribute in intended to name the image for scripting so you can access it using images["sunflower"]. But nowadays you should use the id attribute instead.
You definitly want to use the ALT tag - for all the reasons mentioned above, and: this tag is mandatory according to W3C so you need it if you want to create "compliant code" (see e.g. w3schools).