Label confusion

[ssbbstw]

WB 20.1
Publish html and Label confusion.



file .wbs
https://app.box.com/s/el9equjqd6kkhyxneq3nmia48pcxl256

[Pablo]

In the project you have shared, I do not see anything wrong.

[ssbbstw]

[Pablo]

In the project you have shared, it works correct for me.

If it does not work for you then please update the project to demonstrate the issue.

[ssbbstw]

This is my designed screen:



What is your screen?

[Pablo]

The problem is that you are using the form as embedded page.
In that case 'for' will not work.

[ssbbstw]

The problem is that you are using the form as embedded page.
In that case 'for' will not work.

[ssbbstw]

The problem is that you are using the form as embedded page.
In that case 'for' will not work.

None of these problems about v19.4.4!!

[Pablo]

There have been no changes to this functionality, so you must be doing something different.

If you need further help then please provide a demo.

[ssbbstw]

There have been no changes to this functionality, so you must be doing something different.

If you need further help then please provide a demo.

The "demo" is file ".wbs"? or website?

[crispy68]

it's a .wbs file.

[BaconFries]

Before you share the project (.wbs) please carefully read all of the information from the url below.
Example of what to share.
1 page only with the issue(s) remove any manually added code/script (php) you use, remove any extensions used.
viewtopic.php?t=82134

[ssbbstw]

Before you share the project (.wbs) please carefully read all of the information from the url below.
Example of what to share.
1 page only with the issue(s) remove any manually added code/script (php) you use, remove any extensions used.
viewtopic.php?t=82134

I used an embedded approach to design the website, and if there is only one page design, it is impossible to test the problem.

[AliGW]

Include in the .wbs file JUST what is needed to demonstrate the problem. Leave out anything that is not relevant.

[BaconFries]

I used an embedded approach to design the website, and if there is only one page design, it is impossible to test the problem.

When I wrote only one page it was referring to the page that is using the embed page and not your full site or a link/url. Having to go through page after page is time consuming so that is why it is asked to provide only what is required.

And to be honest you already know this as you have previously shared projects (.wbs).

[ssbbstw]

simple demo .wbs
https://app.box.com/s/y2sht8ic1ddc5veheh94kt8kdn9fkhrv

[Pablo]

You wrote that it worked in version 19. So, I need a WB19 project so I can see the difference.
As far as I know this did not work in WB19 either. It was not designed to be used this way.

In my opinion, you will need to solve this in a different way.

[ssbbstw]

Please ignore the saying that WB19 is effective!

As long as the problem on WB20 can be solved.

[ssbbstw]

I found that the layoutGrid is correct if it has only one column.
bad is two column.

test ok.
https://app.box.com/s/qsez0vczcgrmx4lvz2u1bidshm76s26u

[Pablo]

I'm sorry there is no easy way to implement this functionality. It is related to the way label is nested.

[ssbbstw]

I'm sorry there is no easy way to implement this functionality. It is related to the way label is nested.

I change 'Label' to 'Text', It's all right.
Why ?

[wwonderfull]

Was just reading the post for a long time and wanted to share some knowledge.

Using label is a perfectly fine practice both for accessibility and for visual way of reading a label. Now it is about the tricks on how we develop the site in a way which serves the purpose along with the design in an intuitive way.

If I were to do a workaround for this problem, then instead of below code:

Code: Select all

<label for="username">Username</label>
<input type="text" id="username">

I would use the aria-label attribute which is equal in terms of accessibility almost like a replacement for the labels for attribute but does not visually show a textual label but is readable on the client code side although it will pass the google lighthouse test for accessibility for screen readers without visually displaying a label:

Code: Select all

<input type="text" aria-label="Username">

But at the same time, we can just use a normal text mimicking as a label and have both visual text and accessibility using the attribute "area-label"

So final output could be like this:

Code: Select all

<span>Username</span>
<input type="text" aria-label="Username">

If you still need help you can write to me from contact.

Note: that now a days people use placeholders and don't actually use labels much on modern websites as I have seen. But if still it is needed for some reason, then can use labels which is fine. But as you are using embedded pages, I have offered you a solution insight.

[Pablo]

I change 'Label' to 'Text', It's all right. Why ?

A label is different type of object.
Basically the label needs to find the 'for' element on the page when the code is generated . Normally if can simply scan the page, but if the form is nested in a embedded page then the code does not exist until it is merged at the final stage of the publishing task.

[ssbbstw]

So final output could be like this:

Code: Select all

<span>Username</span>
<input type="text" aria-label="Username">

But it has no effect.
Can you give me a .wbs test it?
Thank you!

[ssbbstw]

I change 'Label' to 'Text', It's all right. Why ?

A label is different type of object.
Basically the label needs to find the 'for' element on the page when the code is generated . Normally if can simply scan the page, but if the form is nested in a embedded page then the code does not exist until it is merged at the final stage of the publishing task.

I'm also a programmer.
I know it will take time to figure out how to solve the problem.

[wwonderfull]

So final output could be like this:

Code: Select all

<span>Username</span>
<input type="text" aria-label="Username">

But it has no effect.
Can you give me a .wbs test it?
Thank you!

You need to add some style to that <span> or else the span does not have any color font size or even font family. That Example I gave is just for demonstration.

Aria-label, which is an accessibility attribute in HTML. The aria-label is used to provide a textual description for an element that does not have visible text, ensuring screen readers can identify it correctly you can do that same thing with the tools of wysiwyg web builder. Drag and drop a text, then an editbox, write title of the editbox and if you need to add the aria-label attribute you can do that from the object html -->inside tag. So see the image and then try.

[Pablo]

Using text as a label for a for field is not correct. You will need to use a label.

Again, the problem is the use of the label on a embedded page (and other strange layout nesting). This is not supported.
You will need to use a different layout concept. For example, a master frame. And keep the number of nested containers (layout grid, tabs, etc limited).

Also, note that placing an embedded page (with flexible layout grid) on a (fixed) form does not make any sense. I strongly recommend to reconsider you layout.

- Forms / Layers are for fixed layout
- Layout grid / flexbox are for flexible layout

If you want implement a form in a layout grid then check the 'enable form' property of the grid.

[wwonderfull]

I agree with @pablo because the problem is that labels has issues with embedded page which is the reason "for" attribute is showing different. That is the actual issue. The work around I had shared was removing labels and the whole need of "for" attribute. Not the actual solution though I thought as the "for attribute" has a mismatch it is better to remove it. But as @pablo said if you use master page your labels would work perfectly fine so change the website layout.

[ssbbstw]

Thanks I will take your suggestions into consideration!

[ssbbstw]

Sorry, I wanted the layout to be with the text on the left instead of on top.

[Pablo]

I'm sorry, it is not clear what you trying to do based on your screenshot.
Can you please be more specific.