We are currently doing some work in response to the new Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018 that came into place in September.
One of the main things we are doing is looking at the accessibility of our current Moodle theme [Adaptable 1.7] – specifically we are trying to ensure that the basic Heading structure on Course pages makes sense to anyone using a screen reader. We wondered if you were able to advise.
We have been using a tool called Wave to investigate the basic Heading structure of the current Moodle Theme. The following screen shot of WAVE is annotated to show the issues we have found.
Based on our current understanding and some experimentation with both WAVE and the NVDA screen reader we believe we should aiming to implement the following heading structure.
The above seems to have a sensible and logical structure that would be easy to follow using appropriate keyboard short cuts in a screen reader.
However, we are finding it really difficult to implement <h2> tags for Section headings. These seems to be “hard” coded to <h3>. Furthermore, we don’t not seems to be able to detect a <h2> tag on the course page using WAVE or NVDA screen reader. Given that the ATTO text editor formats lagre headings at <h3> it is difficult to understand why week/topic section headings should also be <h3>.
We be really grateful if someone could advise us on either
- How to change section headings to <h2>
- Why section headings should be <h3> from an accessibility perspective and what headings structure we should actually be aiming to implement
We would be very gratefully.
I only can answer the question related to Adaptable because most of your questions are moodle related as Gareth stated.
The header in Adaptable is totally customizable using the editor so you can add your own h1 tag and class to adapt the color and size.
BTW, very good job analyzing the theme accessibility. If you find any other issue related to Adaptable, please feel free to share it here and we'll try it to fix it.
Sorry guys, I missed out the important bit that we are currently using Moodle 3.4.3
Fernando, we have managed to wrap the sitetitle in renders.php with the following:
$retval .= '<div id="sitetitle"><h1>' . format_string($coursetitle) . '</h1></div>';
in the 5 lines which mention retval sitetitle.
The one remaining issue is how can we style the sectionname as a H2? is this buried in the Moodle core code for the Section. Any pointers much appreciated.
Keeping this as a H3 stops the site from flowing.
We've also noticed that if we create a new page in a course this is then marked up correctly as a H2 as it is no longer in a sectionname class
Thanks Fernando, that's how I did it at first, I'll change it back to this way.
If anyone else can help with solving the sectionname issue above, that would be great.
BCU had the h1 tag hardcoded in the site title but we removed this tag to allow more flexibility.
Now you can add more than one line to the header using different headings:
<h2>the most adaptable moodle theme</h2>
That's the reason you should use this approach instead modify the theme code.
The Clean theme does the same thing.
'8 January - 14 January' is a sectionname class and it is still a H3, no idea why this is as the ATTO editor starts header at H3. These should be H2 the heading above where ATTO begins. The question remains, how can it be be changed?
Or is it a case of changing the ATTO editor to be H4, H5, H6 for Large, Medium and Small headings?
All the page layouts for the Main Content Token is coded inside Moodle, so all headings h1, h2, h3, h4 etc., are preset and always have been for as long as I can remember, and I have been around for about 10 years now. Yes there may be one or two headings set in the Theme itself, however, themes can alter the font sizes for headers if they so choose.
The 'class' names of some headings have been changed a few times as far as I can recall, and are perhaps now in need of updating and bringing into the present day requirements for ACCESSIBILITY.
That said it is easy to change the size of the headings using CSS by restyling the font sizes you need for the headers. You can also change the Font sizes for ATTO too if you need to.
Hope this helps?
H1 (Site title)
--H2 (Left and Right block sections)
--H2 (sectionname) **This currently a H3**
---H3 (ATTO content)
----H4 (ATTO content)
-----H5 (ATTO content)
Changing the ATTO plugin to use H4, H5, H6 will not change existing content to these headings only future content.
Therefore we need to change the sectionname class to be H2, changing the CSS to make it look the same size as a H2 won't fool a screen reader.
Any further help in how to achieve the above would be greatly received.
I think there are a few difficulties with doing as you suggest. One is that the sections already flow under a H2 (Accesshide-topic outline)
All sections are LIs under that H2. I don't know what purpose that H2 serves, however, so maybe we can do without it and shift everything else up.
Can't really add anything about the Adaptable theme issues except to say that you can override the core renderers in a theme so you may be able to change the HTML structure in your theme (assuming you make a child theme of adaptable). But would will still make the same point about unintendingly breaking other things.