{"id":23006,"date":"2024-05-21T13:34:22","date_gmt":"2024-05-21T20:34:22","guid":{"rendered":"https:\/\/wou.edu\/marcom\/?page_id=23006"},"modified":"2024-09-04T09:35:45","modified_gmt":"2024-09-04T16:35:45","slug":"best-practices-for-website-accessibility","status":"publish","type":"page","link":"https:\/\/wou.edu\/marcom\/best-practices-for-website-accessibility\/","title":{"rendered":"Best Practices for Website Accessibility"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_stops=&#8221;#db0a29 0%|#a3080f 100%&#8221; background_enable_pattern_style=&#8221;on&#8221; background_pattern_style=&#8221;diagonal-stripes&#8221; background_pattern_size=&#8221;custom&#8221; background_pattern_width=&#8221;2000px&#8221; background_pattern_height=&#8221;1000px&#8221; background_pattern_horizontal_offset=&#8221;0%&#8221; background_pattern_vertical_offset=&#8221;0%&#8221; custom_padding=&#8221;25px||25px||true|&#8221; hover_enabled=&#8221;0&#8243; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221; background_color=&#8221;#000000&#8243; sticky_enabled=&#8221;0&#8243;][et_pb_row _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; custom_margin=&#8221;|auto|-12px|auto||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.17.6&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; header_font=&#8221;Montserrat|700|||||||&#8221; background_layout=&#8221;dark&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>Best Practices for Website Accessibility<\/h1>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;3px|||||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; custom_padding=&#8221;||0px|||&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Western Oregon University web accessibility guidelines have been created to fulfill<span>\u00a0<\/span><a href=\"https:\/\/wou.edu\/planning\/mission-vision-values-purpose\/#accessibility\">Western Oregon University\u2019s ongoing commitment<\/a><span>\u00a0<\/span>to establish and maintain a learning environment<span>\u00a0<\/span><span>with minimal<\/span><span>\u00a0<\/span>barriers. In order to achieve such an environment, these guidelines have been designed to provide accessible web material<span>\u00a0<\/span><span>and digital content<\/span><span>\u00a0<\/span>to persons<span>\u00a0<\/span><span>of all backgrounds and abilities.<\/span><\/p>\n<h2>Legal Requirements<\/h2>\n<p>Web accessibility guidelines have also been created to meet ethical and legal standards set by Section 504 of the Rehabilitation Act of 1973 and Section 508 of the Rehabilitation Act Amendments of 1998. These laws prohibit Western Oregon University from discriminating against individuals with disabilities and require all material intended for presentation to the general population to be presented in an accessible format for anyone.<\/p>\n<p>[\/et_pb_text][et_pb_toggle title=&#8221;Best Practices to Address the Needs of Persons with Disabilities&#8221; module_id=&#8221;accessibility&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; title_level=&#8221;h2&#8243; title_font_size=&#8221;20px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; custom_css_toggle_title=&#8221;padding:15px!important;&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<ul><\/ul>\n<p><strong>Auditory <b>Impacts or<\/b> Deafness:<\/strong><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Provide transcripts of audio content and Closed Captioned or Full Text transcripts for video materials where applicable.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Transcript of audio descriptions (for persons who are DeafBlind)<\/span><\/li>\n<li>3Play Media (<a href=\"http:\/\/www.3playmedia.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.3playmedia.com\/<\/a>): <span style=\"font-weight: 400;\">cost-effective<\/span> technique for Captioning video content.<\/li>\n<\/ul>\n<p><strong>Cognitive <b>Impacts<\/b>:<\/strong><\/p>\n<ul>\n<li>Do not use flashing or strobe content.<\/li>\n<li><span style=\"font-weight: 400;\">Disable auto-play on media<\/span>.<\/li>\n<li>Provide easy-to-use controls and navigation schemes.<\/li>\n<li>Employ consistency in labeling and navigation, where possible.<\/li>\n<li>Use the clearest, simplest language appropriate to the content.<\/li>\n<li>Provide control over all time-based media (i.e., slideshows).<\/li>\n<\/ul>\n<p><strong>Visual <b>Impacts and<\/b> Blindness:<\/strong><\/p>\n<ul>\n<li>Use well-structured and semantic HTML.\n<ul>\n<li><span style=\"font-weight: 400;\">Here&#8217;s an example: imagine you have a heading for your website that says &#8220;Welcome to My Awesome Recipes!&#8221; Instead of using `&lt;div&gt;Welcome to My Awesome Recipes!&lt;\/div&gt;`, you would use `&lt;h1&gt;Welcome to My Awesome Recipes!&lt;\/h1&gt;`. The `&lt;h1&gt;` tag tells the browser (and anyone reading the code) that this is a very important heading.<\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">Using the right tags makes your website code cleaner, easier to understand, and even helps things like search engines and screen readers for people with visual impacts understand your website better!<\/span><\/li>\n<\/ul>\n<\/li>\n<li>Use meaningful ALT attributes on images.\n<ul>\n<li><span style=\"font-weight: 400;\">Adding &#8220;alt text&#8221; to your images is like giving them a short, descriptive caption so people who can&#8217;t see them still understand what they&#8217;re about.<\/span><\/li>\n<\/ul>\n<\/li>\n<li>Do not use tables for layout purposes.<\/li>\n<li>Use headings in <span style=\"font-weight: 400;\">chronological<\/span> order (think if <span style=\"font-weight: 400;\">someone<\/span> had the page only displaying in a list format)<\/li>\n<li><span style=\"font-weight: 400;\">Label all form elements.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Properly linearize content, especially forms to ensure a logical flow of information that can be easily understood and navigated by assistive technologies and keyboard users.<\/span><\/li>\n<li>Provide sufficient contrast between foreground and background elements.<br \/><span style=\"font-weight: 400;\">Vischeck (<\/span><a href=\"http:\/\/www.vischeck.com\/\"><span style=\"font-weight: 400;\">http:\/\/www.vischeck.com\/<\/span><\/a><span style=\"font-weight: 400;\">): Simulates colorblind vision.<\/span><\/li>\n<li><span style=\"font-weight: 400;\">Use appropriate font types, proper spacing, and use of bold, italic and color to make the content easier on the eyes to read.<\/span><\/li>\n<li>Avoid using pop-up windows.<\/li>\n<li>Do not use Flash\u2122 for navigation and avoid using it in other places, where possible.<\/li>\n<li>Provide access keys and \u201cskip to content\u201d links.<\/li>\n<li>Use WAI-ARIA landmarks where possible.<\/li>\n<li>Position hidden content of-screen instead of using \u201cdisplay:none.\u201d<\/li>\n<li>Provide additional guidance and controls using of-screen content (i.e. descriptions of the page layout and available access keys).<\/li>\n<li>Provide transcripts of audio content and Full-Text transcripts or Captioning for video materials where applicable.<\/li>\n<li>Do not use flashing or strobe content.<\/li>\n<li>Provide easy-to-use controls and navigation schemes.<\/li>\n<li>Employ consistency in labeling and navigation, where possible.<\/li>\n<li>Use the clearest, simplest language appropriate to the content.<\/li>\n<li>Provide control over all time-based media (i.e., slideshows).<\/li>\n<li><span style=\"font-weight: 400;\">Audio descriptions.<\/span><span size=\"2\" face=\"Arial, Helvetica, sans-serif\"><\/span><\/li>\n<\/ul>\n<p>[\/et_pb_toggle][et_pb_toggle title=&#8221;Non HTML documents&#8221; module_id=&#8221;accessibility&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; title_level=&#8221;h2&#8243; title_font_size=&#8221;20px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; custom_css_toggle_title=&#8221;padding:15px!important;&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<ul><\/ul>\n<p>Many types of document types may not be accessible to screen readers including the following:<\/p>\n<p>\u2022 Images<br \/>\u2022 PDF\u2019s<br \/>\u2022 Word documents<br \/>\u2022 <span style=\"font-weight: 400;\">PowerPoint<\/span><br \/>\u2022 Flash or streaming video<\/p>\n<p><span size=\"2\" face=\"Arial, Helvetica, sans-serif\">Sometimes the software used to create specific file types includes features which allow a user to add accessibility functionality. The problem is that many times using these features properly takes longer than creating the original document.<\/span><\/p>\n<p><span size=\"2\" face=\"Arial, Helvetica, sans-serif\">The easiest method for making a document accessible is to copy the text from the file and paste it into a standard web page. This is especially true for Microsoft Word files with minimal formatting and imagery. Documents designed with page layout software such as InDesign or Quark many times depend on graphic elements to convey their message appropriately. The design staff within the Marketing &amp; Communication office at Western Oregon University will assist individuals wishing to convert graphic layouts of marketing material into an accessible webpage.<\/span><span size=\"2\" face=\"Arial, Helvetica, sans-serif\"><\/span><\/p>\n<p>[\/et_pb_toggle][et_pb_toggle title=&#8221;Where to check pages for accessibility&#8221; module_id=&#8221;accessibility&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; title_level=&#8221;h2&#8243; title_font_size=&#8221;20px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; custom_css_toggle_title=&#8221;padding:15px!important;&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<ul>\n<li>Use the Divi Builder Accessibility tool\n<ul>\n<li>Click on the glasses icon in the bottom left corner on any page of your site while logged in and it will give you options of the items to check. Mainly check the Headings and Color Contrast.<\/li>\n<\/ul>\n<\/li>\n<li>WAVE Web Accessibility Evaluation Tool<span>\u00a0<\/span><a href=\"http:\/\/wave.webaim.org\/\" target=\"_blank\" rel=\"noopener\">http:\/\/wave.webaim.org\/<span><\/span><\/a><\/li>\n<li>Accessibility self test at<span>\u00a0<\/span><a href=\"http:\/\/www.lgta.org\/accessibility\/initial-assessment.html\" target=\"_blank\" rel=\"noopener\">http:\/\/www.lgta.org\/accessibility\/initial-assessment.html<\/a><\/li>\n<li>Lift Software\u2019s accessibility test at<span>\u00a0<\/span><a href=\"http:\/\/www.usablenet.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.usablenet.com\/<\/a><\/li>\n<\/ul>\n<p>[\/et_pb_toggle][et_pb_toggle title=&#8221;Development tools&#8221; module_id=&#8221;accessibility&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; title_level=&#8221;h2&#8243; title_font_size=&#8221;20px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; custom_css_toggle_title=&#8221;padding:15px!important;&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>While creating websites, developers throughout the WOU\u00a0\u2013System should adopt and exceed the web standards established by the Worldwide Web Consortium (W3C) for the creation of online content. Specifically consult the W3C\u2019s page on accessibility (<a href=\"http:\/\/www.w3.org\/TR\/WCAG\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.w3.org\/TR\/WCAG\/<\/a>)<\/p>\n<p>[\/et_pb_toggle][et_pb_toggle title=&#8221;Web applications and tools for webpage managers include&#8221; module_id=&#8221;accessibility&#8221; _builder_version=&#8221;4.23.4&#8243; _module_preset=&#8221;default&#8221; title_level=&#8221;h2&#8243; title_font_size=&#8221;20px&#8221; custom_margin=&#8221;||||false|false&#8221; custom_padding=&#8221;||||false|false&#8221; custom_css_toggle_title=&#8221;padding:15px!important;&#8221; locked=&#8221;off&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<ul>\n<li>Vischeck (<a href=\"http:\/\/www.vischeck.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.vischeck.com\/<\/a>): Simulates colorblind vision.<\/li>\n<li><span style=\"font-weight: 400;\">Web Accessibility Evaluation Tool (WAVE) (<\/span><a href=\"http:\/\/wave.webaim.org\/\"><span style=\"font-weight: 400;\">http:\/\/wave.webaim.org<\/span><\/a><span style=\"font-weight: 400;\">): Accessibility evaluator.<\/span><\/li>\n<li>A number of plugins are available for the Firefox web browser (<a href=\"http:\/\/www.mozilla.org\/en-US\/firefox\/new\/?from=getfirefox\" target=\"_blank\" rel=\"noopener\">http:\/\/www.mozilla.org\/en-US\/firefox\/new\/?from=getfirefox<\/a>) in testing your website\u2019s compliance with accessibility guidelines:<\/li>\n<li>AInspector for WCAG Accessibility Evaluation (<a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/ainspector-wcag\/\">https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/ainspector-wcag\/<\/a>): Easy to use and provides clear, actionable results.<\/li>\n<li>WCAG Contrast Checker (<a href=\"https:\/\/addons.mozilla.org\/en-us\/firefox\/addon\/wcag-contrast-checker\/\" target=\"_blank\" rel=\"noopener\">https:\/\/addons.mozilla.org\/en-us\/firefox\/addon\/wcag-contrast-checker\/<\/a>): Tests to see if elements on the page provide enough contrast to be visible to those with impaired vision.<\/li>\n<\/ul>\n<p>[\/et_pb_toggle][et_pb_text _builder_version=&#8221;4.27.0&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;]<\/p>\n<h3 style=\"font-size: 22px; font-weight: 550; color: #db0a29;\">Additional Resources<\/h3>\n<ul>\n<li>W3C Accessibility (<a href=\"http:\/\/www.w3.org\/standards\/webdesign\/accessibility.html\" target=\"_blank\" rel=\"noopener\">http:\/\/www.w3.org\/standards\/webdesign\/accessibility.html<\/a>)<\/li>\n<li>Designing for Screen Reader Compatibility (<a href=\"http:\/\/webaim.org\/techniques\/screenreader\/\" target=\"_blank\" rel=\"noopener\">http:\/\/webaim.org\/techniques\/screenreader\/<\/a>)<\/li>\n<\/ul>\n<h3 style=\"font-size: 22px; font-weight: 550; color: #db0a29;\"><span size=\"2\" face=\"Arial, Helvetica, sans-serif\">Reference material<\/span><\/h3>\n<p><span size=\"2\" face=\"Arial, Helvetica, sans-serif\"><a href=\"http:\/\/www.section508.gov\/\" target=\"_blank\" rel=\"noopener\">Section 508<\/a><br \/><a href=\"https:\/\/webarchive.library.unt.edu\/eot2008\/20080916031038\/http:\/www.disabilityinfo.gov\/digov-public\/public\/DisplayPage.do?parentFolderId=500\" target=\"_blank\" rel=\"noopener\">Disability Info.gov<\/a><\/span><\/p>\n<p><span size=\"2\" face=\"Arial, Helvetica, sans-serif\"><\/span><\/p>\n<h2><span size=\"2\" face=\"Arial, Helvetica, sans-serif\"><strong>Contact<\/strong><\/span><\/h2>\n<p>For website accessibility issue with Western Oregon University&#8217;s website contact the <a href=\"mailto:gauntzd@wou.edu\">MarCom office<\/a> | 503-838-8215.<\/p>\n<p><span size=\"2\" face=\"Arial, Helvetica, sans-serif\">For accessibility related services contact <a href=\"mailto:ods@wou.edu\">Office of Disability Services<\/a> | 503-838-8250.<\/span><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Best Practices for Website Accessibility Western&#8230;<\/p>\n","protected":false},"author":417,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"splash-page.php","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_lmt_disableupdate":"","_lmt_disable":"","_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:divi\/placeholder \/-->","_et_gb_content_width":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-23006","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/pages\/23006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/users\/417"}],"replies":[{"embeddable":true,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/comments?post=23006"}],"version-history":[{"count":0,"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/pages\/23006\/revisions"}],"wp:attachment":[{"href":"https:\/\/wou.edu\/marcom\/wp-json\/wp\/v2\/media?parent=23006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}