[#24542] - [4.0] TinyMCE a11y-checker
- Closed
- 21 May 2019
- Medium
- Build: 4.0-dev
- # 24542
- Diff
- astridx:tiny
- Pending Hound Hound is busy sniffing around... Details
User tests: Successful: Unsuccessful:
Summary of Changes
I add the plugin https://github.com/instructure/tinymce-a11y-checker to TinyMCE
Test instruction
-
Apply this pr
-
You need to run
npm install -
See a button in the toolbar. The symbol is not OK. But this is only a Request for Commands. There are some other issues to work on, if you like this plugin. For example: Add an option to add or remove it ..
-
For testing a11y issues you can use this text.
<h1>Test Document</h1>
<h4>the document for testing</h4>
<p><img src="http://placekitten.com/640/480" width="300" /></p>
<table width="100%">
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<p><img src="https://canvas.instructure.com/images/login/canvas-logo@2x.png" alt="canvas-logo@2x.png" width="300" /></p>
<p style="color: #ccc;">Fusce id ligula rhoncus, consequat augue aliquam, sagittis ligula. Morbi euismod rutrum dignissim. Ut sed elementum mi. Pellentesque condimentum nisl non eros pretium, ut pharetra urna sodales.</p>
<p><a href="https://en.wikipedia.org/wiki/Free_to_Choose"> <img src="https://placekitten.com/480/640" alt="you are free" width="300px" /> </a> <a href="https://en.wikipedia.org/wiki/Free_to_Choose">You are Free!</a> <img src="https://imgs.xkcd.com/comics/visual_field.png" alt="I recently learned something that solved a mystery that had bugged me since childhood--why, when I looked at an analog clock, the hand would sometimes seem to take a couple seconds to start ticking. Google 'stopped clock illusion'." /></p>
<h1>this is a really big heading tag. 51 chars long even. this is a really big heading tag. 51 chars long even. 12345678901234567890</h1>
<p>Time for some lists!</p>
<p>1. List item</p>
<p>2. List item</p>
<p>3. List item</p>
<p>Time for some bullets!</p>
<p>- List item</p>
<p>- List item</p>
<p>- List item</p>
<p>Edge cases:</p>
<p>1. List item</p>
<p>2. <strong>List item</strong><br />Something separated by a break</p>
<p>3. List item</p>
<p>- List item</p>
<p>- List item</p>
<p>- List item</p>
<p>Split breaks:</p>
<p>1. List Item<br />2. List Item</p>
- After you click on the button, the check element is marked blue and you see hints on the right side.
Documentation Changes Required
Yes
Misc
License is MIT. It should work with Tiny 4 and Tiny 5 - so we could use it in staging, too.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | JavaScript Repository NPM Change Front End Plugins |
franz-wohlkoenig
- | Category | JavaScript Repository NPM Change Front End Plugins | ⇒ | Front End JavaScript Plugins Repository |
And now the question that has me blacklisted by a lot of people. Does this plugin and concern really need to be a core feature or can it be integrated with a Joomla plugin? There is nothing wrong with an improved focus on accessibility in core, but does an accessibility checker plugin that will only work for one of the core editor options really need to be included as part of the core package? How reliable is an accessibility checking plugin in the editor context going to be considering the editor generally doesn't have the styling needed to show content the same way it would be displayed on a frontend page (unless you're doing all your styling inline using the WYSIWYG)? This seems like it would at best cover HTML semantics but wouldn't be able to adequately check other accessibility concerns that may or may not be present without the context of the rest of the page structure.
| Labels |
Added:
J4 Issue
NPM Resource Changed
?
?
|
||
| Category | JavaScript Repository Front End Plugins | ⇒ | JavaScript Repository NPM Change Front End Plugins |
Does this plugin and concern really need to be a core feature or can it be integrated with a Joomla plugin?
Yes and yes but it would be better in core
that will only work for one of the core editor options really need to be included as part of the core package?
Same is true of the drag and drop image plugin
How reliable is an accessibility checking plugin in the editor context going to be considering the editor generally doesn't have the styling
Very - what this checks is not affected by styling. In fact in many cases styling is used which should really be good accessible markup
wouldn't be able to adequately check other accessibility concerns
nothing is perfect - to quote Leonie Watson
It doesnt have to be perfect - just better than yesterday
https://twitter.com/ireaderinokun/status/784401867447078912?lang=en
that will only work for one of the core editor options really need to be included as part of the core package?
Same is true of the drag and drop image plugin
I'd say that's a feature where you're almost bound to only support WYSIWYG and not either a plaintext or code oriented editor simply because of its nature (unless someone wants to write a "smart" handler that can support drag and drop while inserting "plain" HTML in the right spot or default to the end of the space like GitHub's does). The a11y checker though to me feels like it should be able to run regardless of editor and adding a TinyMCE specific plugin for the feature puts more emphasis on user workflows using WYSIWYG and the core editor and maybe discourages use of third party editors or non-WYSIWYG editors (and yes I realize I'm in the minority by saying 95% of my Joomla content edits are done in a source view or just direct in the database if that's quicker for what I need to do).
Don't get me wrong, I've got nothing against the feature. It just doesn't jump out to me as one that should be baked into a core CMS distribution. a11y should be a core focus as far as anything core produces that reaches a browser (in Joomla anything in a layout or a HTML helper basically), I just don't know how I feel about that focus going so far as to putting something into the editor for end user content.
I've spent the better part of the last couple weeks integrating WYSIWYG into various apps, the last thing I would do is suggest a CMS ship with non-JavaScript-enhanced <textarea> elements.
| Category | JavaScript Repository Front End Plugins NPM Change | ⇒ | Front End JavaScript Plugins Repository |
| Title |
|
||||||
| Category | JavaScript Repository Front End Plugins | ⇒ | JavaScript Repository NPM Change Front End Plugins |
Initial tests of this plugin are that its a great addition
Without taking sides in this discussion, and after correcting package.json, I tested this.
With this PR the locales are not installed with npm install and therefore only English is used for the results.
https://github.com/instructure/tinymce-a11y-checker/tree/master/locales
There are quite a few locales. Any language not included in the github project should create its own file. About 60 strings.
Note: I do get here an icon for it (Firefox Macintosh): the bomb icon
@brianteeman Thanks for testing.
@infograf768 Thank you for your hint. At the moment, I believe that there is no interest in this feature. If this changes I would correct the inclusion of other languages and the display of the icon.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-05-21 02:12:52 |
| Closed_By | ⇒ | astridx | |
| Labels |
Added:
?
?
Removed: J4 Issue ? |
||
@astridx I really would like to see this in Joomla 4
It’s not enough to focus on an accessible backend for Joomla but we also need to support the users and editors in providing accessible content even if they are not skilled in this area
This plugin for tinymce seems an ideal solution to me
This plugin for tinymce seems an ideal solution to me
I agree with that. but I have the feeling that we are the only ones with this opinion.
You're not the only ones, I was on your side when this feature has been proposed for the GSoC 2019 a11y project
I'd be interested in having this in core - i just missed it in amongst everything else
Looks great - assuming it will work with tinymce5 (yet to be merged) and ie11 its a massive thumbs up from me