Jb Audras 12:38 pm on October 18, 2019
Tags: 5.3 ( 80 ), accessibility ( 55 ), dev-notes ( 520 )

Noteworthy Admin CSS changes in WordPress 5.3

WordPress 5.3 will introduce a number of CSSCSS Cascading Style Sheets. changes in WordPress adminadmin (and super admin). While the necessity to improve wp-admin accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) was previously raised in several TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets, GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/’s recent interface improvements made it necessary to improve the whole interface as well.

Background: in April 2019, WP-Campus conducted an accessibility audit of the new editor interface, made by an independent contractor, Tenon LLC. This audit raised issues in the editor but also in the media modal, which uses wp-admin styles. Fixing these issues on Gutenberg and on the media modal but not in the whole wp-admin interface would have been very inconsistent.

Some tickets were milestoned to the 5.3 release cycle to start backporting Gutenberg accessibility improvements to the whole admin interface. These first tickets aim to improve:

Color contrasts on form fields and buttons
Focus styles on form fields and buttons
Content behavior on text zoom

Backporting some of Gutenberg’s styles to fix these issues introduced some visual issues with the interface elements hierarchy. Therefore, Design and Accessibility teams worked on the overall visual hierarchy:

darker tables and metaboxes borders were introduced for a better hierarchy between interface elements

Note for pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors and WordPress developers

These changes are only CSS changes, and not structural changes, so the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup is exactly the same as before, with the same class attributes on each element.

In short, your styles should align with these changes if interface elements are not overridden by custom CSS. If you are overriding WordPress Admin CSS on form elements, you should test your plugins or your custom developments against WordPress 5.3 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 1.

If you are a plugin author, there are different use cases:

Plugins that are using default Admin CSS styles should work just like before.
Plugins that are using custom Admin CSS styles by overriding default Admin CSS should be checked against 5.3.
Plugins that are using fully customized Admin CSS styles should not be concerned by those changes.

In general, plugin authors and WordPress developers are encouraged to:

remove any fixed heights: flexible heights are the WordPress recommended standard (and one of the main goals of the Admin CSS changes).
remove any custom top and bottom padding values.
remove any custom line-height values.
update their CSS code to override new focus/hover buttons colors if they use custom colors on this type of element.

In the next section of this dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase., you’ll find some noteworthy CSS changes coming in WordPress 5.3.

Main things that are changing in 5.3:

Forms fields:
- text inputs
- textareas
- selects
- checkboxes
- radiobuttons
- both primary and secondary buttons
- colorpickers
Tables, notifications and metaboxes

Known issues

Available for testing in WordPress 5.3 RC 1, these changes have been tested in various use cases and no breakage situation was identified during the tests. Please check the report for full information about the testing panel.

Report: WP 5.3 Admin CSS changes tested against top 20 plugins

This is a work in progress, just like anything in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. These usability improvements were implemented during summer 2019 then tested and iterated on September and October. After 5.3 is released, the idea is to iterate on wp-admin design to make it fully consistent with the editor interface, and to provide a great and accessible editorial experience for websites administrators. The next minor releases will fix small issues with 5.3 changes and the next majors will improve the consistency of user experiences between Gutenberg and WordPress administration.

Changes related to form fields

Text inputs

Legacy CSS code:

/* Legacy styles */
input[type=text] {
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    background-color: #fff;
    color: #32373c;
    outline: 0;
    transition: 50ms border-color ease-in-out;
}
input[type=text]:focus {
    border-color: #5b9dd9;
    box-shadow: 0 0 2px rgba(30,140,190,.8);
    outline: 2px solid transparent;
}

Legacy focused input style

New CSS code:

/* New styles */
input[type=text] {
    padding: 0 8px;
    line-height: 2;
    min-height: 30px;
    box-shadow: 0 0 0 transparent;
    border-radius: 4px;
    border: 1px solid #7e8993;
    background-color: #fff;
    color: #32373c;
}
input[type=text]:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
    outline: 2px solid transparent;
}

Textareas

Legacy CSS code:

/* Legacy styles */
textarea {
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    background-color: #fff;
    color: #32373c;
    outline: 0;
    transition: 50ms border-color ease-in-out;
}
textarea:focus {
    border-color: #5b9dd9;
    box-shadow: 0 0 2px rgba(30,140,190,.8);
    outline: 2px solid transparent;
}

New CSS code:

/* New styles */
textarea {
    box-shadow: 0 0 0 transparent;
    border-radius: 4px;
    border: 1px solid #7e8993;
    background-color: #fff;
    color: #32373c;
}
textarea:focus {
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
    outline: 2px solid transparent;
}

Selects

Legacy CSS code:

/* Legacy styles */
select {
    padding: 2px;
    line-height: 28px;
    height: 28px;
    vertical-align: middle;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    background-color: #fff;
    color: #32373c;
    outline: 0;
    transition: 50ms border-color ease-in-out;
}
select:focus {
    border-color: #5b9dd9;
    box-shadow: 0 0 2px rgba(30,140,190,.8);
    outline: 2px solid transparent;    
}

Legacy select style

Legacy focused select style

New CSS code:

select {
    font-size: 14px;
    line-height: 1.28571428;
    color: #32373c;
    border: 1px solid #7e8993;
    border-radius: 3px;
    box-shadow: none;
    padding: 4px 24px 4px 8px;
    min-height: 30px;
    max-width: 25rem;
    vertical-align: middle;
    -webkit-appearance: none;
    background: #fff url(data:image/svg+xml;charset=US-ASCII,<svg image>) no-repeat right 5px top 55%;
    background-size: 16px 16px;
    cursor: pointer;
}
select:focus {
    border-color: #007cba;
    color: #016087;
    box-shadow: 0 0 0 1px #007cba;
}

New select style

New focused select style

Radiobuttons

Legacy CSS code:

/* Legacy styles */
input[type=radio] {
    border: 1px solid #b4b9be;
    border-radius: 50%;
    background: #fff;
    color: #555;
    clear: none;
    cursor: pointer;
    display: inline-block;
    line-height: 0;
    height: 16px;
    margin: -4px 4px 0 0;
    outline: 0;
    padding: 0!important;
    text-align: center;
    vertical-align: middle;
    width: 16px;
    min-width: 16px;
    -webkit-appearance: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    transition: .05s border-color ease-in-out;
}
input[type=radio]:checked:before {
    content: "\2022";
    text-indent: -9999px;
    border-radius: 50px;
    font-size: 24px;
    width: 6px;
    height: 6px;
    margin: 4px;
    line-height: 16px;
    background-color: #1e8cbe;
}

New CSS code:

/* New styles */
input[type=radio] {
	border: 1px solid #7e8993;
	border-radius: 50%;
	line-height: .71428571;
	background: #fff;
	color: #555;
	clear: none;
	cursor: pointer;
	display: inline-block;
	height: 1rem;
	margin: -.25rem .25rem 0 0;
	outline: 0;
	padding: 0 !important;
	text-align: center;
	vertical-align: middle;
	width: 1rem;
	min-width: 1rem;
	-webkit-appearance: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	transition: .05s border-color ease-in-out;
}
input[type=radio]:checked::before {
	content: "";
	border-radius: 50%;
	width: .5rem;
	height: .5rem;
	margin: .1875rem;
	background-color: #1e8cbe;
	line-height: 1.14285714;
}

