Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4.0] Accessibility Checker [WIP] #31090

Closed
wants to merge 23 commits into from

Conversation

brianteeman
Copy link
Contributor

@brianteeman brianteeman commented Oct 14, 2020

Summary

This PR implements the html_codesniffer from squiz in two different ways

  1. A plugin that when enabled will perform a full accessibility check on the current page in the front end
  2. An xtd-editor plugin button that will perform a full accessibility check of the content in the editor. Tinymce, codemirror etc

Test Instructions

  1. Apply the pr
  2. npm i
  3. database fix and then discover the two plugins
    Alternatively use the prebuilt package https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/31090/downloads/36414/

Page Check

Enable the System - Accessibility Checker plugin
Visit the front end of the site and you will now see the checker

It is fairly self explanatory and can be set to use section 508, WCAG2.1 A, WCAG2.1 AA and WCAG2.1 AAA standards - defaulting to AA

aa

The checks

For a full list of the tests that are performed see http://squizlabs.github.io/HTML_CodeSniffer/Standards/WCAG2/

Customisation

Currently the implementation uses the unmodified code from upstream. However it can be customised with our own css or if we fork it then it can be customised even further.

See the fork from the belgium government as an example https://openfed.github.io/AccessibilityCheck/
image

Activation

Currently the checker is active and visible to everyone whenever the plugin is enabled. This could easily be changed to a specific user or usergroup BUT that would mean that they have to login and can therefore only check the site in that state and not also in the guest state. So I didn't implement that method. Another option would be to only make it visible when you also enter a param in the url - like with tp=1 for the template preview.

xtd-editor plugin

To date this is only implemented as far as there is a button on the editor area. If you are using tinymce then its in the CMS Content dropdown. If you are using any other editor or none then it is below the textarea.
image
image

Activation

The plugin needs to be enabled and then the check is performed when the button is clicked. this is not implemented yet

Display

The results in the admin will be displayed similar to
image

.
This is part of the EU funded research project for improving the process of creating accessible content by authors https://accessibilitycluster.com/about

The aim of the project is mainly in researching and identifying key needs and areas where all cms can benefit. The project might eventually produce some code examples but that's not the main aim.

The research conducted in stage one of the project identified numerous needs by content authors and we are working on testing and evaluating the possibilities for improving each one of those. Not all of them apply to Joomla or we already address those issues.

@joomla-cms-bot joomla-cms-bot added Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.0-dev labels Oct 14, 2020
@brianteeman
Copy link
Contributor Author

anyone have a clue about the drone error?

@richard67
Copy link
Member

anyone have a clue about the drone error?

@brianteeman No. But it could be the unrelated, occasionally happening failure. I just restarted drone, maybe we are more lucky this time.

@richard67
Copy link
Member

@brianteeman Drone failed again with the system test. It fails already when installing the CMS. Here a link to the screenshot of the result: https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/31090/system-tests/36434/InstallCest.installJoomla.mysql.fail.png

@richard67
Copy link
Member

@brianteeman My suggested changes above will solve the drone issue.

@richard67
Copy link
Member

@brianteeman P.S.: Don't forget to add some update SQL for adding the new extensions (plugins) before removing draft status.

brianteeman and others added 2 commits October 15, 2020 13:19
Co-authored-by: Richard Fath <richard67@users.noreply.github.com>
Co-authored-by: Richard Fath <richard67@users.noreply.github.com>
brianteeman and others added 2 commits October 15, 2020 15:02
Co-authored-by: Richard Fath <richard67@users.noreply.github.com>
Co-authored-by: Richard Fath <richard67@users.noreply.github.com>
@richard67
Copy link
Member

@brianteeman If you want to attract people for feedback and maybe already testing, despite of the draft status, it could help to add something like "[RFC]" to the title.

@zwiastunsw
Copy link
Contributor

zwiastunsw commented Oct 15, 2020

I don't see any sense in integrating the HTML_Sniffer bookmarklets with Joomla. It does not bring anything new. There are other equally good or even better bookmarks and browser extensions that you can easily use. (ARC Toolkit, AXE, Siteimprove) . You don't need to integrate any of these tools with Joomla to use them.

The editor extension looks interesting.

@brianteeman
Copy link
Contributor Author

What you miss is that by putting it in front of the user then they will start to use it. Hardly anyone checks their site for accessibility. We have to make it easier for people and to not assume they know as much about accessibility as you know. If they did then we wouldnt have so many joomla sites (even those on joomla.org) which massively fail accessibility.

@richard67
Copy link
Member

Yes, and it can be disabled, right? So nobody is forced to use it. I am ok with having it in the CMS, I think it's a help.

@zwiastunsw
Copy link
Contributor

