Accessible website
From the end of the month, this website must be accessible and I am currently trying to set this up.
I have created the website with the tool https://wave.webaim.org/ for accessibility. I have been shown a lot of errors, which I am trying to correct. The first thing to do is to adjust the menu.
For the menu, “tabindex=0” is specified for all pages. However, I have specified an order for editing. How can I specify ARIA attributes that then also appear on the website?
Best regards
Comments
Hi,
Changing tabindex from zero to any other is not available in Betheme or basic WordPress. To achieve that, you would have to edit the files, but we do not provide help with such modifications.
Regarding ARIA attributes, there is no setting to adjust them, but mostly they are generated automatically from the element titles.
Best regards
Hi,
the analysis of my page has revealed numerous contrast errors. Some of these relate to page titles in front of dark header images. Basically, I don't want to change the look of the page.
For people with disabilities, the header image only has a decorative purpose and is unimportant, the title is important. I would like to use the ARIA attribute “aria-hidden” for the header image to indicate that the header image should be ignored by screen readers. Please show me how I can set this.
Best regards
There is no option for that because this image is assigned to the Header_wrapper div:
If you add aria-hidden to it, then nothing within this div will be visible for people with disabilities, so the menu, logo, page title, etc.
Anyway, I believe even for people without disabilities, the menu is barely visible, so I believe it would be a good idea to adjust it.
Best regards
Thank you for the information. I will try to redesign the header.
But I still have one problem: On my blog page, only the post image of the respective post should be displayed; without linking, enlargement or anything moving. How can I switch this off?
Best regards
You can disable it in Betheme -> Theme options -> Globals -> Image frame:
Best regards
Thank you.🙂
Hello,
I still have a problem with the contrast. In my blog, the previews for other posts are displayed at the bottom right and left. How can I change the background color?
Best regards.
This color is taken from Betheme -> Theme options -> Colors -> Cotent: Theme color.
Best regards
That has already worked, thank you.
In my contact form, the contrast between the background and the text/button is also too low. Where can I change this?
I was informed of this during the error analysis for the contact form:
"Why It Matters
If a form control does not have a properly associated text label, the function or purpose of that form control may not be presented to screen reader users. Form labels also provide visible descriptions and larger clickable targets for form controls.
What To Do
If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls.
The Algorithm... in English
An <input> (except types of image, submit, reset, button, or hidden), <select>, or <textarea> does not have a properly associated label. A properly associated label is:
a non-hidden <label> element with a for attribute value that is equal to the id of a unique form control
a <label> element that surrounds the form control, does not surround any other form controls, and does not reference another element with its for attribute
a non-empty title attribute, or
a non-empty aria-labelledby attribute"
Do you have an example of how I can fix this error message?
Best regards.
Form styles can be changed in Betheme -> Theme options -> Colors -> Forms:
However, the button takes its style from Betheme -> Theme options -> Global -> Buttons: Highlighted:
Also, if you use the Contact Form 7 element, you can style it directly in the Style tab:
Best regards
Thank you. I was able to solve the problems with the contrast. The direct formatting with the style tab does not work for me.
After rechecking with WAVE I got basic errors in the form. WAVE says the following to fix the errors:
"If a text label for a form control is visible, use the <label> element to associate it with its respective form control. If there is no visible label, either provide an associated label, add a descriptive title attribute to the form control, or reference the label(s) using aria-labelledby. Labels are not required for image, submit, reset, button, or hidden form controls."
How can I implement this with BeTheme?
Best regards
Where is the part of your website from your screenshot?
Is it on some subpage?
Best regards
Best regards
There is a info when you click on the error:
It means that before every field, you must add a label tag that refers to the appropriate field. It should look like that:
Best regards
I tried this in the first line of my form.
The name field then appeared twice and in different colors.
The accessibility inspection no longer shows an error for the label, but now again shows an error in the contrast for the first name.
What can I change there?
Best regards
If you used the Contact Form 7 element, you can change the label color in the Style tab:
Best regards
Thank you. I have done that. The first element in my form is now OK.
I have replicated this exactly for the other elements.
However, when analyzing accessibility, the other elements are still marked as faulty. What have I done wrong?
Best regards
That is because only your first input has an ID given:
You must add to the rest of the inputs.
Best regards
Thanks for the help, it works now.🙂