Checkboxes

Legacy CSS code:

/* Legacy styles */
input[type=checkbox] {
	border: 1px solid #b4b9be;
	background: #fff;
	color: #555;
	clear: none;
	cursor: pointer;
	display: inline-block;
	line-height: 0;
	height: 16px;
	margin: -4px 4px 0 0;
	outline: 0;
	padding: 0!important;
	text-align: center;
	vertical-align: middle;
	width: 16px;
	min-width: 16px;
	-webkit-appearance: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	transition: .05s border-color ease-in-out;
}
input[type=checkbox]:checked:before {
	content: "\f147";
	margin: -3px 0 0 -4px;
	color: #1e8cbe;
}
input[type=checkbox]:focus {
	border-color: #5b9dd9;
	box-shadow: 0 0 2px rgba(30,140,190,.8);
	outline: 2px solid transparent;
}

New CSS code:

/* New styles */
input[type=checkbox], input[type=radio] {
	border: 1px solid #7e8993;
	border-radius: 4px;
	background: #fff;
	color: #555;
	clear: none;
	cursor: pointer;
	display: inline-block;
	line-height: 0;
	height: 1rem;
	margin: -.25rem .25rem 0 0;
	outline: 0;
	padding: 0!important;
	text-align: center;
	vertical-align: middle;
	width: 1rem;
	min-width: 1rem;
	-webkit-appearance: none;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	transition: .05s border-color ease-in-out;
}
input[type=checkbox]:checked::before {
	content: url(data:image/svg+xml;utf8,<svg image>);
	margin: -.1875rem 0 0 -.25rem;
	height: 1.3125rem;
	width: 1.3125rem;
}
input[type=checkbox]:focus {
	border-color: #007cba;
	box-shadow: 0 0 0 1px #007cba;
	outline: 2px solid transparent;
}

Buttons

Legacy CSS code:

/* 
 * Legacy styles for buttons
 */

/* General */
.wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-secondary {
	display: inline-block;
	text-decoration: none;
	font-size: 13px;
	line-height: 26px;
	height: 28px;
	margin: 0;
	padding: 0 10px 1px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-webkit-appearance: none;
	border-radius: 3px;
	white-space: nowrap;
	box-sizing: border-box;
}

/* Primary buttons styles */
.wp-core-ui .button-primary {
	background: #0085ba;
	border-color: #0073aa #006799 #006799;
	box-shadow: 0 1px 0 #006799;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
}
/* Primary buttons :hover styles */
.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover {
	background: #008ec2;
	border-color: #006799;
	color: #fff;
}
/* Primary buttons :focus styles */
.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary:focus {
	box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
}

/* Secondary buttons styles */
.wp-core-ui .button, .wp-core-ui .button-secondary {
	color: #555;
	border-color: #ccc;
	background: #f7f7f7;
	box-shadow: 0 1px 0 #ccc;
	vertical-align: top;
}
/* Secondary buttons :hover styles */
.wp-core-ui .button-secondary:focus, .wp-core-ui .button-secondary:hover, .wp-core-ui .button.focus, .wp-core-ui .button.hover, .wp-core-ui .button:focus, .wp-core-ui .button:hover {
	background: #fafafa;
	border-color: #999;
	color: #23282d;
}

/* Secondary buttons :focus styles */
.wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-core-ui .button:focus {
	border-color: #5b9dd9;
	box-shadow: 0 0 3px rgba(0,115,170,.8);
}

Legacy style for primary button

Legacy style for focused primary button

Legacy style for secondary button

Legacy style for focused secondary button

New CSS code:

/* 
 * New styles for buttons
 */

/* General */
.wp-core-ui .button, .wp-core-ui .button-primary, .wp-core-ui .button-secondary {
	display: inline-block;
	text-decoration: none;
	font-size: 13px;
	line-height: 2.15384615;
	min-height: 30px;
	margin: 0;
	padding: 0 10px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-webkit-appearance: none;
	border-radius: 3px;
	white-space: nowrap;
	box-sizing: border-box;
}

/* Primary buttons styles */
.wp-core-ui .button-primary {
	background: #007cba;
	border-color: #007cba;
	color: #fff;
	text-decoration: none;
	text-shadow: none;
}
/* Primary buttons :hover styles */
.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover {
	background: #0071a1;
	border-color: #0071a1;
	color: #fff;
}
/* Primary buttons :focus styles */
.wp-core-ui .button-primary.focus, .wp-core-ui .button-primary.hover, .wp-core-ui .button-primary:focus, .wp-core-ui .button-primary:hover {
	background: #0071a1;
	border-color: #0071a1;
	color: #fff;
}

/* Secondary buttons styles */
.wp-core-ui .button, .wp-core-ui .button-secondary {
	color: #0071a1;
	border-color: #0071a1;
	background: #f3f5f6;
	vertical-align: top;
}
/* Secondary buttons :hover styles */
.wp-core-ui .button-secondary:hover, .wp-core-ui .button.hover, .wp-core-ui .button:hover {
	background: #f1f1f1;
	border-color: #016087;
	color: #016087;
}
/* Secondary buttons :focus styles */
.wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-core-ui .button:focus {
	background: #f3f5f6;
	border-color: #007cba;
	color: #016087;
	box-shadow: 0 0 0 1px #007cba;
	outline: 2px solid transparent;
	outline-offset: 0;
}

New style for focused primary button

New style for secondary button

Legacy style for focused secondary button

Darker borders on tables, notices, metaboxes and other similar elements

These changes introduce better contrast for borders for the following user interface elements:

Tables
Screen Options and Help
Admin notices
Welcome panel
MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes (post boxes on classic editor or in edit attachment screens)
Cards
Health Check accordions and headings
Theme and Plugin upload forms

Legacy CSS code:

Depending on the related element, several CSS declarations were used.

border: 1px solid #e5e5e5;
border: 1px solid #e1e1e1;
border: 1px solid #eee;
border: 1px solid #ddd;
border: 1px solid #e2e4e7;

Legacy Screen options panel with light grey border

New CSS code:

All those CSS declaration are replaced with a unique color:

border: 1px solid #ccd0d4;

Legacy Screen options panel with darker border

Related Trac tickets

#5-3, #accessibility, #dev-notes

sonjoe 10:39 am on November 13, 2019

The old CSSCSS Cascading Style Sheets. was better. Now there are lines lines lines lines borders everywhere. It is really bad for eyes, like a table with dark lines…I think i will overwrite it with custom css.
- mixos 2:23 pm on November 13, 2019
  
  +1 to sonjoe from me. The old one was better to the eyes and more easy. It should be nice to have these accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) options enabled with a setting, rather that have it universal.
  - Jb Audras 2:46 pm on November 13, 2019
    
    Hello and thank you for your comments,
    
    AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) can’t be an option enabled as a setting in WordPress adminadmin (and super admin) since it wouldn’t conform to accessibility criteria. WordPress project aims to conform to WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. guidelines. It’s a legal obligation in several countries, but it’s also in WordPress philosophy for years 🙂
    - XXVII 3:00 pm on November 13, 2019
      
      @audrasjb well, at least the new “accessible” styles should have the option to be deactivated in favor of the “legacy” style, like we can do now with the different adminadmin (and super admin) themes in the user profile.
      - Jb Audras 3:16 pm on November 13, 2019
        
        @xxvii thanks for you comment, very appreciated.
        This is not going to happen in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., but developers could probably build that feature as a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, if really needed. Not sure it is really needed, though 🙂
        
        Ihor Vorotnov 5:09 pm on November 18, 2019
        
        It is needed. Yes, accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) is a must, should be baked in as 1st class citizen, not an option buried deep in settings etc. But for those who can (and even more – want and prefer to) deal with lower contrast there absolutely must be an option to switch to a low contrast theme.
        
        Darken-x 9:58 pm on November 18, 2019
        
        Yes, it is needed.
        
        Meanwhile, check out this small pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: https://wordpress.org/plugins/old-style-admin-ui/
        
        It will allow you to update WordPress to 5.3 & benefit from its code updates, whilst still retaining all of the previous version’s adminadmin (and super admin) UIUI User interface styles.
        
        Cheers.
  - Jb Audras 2:47 pm on November 13, 2019
    
    AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) is universal by definition 🙂
    - crawford4 10:06 am on November 20, 2019
      
      This is a meaningless statement in this context.
      
      Television does not have the subtitles turned on for everyone by default. Why? Because for those who do not require them, they are distracting. Like your heavy borders, which draw attention to the box rather than the content of the box.
      
      In your world, every television program would have permanent subtitles because accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) is not an option.
      
      Many thanks to @darken-x whose pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party I have installed, and to @sonjoe and @headonfire for common sense.
      - Jb Audras 12:46 pm on November 20, 2019
        
        Thanks for your comment @crawford4,
        
        In your world, every television program would have permanent subtitles because accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) is not an option.
        
        Maybe television may use different guidelines than Internet (frankly: I don’t know)… also I think it depends on TV channels and regional laws. In Europe, some TV channels have sign language displayed for every one… I don’t know where you are from since your account was very recently created but I advise your to avoid trusting too much your common sense and to avoid to limit your judgement to the laws that only apply to your country/state since we (people who are building the WordPress project) try to build an universal tool.
        And in any case, Web Content Accessibility Guidelines (WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/.) are not telling the same than this “common sense”.
        
        Also, it’s not “our world”, it’s yours as well 🙂
        This world have guidelines and laws (for countries that committed to provide a universal access to internet resources). And WordPress project committed to those guidelines. Remember: WordPress tagline is “democratize publishing” 🙂
        
        PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors are totally allowed and welcomed to create (and maintain) legacy Adminadmin (and super admin) CSSCSS Cascading Style Sheets. plugins if they want 🙂
- mastafu 8:54 am on November 19, 2019
  
  At first i thought some pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party overwritten default styles. This new desing choices are plan horrible. Adminadmin (and super admin) area looks like from 10 years ago. Old and ugly. Please fix it, or give us choice to use old / new style.
- Jonas Lundman 4:32 pm on December 3, 2019
  
  I agree, my clients think there are buttons everywhere now with all sharp borders and rounded corners. The latter is UXUX User experience to indicate a button. Please stop this backend “improvements” just bec some WP developer think its personal nice….
gopros 10:49 am on November 13, 2019

+1 to sonjoe.
guys if you don’t know what to do, better not do anything (do not change the design!)
- Jb Audras 10:55 am on November 13, 2019
  
  Hello and thank you for your comment,
  
  I comment @sonjoe’s comment 🙂
  Quick answer to your response: this was made on purpose, based on objective criteria 🙂
  
  Thanks again,
  Jb
Jb Audras 10:52 am on November 13, 2019

Hi @sonjoe and thank you for your your comment!

Objectively, the new CSSCSS Cascading Style Sheets. styles are better for people with impaired vision as it is now meeting the minimal accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) requirement. This is not subjective “I like it” /”I don’t like it”: it’s just meeting objective accessibility criteria for interfaces. The old CSS styles weren’t meeting the accessibility requirements. That said, WP 5.3 styles can definitely be improved, adn the good news is that we are going to iterate. If you have constructive proposals for the future styles of WordPress Adminadmin (and super admin) (of course, they have to meet the accessibility requirements), they are very welcome! Feel free to open a TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. or to join current opened Trac ticket or to contact the accessibility and design teams!

Last thing: yes, you are definitely able to override WordPress Admin styles. In the post above, there are best practices to do that th correct way 🙂

Thanks again for your comment,
Cheers,
Jb
- zenjukai 2:25 pm on December 3, 2019
  
  And where are these guidelines? Who created these guidelines? To say that you are meeting the needs of the minority (a very very small minority), then you are not meeting the needs of the majority.
  
  It was said well, a tv does not have constant captions on it, but the options are there. The same applies to Youtube, which is an internet based platform. Why are they not having to follow these “so called” guidelines? Seem this is a WordPress guideline that is now focused on “identity politics” and not real world usage!
  
  Not listening to your community can have a back fire effect … remember, you are not the only free CMS out there.
  - Jb Audras 2:46 pm on December 3, 2019
    
    Hi @zenjukai, welcome and thank you for your comment,
    
    where are these guidelines? Who created these guidelines?
    
    These guidelines are edited by the World Wide Web Consortium and can be found here: https://www.w3.org/WAI/standards-guidelines/wcag/.
    The changes are the result of the deep commitment of the WordPress project to inclusivity and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility). This is why we try (because it just can’t be “perfect”) to conform to accessibility guidelines.
    
    Not listening to your community can have a back fire effect … remember, you are not the only free CMS out there
    
    Very true. As an open-source project, the WordPress project depends on its users and on its contributors. WordPress users are free to use it, free to quit it, free (and very welcome) to contribute to it, or to discuss the decisions.
    
    Also and for what it worth, this developer note was published on October 18th, 2019. The goal of a developer note is to announce changes concerning WordPress Adminadmin (and super admin) styles. It was published weeks before the release so developers and pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors could organize themselves and edit their code (if needed). The related changes were discussed publicly in WordPress TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets and on Make WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. months before they landed in WordPress 5.3.
    
    Thank you again,
    Jb
    - zenjukai 5:12 pm on December 3, 2019
      
      Ok, I hear your points. However,
      
      The changes are the result of the deep commitment of the WordPress project to inclusivity and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility). This is why we try (because it just can’t be “perfect”) to conform to accessibility guidelines.
      
      In this situation you are not trying, but rather “catering” to a very small minority. If you want to support that small minority, that is great and I support it. But you should be creating an option so that the majority are not having to make all these changes to suite the minority.
      
      Inclusivity means to include ALL, not just one side. These changes only meet the needs of one side. Saying that options are available but they are now the end user’s responsibility is again NOT inclusivity.
      
      Just a personal rant, you say the changes are for visually impaired folks, which again I support, but what has been done doesn’t make it “easier” to read or to use … from a UXUX User experience/UIUI User interface perspective it is going backwards.
sonjoe 10:58 am on November 13, 2019

I know, that you try to bring the UXUX User experience more accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility). I am just saying, that in my opinion, it is ugly. Sorry. I am a designer with 20 years experience, and i am saying, i am don’t like it, and will for me and for my client overwrite it 🙂
- Jb Audras 11:27 am on November 13, 2019
  
  @sonjoe, first: thank you for sharing your opinion 🙂
  
  However, “ugly” is not something that the Design and AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team can work with 🙂
  “Ugly” and “I don’t like it” are personal opinions. I believe everyone is open to constructive feedback. But designers can’t start arguing whether something is ugly. What one likes, is disliked by another and so on 🙂
  
  To build a good CMS, we need objective criteria and references and accessibility criteria are one of them since they are providing actionable items 🙂
  
  Thanks for your comments, it’s a very great way to contribute to the project 👍 We definitely need those feedback. Even if the decision is not to follow them, there is a strong need to get feedback from users 🙂
  
  Cheers,
  Jb
  - sonjoe 11:39 am on November 13, 2019
    
    As i wrote, in my opinion it is ugly, sorry for the straight definition 🙂 Your opinion in team is, that this will help people with disabilities and i am agree with that. But my clients does not have (thanks god) any disabilities, so they really don’t need to watch on this design every time they edit something and me too, when developing a website. 🙂
    
    I don’t need argue with you. I already overwrote the ugliest parts of CSSCSS Cascading Style Sheets., so my clients wont never see this objective changes.
    
    Maybe if you in WP team want to change something, what people used to use really long time, will be fine, if there will be an option button for this (on/off). I worked on lot GOV websites and there still was an option for bigger fonts, darker fonts, etc for people with disabilities.
    
    Have a nice day 🙂
    - XXVII 2:54 pm on November 13, 2019
      
      I totally agree with all comments by @sonjoe, it’s a good thing to improve the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) but its has to be done in the right way, remembering that the majority of users are used to a certain interface and that they don’t need it to be replaced.
      
      Moreover, the new “improvements” make the fields and buttons stand out more for the visually impaired, but at the same time all those borders create a mess of heavy lines everywhere that are distracting for the average user…I can’t imagine how confusing they can be to someone with cognitive impairment.
      
      You should have built an options page for accessibility enhacements to let the user decide the style that fits better his abilities (default, high contrast, dark theme, big fonts…etc.).
      
      I really hope that all this will be optional in the future or WordPress will be seen by our clients as ugly and amateurish at best and broken at worse.
      
      The road to hell is paved with good intentions.
      - Jb Audras 3:25 pm on November 13, 2019
        
        Thank you for your comment @xxvii,
        AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) aims to be universal, not targeted to specific abilities or situations. It’s our commitment to follow W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/./WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. guidelines.
        For the decision that the accessibility and design teams took during 5.3 release cycle, these teams are very welcoming and every WordPress users are welcome to join them, in order to weight on those decisions. All informations can be found on make.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ 🙂
        
        XXVII 4:02 pm on November 13, 2019
        
        @audrasjb while I agree that accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) is a universal concept and an obviously good thing, I disagree that it hasn’t to be targeted to specific (dis)abilities.
        
        For some users a dark background with light fonts works better than a light background with dark font, and viceversa.
        Some users need a really huge font size, some don’t.
        
        Accessibility is about giving everyone the possibility to use and enjoy something, not giving the exact same options to everyone, because what works best for someone could be detrimental to someone else.
        
        Let the users decide!
        
        XXVII 4:05 pm on November 13, 2019
        
        @audrasjb this image explains it better than a thousand words
        http://interactioninstitute.org/wp-content/uploads/2016/01/IISC_EqualityEquity.png
        
        Jb Audras 10:29 am on November 15, 2019
        
        Let the users decide!
        
        Very important point @xxvii.
        I recommend you to have a look on WordPress philosophy page, which is explaining why you won’t see any option to “enable” accessibily “mode” on WordPress adminadmin (and super admin) 🙂
        https://wordpress.org/about/philosophy/#decisions
        
        XXVII 11:02 am on November 15, 2019
        
        Well that is a general principle which should be considered for every specific case.
        I don’t think that accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) is a technical “option”, otherwise you should delete all adminadmin (and super admin) theme options in the user profile which are way more unnecessary…
        
        So, all options that WordPress currently has are too many? Or they are the right number? And how many options are the right number? 10? 5? 17?
        
        I’m sorry but I feel that this discussion is like tilting at windmills…
        
        No problem however, I’ll use some custom css until you’ll hopefully come up with some more pleasant and well thought styles.
        
        Ihor Vorotnov 5:18 pm on November 18, 2019
        
        1. Most operating systems, on the other side, do this the other way around – accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) features are turned on when needed.
        2. But we’re not asking to go this route. We’re fine with accessible theme being on by default. What we’re asking for is the option to turn it off if we (and our particular clients) are not visually impaired and this hard contrast actually produces significantly higher strain on our eyes.
        
        mixos 6:33 pm on November 18, 2019
        
        +100 Ihor Vorotnov
        
        zenjukai 2:32 pm on December 3, 2019
        
        The statement that WordPress uses that you are quoted is a false dichotomy …
        
        “When making decisions these are the users we consider first. A great example of this consideration is software options. Every time you give a user an option, you are asking them to make a decision. When a user doesn’t care or understand the option this ultimately leads to frustration. As developers we sometimes feel that providing options for everything is a good thing, you can never have too many choices, right? Ultimately these choices end up being technical ones, choices that the average end user has no interest in. It’s our duty as developers to make smart design decisions and avoid putting the weight of technical choices on our end users.”
        
        … this doesn’t make sense. One cannot make a decision without having options. If there is only one option/choice, there cannot be any decisions.
Steven Jones 11:38 am on November 13, 2019

The changes to the input fields, in isolation, may be a positive one however I don’t think they work overall because they are too distracting to the user.

The input fields are now competing with elements such as metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes. It’s not the input boxes that the user is interested in – it’s the title of the meta box and the label of the field so the user knows they are in the correct place in order to compete their task. These titles/labels have now been relegated due to how much the inputs stand out which is counter-productive to the overall aim of making the system usable.
- sonjoe 11:42 am on November 13, 2019
  
  Exactly. This is, what i did, and is much better, in my opinion 🙂 Maybe will be useful for others, just add to your custom adminadmin (and super admin) css in theme 🙂
  
  input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
  border: 1px solid #d5d9dc;
  }
  .postbox {
  border: 1px solid #dde0e2;
  }
  .wp-admin select {
  border-color: #d5d9dc;
  }
  .postbox .hndle, .stuffbox .hndle {
  border-bottom: 1px solid #dde0e2;
  }
  .wrap .add-new-h2, .wrap .add-new-h2:active, .wrap .page-title-action, .wrap .page-title-action:active {
  border: 1px solid #bdccd2;
  }
  .wp-coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-ui .button, .wp-core-ui .button-secondary {
  border-color: #bdccd2;
  }
  .wp-core-ui .button-primary {
  border-color: #007cba;
  }
  - mixos 2:24 pm on November 13, 2019
    
    for the moment I have applied your CSSCSS Cascading Style Sheets. to my adminadmin (and super admin). Hope we get a better solution in future.
  - XXVII 3:43 pm on November 13, 2019
    Thanks @sonjoe, here’s some css for ACF
    
    .acf-flexible-content .layout, .acf-flexible-content .layout .acf-fc-layout-handle, .acf-table, .acf-table > thead > tr > th, .acf-gallery, .acf-editor-wrap .wp-editor-container, .select2-container.-acf .select2-selection, .acf-gallery .acf-gallery-toolbar { border-color: #e5e5e5; }
    
    Also, better use only border-color instead of border: 1px solid #d5d9dc;, I found some unwanted borders in some elements.
    - sonjoe 3:58 pm on November 13, 2019
      
      thanks, i just quickly copy&paste the existing css from inspect element and overwrite the main bad looking styles 🙂
  - crmb 9:06 pm on November 13, 2019
    
    Thank you 👍
- Steven Jones 4:32 pm on November 14, 2019
  
  @audrasjb would be great if you could reply to this – you seem to have replied to everyone who hasn’t provided constructive feedback (i,e. the people who said it’s ugly) however you’ve not addressed a constructive, logical point I put forward.
  - Jb Audras 7:43 pm on November 14, 2019
    
    Hello @stompweb, thank you for the reminder and sorry for missing you 🙂
    
    First, thank you for your constructive comment.
    
    I understand the issue and it will definitely needs some refinements. But now we have components with strong basis and that are solid enough to be iterated. 5.3 made them fluid and much easier to handle. Now, we have a solid basis to iterate and it was strongly needed.
    We started by porting parts of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ design outside of the editor, but now we’ll iterate on that. Any help is welcome, feel free to join design and accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) teams.
    
    Cheers,
    Jb
Andrea Fercia 2:58 pm on November 13, 2019

> this will help people with disabilities

This will help everyone, including the future you 🙂 Good software needs to be usable by everyone, regardless of their level of ability or other kind of temporary / situational impairments. Good contrast is a very basic requirement to get to a truly inclusive design.

I’d recommend to familiarize a bit with the new UIUI User interface and let the changes “soak” for a while. For what is worth, my personal experience is that after a few days using the new UI I don’t want to ever go back to the WordPress 5.2 UI.
- XXVII 3:05 pm on November 13, 2019
  
  Good contrast can be achieved in different ways, not only throwing heavy borders everywhere.
  The intention is good but the execution is something that seems to be cobbled together in 5 minutes…
Anonymous User 3:52 pm on November 13, 2019

Is accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) always this ugly? Or is WP ahead of the curve and all web interfaces will be this ugly eventually?
Joy 4:34 pm on November 13, 2019

I like the idea of an option to enable CSSCSS Cascading Style Sheets. for different impairments. It would be great as a User option.
- Jb Audras 4:46 pm on November 13, 2019
  Hello @Joy and thank you for your comment,
  Plugins are free to propose such an option, but case by case basis is not the way accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) have to be handled. Many websites tried it before and failed as it’s not sustainable in term of maitainance, as users often have multiple disabilities, etc.
  To sum up:
  - PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party territory: why not (but it’s discutable)
  - CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.: no 🙂
crmb 7:43 pm on November 13, 2019

About the “ugly” comment, it may be a personal opinion, but majority of users will probably agree, sorry. (I will not try to debate further because i know how debating with designers is. And i am not good at that).

Something you may agree with : the input and select look the same, this is confusing.
I wouldn’t say i am seriously visualy impaired but have some issues. And the overloading of border doesn’t help at all. it’s on the contrary distracting.
You know like those led lights on cars supposed to be super visible but actually that distract you more than anything.

Blindly following recommention is maybe not the solution.
tatof 9:02 pm on November 13, 2019

Sorry but you have to make the “accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)” styles an option for people who need this. Maybe in there profile settings? Now I have to change the adminadmin (and super admin) style for every client I have. (a lot of work)

Its not only ugly, but this style is making my eyes hurt. The contrast is way to high and I’m can’t shake the feeling that I’m looking at windows 95.

I respect the choice but..
Where Gutenburg is a step in the right direction, this is one in the wrong.
- Andrea Fercia 1:09 pm on November 14, 2019
  
  Where Gutenburg is a step in the right direction, this is one in the wrong.
  
  Worth noting GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ basically uses the same styling.
  - tatof 1:58 pm on November 14, 2019
    
    Not talking about the style of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/. Talking about the change Gutenberg brings.
- Darken-x 10:02 pm on November 18, 2019
  
  I completely agree.
Ari Stathopoulos 7:13 am on November 14, 2019

Thank you for these changes, they really help me find things easier. All the work you’ve done here is amazing. I agree that it changes some things, and some people will find that “ugly”, but that’s mostly just habit… and beauty is in the eye of the beholder.
The previous styles were just inaccessible for everyone, and the fact that we got used to a bad paradigm is no excuse to not fix it.
5.3 is a good step in the right direction.

Thank you everyone who worked on this, you have my gratitude.
hydrogriff 11:51 am on November 14, 2019

This is many steps backward. From accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) point of view, this is outstanding. But for general usage (which is the majority here) everything just hurts the eye. This should be an accessibility style rather than a common style.

And yes, it is ugly. Not a personal opinion. It’s the common opinion. If something looks ugly, you call it ugly.

It’s just blue everywhere. Very thick and dark borders.

Accessibility in software should be an option. Not the default. Majority of users don’t need this. So please make this style application an optional choice and keep the neat one for the regular usage.

I say again. This is utter terrible to look for a long time.

WordPress devs are known to take criticisms sourly and the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ debacle is an example for that. Stop rejecting what the community wants.

Please do these things:

1. Read the community responses and understand what the community wants. Not what a certain clique in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. dev wants.