This is an argument. But this, in my opinion, will not solve the problem of education. If someone doesn't want to deal with accessibility, the add-on won't convince him much.
I imagined that it will be a tool that will examine several dozen typical aspects of accessibility throughout the site and report that they may cause problems. For example, that images do not have alto attributes. For example, that there are functions that do not have keyboard event handling (e.g. in applied add-ons, extensions). Itp.
If you make a good addition for authors, I will be happy.

@brianteeman
Copy link
Contributor Author

@zwiastunsw you really are impossible to please on anything. Did you actually try it. It does exactly what you "imagined" on a per page basis.

@brianteeman
Copy link
Contributor Author

Yes, and it can be disabled, right?

As stated in the first post it is NOT enabled by default

@richard67
Copy link
Member

Yes, and it can be disabled, right?

As stated in the first post it is NOT enabled by default

Yes, and when it has been enabled it can be disabled again. So all is ok.

@zwiastunsw
Copy link
Contributor

@brianteeman: Please! I really know what I'm saying, I know what HTML_CodeSniffer does and what it does not do.

@brianteeman
Copy link
Contributor Author

@zwiastunsw Sorry I forgot that you know everything and are far more knowledgeable than anyone and what you say is always perfect and far more valuable than extensive user research conducted by the EU. I will remember that in future and won't make the same mistake again. Like everyone I look forward to your contribution to Joomla.

@alikon
Copy link
Contributor

alikon commented Oct 15, 2020

from a quick test only System - Accessibility Checker has been discovered (i'm using postgresql)
the same happens on mysql

@brianteeman
Copy link
Contributor Author

@zwiastunsw may I remind you that I stated in the RFC

Mode 2 a site plugin that could be enabled (like debug mode) for checking the full page in the frontend

Which you said "This is a very good idea!"

@alikon
Copy link
Contributor

alikon commented Oct 15, 2020

i've followed the Test Instructions .....

but when i try to use the plugin on editor i got this ....
Screenshot from 2020-10-15 20-04-44

i'll try to use the prebuild package later....

p.s.
btw, imho, this is a good step in the right direction

@brianteeman
Copy link
Contributor Author

To date this is only implemented as far as there is a button on the editor area

@zwiastunsw
Copy link
Contributor

@brianteeman. Only you are the infallible genius in this group. You always have been. I wish you all the best. Just a little more and you'll stay here alone.

@alikon
Copy link
Contributor

alikon commented Oct 16, 2020

using codemirror

image

@brianteeman
Copy link
Contributor Author

@alikon thats not done yet as stated in the original post

@brianteeman
Copy link
Contributor Author

brianteeman commented Oct 16, 2020

Closing this for now until I finish the editor part. didnt get any feedback on the activation method for the front end which I had hoped for and just the usual negativity from the accessibility team despite delivering exactly what I said would be delivered that they were so enthusiastic about.

@richard67
Copy link
Member

@brianteeman Sorry, I've missed the activation method question.

Currently the checker is active and visible to everyone whenever the plugin is enabled.

Would be sufficient for me since I think people will mainly need it when in development mode, i.e. on a copy of their live site or on the live site when in offline mode and only a logged in superuser can check it.

This could easily be changed to a specific user or usergroup BUT that would mean that they have to login and can therefore only check the site in that state and not also in the guest state.

I think the guest state is most important for the most sites, so it would need to check that, too. Binding it to a usergroup could maybe confuse people, but I'm not sure about that.

Another option would be to only make it visible when you also enter a param in the url - like with tp=1 for the template preview.

That sounds good to me. Maybe this could be extended by having a link in backend to call the frontend with this parameter, like we can call a template preview with a link. In this case we should make sure that the parameter will be added to URLs when it is set and we navigate to another page of the site so that the whole frontend remains in that mode until we call an URL without that parameter set. Just an idea, not sure if that would be a way to go.

@brianteeman
Copy link
Contributor Author

brianteeman commented Oct 16, 2020

I did go down the root of the template param approach as that was my original thoughts/aims but the problem was that it does not persist across pages and while it is good to be able to have a link in the admin this way it would be frustrating to have to do that for each page. For example you can check the article page but you wouldnt then be able to check the blog article page. Unless someone has a solution to make it persist across pages?

@HLeithner
Copy link
Member

If we add an a11y checker for frontend templates I would suggest to go the same way as the language debugger. Activating it in the global system settings (especially if we have more then tool). Alternate I would had it always active as soon as the plugin is active. Adding an option to the plugin doesn't sounds good.

But first I would really like to see the editor checker, I think that's more important for the user.

@brianteeman
Copy link
Contributor Author

on hold as this is a new feature so has to wait for 4.1 :(

@brianteeman brianteeman deleted the oc1-a11y branch January 4, 2022 17:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Language Change This is for Translators NPM Resource Changed This Pull Request can't be tested by Patchtester
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants