Accessibility issues with hidden resources in Essential theme

Accessibility issues with hidden resources in Essential theme

由Tracey Collins發表於
Number of replies: 14

Hi,

I am using the Essential theme (v.2.8.1.5 (Build: 2015040900)) in Moodle v2.8.10 (Build: 20160111), although I also have a test environment with Moodle v3.0.2 and Essential theme v 3.0.0.5 (Build: 2016010204) that has the same problem.

When a resource or activity is hidden, the font colour is changed to light grey and has insufficient contrast to be able to be read easily. This is a problem for accessibility compliance and also just for general readability of the site.

Hidden resource

There is an even greater problem when an activity or resource is hidden within a hidden section.

Hidden resources in a hidden section

We use hidden resources regularly to provide information for teachers about the delivery of a course or unit. This information should not ever be visible to students. We need to hide the individual activities and resources (in the hidden section) so that students cannot navigate to an activity or resource using the 'This course' link in the menu bar, which we have found is active even if a resource or activity is hidden.

Is there a way to change the CSS in our theme (and maybe in core) so that the text and background colours are reversed for hidden resources e.g. white text on a black background, rather than using a faded grey font to indicate a resource is hidden? Or does anyone have a better suggestion to make these hidden activities and resources accessible?

Thanks,
Tracey

評比平均分數： -
In reply to Tracey Collins

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hi Tracey,

What supporting evidence do you have that the colour is not accessible?  Such as a report from the WAVE checker?  As any correction change I make has to be proven and validated that it fixes the issue.

Essential will get that shade of grey from Bootstrap (disabled value) - thus Clean etc. may have thus issue too.  Do you have the same issue with the Clean theme?

The drop down menu is a separate issue entirely.  I did fix something a few months ago in that area for M2.9+, but will need to reproduce and validate your assertion.

G

評比平均分數： -
In reply to Gareth J Barnard

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

RE: "We use hidden resources regularly to provide information for teachers about the delivery of a course or unit. This information should not ever be visible to students. We need to hide the individual activities and resources (in the hidden section) so that students cannot navigate to an activity or resource using the 'This course' link in the menu bar, which we have found is active even if a resource or activity is hidden." - currently there will be a link if one or more of the module resource types are visible to the user.  If one or more is there, then the link will be to the specific modules 'index.php' file for the course listing all modules of that type, something that can happen outside of the theme.

What steps do I need to perform to reproduce the scenario you are encountering?

評比平均分數： -
In reply to Tracey Collins

Re: Accessibility issues with hidden resources in Essential theme

由Mary Evans發表於

Hi Tracy,

Forgive me for intruding in this discussion with Gareth, but a thought just occurred to me.

The reason that 'hidden' activities and resources are only barely visible to the naked eye, is to allow the Administrator/Course creators to keep tabs on them. That being so, I would not consider that to be an 'accessibility' problem since those documents are deemed inaccessible by virtue of the 'HIDDEN' setting.

Would it not be easier to set up a hidden group and allow only a select few into that group so that they can read the course documents with ease?

Cheers

Mary

評比平均分數：Useful (2)
In reply to Mary Evans

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Ok,

I've looked into this (https://github.com/gjb2048/moodle-theme_essential/issues/629) and there is a problem with both Essential and Clean.  To be fair, only when both a section and a resource / activity are hidden.  When the former is hidden then an opacity of .5 is applied, when the latter is hidden, then the colour #999 is applied.  Used in combination they do appear (from my eyes) to be difficult to read.  This however this is not scientific.

To reproduce:

  1. Hide an activity / resource.
  2. Hide the section it belongs in.

What do you think?

評比平均分數： -
In reply to Gareth J Barnard

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Ok, no reply so far, but going to use the following overriding CSS for now:

.course-content ul li.section.hidden .sectionname > span,
.course-content ul li.section.hidden .content > div,
.course-content ul li.section.hidden .activity .activityinstance {
  opacity: 1;
  color: #999999;
}
.course-content ul li.section.hidden .sectionname > span a {
  color: inherit;
}
.activity.label .dimmed_text {
  opacity: 1;
  filter: alpha(opacity=100);
  color: #999999;
}
評比平均分數： -
In reply to Tracey Collins

Re: Accessibility issues with hidden resources in Essential theme

由Tracey Collins發表於

Hi Gareth,

I apologise for not responding earlier, I wasn't receiving emails from this forum. I will fix my subscription settings now.

The steps you took to reproduce the issue were correct. 

I ran the WAVE accessibility checker on the page to identify the contrast issue. Both the hidden resources and the hidden resources in a hidden section do not comply with the AA level contrast requirements.

Hidden resource:

Link showing contrast error

The hidden resources in the hidden section are not recognised by the WAVE tool, but when I use the Colour Constrast Analyser tool the text contrast fails:

