{"id":1631,"date":"2021-04-22T14:09:59","date_gmt":"2021-04-22T14:09:59","guid":{"rendered":"https:\/\/web.uri.edu\/wordpress\/?page_id=1631"},"modified":"2021-04-22T14:09:59","modified_gmt":"2021-04-22T14:09:59","slug":"accessibility","status":"publish","type":"page","link":"https:\/\/web.uri.edu\/wordpress\/content-guide\/accessibility\/","title":{"rendered":"Accessibility"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Content Guide<\/h1>\n\n\n<section class=\"cl-wrapper cl-menu-wrapper\"><nav id=\"\" class=\"cl-menu  \" data-name=\"content-guide\" data-show-title=\"0\"><ul id=\"menu-content-guide\" class=\"cl-menu-list cl-menu-list-no-js\"><li id=\"menu-item-3052\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3052\"><a href=\"https:\/\/web.uri.edu\/wordpress\/content-guide\/\">Overview<\/a><\/li>\n<li id=\"menu-item-3057\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3057\"><a href=\"https:\/\/web.uri.edu\/wordpress\/content-guide\/getting-started\/\">Basics<\/a><\/li>\n<li id=\"menu-item-3056\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3056\"><a href=\"https:\/\/web.uri.edu\/wordpress\/content-guide\/writing\/\">Writing<\/a><\/li>\n<li id=\"menu-item-3053\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3053\"><a href=\"https:\/\/web.uri.edu\/wordpress\/content-guide\/images\/\">Images<\/a><\/li>\n<li id=\"menu-item-3058\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3058\"><a href=\"https:\/\/web.uri.edu\/wordpress\/content-guide\/documents\/\">Documents<\/a><\/li>\n<li id=\"menu-item-3055\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3055\"><a href=\"https:\/\/web.uri.edu\/wordpress\/content-guide\/accessibility\/\">Accessibility<\/a><\/li>\n<li id=\"menu-item-3054\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3054\"><a href=\"https:\/\/web.uri.edu\/wordpress\/content-guide\/library\/\">More Guides<\/a><\/li>\n<\/ul><\/nav><\/section>\n\n\n\n<h2 class=\"wp-block-heading section-title\">Accessibility<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<p class=\"type-intro fullwidth wp-block-paragraph\">URI\u2019s website is for everyone. The institution embraces equity, diversity, and inclusion, and its website must communicate the same.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a state institution, we aim to be compliant with the <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#requirements-for-wcag-2-1\">Web Content Accessibility Guidelines (WCAG) v2.1<\/a>, Level AA, the technical standard for website accessibility under the Americans with Disabilities Act (ADA). As a site editor maintaining one or more public University websites, the content you publish must abide by this standard. Familiarize yourself with the best practices outlined here to help <a href=\"https:\/\/www.w3.org\/WAI\/people\/\">ensure your site works well for everyone<\/a>.<\/p>\n\n\n<a class=\"cl-button  \" href=\"https:\/\/web.uri.edu\/accessibility\/\" title=\"\">Digital Accessibility at URI<\/a><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<ul class=\"wp-block-list toc\">\n<li><a href=\"\/wordpress-draft\/#quick-wins\">Quick wins<\/a><\/li>\n\n\n\n<li><a href=\"\/wordpress-draft\/#media\">Images and videos<\/a><\/li>\n\n\n\n<li><a href=\"\/wordpress-draft\/#design\">Design and interaction<\/a><\/li>\n\n\n\n<li><a href=\"\/wordpress-draft\/#writing\">Writing<\/a><\/li>\n\n\n\n<li><a href=\"\/wordpress-draft\/#success-criteria\">Success criteria<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n<section class=\"cl-wrapper cl-breakout-wrapper\"><div class=\"cl-breakout use-content-width  quick-wins\"><div class=\"content-width\">\n\n<h2 id=\"quick-wins\" class=\"wp-block-heading\">Quick wins for site editors<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Digital accessibility may seem daunting, and understandably so. It&#8217;s a complex topic with a lot of technical nuance. Fortunately, though, as a content editor, there are relatively few things you need to keep in mind. You can help make your site is accessible to a wide audience by following these three major rules:<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Alternative Text<\/h3>\n\n\n\n<p class=\"type-sans small wp-block-paragraph\">Make sure all images on your site have <a href=\"https:\/\/www.section508.gov\/create\/alternative-text\/\">alternative text<\/a>. It&#8217;s straight-forward. Open up your site&#8217;s media library and browse through each image to make sure it has alt text, and add alt text if it doesn&#8217;t. And, make sure any new images that are uploaded get alt text added, too.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Descriptive Links<\/h3>\n\n\n\n<p class=\"type-sans small wp-block-paragraph\">Make sure links on your site describe what people should expect when using them. Avoid language like &#8220;Click here&#8221; or &#8220;Learn more&#8221;, which isn&#8217;t helpful for people using assistive technology. Instead, use language like &#8220;Learn about digital accessibility&#8221; or &#8220;Download accessibility guidance&#8221;.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Heading Hierarchy<\/h3>\n\n\n\n<p class=\"type-sans small wp-block-paragraph\">Make sure to use heading levels in proper order. Different heading levels, like H1, H2, and H3, are not about choosing a font size that looks good. Heading levels are an integral part of content structure. Don&#8217;t skip heading levels, and avoid H1s \u2013 the page title should be the only H1 on the page.<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Even just following these three rules will make a big difference in your site&#8217;s overall accessibility, and they don&#8217;t require using any special tools or software. You can, however, use a tool (we recommend the <a href=\"https:\/\/www.siteimprove.com\/why-siteimprove\/integrations\/browser-extensions\/\">browser extension from SiteImprove<\/a>) to help identify these and other compliance issues across your site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For more complete guidance on how to be accessible, take a look at the other sections below.<\/p>\n\n<\/div><\/div><\/section>\n\n\n<h2 id=\"media\" class=\"wp-block-heading\">Images and videos<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use alternative text for images:<\/strong> Always include appropriate \u201calt\u201d text for images.&nbsp; Alt text helps visitors using assistive technology understand your web content. In WordPress, add alt text through the Media Library after uploading or before adding to a page or post.<\/li>\n\n\n\n<li><strong>Avoid text in images:<\/strong> While it\u2019s possible to use alt text as a stand-in for text embedded in images, it\u2019s best to keep text separate.&nbsp;Text that&#8217;s contextually important to the page should never be included in an image.<\/li>\n\n\n\n<li><strong>Ensure videos have captions:<\/strong> All videos must be closed captioned. Those that aren\u2019t must provide a transcript, and synchronized media presentations should have an audio description as well. Avoid using videos to display text that should otherwise be in the body of the page.<\/li>\n<\/ul>\n\n\n\n<p class=\"small type-sans wp-block-paragraph\"><a href=\"\/wordpress-draft\/#success-criteria\">Learn about all success criteria for site editors<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\" \/>\n\n\n\n<h2 id=\"design\" class=\"wp-block-heading\">Design and interaction<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use sufficient contrast:<\/strong> Text must have <a href=\"https:\/\/web.uri.edu\/wordpress\/design\/color\/#usability\">sufficient contrast<\/a> against backgrounds, and should generally not be layered over images. Some components, like <a href=\"https:\/\/web.uri.edu\/wordpress\/components\/heroes\/\">heroes<\/a>, are specifically designed for this purpose, but particularly busy or high-contrast images may still make reading text difficult. If any part of the text becomes illegible at any screen size, consider a different image or place the text elsewhere.<\/li>\n\n\n\n<li><strong>Use color appropriatly:<\/strong> People who are color-blind may see certain elements differently than intended. If you are not color-blind, use a tool like <a href=\"https:\/\/michelf.ca\/projects\/sim-daltonism\/\">Sim Daltonism<\/a> to understand how different types of color blindness impact the way text, images, and other elements may appear, and ensure that all elements are meaningful and legible to everyone.<\/li>\n\n\n\n<li><strong>Test your pages on a small screen: <\/strong>Many URI pages are primarily viewed on a phone. Your page must work well on small screens. Tip: design first for a phone, second for a larger display.<\/li>\n\n\n\n<li><strong>Avoid instructions on how to use a page:<\/strong> If your page requires instructions, redesign it. Most content can be designed intuitively for the intended audience, and unnecessary language can be avoided. For example, visitors already know how forms work; there\u2019s no need to use language such as, \u201cfill in the form below.\u201d<\/li>\n\n\n\n<li><strong>Avoid opening links in new windows:<\/strong> Research indicates that <a href=\"https:\/\/www.nngroup.com\/articles\/new-browser-windows-and-tabs\/\">new windows make it harder for your visitor to browse your site<\/a>.<\/li>\n<\/ul>\n\n\n\n<p class=\"small type-sans wp-block-paragraph\"><a href=\"\/wordpress-draft\/#success-criteria\">Learn about all success criteria for site editors<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\" \/>\n\n\n\n<h2 id=\"writing\" class=\"wp-block-heading\">Writing<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use plain language:<\/strong> Simple and positive language makes it easier for the public to read and understand our website. Consider visitors who aren\u2019t fluent in English or otherwise struggle with reading by avoiding excessive acronyms, jargon, or clever homophonic substitutions.<\/li>\n\n\n\n<li><strong>Use proper headings:<\/strong> Assistive technology relies on heading elements and other HTML markup to navigate a page\u2019s content structure. <em>Heading hierarchy is more important than visual styling.<\/em> Avoid skipping over a level when nesting content (e.g. follow an H2 with an H3, not an H4).<\/li>\n\n\n\n<li><strong>Use engaging link text:<\/strong> A good link informs the visitor what it is without reading the content around it. It can be a few words. Including a verb in your link text can be helpful. Do not use \u201cclick,\u201d \u201ctap,\u201d or any other hardware reference.\n<ul class=\"wp-block-list\">\n<li>Do:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/web.uri.edu\/president\/wp-content\/uploads\/sites\/2061\/StratPlan2023_Brochure_FINAL.pdf\">Download the Strategic Plan<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/\">Learn about digital accessibility fundamentals<\/a> from W3C.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Don\u2019t:\n<ul class=\"wp-block-list\">\n<li>\u201c<a href=\"https:\/\/web.uri.edu\/president\/wp-content\/uploads\/sites\/2061\/StratPlan2023_Brochure_FINAL.pdf\">Click here<\/a>\u201d to download the Strategic Plan.<\/li>\n\n\n\n<li>W3C offers guidance on digital accessibility. <a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/\">Learn more<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Avoid FAQs:<\/strong><a href=\"https:\/\/www.plainlanguage.gov\/guidelines\/web\/avoid-faqs\/\"> Frequently asked\/anticipated questions can be overwhelming<\/a> and are known to be a visitor\u2019s last resort and source of frustration. Instead, organize your content intuitively.<\/li>\n\n\n\n<li><strong>Avoid describing where elements appear:<\/strong> On a big monitor, something might be on the right, but on a smaller screen, it may appear below.&nbsp; Either link directly to the resource or reference it without describing its location.<\/li>\n<\/ul>\n\n\n\n<p class=\"small type-sans wp-block-paragraph\"><a href=\"\/wordpress-draft\/#success-criteria\">Learn about all success criteria for site editors<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 id=\"success-criteria\" class=\"wp-block-heading\">Success criteria for site editors<\/h2>\n\n\n\n<p class=\"type-intro wp-block-paragraph\">WCAG 2.1 defines 50 success criteria for Level AA compliance. While many criteria are met at the level of the <a href=\"https:\/\/web.uri.edu\/wordpress\/design\/theme\/\" data-type=\"page\" data-id=\"699\">theme<\/a> and <a href=\"https:\/\/web.uri.edu\/wordpress\/components\/\" data-type=\"page\" data-id=\"188\">component library<\/a>, beyond the scope of responsibilities for site editors, some are entirely dependent on content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">With that in mind, we&#8217;ve identified a subset of the WCAG 2.1 Level AA criteria that, based on how public websites are managed at URI, directly apply to the scope of routine site editing. You&#8217;ll notice that the best practices outlined both on this page and in many areas of the Content Guide align with one or more of these criteria. We may update this list if we identify other rules that site editors need to be aware of.<\/p>\n\n\n<p>[ninja_tables id=&#8221;2761&#8243;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>URI embraces equity, diversity, and inclusion, and its website must communicate the same.\u00a0Become familiar with success criteria to help ensure URI&#8217;s websites work well for everyone.<\/p>\n","protected":false},"author":4861,"featured_media":0,"parent":1624,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-1631","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/web.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/4861"}],"replies":[{"embeddable":true,"href":"https:\/\/web.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=1631"}],"version-history":[{"count":0,"href":"https:\/\/web.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1631\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/web.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/1624"}],"wp:attachment":[{"href":"https:\/\/web.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=1631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}