At Tiny, we believe that making TinyMCE the best rich text editor available means more than just creating an MSWord or GoogleDocs-like editing experience.
To achieve that goal, we embrace the spirit of openness and genuine equality that the web brings with it and we actively support the evolving guidelines on accessible design. That’s why we’ve invested in delivering accessibility functionality.
Fredrik Danielsson and Joakim Lindkvist, from our Tiny team based in Sweden, have also joined a research project in conjuction with Funka on improving web accessibility. It's called We4Authors.
Joakim is one of the founders of TinyMCE. They bring decades of experience in web authoring to their work. Fredrik is our Principal Designer, and is responsible for much of TinyMCE's accessibility. We4Authors results are available on Funka's website.
TinyMCE provides an accessibility-compliant interface – one that can be operated with just the keyboard and is compatible with screen readers. Our plugin helps you make your own interface compatible and accessibility compliant.
A rich text editor with accessibility checking
But making a website accessible can be difficult and time-consuming. For example, if no additional time is budgeted for checking the color contrast of the page design. A few simple miscalculations can often snowball into a lot of accessibility dilemmas, and before long, those content errors proliferate. TinyMCE’s accessibility function addresses that by empowering authors to recognize the errors and fix them immediately, before the content is published, thus avoiding any compliance issues.
By activating the a11ychecker plugin, any suspected problems are flagged. The plugin then suggests changes, and you can press the ‘Repair’ button to address the accessibility error.
Accessibility checking for headings, images, and id attributes
Did you know that popular screen readers like JAWS from Freedom Scientific, need a clear page structure to work correctly? Therefore, since accessibility technology requires clear IDs to assist users with page content navigation, our plugin checks that the ID attribution labels are unique.
The plugin also alerts you about issues like inaccessible tables and other potential accessibility problems, by checking your content against both WCAG and Section 508 guidelines. It also confirms whether images have alt text – because screen readers require some kind of legible and clear alt text to read. If an image is just decorative, our plugin has the capability to set the image properties as only decorative. It additionally checks if the alt text is the image filename or not, which is also a common accessibility error.
A rich text editor that supports accessible tables
The a11ychecker plugin makes writing accessible tables easier by helping users apply the proper headers to their tables. It checks for a complex table summary, to explain to assistive technology users how to navigate the table data. In short, it digs deeper, confirming the table heading scope aligns with the data inside the table itself.
Need color clarity? Check contrast ratios for accessibility
Colors on a web page may also be mistakenly designed with low contrast ratios, which can cause issues for those people whose sight is degraded. When the degree of difference in hue between two colors isn't particularly wide the colors look too similar to each other. Colors of similar hues also make text difficult to read on-screen. However, our plugin flags contrast issues when it detects similar colors together.
If you’d like to see our accessibility plug-in action, please try the demo or contact us for more information about improving your application’s accessibility.
For more information about We4Authors, you can read more about the initiative here on blueprint.