Screen shot showing failed colour contrast results

There are also contrast problems with other standard text on our site and the Moodle.org site, which may be coming from the base theme:

Contrast error breadcrumbs

Contrast error on Moodle.org

I am concerned that any reduction in opacity causes problems with accessibility. Is there any other way to indicate resources and sections are hidden? Maybe a background colour, like a highlight?

Thanks for your work on this.

Tracey


評比平均分數： -
In reply to Tracey Collins

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hi Tracey,

In having a go with the tool, I found that the closest I could get was #595959:

Colour Contrast Analyser

which when combined with italic text and the removal of opacity gives:

Effect of #595959 colour and italic text in Essential theme.

Thus, I'll go with this in the next release.

Gareth

評比平均分數： -
In reply to Gareth J Barnard

Re: Accessibility issues with hidden resources in Essential theme

由Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

Gareth,

Just as an idea - if contrast (or lack of it) is an issue, would it be possible to use css (:before) to add an additional fa-icon to the hidden class to visually show resources that are, well, hidden?

Not entirely sure if its a good idea or not - might have a proliferation of icons, with the resource icon and that as well, but perhaps something (for us all) to think about as an option?

評比平均分數： -
In reply to Richard Oelmann

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hi Richard,

In recent reading, use of icon fonts for accessibility is proving to be a bad thing.  From what I gather the injection of the icons with pure CSS is not a good thing, but to use the mark-up and have 'aria-hidden=true' attribute.  Thus after six hours of work on Saturday, I've eliminated as much as possible in Essential such that FontAwesome icons are injected where possible with 'span' markup and in one place with 'i' tag as using 'span' breaks the editing menu in courses.

Therefore better to override the renderer that does the 'hidden' bit, or better still wait for the Mustache template partial in core that could then be overridden.

Ultimately, the best thing would be to remove the font and replace all the icons with SVG's - but that is a lot of work to convert all of FA's icons to SVG then override the correct one in 'pix_core' etc.

G

評比平均分數：Useful (1)
In reply to Gareth J Barnard

Re: Accessibility issues with hidden resources in Essential theme

由Tracey Collins發表於

Thanks Gareth, will the changes you are going to release work with older versions of Moodle (we are still on v2.8) or just on the current version?

Tracey

評比平均分數： -
In reply to Tracey Collins

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hi Tracey,

I have worked very hard to keep the M2.9 version in line with improvements to the M3.0 version which is at the top of the tree, so will back-port to that.  I have not updated the M2.8 version (2.8.1.10) since 21st September 2015 and to bring it up to date would mean cherry picking every single appropriate commit that was applicable (identifying if it applied to that version of Moodle) since then - 290 commits to look at.  The differences between the versions are: https://github.com/gjb2048/moodle-theme_essential/compare/MOODLE_28...master.  A very time consuming task and not something I'm prepared to undertake without financial compensation.

Thus the change will go only into M3.0 and M2.9.  You are of course welcome to examine the two commits:

https://github.com/gjb2048/moodle-theme_essential/commit/a694f759482d79291331027891ae9629f73cd0ce

https://github.com/gjb2048/moodle-theme_essential/commit/ea8982a80620e7d111d1a9db9313b8d4daf3f4a7

And patch your version of the theme.

Kind regards,

Gareth

評比平均分數： -
In reply to Gareth J Barnard

Re: Accessibility issues with hidden resources in Essential theme

由Tracey Collins發表於

Thanks Gareth, I totally understand and I am happy for the fix to be applied to the most recent versions. Thank you.

評比平均分數： -
In reply to Tracey Collins

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hi Tracey,

RE: "We use hidden resources regularly to provide information for teachers about the delivery of a course or unit. This information should not ever be visible to students. We need to hide the individual activities and resources (in the hidden section) so that students cannot navigate to an activity or resource using the 'This course' link in the menu bar, which we have found is active even if a resource or activity is hidden." - https://github.com/gjb2048/moodle-theme_essential/issues/630.

Ok, yes I can replicate when the activities / resources are in the orphaned section but have a 'shown' state. However I am unable to do anything about it because I am unable to override '/course/resources.php' / '/mod/assign/index.php?id=XX' etc. Core would have to be changed such that those 'viewers' do not show the contents of orphaned sections.

However, when they are 'hidden' then they do not actually appear. Thus the students will not be able to see them until you want them too anyway. Its just that Essential provides an alternative link to something that they could work out anyway.

Gareth

評比平均分數： -
In reply to Gareth J Barnard

Re: Accessibility issues with hidden resources in Essential theme

由Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hi Tracey,

When this lands: MDL-4782 - it should go some way to solving the orphaned hidden activities / resources issue.

Gareth

評比平均分數： -