{"id":19857,"date":"2023-09-11T13:42:56","date_gmt":"2023-09-11T17:42:56","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=19857"},"modified":"2026-04-08T07:24:55","modified_gmt":"2026-04-08T11:24:55","slug":"end-of-an-error-removing-the-html-code-editor-in-wordpress","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2023\/end-of-an-error-removing-the-html-code-editor-in-wordpress\/","title":{"rendered":"End of an error: removing the HTML code editor in WordPress"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        End of an error: removing the HTML code editor in WordPress\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>There are a lot of great improvements to the Carleton web template on the horizon when we launch cuTheme. Something we are excited for is the removal of the ability to edit a page by adding HTML, Javascript, and styling.<\/p>\n\n\n\n<p>In this post we outline why we need to make this critical move. There are several reasons that having the ability on hand to edit HTML is a liability for your end users.<\/p>\n\n\n\n<h2 id=\"accessibility\" class=\"wp-block-heading\">Accessibility<\/h2>\n\n\n\n<p>If there is one good reason to remove the ability to edit HTML code it is the potential for rogue code to harm the accessibility of a web page.<\/p>\n\n\n\n<p>The example often used to show the harm HTML code can do is coloured text. We have very dark text for a reason \u2013 it contrasts well with our light background and colour contrast is key to the legibility and scanability of text. With the HTML editor in place a website maintainer could place very light text on our white background making it invisible to those with vision challenges. Keeping the text within certain tones makes sure the text is as legible as possible. Remember, someone does not have to have particularly bad eyesight in order to find it a strain to make out light text on a light background.<\/p>\n\n\n\n<p>People also use HTML to colour code text, giving it meanings that are implicit but only to those who can perceive them. Changing text to render in red, amber, and green to illustrate bad, neutral, or good items only works if people can view those colours. One in twelve of some demographics can\u2019t distinguish red from green, making this practice misleading and even possibly dangerous.<\/p>\n\n\n\n<p>That\u2019s the classic example. But in fact a more important instance of changing the attributes of a font comes with using HTML and JavaScript to change the size and weight of text. Imagine you want to write the word <em>Warning<\/em> in a way that makes it more noticeable. One way would be to make the text much bigger using HTML code. But by doing that you are confusing users especially those whose neurodivergence manifest in the form of a difficulty in how a page of information is laid out.<\/p>\n\n\n\n<p>By using HTML to show text at the same or similar size to one of our subheadings, the user believes the word <em>Warning<\/em> denotes a section of the page when it is doesn\u2019t. It then becomes unclear what is a page section and what it isn\u2019t. And if you use it to set the size of the text for a heading, then you are going to confuse humans and the screen readers they employ.<\/p>\n\n\n\n<h2 id=\"usability\" class=\"wp-block-heading\">Usability<\/h2>\n\n\n\n<p>That also illustrates a good example in the crossover between usability and accessibility. Usability \u2013 how easy it is to move around, identify, take in and interact with page content on a website \u2013 is affected by many of the same concerns that affect accessibility.<\/p>\n\n\n\n<p>People also use HTML to manipulate colour of links. Links in text in the CCMS render as red, with the exact tone double checked to match the <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/contrast-minimum.html\">colour contrasts determined by W3C<\/a>. If that colour is then used to highlight something, people assume it is a link. When they can\u2019t click on it they are confused.<\/p>\n\n\n\n<h2 id=\"consistency\" class=\"wp-block-heading\">Consistency<\/h2>\n\n\n\n<p>That previous illustration also refers to consistency. Another practice is to use a different colour on links so some are red and some are blue. Elsewhere a subheading in the text might be blue. This means someone might click on it, only to find nothing happens. Confusion all around!<\/p>\n\n\n\n<h2 id=\"ease-of-maintenance\" class=\"wp-block-heading\">Ease of maintenance<\/h2>\n\n\n\n<p>But why limit confusion to the front end of a website when an editor can also cause mayhem in the backend too? Remember that not everyone has the coding knowledge that one team member might possess. That\u2019s fine when the coding guru is around, but if they win the lottery (or go on vacation for a week) and aren\u2019t available then the colleague who steps in to make a change might be left scratching their head as to how to edit the page. They are confronted by a set of code they don\u2019t understand. The most likely thing is that they will break the code making the page even more unpredictable to users.<\/p>\n\n\n\n<h2 id=\"risk-of-errors\" class=\"wp-block-heading\">Risk of errors<\/h2>\n\n\n\n<p>Introducing HTML code \u2013 or trying to fix it when its creator has gone on vacation \u2013 can also create havoc with other elements on the page. Why? Because the CCMS template is created using a combination of HTML, CSS, and PHP, but also a series of Javascript libraries. Injecting code into the page can interfere with that. In the very simplest example, failing to close a font tag code make the rest of the text on the page red.<\/p>\n\n\n\n<p>We have a team of developers who spend days on end testing for how content can break the code in the template. Let\u2019s make not make their jobs harder.<\/p>\n\n\n\n<h2 id=\"security\" class=\"wp-block-heading\">Security<\/h2>\n\n\n\n<p>Finally, there is the safety aspect. With an HTML editor enabled, there is always the fear that malicious actors can inject code that does harm to the site or the whole network. HTML injection attacks involve inserting malicious HTML elements or tags into the content created with the editor. This can result in the manipulation of the page&#8217;s structure and content, potentially leading to security vulnerabilities or phishing attempts. URLs can be placed in a page that lead to websites whose owners have criminal intent, for instance. Similarly, JavaScript can be injected as a potentially more powerful security threat than HTML.<\/p>\n\n\n\n<p>In the future we will give some guidance on how to achieve some of the things previously rendered by adding code in the page. Until then, we will give you time to mourn loss of the<\/p>\n\n\n\n<style>.blink { animation: blinker 1.5s linear infinite;<br \/>                color: red;<br \/>                font-family: sans-serif;<br \/>            }<br \/>            @keyframes blinker {<br \/>                50% {<br \/>                    opacity: 0;<br \/>                }<br \/>            }<br \/><\/style>\n\n\n\n<p><span class=\"blink\" style=\"font-size: 200%;\"><strong> SUPERPOWERS <\/strong><\/span><\/p>\n\n\n\n<p>associated with the HTML editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are a lot of great improvements to the Carleton web template on the horizon when we launch cuTheme. Something we are excited for is the removal of the ability to edit a page by adding HTML, Javascript, and styling. In this post we outline why we need to make this critical move. There are [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[197,273,390],"tags":[],"class_list":["post-19857","post","type-post","status-publish","format-standard","hentry","category-accessibility","category-cutheme-announcements","category-keep"],"acf":{"cu_post_thumbnail":"techie"},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/comments?post=19857"}],"version-history":[{"count":1,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19857\/revisions"}],"predecessor-version":[{"id":21447,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19857\/revisions\/21447"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media?parent=19857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/categories?post=19857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/tags?post=19857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}