Azure B2C no labels showing up on profile editing page

Question

There are four user attributes required for our user profiles in Azure B2C. When you go to the B2C profile editing page, there are four text boxes, but no labels. There is no way for the user to know which text box represents which profile attribute. We are using the default setup, blue ocean template, with branding enabled. I see other messages implying you have to create a custom page to get labels. Is this true?

Answer 1

Hi @Michael Yeager • Thank you for reaching out.

The labels for the text boxes in all the B2C self-asserted pages with built-in/default templates are displayed inside the text boxes, as shown below. When you sign-up for a Local Account, the sign-up form also shows the labels inside the text boxes when default page templates are used. The problem with the profile editing page is that the attributes with values assigned, get pre-populated in the text boxes, which hides the labels. If you delete the prepopulated values, you can see the labels inside the text boxes as shown below:

However, if you use your custom HTML page, the labels can be displayed out of the text boxes, as shown below:

For your reference, here is the custom HTML page I have used: https://moviesdiag132.blob.core.windows.net/b2c/updateprofile.html

-----------------------------------------------------------------------------------------------------------

Please "Accept the answer" if the information helped you. This will help us and others in the community as well.

Answer 2

The link is erroring out, can someone please confirm if the there is any way to inject custom elements / tags such as labels in the HTML that gets generated by b2c?

Answer 3

In the markup generated by B2C there are labels, but they are hidden by css rules.
(This might be pending on the template version)

I did a solution to add a custom html file and embed css to change the visibility of the labels.
Im using custom policies, but I guess that solution works for built-in user flows as well.

b2clabels.png

Answer 4

Microsoft has removed the labels entirely which is surprising because it goes against UI best practice and fails WCAG/ADA accessibility requirements. For a business like the one I work for, ADA is a legal requirement. I hope MS works on a fix for this. A label and a placeholder serve different purposes on a form.

https://www.w3.org/WAI/tutorials/forms/labels/