Add a collapsible admin notice with content accessibility tips to posts and pages

accessibility-admin-notice.php

function doublee_accessibility_admin_notice() {
	$screen = get_current_screen();
	if(in_array($screen->id, array('post', 'page'))) { ?>
		<div class="notice notice-warning notice-accessibility">
			<div id="accessibility-tips" class="meta-box-sortables">
				<div id="accessibility_meta" class="postbox closed">
					<button type="button" class="handlediv" aria-expanded="false">
						<span class="screen-reader-text">Toggle panel: Accessibility Tips</span>
						<span class="toggle-indicator" aria-hidden="true"></span>
					</button>
					<h2 class='hndle'><span>Accessibility Tips <small>Click to expand/collapse</small></span></h2>
					<div class="inside">
						<h3>Document Structure</h3>
						<ul>
							<li>Mark up content using appropriate heading levels. If something is a subheading, use the heading level suitable for its position in the
								document; don't use bolded paragraph text as assistive technologies will not interpret it as a heading.</li>
							<li>Mark up lists as lists. The editor contains options for unordered (dot-point) and ordered (numbered) lists.</li>
							<li>Use tables for tabular data.</li>
							<li>Do not use tables for layout.</li>
							<li>Break up text into logical sections using headings, to support easy visual scanning. Avoid extended blocks of unbroken text.</li>
							<li>Ensure content follows a logical sequence.</li>
							<li>Useful link: <a href="https://accessibility.huit.harvard.edu/identify-headings-lists-and-tables" target="_blank"><em>Identify headings,
										lists, and tables</em> - Harvard University Online Accessibility</a></li>
							<li>Useful link: <a href="https://accessibility.huit.harvard.edu/support-scanning-and-understanding" target="_blank"><em>Support
										scanning and
									understanding</em> - Harvard University Online Accessibility</a></li>
						</ul>
						<h3>Readability and links</h3>
						<ul>
							<li>Ensure link text describes where the link will take the user. Avoid generic terms like &ldquo;click here&rdquo; or using the URL as the
								link text. </li>
							<li>Avoid using uppercase text for emphasis, as people with cognitive disabilities may find it harder to read, and some screen readers will
								read it out letter-by-letter.</li>
							<li>Avoid using underlines for text that is not a link.</li>
							<li>Useful link: <a href="https://accessibility.huit.harvard.edu/design-readability" target="_blank"><em>Design for Readability</em> -
									Harvard University Online Accessibility</a></li>
						</ul>
						<h3>Images and Media</h3>
						<ul>
							<li>Ensure all images have alternative text set which describes the content of the image.</li>
							<li>If an image contains text, ensure the alt text contains the same text, and consider adding a caption.</li>
							<li>Include captions and/or a transcript for audio and video.</li>
						</ul>
						<hr/>
						<p>You can also <a href="https://www.w3.org/TR/WCAG21/" target="_blank">Read the full <em>Web Content Accessibility Guidelines</em></a>.</p>
					</div>
				</div>
			</div>
		</div>
	<?php }
}
add_action( 'admin_notices', 'doublee_accessibility_admin_notice' );

accessibility-notice-style.php

function doublee_admin_notice_style() {

	// Additional styling for the Accessibility tips admin notice
	echo '<style>
		#accessibility-tips h2 {
		    font-size: 14px;
		    padding: 8px 12px;
		    margin: 0;
		    line-height: 1.4;
		    cursor: pointer;
		 } 
		 #accessibility-tips h2 small {
		    color: #999;
		    font-weight: normal;
		    margin-left: 10px;
		    font-style: italic;
		 }
		 #accessibility-tips ul {
		 	list-style: disc outside;
    	 	margin-left: 15px;
		 }
	</style>';

}
add_action('admin_head', 'doublee_admin_notice_style');