{"id":1803,"date":"2019-06-17T09:56:00","date_gmt":"2019-06-17T16:56:00","guid":{"rendered":"http:\/\/blogs.oregonstate.edu\/extensionweb\/?p=1803"},"modified":"2019-06-17T09:56:00","modified_gmt":"2019-06-17T16:56:00","slug":"formatting-content-to-be-accessible-to-all-visitors","status":"publish","type":"post","link":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/2019\/06\/17\/formatting-content-to-be-accessible-to-all-visitors\/","title":{"rendered":"Formatting Content to be Accessible to All Visitors"},"content":{"rendered":"<p><span style=\"font-weight: 400\">A &#8220;typical&#8221; computer\/tablet\/smartphone setup makes a lot of assumptions about the abilities of the person using it. For example, it may assume they are able to see a screen, hear sound from a speaker, type on a keyboard, and manipulate a mouse. These assumptions are not always correct. When this is the case, people use \u201cassistive technology\u201d to access websites. Some examples include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">\u201cScreen reader\u201d software that reads web page text out loud for people who can\u2019t see it on a screen.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Braille devices that present web page text for people who can neither see a screen nor hear spoken text.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Special keyboard navigation for people who have trouble controlling a mouse.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Voice command or eye tracking software for people who can\u2019t use a mouse or a keyboard.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Assistive technology doesn\u2019t only have to do with what we might consider a \u201cdisability\u201d. It also includes, for example, automatic translators and \u201cnight modes\u201d on cell phones.<\/span><\/p>\n<p><span style=\"font-weight: 400\">We want our content to be available to <\/span><i><span style=\"font-weight: 400\">all <\/span><\/i><span style=\"font-weight: 400\">Oregonians. Plus, it is legally required to be accessible to all people regardless of ability. So, our website needs to work with all assistive technology.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Our team makes sure that the <\/span><i><span style=\"font-weight: 400\">framework<\/span><\/i><span style=\"font-weight: 400\"> of the Extension website is accessible. This includes the navigation, search functionality, and other shared features. However, content authors need to help ensure that the <\/span><i><span style=\"font-weight: 400\">content<\/span><\/i><span style=\"font-weight: 400\"> on the site is accessible as well.<\/span><\/p>\n<p><span style=\"font-weight: 400\">For content authors, there are three main rules for accessible content:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Make all content available as \u201ctrue text\u201d (i.e. highlightable with your mouse).<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Use text formatting correctly to provide structure and meaning to content.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Don\u2019t make assumptions about the technology visitors are using to access the content.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400\">True Text Content<\/span><\/h2>\n<p><span style=\"font-weight: 400\">\u201cTrue text\u201d is text that you can highlight with a mouse. Screen readers cannot read any content that isn&#8217;t true text. That content is unavailable to people using them. Therefore, all content must be available as true text in some form.<\/span><\/p>\n<p><span style=\"font-weight: 400\">Most of the content that you enter in the Extension website <\/span><i><span style=\"font-weight: 400\">will<\/span><\/i><span style=\"font-weight: 400\"> be true text. There are only three situations where you need to worry about this:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Images that contain text<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">PDFs that contain scanned documents<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Videos and other multimedia<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400\">Images Containing Text<\/span><\/h3>\n<p><span style=\"font-weight: 400\">When an image contains text, it needs to be available as \u201ctrue text\u201d somewhere else on the page. The \u201cAlternative Text\u201d field exists for this purpose specifically if the text is not too long. Here is an<\/span><a href=\"https:\/\/webaim.org\/techniques\/alttext\/\"> <span style=\"font-weight: 400\">article about writing alt text with some examples<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>\n<p><span style=\"font-weight: 400\">If the image conveys information without text, include a summary of that information. This can be in the page\u2019s body text or the image\u2019s caption or alternative text.<\/span><\/p>\n<h3><span style=\"font-weight: 400\">PDFs Containing Scanned Documents<\/span><\/h3>\n<p><span style=\"font-weight: 400\">Sometimes, when you scan a document, it comes to your computer as an image. This has all the same problems as other images. To test if a PDF contains true text, try to highlight the text inside it. If you can\u2019t, you will need to recreate or fix the document. University of Washington has created a good<\/span><a href=\"http:\/\/www.washington.edu\/accessibility\/documents\/pdf-acrobat\/\"> <span style=\"font-weight: 400\">article about fixing inaccessible PDFs<\/span><\/a><span style=\"font-weight: 400\">.<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Videos and Other Multimedia<\/span><\/h3>\n<p><span style=\"font-weight: 400\">In general, all videos should have captions at least and, ideally, a transcript. The transcript should include text shown in the video if it is not part of the transcribed speech.<\/span><\/p>\n<p><span style=\"font-weight: 400\">If you use YouTube&#8217;s automatic captioning, check that it doesn&#8217;t generate anything problematic.<\/span><\/p>\n<h2><span style=\"font-weight: 400\">Text Formatting<\/span><\/h2>\n<p><span style=\"font-weight: 400\">Many people think of the text toolbar as a way to make text <\/span><i><span style=\"font-weight: 400\">look<\/span><\/i><span style=\"font-weight: 400\"> a certain way. But working with that idea may make content confusing to visitors who do not see web pages the same way you do. Really, the purpose is to <\/span><b>mark certain text as having a certain meaning or purpose<\/b><span style=\"font-weight: 400\">. Here are the controls that can mark content this way:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><b>Bold (\u201cB\u201d icon)<\/b><span style=\"font-weight: 400\">: Marks text that is important. A screen reader might read it in a different tone\/volume or single it out.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Superscript (\u201cx<\/b><b>2<\/b><b>\u201d icon)<\/b><span style=\"font-weight: 400\">: Marks text that is superscript, such as in mathematical equations or chemical names. This is <\/span><b>not<\/b><span style=\"font-weight: 400\"> for footnote references (there is another control for that) or making text smaller. In the latter case, screen readers might not read the text correctly if they assume it is part of an equation.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Subscript (\u201cx<\/b><b>2<\/b><b>\u201d icon)<\/b><span style=\"font-weight: 400\">: Marks text that is subscript, such as in mathematical equations or chemical names. This is <\/span><b>not<\/b><span style=\"font-weight: 400\"> for making text smaller. Screen readers might not read the text correctly if they assume it is part of an equation.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Footnote (\u201ca<\/b><b>1<\/b><b>\u201d icon)<\/b><span style=\"font-weight: 400\">: Creates a reference to a footnote at the bottom of the page.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Blockquote (\u201c icon)<\/b><span style=\"font-weight: 400\">: Marks a chunk of text that is quoted from another source. Do not use this just to indent text.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Link (chain link with \u201c+\u201d icon)<\/b><span style=\"font-weight: 400\">: Marks text as being a link to another page. The text that visitors click on to follow the link is called the \u201clink text\u201d.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Bulleted list<\/b><span style=\"font-weight: 400\">: Marks text as making up a bulleted list. Do not use dashes, asterisks, etc. to create bulleted lists. This control encodes the text so that assistive technology can tell it is a list.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Numbered list<\/b><span style=\"font-weight: 400\">: Marks text as making up a numbered. List. Do not type out numbers to create a numbered list. This control encodes the text so that assistive technology can tell it is a list.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Heading dropdown<\/b><span style=\"font-weight: 400\">: The headings are the most important text in a piece of content. People who are able to see text on the screen are able to \u201cscan\u201d content by scrolling. People using screen readers do this by listening to the headings before diving into the full text. This is common behavior, so it is important to use headings correctly. Here are some tips:<\/span>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Always start with \u201cheading 2\u201d. For further levels of headings, go in order. I.e. do not go from heading 2 straight to heading 4.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Use headings to separate sections instead of horizontal lines and\/or bold text.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\"> Do not use this dropdown as a way to emphasize text. This prevents the scanning functionality of screen readers from working as intended.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">There are a couple of formatting controls in the text toolbar \u00a0that only create visual elements on the page. These are invisible to screen readers, so don\u2019t rely on them for meaning or organization:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><b>Pull quote<\/b><span style=\"font-weight: 400\"> (next to block quote icon): Displays some text in a large, stylized font.<\/span><\/li>\n<li style=\"font-weight: 400\"><b>Horizontal line<\/b><span style=\"font-weight: 400\">: Creates a gray horizontal line.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400\">Accessible Writing<\/span><\/h2>\n<p><span style=\"font-weight: 400\">There are a few things to keep in mind to ensure your content makes sense to all visitors.<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Meaningful Link Text<\/span><\/h3>\n<p><span style=\"font-weight: 400\">Another common way for screen reader users to \u201cscan\u201d a page is by pulling out and listening only to the links. Therefore, it is important that link text is meaningful by itself. It shouldn\u2019t rely on the surrounding text. It should describe what the user will get if they click on the link. Here are some tips for writing meaningful link text:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Don\u2019t use the raw URL of the link by itself. E.g. instead of \u201c<\/span><span style=\"font-weight: 400\">https:\/\/google.com<\/span><span style=\"font-weight: 400\">\u201d, use \u201c<\/span><span style=\"font-weight: 400\">Google<\/span><span style=\"font-weight: 400\">\u201d. This is particularly important for software that may let a person say the link text to \u201cclick\u201d it.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Avoid the phrase \u201cclick here\u201d. When that text is read on its own, it is completely meaningless. It is also exclusionary to people who are not using a mouse. In general, instead of saying \u201c<\/span><span style=\"font-weight: 400\">Click here<\/span><span style=\"font-weight: 400\"> to do X\u201d, you should say \u201c<\/span><span style=\"font-weight: 400\">Do X<\/span><span style=\"font-weight: 400\">\u201d.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400\">Acronyms and All-caps<\/span><\/h3>\n<p><span style=\"font-weight: 400\">Acronyms are the only words that should be in all caps. Text in all capital letters is more difficult to read for visitors with Dyslexia. Screen readers may also assume words in all caps are acronyms and mispronounce them.<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Symbols and Special Characters<\/span><\/h3>\n<p><span style=\"font-weight: 400\">When you need a symbol that is not on your keyboard, copy and paste it from another source. Don&#8217;t &#8220;fake it&#8221; with letters you can type. For example, don\u2019t use a superscript letter \u201cO\u201d to fake a degree symbol (<\/span><b>\u00b0<\/b><span style=\"font-weight: 400\">). Other examples are trademark symbols, multiplication signs, and letters from other languages. Here is a<\/span><a href=\"https:\/\/coolsymbol.com\/\"> <span style=\"font-weight: 400\">site where you can copy many special characters<\/span><\/a><span style=\"font-weight: 400\">. Note that most of these characters have special meanings and are not for decoration.<\/span><\/p>\n<h3><span style=\"font-weight: 400\">Data Tables<\/span><\/h3>\n<p><span style=\"font-weight: 400\">Tables are very visual and so difficult to encode in a way that assistive technology can make sense of. Here are some general tips:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Don\u2019t upload a table as an image.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Only use tables when necessary. If possible, use lists or other ways to display the information.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Use the simplest table possible. E.g. avoid cells that span more than one row\/column.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Contact EESC if you need help setting up an accessible data table.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400\">Inclusive Writing<\/span><\/h3>\n<p><span style=\"font-weight: 400\">When you are writing, avoid assuming that visitors are using the website the same way you do. Particularly:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Don\u2019t reference the position or appearance of visual elements on the page. Not everyone can see these, and even if they can they won\u2019t always look the same. Instead of \u201cthe orange button\u201d or \u201cthe button to the right\u201d, say something like \u201cthe button labeled \u2018Buy Now\u2019\u201d.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Don\u2019t refer to actions that depend on the device or software the visitor is using. These include \u201cclick\u201d, \u201cright click\u201d, \u201cscroll\u201d, pressing keys, opening a particular program, etc.<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400\">Accessibility Resources<\/span><\/h2>\n<p><span style=\"font-weight: 400\">There are many, many resources on the web about accessibility, and OSU has some of its own. Here are some of our favorites:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/accessibility.oregonstate.edu\/it-access\"><span style=\"font-weight: 400\">IT Accessibility at OSU<\/span><\/a><span style=\"font-weight: 400\">: Information and resources about accessible web pages, documents, and multimedia. Also includes OSU policies on accessibility.<\/span><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/webaim.org\/\"><span style=\"font-weight: 400\">WebAIM<\/span><\/a><span style=\"font-weight: 400\">: An organization that aims to improve web accessibility throughout the Internet. They have great articles and tools.<\/span><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/www.section508.gov\/create\/web-content\"><span style=\"font-weight: 400\">Developing Accessible Web Content from Section508.gov<\/span><\/a><span style=\"font-weight: 400\">: \u00a0Guidelines for creating web content that meet legal requirements for accessibility.<\/span><\/li>\n<li style=\"font-weight: 400\"><a href=\"https:\/\/www.w3.org\/standards\/webdesign\/accessibility\"><span style=\"font-weight: 400\">W3C Accessibility<\/span><\/a><span style=\"font-weight: 400\">: This organization developed the requirements that determine compliance with accessibility laws. They have a very in-depth guide to meeting these requirements.<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A &#8220;typical&#8221; computer\/tablet\/smartphone setup makes a lot of assumptions about the abilities of the person using it. For example, it may assume they are able to see a screen, hear sound from a speaker, type on a keyboard, and manipulate a mouse. These assumptions are not always correct. When this is the case, people use&hellip; <a href=\"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/2019\/06\/17\/formatting-content-to-be-accessible-to-all-visitors\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":301,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-1803","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7URDE-t5","_links":{"self":[{"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/posts\/1803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/users\/301"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/comments?post=1803"}],"version-history":[{"count":1,"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/posts\/1803\/revisions"}],"predecessor-version":[{"id":1804,"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/posts\/1803\/revisions\/1804"}],"wp:attachment":[{"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/media?parent=1803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/categories?post=1803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.blogs.oregonstate.edu\/extensionweb\/wp-json\/wp\/v2\/tags?post=1803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}