2. Take a survey on this.
- Jb Audras 12:19 pm on November 14, 2019
  
  Hello and thank you for your comment,
  
  First point, I kindly disagree with you: “ugly” *is* a personal opinion (that could be shared by some people, but it’s still very personal). It doesn’t help to improve anything 🙂
  
  I’m sorry but accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) won’t be an option. It would be against every design model, against W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/./WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. guidelines and against the reglementation/law in some countries.
  
  That doesn’t mean that the UIUI User interface can’t be improved. It’s a first step that improves accessibility but it also improves components basis. Then, we can work on a strong basis for the next iterations.
  
  Thank you,
  Jb
  - hydrogriff 12:32 pm on November 14, 2019
    
    First point, I kindly disagree with you: “ugly” *is* a personal opinion (that could be shared by some people, but it’s still very personal). It doesn’t help to improve anything 🙂
    
    🙂 Ugly is how you describe ugly. Especially in design. If you prefer, I can re-edit ‘ugly’ to profoundly unbeautiful. And it’s not a personal opinion when the majority of the consensus say the same. You can scroll up again if you want.
    
    I’m sorry but accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) won’t be an option. It would be against every design model, against W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/./WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. guidelines and against the reglementation/law in some countries.
    
    I do get this, but you can still make things accessible with visually pleasing designs, unlike this horrendous… pardon me! “profoundly unbeautiful” style.
    
    That doesn’t mean that the UIUI User interface can’t be improved. It’s a first step that improves accessibility but it also improves components basis. Then, we can work on a strong basis for the next iterations.
    
    You should have done all the first step improvements in the design table with community inputs and surveys. Not just with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. developers. Did you take a survey on community feedback for this? If yes, please link me one.
    
    I stand with what I said. This is profoundly unbeautiful.
    
    🙂
    - Andrea Fercia 1:14 pm on November 14, 2019
      
      Ugly is how you describe ugly. Especially in design.
      
      I’d argue this is a misleading approach to design. Especially for a productivity application like WordPress, design is not about “beauty”, which is a very personal perception. Instead, it’s about solving problems. For everyone.
      - Ihor Vorotnov 5:26 pm on November 18, 2019
        
        Instead, it’s about solving problems. For everyone.
        
        As comments to this post show, the problem was solved just for some, at the expense of some. Which basically means that one problem was replaced with another, none of them are solved.
    - Jb Audras 1:58 pm on November 14, 2019
      
      it’s not a personal opinion when the majority of the consensus say the same. You can scroll up again if you want
      
      It’s relatively well known that people that are satisfied don’t usually take time to say that the changes are great 🙂
      
      You should have done all the first step improvements in the design table with community inputs and surveys. Not just with coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. developers. Did you take a survey on community feedback for this? If yes, please link me one.
      
      This (surveys) is not the way WordPress is currently developed (as well as many other open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. or even web projects).
      
      At the other hand, this post was published way before 5.3 release. Those comments are coming way after the work has been done 🙂
      There will be iteration on those changes. But it may be “ugly” as well for few users… 🤷‍♂️
SeKra 12:21 pm on November 14, 2019

In my opinion this is a step in the wrong direction. Sure if you have 1-2 input fields to display it will work. But did you guys ever tried out a settings page (CPT:UIUI User interface pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party for example) I can’t even see the values inside the input fields because there are dark lines everywhere!

Sorry, but I think you have to take back the changes. This is too much distraction from the values inside the inputs.

Greetings from Germany, Sebastian
- Jb Audras 7:46 pm on November 14, 2019
  
  Hi and thank you for your comment,
  Sorry but we won’t take back the changes.
  We will iterate on them.
  Did you see that a bunch of plugins were tested in a previous post? The results of the tests are publicly available.
skorasaurus 4:32 pm on November 14, 2019

Hi,

I do really appreciate the very detailed comparisons that you were made to outline all of the changes that were made.

As for the changes, I thank you for making them. I politely disagree that the changes are aesthetically worse as well.

If you’re interested to see what a a list of the accessibility tickets closed for 5.3
Andrew Hateley-Browne 12:36 am on November 15, 2019

It’s disappointing that there are so many designers/developers who are dismissing these positive changes. Imagine claiming to have “20 years experience” and actually intending to overwrite accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility). Wow.

Designers/developers must have accessibility as a legal, moral and professional priority. Every inaccessible website is a website that cannot be used by someone. If not for them: it might be you one day. Accessibility isn’t negotiable and it shouldn’t be optional. I appreciate WordPress making these changes to the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
- XXVII 9:29 am on November 15, 2019
  
  No one is criticising the accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) changes per se, but the way they have been done.
  There are many ways to increase contrast, not only giving a heavy border to every element. There is a visual (and functional) hierarchy of the elements of a page to be respected. A design can be elegant, pleasant to the eye AND accessible.
  
  The current result is, in my opinion, amateurish.
  It is heavy on the eyes and stressful to see all day, every day.
  Maybe it is not evident on a simple page, but in a page with lot of fields and button it is (a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party options page or a custom post with many ACF fields).
  
  Don’t underestimate the opinion of many users that find all those borders distracting, because you are committing the same error of the people who consider accessibility unuseful.
  - Andrea Fercia 10:41 am on November 18, 2019
    
    There are many ways to increase contrast, not only giving a heavy border to every element.
    
    That’s true but a contrast ratio of at least 3:1 for all user interface components is a WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. requirement: https://www.w3.org/TR/WCAG21/#non-text-contrast
    
    Any constructive feedback on the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets to achieve the 3:1 contrast ratio and have a “elegant, pleasant” design would be very appreciated.
Ari Stathopoulos 11:09 am on November 15, 2019

The changes are here to stay.
Don’t like them? Fine. Contribute. Be a part of the solution by implementing something better and share it with everyone so we can move forward instead of looking back.
There were long discussions for days in the slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. #accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) channel. So… share your improvements. Find a solution better than the current one, get on Slack, talk with people, share something better than what is currently there, and help out.
You’ll be surprised how welcoming people can be if you start with “I want to improve things” instead of “I hate this, it’s ugly”.
- Ihor Vorotnov 5:33 pm on November 18, 2019
  
  You do understand that only a tiny fraction of a percent of worldwide WordPress users (and even developers) use SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/., read Make blogs etc? With a OSS project of this scale, someone actually needs to go out in the wild and ask those real users. Asking them to jump in isn’t an option.
micasuh 6:10 am on November 17, 2019

I admire seeing WordPress move forward keeping accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) as a priority after its misstep in the 5.0 release. These buttons are a continuation of this priority.

However, it’s disappointing to see a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. of form controls and buttons that are too close in design aesthetic to each other.

WordPress 5.3 form controls and buttons from the comment page

The image I attached above is what I see on the comments list page in the Dashboard. I see multiple UIUI User interface and UXUX User experience problems with the above block.

I could list out the problematic state changes that are hard to see to the nearly identical styles between input fields and buttons. Inconsistent component heights, confusing applied border colors, Midnight Adminadmin (and super admin) Color Scheme active button state on “Search Comments” button being completely red, and more are things I would attribute to not enough QA and testing for this release.

I think this mini-audit above should give you enough alarm to resolve these issues asap, in the next point releases.
- John Blackbourn 12:11 am on November 20, 2019
  
  Thanks for your constructive feedback @micasuh! It’s very much appreciated, and it appears to me that your points are valid and valuable.
  
  AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) improvements, just like all other improvements in WordPress, are iterative and the whole team of contributors to WordPress work to improve things with every release. If you’d like to get involved with the accessibility team I’m sure they’d love to have you onboard. The #accessibility channel in WordPress Slack is a good place to get started.
  
  In the meantime I’ll point some of the team members to your comment to make sure that we’ve got bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. reports that cover the issues you mentioned, or that it’s at least on their radar.
  
  Cheers!
DAEXT 10:06 am on November 18, 2019

@audrasjb With this ugly and unprofessional design you are killing WordPress. A group of designers with more skill and responsibility should revert these changes.

This is like converting the graphic of a videogame in colorblind mode when 99.9% of the users are not color blind.

