Affects Version/s: 7.1.X, 7.2.X, Master
There are some issues in forms related to accessibility:
- There are wrong translations into Spanish;
Labels and inputs are not related; Contrast color is insufficient in paragraph field; Asterisk for required fields is not accessible;
- Single Selection, Multiple Selection and Grid fields should be using legend instead of label.
Steps to reproduce
- Start Liferay and change language to Spanish;
- Create a new Form adding a field of type paragraph (Check expected behavior 1);
- Also add a field of type Text and make it required;
- Add these fields as well: Single Selection, Multiple Selection and Grid;
- Add the form to a new page;
Inspect the DOM (Check expected behavior 2); Check the color contrast of paragraph's field body text with AXE (Chrome extension) or in https://contrastchecker.com/ (Check expected behavior 3); Check the asterisk for text field (Check expected behavior 4);
- Check if the labels on the Single Selection, Multiple Selection and Grid fields use label elements (Check expected behavior 5).
Expected behavior 1
Translation for 'Body text' is 'Cuerpo del texto'
Actual behavior 1
Translation for 'Body text' is 'Cuero del texto'
Expected behavior 2
Labels are related to the inputs they are labelling Actual behavior 2
There is no relation between labels and inputs. Expected behavior 3
There is enough color constrast between the color of the text and the background Actual behavior 3
There is not enough color contrast. Expected behavior 4
There should be some information, specially thinking about screen readers, saying that field is required Actual behavior 4
There is no information about that field being required.
Expected behavior 5
Fields that use radio buttons and checkboxes should be using the legend element.
Actual behavior 5
Fields that use radio buttons and checkboxes are using the label element.