Contributors/Projects/Accessible editing buttons

As part of the Editing team's work in improving editing tools, the main button controls on the desktop edit page are going to change. They will be more accessible, and be consistent with the majority of the rest of the user interfaces provided in MediaWiki.

This will affect the main 2010 wikitext editor, which almost all desktop users use to edit wikitext. It also affects the 2003 and 2006 ones which are much less used. This change may break some old gadgets and user scripts used for editing. These changes have already been implemented in VisualEditor, ContentTranslation, and Flow. This page gives some information about the change, and some advice about how to fix any affected scripts.

What is changing?
The visual appearance of the buttons used to finish an edit are changing. This includes (or ),, , and Cancel. From the perspective of an editor, the buttons are going to be bigger and more brightly shaded. You will still be able to Tab to the buttons and use the Return key to click the buttons without taking your hands off the keyboard. You can also use the same keyboard shortcuts.

You can try out and compare the before and after states on this wiki.

Why is it changing?
These changes improve accessibility, make the user experience internally consistent and similar across platforms, and make it easier for developers and local gadget and script writers to write and maintain code. This work is another step in the incremental migration to use the OOjs UI library in MediaWiki software, which was announced in 2014. Although the colour and the size of the buttons is changing, this is not fundamentally an aesthetic change — this is a change to how the button is created in the software.

By accessibility, we mean making sure that our tools work well for people of different backgrounds, locations, abilities, and situations. Though we work to support many groups, we pay particular attention to some big ones. One is those who are vision-impaired, including people who have various forms of colour-blindness, and those using screen-readers. Another is those who are using touch-based, high-zoom, or small-screen devices, including people using mobile, and those multitasking alongside other activities. An important facet is ensuring we impose the right cognitive load on users, which includes supporting people who are new to our communities or are struggling to understand how to do things, those in a rush, those for whom the interface is not in their main language, or who don't read and write as fluently as others, and people of varied experiences for whom our implicit expectations can be barriers. You can read more about this general approach and concern in the English Wikipedia's articles on universal design, Design for All, and particularly the Web Content Accessibility Guidelines.

Making sure that our site and tools are as accessible as practically possible is hugely important for three reasons. Firstly, as a movement to create "a world in which every single human being can freely share in the sum of all knowledge", it's vital that we don't unintentionally exclude anyone or make them feel unwelcome due to technological false expectations or faults, and that we're consistent so that ideas and concepts learnt once are applicable across the site and different tools. Secondly, if we are to "disseminate [educational content] effectively and globally", we must ensure that we are approachable. Finally, doing this is a key part of what we mean when we say that "When voices are absent, ignored, or silenced, we seek them out". Work on improving the accessibility of our tools, and helping our communities ensure our content is similarly open and welcoming, is a key part of the work of the Wikimedia Foundation.

With this change, we will be in line with the best practice as set out in the AA level of the Web Content Accessibility Guidelines version 2.0, and extend interface consistency to a key area. to the URL when you edit a page, e.g. https://www.mediawiki.org/wiki/Project:Sandbox?action=edit&veswitched=1&ooui=1.

See if your script behaves as expected. Many scripts (e.g., Twinkle, as far as anyone knows) will work normally. If something is broken, but you don't know which specific script needs repaired, then see Help:Locating broken scripts.

Borrow fixes from other scripts
If your script doesn't work, then you may want to look at these diffs to see whether any of these repairs might be applicable:
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-AutoSign.js&diff=19721655&oldid=17851577
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-Extra-Editbuttons.js&diff=prev&oldid=19721614
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-defaultsummaries.js&diff=prev&oldid=19719303
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-ProveIt.js&diff=prev&oldid=19719265
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:YandexTranslatorHelper.js&diff=prev&oldid=19719264
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Common.js/edit.js&diff=prev&oldid=19719224
 * https://fa.wikipedia.org/w/index.php?title=MediaWiki:Gadget-MediawikiEditSummary.js&diff=prev&oldid=19719219
 * https://en.wikipedia.org/w/index.php?title=User:Anomie/ajaxpreview.js&diff=778525484&oldid=640095512
 * https://de.wikipedia.org/wiki/Spezial:Diff/165185124/165636979?title=Benutzer:Schnark/js/syntaxhighlight.js

Change how your code interacts with the page
When you are working with the values of the, and you are not really interested in its UI, you can also make use of form access. For instance the value from the input element of the summary is:. This will be the same in both old and new style of the forms, unlike  (which in the new code, refers to the decorative wrapper around the actual   input element).

If you successfully repair a user script or gadget in a different way, then please post the diff here. If you wrote or maintain a script that has been copied to other wikis, then please try to share your updates with those wikis.

Other updates
Please also consider updating screenshots on help pages to show the new style.