Many WordPress users are going to leave because of this. Now the WordPress back-end has the typical aspect of a free, bugged and unprofessional software.
- Andrea Fercia 10:31 am on November 18, 2019
  
  @DAEXT I’m sorry but this kind of language and tone are not very welcome. Pinging one single person as the only responsible isn’t very fair. These changes come from a shared effort between various teams.
  
  As noted a few times in the previous comments, “ugly and unprofessional” are personal judgments based on personal perception: nothing that can be worked on. Research, data, user testing can lead to actionable points instead.
  
  WordPress is made by a community of volunteers, I’d like to encourage everybody to take positive actions, join the community of contributors, participate to the project to get a better grasp of what a large open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. project is and how it works.
  
  Also, your example about video games probably isn’t the best one, as all video games developed and released after January 1, 2019 are expected to be compliant with the Twenty-First Century Communications and Video AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Act, at least in the US 🙂
  - DAEXT 12:58 pm on November 18, 2019
    
    Thank you for your reply. I just wanted to share an honest feedback on what I think of this update and on the impact that might have on the WordPress userbase.
    
    I did not want to accuse anyone in particular with the pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.”, but only call the attention of someone involved in these changes.
    - Andrea Fercia 1:25 pm on November 18, 2019
      
      👍
  - Ihor Vorotnov 5:36 pm on November 18, 2019
    
    Research, data, user testing can lead to actionable points instead.
    
    Can you share the research, data and user testing that was done prior to making these changes? Those that led to these changes as a “solution”?
    - Andrea Fercia 5:42 pm on November 18, 2019
      
      @Ihor Vorotnov sure. The W3CW3C The World Wide Web Consortium (W3C) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards.https://www.w3.org/. Web Content AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) Guidelines (WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/.) are the result of more than 20 years of research, user testing, and data. I’d tend to think that’s enough 🙂
      
      I’d also tend to think any web designer and web developer should have at least a basic knowledge of the WCAG.
      
      Success Criterion 1.4.11 Non-text Contrast
      https://www.w3.org/TR/WCAG21/#non-text-contrast
      - DAEXT 8:31 pm on November 18, 2019
        
        This update simply ruins the back-end.
        
        The fact that accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) guidelines exist doesn’t have any relation with this implementation.
      - Ihor Vorotnov 9:13 am on November 19, 2019
        
        @afercia thank you for taking time to explain obvious things. I am thoroughly familiar with WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/..
        
        May I ask why we still have old zebra table rows? Because their contrast ratio is undetectable for most people with sight issues. WCAG experts recommend either (much) higher contrast or separator lines (they are way better in fact).
        
        May I ask why it wasn’t tested with Classic Editor pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and classic metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes? GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ is great, but there’s still a huge amount of sites that don’t use it (and probably never will). Classic editor and meta boxes have lots of issues with these new styles.
        
        May I ask why on all listings we still have all actions (Edit, Delete, View etc) on hover, not visible by default? And still only “Quick Edit” action is focusable, the rest is inaccessible.
        
        May I ask why on Earth if you’re already altering the CSSCSS Cascading Style Sheets. of the inputs and buttons you can’t fix the height inconsistencies as well? The search field + button on top right of every listing screen was fine with old design, now it’s just visually broken. A combination of select + button, on the other hand, is fine.
        
        May I ask why we still have some adminadmin (and super admin) color themes – like Light, Blue, Midnight, Ocean which aren’t actually accessible, at least not acceptable for colour-blind people – but we can’t have a native Low Contrast theme?
        
        Why the Appearance -> Menus UIUI User interface wasn’t treated the same way? CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.?
        
        That’s just a quick overview. There are important issues that weren’t solved. There is a big issue that it’s forced as a default without opt-out option while it wasn’t even fully tested and fully implemented yet. Sorry, but “we’ll iterate” is basically admitting you’ve pushed an MVPMinimum Viable Product "A minimum viable product (MVP) is a product with just enough features to satisfy early customers, and to provide feedback for future product development." - WikiPedia to production of millions of live websites without even a way to turn the feature off until it’s ready.
        
        Ihor Vorotnov 9:17 am on November 19, 2019
        
        Just to clarify:
        
        May I ask why on all listings we still have all actions (Edit, Delete, View etc) on hover, not visible by default? And still only “Quick Edit” action is focusable, the rest is inaccessible.
        
        The first sentence applies to TaxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. listings. The second one to all listings.
        
        John Blackbourn 11:41 pm on November 19, 2019
        
        The answer to all of your points is that WordPress is not perfect and iteration is the only possible approach to improving it. Otherwise we’d be aiming for a perfect piece of software and end up with nothing at all.
        
        WordPress 5.3 is objectively better than 5.2 was, but 5.4 will be objectively better than 5.3 is.
        
        It sounds like you’re familiar with accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues and it sounds like you’re interested in helping make WordPress better for everyone. The accessibility team would love to have more contributors, not only in development roles but also in roles that provide feedback, outreach, documentation, and testing, so we’d love to have you on the team, if you have the time.
        
        Jb Audras 12:01 am on November 20, 2019
        
        Thank you John. Indeed, I think you perfectly addressed the list of concerns raised by @headonfire. Iteration is the key, from the beginning and for the future of this software.
        
        I just wanted to add that we do not absolve ourselves of any responsibility by asking users to contribute to the development (including feedback, testing, etc., not only code) of the WordPress project. For now, contribution is the best way to see this software improving itself. “Found a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority.? Fix it! (or help to)” is the way most people developing this software end up playing a role in the project.
        To improve this software, we need actionable items and constructive feedback 🙂
        
        Some of the items you listed could make very good tickets on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. and some developers would probably love to work on them. Please go ahead and fill a ticketticket Created for both bug reports and feature development on the bug tracker. for the ones you want to see addressed. That would be very constructive and welcomed.
        
        Thanks for your feedback,
        Jb
- Darken-x 9:56 pm on November 18, 2019
  
  Same here. Check out this small pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: https://wordpress.org/plugins/old-style-admin-ui/
  
  It will allow you to update WordPress to 5.3 & benefit from its code updates, whilst still retaining all of the previous version’s adminadmin (and super admin) UIUI User interface styles.
  
  Cheers.
  - Jb Audras 10:06 pm on November 18, 2019
    
    @Darken-x whilst it’s totally fine to create and maintain a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to keep legacy styles – and to post one link to it – please avoid to add URLs as an answer of each response in this comment thread. Otherwise, it would be close to be considered as spam and finally deleted.
    Thanks for your comprehension.
    - Darken-x 10:18 pm on November 18, 2019
      
      Got it. Thanks. 👍
    - Darken-x 10:20 pm on November 18, 2019
      
      Though I can’t seem to be able to edit them or remove them (was looking to delete this one above).
      - Jb Audras 10:38 pm on November 18, 2019
        
        Thank you for your comprehension.
        No worries it’s ok for the already published ones.
        That was a warning to avoid to mark any further comment as spam.
        Thanks,
        Jb
Andrea Fercia 10:14 am on November 18, 2019

@micasuh thanks for your feedback. Regarding alignment and sizes, that’s something already planned to be iterated on. Worth noting that also in WordPress 5.2 the various form controls have inconsistent heights and alignments. That’s not easy to notice in isolation (looking at a specific part of the UIUI User interface). Instead, looking at the overall UI in the adminadmin (and super admin) the inconsistencies are more evident. Compare, for example, the input fields in the Settings pages with the various search fields or the input fields in other parts of the admin.

