{"id":293,"date":"2024-05-05T16:51:01","date_gmt":"2024-05-05T16:51:01","guid":{"rendered":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/?p=293"},"modified":"2024-05-05T16:53:13","modified_gmt":"2024-05-05T16:53:13","slug":"make-your-site-accessible","status":"publish","type":"post","link":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/make-your-site-accessible\/","title":{"rendered":"Make your site accessible"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Make your site accessible<\/h2>\n\n\n\n<p>Accessibility means ensuring that people with disabilities can use, interact with, and contribute to websites, web tools, and the materials they contain. Making websites and materials accessible also often makes them easier for everyone to use and understand.<\/p>\n\n\n\n<p>The information below outlines what you should do to improve accessibility on your own Campus Resource, Student Organization, and Portfolio sites and those you\u2019re contributing to.\u00a0You can find out more information about OpenLab accessibility features in\u00a0<a href=\"https:\/\/openlab.sps.cuny.edu\/help-documentation\/accessibility-of-the-openlab\/\" data-type=\"post\" data-id=\"306\">Accessibility of the OpenLab<\/a>.\u00a0CUNY\u2019s site on accessibility standards also has helpful information on\u00a0<a href=\"http:\/\/www2.cuny.edu\/accessibility\/content\/\">making digital content accessible<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Editoria11y Accessibility Checker<\/h3>\n\n\n\n<p>Like a spell check for accessibility, you can use the\u00a0<a href=\"https:\/\/openlab.sps.cuny.edu\/help-documentation\/use-editoria11y-to-check-accessibility\/\" data-type=\"post\" data-id=\"299\">Editoria11y Accessibility Checker<\/a>\u00a0plugin to check your whole site. The plugin will display any existing issues with a thorough description of what they are and how you can address them.\u00a0It can be helpful to activate on your site so that you have its guidance as you\u2019re going through any of the steps below to provide additional information and suggestions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Posts and Pages<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"headings\">Headings and Fonts<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Organize content in a post or page using headings to structure the information you present to create a clear visual hierarchy.\n<ul class=\"wp-block-list\">\n<li>Rationale: using a logical structure will benefit everyone who visits your site. The information is easier to scan for sighted users. People using screen readers can use headings to navigate among the different sections.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Use the Heading block, rather than bold or italics in a Paragraph block to indicate a heading. (See screenshots below.)\n<ul class=\"wp-block-list\">\n<li>The Heading 1 style should only be used once per page. Don\u2019t use Heading 2 styles too often; they should be reserved just for sub-section titles.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Use common, recognizable fonts that provide a strong contrast with the background color of the page.&nbsp; This will not be an issue for most OpenLab members if you stick to the default fonts and colors for your theme.&nbsp; However, if you\u2019re hanging the text or background colors, you can find more information about contrast in&nbsp;<a href=\"https:\/\/webaim.org\/articles\/visual\/lowvision#highcontrast\">WebAim: Visual Disabilities: High Contrast<\/a>.\n<ul class=\"wp-block-list\">\n<li>Avoid using colors that create a low contrast; for example, light color fonts on a white background.<\/li>\n\n\n\n<li>Avoid script fonts, which can be difficult to read for everyone; and especially people with visual impairments.<\/li>\n\n\n\n<li>Try viewing your site while zoomed in, which is a common practice to increase readability.&nbsp; You can do this by pressing the ctrl and + keys together, or command + on a Mac.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"497\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible1_Headings.png?resize=1024%2C497&#038;ssl=1\" alt=\"\" class=\"wp-image-295\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible1_Headings.png?resize=1024%2C497&amp;ssl=1 1024w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible1_Headings.png?resize=300%2C146&amp;ssl=1 300w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible1_Headings.png?resize=768%2C372&amp;ssl=1 768w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible1_Headings.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Heading block<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"links\">Links<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use informative and specific wording for the text that the user will click on, to describe where the link will take them.&nbsp; For example, if you are linking to an accessibility article, use descriptive text such as \u201cArticle on Accessibility.\u201d\n<ul class=\"wp-block-list\">\n<li>Avoid vague phrases like \u201cClick here.\u201d<\/li>\n\n\n\n<li>Avoid using the word \u201clink\u201d because screen readers will already alert the user that the text is a link.<\/li>\n\n\n\n<li>Avoid using URLs in the link text, because they are cumbersome when read aloud.&nbsp; E.g. Use \u201cW3C Tutorial on Functional Images\u201d rather than \u201chttps:\/\/www.w3.org\/WAI\/tutorials\/images\/functional\u201d.<\/li>\n\n\n\n<li>Rationale: If someone is using a screen reader, which will read the links out loud, the user will be able to know where a link will take them before clicking.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"tables\">Tables<\/h4>\n\n\n\n<p>It\u2019s best to avoid using tables to display information if they\u2019re not necessary. Tables may not display well on mobile, especially if the cells contain a lot of text. While tables in WordPress have some accessibility options, such as defining a header row, there are some table accessibility functions that aren\u2019t possible without editing the HTML, such as tables with two headers.<\/p>\n\n\n\n<p>If it is necessary to use a table, be sure to indicate which row is a header row, if applicable. This is required for screen readers to navigate the table correctly.&nbsp;<\/p>\n\n\n\n<p>You can add this in the settings for the table block in the post or page editor. You can also add a caption for the table.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible2_TableHeader.png?resize=1024%2C508&#038;ssl=1\" alt=\"\" class=\"wp-image-296\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible2_TableHeader.png?resize=1024%2C508&amp;ssl=1 1024w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible2_TableHeader.png?resize=300%2C149&amp;ssl=1 300w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible2_TableHeader.png?resize=768%2C381&amp;ssl=1 768w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible2_TableHeader.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Header section of a table<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"images\">Images<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Include alternative text for all images.&nbsp; When you add a new image or select an image block, include short text in the&nbsp;<strong>Alt Text<\/strong>&nbsp;field in the block settings sidebar panel. \n<ul class=\"wp-block-list\">\n<li>Do not include the words \u201cphoto of\u201d or \u201cimage of\u201d because the screen reader will already signal that it is an image file. Keep the description short and informative.<\/li>\n\n\n\n<li>For images that represent concepts and information, such as photos and illustrations, include alt text that briefly conveys the essential information presented by the image. For more on alt text for different types of images, see&nbsp;<a href=\"http:\/\/www2.cuny.edu\/accessibility\/content\/websites\/#images\">CUNY\u2019s guide to image accessibility<\/a>.<\/li>\n\n\n\n<li>Rationale: Alternative text, or \u201calt text\u201d for short, refers to a short description for images that will be read aloud by screen readers, and is required for accessibility.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Remove any text in the&nbsp;<strong>Title<\/strong>&nbsp;field.\n<ul class=\"wp-block-list\">\n<li>Rationale: WordPress automatically creates an image title that is the same as the image file name. Usually this results in a meaningless title, such as \u201cIMG_5981.\u201d Titles are optional and some browsers&nbsp; or devices may not support them, so it is better to include only alt text and avoid the screen reader either missing the title or reading the same information twice.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"513\" src=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible3_ImageBlock.png?resize=1024%2C513&#038;ssl=1\" alt=\"\" class=\"wp-image-297\" srcset=\"https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible3_ImageBlock.png?resize=1024%2C513&amp;ssl=1 1024w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible3_ImageBlock.png?resize=300%2C150&amp;ssl=1 300w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible3_ImageBlock.png?resize=768%2C385&amp;ssl=1 768w, https:\/\/i0.wp.com\/openlab.sps.cuny.edu\/help-documentation\/wp-content\/uploads\/sites\/48\/2024\/05\/MakingYourWorkAccessible3_ImageBlock.png?w=1200&amp;ssl=1 1200w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Add alt text in the block settings sidebar panel<\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"video\">Video and Animation<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Do not autoplay video and animated gifs with flashing visual content.\n<ul class=\"wp-block-list\">\n<li>Rationale: People using screen readers may have difficulty hearing the reader\u2019s output if other audio is playing at the same time.<\/li>\n\n\n\n<li>Rationale: Quickly blinking or flashing images&nbsp;can trigger seizures in people with certain types of seizure disorders.<\/li>\n\n\n\n<li>Rationale: Animations can be disorienting to many people, especially those with certain types of cognitive disorders.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Include captions for video.&nbsp; Captions provide text versions of the words spoken in a video.&nbsp; It is essential for people who cannot hear the audio, and can be helpful for all users of your site, including people not fluent in the language used in the video\/audio, or people who are working in a quiet space.\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.youtube.com\/\">YouTube<\/a> provides instructions for&nbsp;<a href=\"https:\/\/support.google.com\/youtube\/answer\/2734796?hl=en\">adding subtitles and closed captions<\/a>&nbsp;on your own videos. If you\u2019re using a video someone else uploaded, you can&nbsp;<a href=\"https:\/\/support.google.com\/youtube\/answer\/100078\">check whether captions are provided<\/a>&nbsp;before embedding it on your site.<\/li>\n\n\n\n<li>You can find information on additional tools in CUNY\u2019s guide to&nbsp;<a href=\"http:\/\/www2.cuny.edu\/accessibility\/content\/videos\/#video_captioning_tools\">video captioning tools<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Additional Resources<\/h3>\n\n\n\n<p>Below are some more helpful resources on how to make your site more accessible:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\">W3C Images Tutorial<\/a><\/li>\n\n\n\n<li>CUNY Guide to accessible uses of&nbsp;<a href=\"http:\/\/cats.cuny.edu\/reasonableaccommodations\/TechnologyintheClassroom.html\">Technology in the Classroom and for Online Courses<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WebAIM Color Contrast Checker<\/a>&nbsp;\u2013 can be used to verify color contrasts match accessibility standards<\/li>\n\n\n\n<li><a href=\"http:\/\/wave.webaim.org\/\">Web Accessibility Evaluation Tool<\/a>&nbsp;(WAVE) \u2013 can be used to find any accessibility errors on your Site<\/li>\n\n\n\n<li><a href=\"https:\/\/er.educause.edu\/articles\/2017\/1\/ada-compliance-for-online-course-design\">ADA Compliance for Online Course Design<\/a><\/li>\n<\/ul>\n\n\n\n<p>This article is adapted from&nbsp;<a href=\"https:\/\/openlab.citytech.cuny.edu\/blog\/help\/openlab-help\/\">City Tech OpenLab Help<\/a>, under a&nbsp;<a href=\"http:\/\/creativecommons.org\/licenses\/by-nc-sa\/3.0\/\">CC BY-NC-SA license<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make your site accessible Accessibility means ensuring that people with disabilities can use, interact with, and contribute to websites, web tools, and the materials they contain. Making websites and materials accessible also often makes them easier for everyone to use and understand. The information below outlines what you should do to improve accessibility on your [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-293","post","type-post","status-publish","format-standard","hentry","category-wordpress-basics"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/posts\/293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/comments?post=293"}],"version-history":[{"count":6,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/posts\/293\/revisions"}],"predecessor-version":[{"id":311,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/posts\/293\/revisions\/311"}],"wp:attachment":[{"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/media?parent=293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/categories?post=293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.sps.cuny.edu\/help-documentation\/wp-json\/wp\/v2\/tags?post=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}