{"id":457,"date":"2011-10-04T09:09:38","date_gmt":"2011-10-04T13:09:38","guid":{"rendered":"http:\/\/itg.emerson.edu\/word\/?p=457"},"modified":"2021-02-09T20:52:56","modified_gmt":"2021-02-09T20:52:56","slug":"best-practices-in-wordpress-accessibility-design","status":"publish","type":"post","link":"https:\/\/websites.emerson.edu\/itg\/best-practices-in-wordpress-accessibility-design\/","title":{"rendered":"Best Practices in WordPress Accessibility Design"},"content":{"rendered":"<p style=\"text-align: center\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-465\" title=\"Accessibility word cloud\" src=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/5451897212_5328d884ab_o1.jpg\" alt=\"Accessibility word cloud\" width=\"450\" height=\"307\" \/><\/p>\n<p style=\"text-align: right\"><a href=\"https:\/\/secure.flickr.com\/photos\/sunraven0\/5451897212\/\" target=\"_blank\" rel=\"noopener\">Web accessibility word cloud<\/a> \/ <a href=\"https:\/\/secure.flickr.com\/photos\/sunraven0\/\" target=\"_blank\" rel=\"noopener\">itjil<\/a> \/ <a href=\"\/\/creativecommons.org\/licenses\/by\/2.0\" target=\"_blank\" rel=\"noopener\">CC BY 2.0<\/a><\/p>\n<h2>Why<\/h2>\n<p>Designing for accessibility means that you end up with a site that is clear and helpful to everyone.<\/p>\n<p>More information on <a href=\"http:\/\/www.washington.edu\/doit\/Brochures\/Academics\/instruction.html\" target=\"_blank\" rel=\"noopener\">Universal Design in higher education<\/a><\/p>\n<h2>Colors<\/h2>\n<ul type=\"disc\">\n<li>Background images or colors should be subtle.<\/li>\n<li>Make sure that all colors used are high contrast. Try to use light backgrounds with dark fonts. Don&#8217;t use red and green together.<\/li>\n<li>Try testing your site here:\u00a0<a href=\"https:\/\/color.a11y.com\/Contrast\/\" target=\"_blank\" rel=\"noopener\">color.a11y.com\/contrast<\/a><\/li>\n<\/ul>\n<p><a href=\"http:\/\/www.webstyleguide.com\/wsg3\/7-page-design\/3-visual-design.html\" target=\"_blank\" rel=\"noopener\">Web Style Guide: Visual Design<\/a><\/p>\n<h2>Layout<\/h2>\n<ul>\n<li>Allow ample white space<\/li>\n<li>Use sans-serif fonts<\/li>\n<\/ul>\n<p><a href=\"https:\/\/webdesign.tutsplus.com\/articles\/designing-accessible-content-typography-font-styling-and-structure--cms-31934\" target=\"_blank\" rel=\"noopener\">Designing Accessible Content: Typography, Font Styling, and Structure<\/a><br \/>\n<a href=\"http:\/\/webaim.org\/techniques\/fonts\/\" target=\"_blank\" rel=\"noopener\">Font Accessibility<\/a><\/p>\n<h2>Content Organization and Markup<\/h2>\n<h3>Images<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-4348\" src=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/alt-text-wp-1024x498.png\" alt=\"The image details window for an image in the WordPress media library, with the Alt Text field indicated.\" width=\"640\" height=\"311\" srcset=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/alt-text-wp-1024x498.png 1024w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/alt-text-wp-300x146.png 300w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/alt-text-wp-768x373.png 768w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/alt-text-wp-1536x747.png 1536w, https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/alt-text-wp-2048x996.png 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p style=\"text-align: left\">Include short descriptive alt text for all images! This is the most common accessibility error. Use the description field for complex pictures or charts.<\/p>\n<p>WebAIM has a <a href=\"http:\/\/webaim.org\/techniques\/alttext\/\" target=\"_blank\" rel=\"noopener\">guide for appropriate uses of alternative text<\/a>.<\/p>\n<h3>Video<\/h3>\n<p style=\"text-align: left\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-466 aligncenter\" title=\"Closed caption logo\" src=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/CC-logo.gif\" alt=\"Closed caption logo\" width=\"75\" height=\"75\" \/>If you are embedding or linking to a video, be sure that it is captioned and can be controlled through keyboard commands. YouTube can be controlled by keyboard commands. All Panopto videos uploaded will have automatic captions added to them. You can also edit Panopto captions to make them even more accurate!<\/p>\n<p>To learn more: <a href=\"http:\/\/youtube-global.blogspot.com\/2010\/03\/future-will-be-captioned-improving.html\" target=\"_blank\" rel=\"noopener\">YouTube captioning<\/a><\/p>\n<p><a href=\"https:\/\/www.google.com\/support\/youtube\/bin\/answer.py?hl=en&amp;answer=189278\" target=\"_blank\" rel=\"noopener\">YouTube keyboard accessibility<\/a><\/p>\n<p><a href=\"https:\/\/support.panopto.com\/s\/article\/Learn-About-Accessibility-Features\" target=\"_blank\" rel=\"noopener\">Panopto Accessibility Features<\/a><\/p>\n<p><a href=\"https:\/\/support.panopto.com\/s\/article\/ASR-Generated-Captions#hTargetInstance0\" target=\"_blank\" rel=\"noopener\">Editing Automatic Captions in Panopto<\/a><\/p>\n<h3>Formatting<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-468\" title=\"screenshot of formatting buttons in wordpress\" src=\"https:\/\/websites.emerson.edu\/itg\/wp-content\/uploads\/sites\/44\/2011\/10\/Screen-shot-2011-10-04-at-8.47.38-AM.png\" alt=\"screenshot of formatting buttons in wordpress\" width=\"208\" height=\"65\" \/><\/p>\n<ul>\n<li>Use the visual editor as much as possible to organize your content. The BOLD, ITALICS, LIST, UNDERLINE, and BLOCKQUOTE buttons will take care of making sure that the HTML is accessible to screen readers.<\/li>\n<li>Similarly, instead of messing around with font size and style to create emphasis, use the built-in styles: HEADING 1, HEADING 2, HEADING 3, etc. The theme you have chosen will take care of the font choice and size, but using these buttons will make sure that your content is properly marked up for screen readers.<\/li>\n<li>Always use heading structures to aid in navigation<\/li>\n<li>Structure, color, font sizes should be consistent across pages<\/li>\n<\/ul>\n<p><a href=\"https:\/\/www.w3schools.com\/html\/html_accessibility.asp\" target=\"_blank\" rel=\"noopener\">HTML Accessibility<\/a><\/p>\n<h3>Links<\/h3>\n<ul type=\"disc\">\n<li>Your link names should be as descriptive as possible in case they are read out of context. &#8220;IMDB list of documentaries released in 2010 (opens in new window)&#8221; is better than &#8220;Click Here&#8221;.<\/li>\n<li>Note when you&#8217;re directing to a non-HTML resource: &#8220;Survey results (PDF)&#8221;<\/li>\n<\/ul>\n<p><a href=\"http:\/\/webaim.org\/techniques\/hypertext\/\" target=\"_blank\" rel=\"noopener\">Accessible Links<\/a><\/p>\n<h3>PDFs, Word Documents, and PowerPoints<\/h3>\n<ul>\n<li>You can upload these to WordPress, and then link to them from your blog post. When a viewer clicks on the link, they will most likely download the file (though some browsers will open PDFs within the browser window). Make sure that the documents themselves are accessible!<\/li>\n<\/ul>\n<p><a href=\"https:\/\/commonlook.com\/what-is-an-accessible-pdf-example-definition-meaning\/\" target=\"_blank\" rel=\"noopener\">What is an Accessible PDF<\/a><br \/>\n<a href=\"http:\/\/webaim.org\/techniques\/word\/\" target=\"_blank\" rel=\"noopener\">Microsoft Word accessibility<\/a><br \/>\n<a href=\"http:\/\/webaim.org\/techniques\/powerpoint\/\" target=\"_blank\" rel=\"noopener\">PowerPoint accessibility<\/a><\/p>\n<h2>References<\/h2>\n<ul>\n<li>To check your blog for accessibility: <a href=\"http:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener\">wave.webaim.org<\/a><\/li>\n<li><a href=\"http:\/\/www.webaim.org\/\" target=\"_blank\" rel=\"noopener\">WebAIM<\/a><\/li>\n<li><a href=\"https:\/\/exploreaccess.org\/accessible-online-course\/\" target=\"_blank\" rel=\"noopener\">Designing an Accessible Online Course<\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Accessibility\" target=\"_blank\" rel=\"noopener\">WordPress and Accessibility<\/a><\/li>\n<li><a href=\"https:\/\/dotcms.com\/blog\/post\/website-accessibility-checklist-10-steps-towards-website-compliance\" target=\"_blank\" rel=\"noopener\">Website Accessibility Checklist: 10 Steps Towards Website Compliance<\/a><\/li>\n<li><a href=\"http:\/\/wpmu.org\/25-ways-to-make-your-wordpress-website-more-accessible\/\" target=\"_blank\" rel=\"noopener\">25 Ways to Make Your WordPress Website More Accessible<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Web accessibility word cloud \/ itjil \/ CC BY 2.0 Why Designing for accessibility means that you end up with a site that is clear and helpful to everyone. More&#8230;<\/p>\n","protected":false},"author":2366,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[2,11],"tags":[12,25,42,50,87,89,91],"class_list":["post-457","post","type-post","status-publish","format-standard","hentry","category-accessibility","category-wordpress","tag-accessibility","tag-color","tag-font","tag-images","tag-universal-design","tag-web-design","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts\/457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/users\/2366"}],"replies":[{"embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/comments?post=457"}],"version-history":[{"count":4,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts\/457\/revisions"}],"predecessor-version":[{"id":4349,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/posts\/457\/revisions\/4349"}],"wp:attachment":[{"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/media?parent=457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/categories?post=457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websites.emerson.edu\/itg\/wp-json\/wp\/v2\/tags?post=457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}