As noted above in this post, this is a work in progress: iterations will take care of making the admin styles consistent with the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor ones.

There’s already a TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker. for alignments and sizes and everybody is welcome to contribute with positive feedback, testing, and patches. See https://core.trac.wordpress.org/ticket/48420

The alternate color schemes need improvements and the active buttons style needs to be fixed. There are tickets to address these issues, see https://core.trac.wordpress.org/ticket/48585 and https://core.trac.wordpress.org/ticket/48598
Darken-x 9:52 pm on November 18, 2019

If you also found the new adminadmin (and super admin) UIUI User interface in the latest WordPress 5.3 update to be a bit too prominent (the vivid blue texts and borders on buttons and so on), then check out this small pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: https://wordpress.org/plugins/old-style-admin-ui/

It will allow you to update WordPress to 5.3 & benefit from its code updates, whilst still retaining all of the previous version’s admin UI styles.

Cheers.
Andrea Fercia 10:15 pm on November 18, 2019

@Darken-x please refrain from posting 3 comments with the same link to your pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. That’s very close to spamming, which is not welcome on this blogblog (versus network, site). Thank you.
- Darken-x 10:16 pm on November 18, 2019
  
  Will do. Thank you for letting me know.
Andrea Fercia 10:44 am on November 19, 2019

@Ihor Vorotnov thanks for your questions (I’m replying here to avoid the comments nesting makes the available space too narrow).

You make good points, though they’re related to the general state of accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) in the WordPress adminadmin (and super admin) and not strictly related to these changes.

I’d like to remind everyone that WordPress is made by a community of volunteers that dedicate their spare time to build an open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL., free, publishing platform that powers 35% of the Web. Only a very small minority of contributors are lucky enough to have part of the time they dedicate to WordPress sponsored by some company. For the most part, WordPress is the result of a huge volunteer effort you can be part of. The best way to make WordPress better is to take positive actions and start contributing to the development.

There are still tons of things to do in WordPress to make it use web standards, modern best practices, and make it as accessible as possible. Any help is welcome as some of the related tasks need a considerable development effort. There are several pending issues that are blocked or don’t get prioritized just because of lack of resources. Everyone can help: join the project and help WordPress get better.

Personally, I’m always a bit uncomfortable when feedback is addressed to “WordPress developers” as they were a separate group from the global community. As I see it, there’s no such a thing like “WordPress developers”. Everyone can help developing WordPress. Also persons with no coding abilities can help reporting issues, making proposals, testing patches, joining meetings and conversations. Being proactive, participating, and making things happen is the best way to help this project get better.

Specifically to your points:

Tables:
WordPress shouldn’t use tables for layout purposes to start with. That’s a long standing issue that involves a substantial refactoring ot the Settings APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.. But, before that, there would be the need for a Fields API (ie. an API to standardize the way all form controls are generated). Both are huge projects. While there were some attempts in the past, they’re currently not prioritized for lack of resources and because they’re not included in the current roadmap. You may be interested in all the Settings API related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets under this keyword: https://core.trac.wordpress.org/query?status=!closed&keywords=~settings-api
May I ask why it wasn’t tested with Classic Editor

Not sure why you’re assuming it wasn’t tested.
Classic editor and metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes have lots of issues with these new styles.

Not sure what specific issues you noticed. I’d encourage you to open a Trac ticketticket Created for both bug reports and feature development on the bug tracker. and report any major usability / accessibility regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. you may have faced preferably with screenshots before and after the changes.
And still only “Quick Edit” action is focusable, the rest is inaccessible.

I guess you’re using a mac? If this is the case, you may want to check your keyboard system preferences and check “Use keyboard navigation to move focus between controls” under the “Shortcuts” settings. Check also “Change the way Tab moves focus” under “Keyboard” in the left panel. Some browsers, for example Safari, have the same setting in their preferences, you may need to check that too:

On macOS, by default only form controls can be tabbed to. If you ask me, that’s one of the worst decisions ever made by Apple 🙂

Height inconsistencies
As pointed out a few times in the previous comments, this is a work in progress and there’s already a ticket aiming to standardize heights and alignments of all form controls, see #48420. Also. there’s a pending proposal to introduce in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. an 8 pixels-based spacing system (a “grid”) to further standardize all the UIUI User interface components. It will likely happen soon thus all the form controls, including the buttons, will change again. They will likely have a minimum height of 32 pixels. See https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/

Admin color themes
They were never intended to be accessible. Only the default color scheme aims to. Worth noting there’s an ongoing, recent, conversation regarding alternate color schemes on https://make.wordpress.org/accessibility/2019/11/13/agenda-for-accessibility-team-meeting-15-november-2019/. There’s some consensus to reconsider the entire purpose of the alternate color schemes. Until now, they only aim to change the look of the admin with no specific purpose. A better, more useful, approach would be adding new color schemes to address specific user needs. For example: a dark theme, a theme to help users with reading impairments (dyslexia), a theme with low contrast, and so on. This will probably turn in a Trac ticket soon but worth considering it’s a task that will require a considerable amount of time and resources. Any help and new contributions would be greatly appreciated.

Appearance -> Menus UI / CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.
Again, this is a work in progress 🙂 Pretty much like anything in core.
- John Blackbourn 12:12 am on November 20, 2019
  
  Thanks for your comment Andrea. These are all good points.
Sonjoe 10:25 am on November 20, 2019

In Slovak language is a nice saying. “Everybody is stupid, only WP devs team are an airplane” 😀 I totally agree with, that accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) should not be an option. We just want, that, “non-accessibility” should be an option. Just a simple button in profile, “Disable this really very ugly accessibility design” 🙂
Andrea Fercia 10:40 am on November 20, 2019

Thanks all for your feedback and also for the airplane joke 🙂

Any feedback is appreciated and listened to. At the same time, I’m not sure repeating over and over again the same concept adds great value to this thread.
Kevin Hagerty 3:52 am on November 26, 2019

I personally really like the CSSCSS Cascading Style Sheets. changes

with one exception…

Something about rounded corners on a checkbox is just wrong. I really liked the old square checkboxes.
- Kevin Hagerty 3:53 am on November 26, 2019
  
  you tell me which is better…
  
  OLD
  
  NEW
benlk 3:57 pm on December 2, 2019

Increasing contrast is good, but the switch to Flat design with rounded corners seems inconsistent and partial. Many areas of the adminadmin (and super admin) still use thicker bottom borders on elements to create a 3D effect, and many areas of the admin still use sharp 0px border-radiuses. The switch to having nonzero border-radius feels like WordPress is jumping on the “Make Everything Round” train without reason, and the lack of thicker border-bottom sometimes makes it hard to distinguish visual hierarchy.

As for whether there should be a low-contrast theme — some people need that for accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility). Perhaps CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. could make a dismissable modal that highlights the admin theme selector, so that users would be more aware of the choices available to them? The nag modal could be shown to existing WP users when WP updates to the version containing the new modal, and to new users on their nth login. (nth rather than first, to prevent notification fatigue for low-use users.)