{"id":2222,"date":"2022-12-02T09:30:16","date_gmt":"2022-12-02T18:30:16","guid":{"rendered":"https:\/\/spinupcreative.com\/?p=2222"},"modified":"2022-12-02T09:35:33","modified_gmt":"2022-12-02T18:35:33","slug":"accessibility-best-practices","status":"publish","type":"post","link":"https:\/\/spinupcreative.com\/accessibility-best-practices\/","title":{"rendered":"Accessibility Best Practices"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; _builder_version=&#8221;4.16&#8243; global_colors_info=&#8221;{}&#8221;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;4.16&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text admin_label=&#8221;Overview Text&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p><strong>What to consider when thinking about accessible websites:<\/strong><\/p>\n<ul>\n<li>Color vision impairment<\/li>\n<li>General vision impairment<\/li>\n<li>Auditory impairment<\/li>\n<\/ul>\n<p>And how these users can navigate a website. A website should be able to be entirely navigated with keyboard only!<\/p>\n<p><strong>Four Principles of Accessibility:<\/strong><\/p>\n<ul>\n<li>Perceivable<\/li>\n<li>Operable<\/li>\n<li>Understandable<\/li>\n<li>Robust<\/li>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text admin_label=&#8221;H2 &#8211; Development Checklist&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Development Checklist<\/h2>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;H3 &#8211; Appearance\/Design&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Appearance\/Design<\/h3>\n<ul>\n<li>Color\n<ul>\n<li>Color can\u2019t be the ONLY way that information is conveyed. If there is a site with a lot of color, you can use this <a href=\"https:\/\/www.toptal.com\/designers\/colorfilter\" target=\"_blank\" rel=\"noopener\">tool to test how it may look to a color-blind user<\/a>.<\/li>\n<li>There must be a color contrast ratio of at least 4.5:1 between all text and background. Use this <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">tool to test color contrast<\/a>.<\/li>\n<\/ul>\n<\/li>\n<li>Text: &gt;16<\/li>\n<li>Ensure text can be resized to 200% without loss of content or function (to be tested by AccessiBe audit before launch).<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;H3 &#8211; Structure&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Structure<\/h3>\n<ul>\n<li>Present items in logical order<\/li>\n<li>Use clear and helpful page titles\n<ul>\n<li>Only one H1 per page, following headings should be in sequence, heading levels should not be skipped<\/li>\n<\/ul>\n<\/li>\n<li>Consistent navigation bars on all pages<\/li>\n<li>Avoid using sliders. The Accordion and Toggle modules in Divi may be used in conjunction with Divi Accessibility Plugin.<\/li>\n<li>There should be multiple ways to access different pages\/information on a website (e.g. search bar, nav menus, sitemap, breadcrumbs, helpful links after content).<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;H3 &#8211; Keyboard Access\/Navigation&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Keyboard Access\/Navigation<\/h3>\n<ul>\n<li>The <a href=\"https:\/\/github.com\/campuspress\/divi-accessibility\" target=\"_blank\" rel=\"noopener\">Divi Accessibility plugin<\/a> takes care of most of the accessible navigation issues for us. Here\u2019s a list of the issues it solves:\n<ul>\n<li>Hide icons from being read by screen readers. Images that are decorative, like icons, should be hidden from screen readers. Otherwise, the names of the icons will be read out loud as text. This interrupts the reading pace. (\u201cHide icons\u201d is checked in the plugin by default)<\/li>\n<li>Dropdown menus are able to be opened using keyboard (\u201cDropdown keyboard navigation\u201d is checked in the plugin by default)<\/li>\n<li>Keyboard focus needs to be visible when used.\n<ul>\n<li>Hit tab a couple of times on any website &#8211; this is how you use keyboard navigation. Sometimes arrow keys are used too.<\/li>\n<li>If there are no frames, you don\u2019t know where you are in the navigation\/site. To be able to use forms, buttons and links the user must be able to see which element they have selected. See an <a href=\"https:\/\/krisrivenburgh.medium.com\/the-ada-checklist-website-compliance-guidelines-for-2019-in-plain-english-123c1d58fad9\" target=\"_blank\" rel=\"noopener\">example of a site that uses keyboard focus frames<\/a>.<\/li>\n<li>\u201cKeyboard navigation outline\u201d is checked in the plugin by default<\/li>\n<\/ul>\n<\/li>\n<li>User needs to be able to jump to content\n<ul>\n<li>For people who use a screen reader, it can be annoying to have to listen to the same menus over and over again. For example every time they open a new page or post the entire menu gets read first before the content. (\u201cSkip navigation link\u201d and \u201cScreen reader text\u201d are checked in the plugin by default. This adds a \u201cSkip to content\u201d button which is not visible to the user until they hit \u2018tab\u2019 on their keyboard)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;H3 &#8211; Links&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Links<\/h3>\n<ul>\n<li>Make the purpose of every link clear from its context (example: \u201cThere is a lot more information about accessibility on the <a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-intro\/\" target=\"_blank\" rel=\"noopener\">W3C website<\/a>.\u201d)<\/li>\n<li>Links in the body are distinguished from surrounding text (usually by underlining).<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;H3 &#8211; Images&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Images<\/h3>\n<ul>\n<li>Workflow: Change file name, upload to media library, and edit alt text FROM the media library that provides a relevant description. This will push alt-text to all places the image is used on the site.\n<ul>\n<li>Avoid using same text for Title and Alt text<\/li>\n<li>Here\u2019s a <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decision-tree\/\" target=\"_blank\" rel=\"noopener\">decision tree to write effective alt tags<\/a><\/li>\n<\/ul>\n<\/li>\n<li>Avoid images with text in them.<\/li>\n<li>Why Alt tags are important:\n<ul>\n<li>If an image fails to load on a web page, a user can mouse over the area originally intended for the image and read a brief description of the image. This is made possible by the description you provide in the alt attribute.<\/li>\n<li>Visually impaired users often browse the web with the aid of screen reading software. When you include the alt attribute, the screen reading software can read the image\u2019s description out loud to the visually impaired user.<\/li>\n<li>The alt attribute also plays a role in Search Engine Optimization (SEO), because search engines cannot \u201csee\u201d the images on websites as they crawl the internet. Having descriptive alt attributes can improve the ranking of your site.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;H3 &#8211; Videos\/Audio&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Videos\/Audio<\/h3>\n<ul>\n<li>Should not automatically play, should be able to be paused and muted using the keyboard.<\/li>\n<li>Always make sure they have captions. Upload to YouTube and embed to get captions fast. You can <a href=\"https:\/\/support.google.com\/youtube\/answer\/2734705#zippy=%2Cedit-caption-text\" target=\"_blank\" rel=\"noopener\">edit the captions<\/a> if what it automatically comes up with is incorrect.<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;H3 &#8211; Forms&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>Forms<\/h3>\n<ul>\n<li>Gravity Forms claims to be the most accessible form builder on the market. They made an <a href=\"https:\/\/docs.gravityforms.com\/accessibility-for-developers\/#h-labels-and-placeholders\" target=\"_blank\" rel=\"noopener\">Accessibility Guide for Developers<\/a>! This is a great resource for learning some accessibility guidelines in the context of forms.<\/li>\n<li>They do what needs to be done for us, but in general, do not hide field labels. Keep them visible.<\/li>\n<li>According to Gravity Forms, keep headings, HTML blocks, standalone paragraphs, and other non-form-related information outside of a form. The screen reader won\u2019t pick these up.<\/li>\n<li>Input errors need to be clearly identifiable by the user (through visual cues and through the screen reader).<\/li>\n<\/ul>\n<p>[\/et_pb_text][et_pb_text admin_label=&#8221;H3 &#8211; PDFs&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h3>PDFs<\/h3>\n<ul>\n<li>Screen readers can&#8217;t read PDFs, so consider the information it needs to convey when embedding them in a site (or avoid embedding them on a site!). Add that information in text elsewhere.<\/li>\n<li>As we get a handle on accessibility, consider offering <a href=\"https:\/\/krisrivenburgh.medium.com\/the-pdf-accessibility-guide-how-to-make-your-portable-documents-accessible-6e77a21a098f\">PDF accessibility optimization<\/a>?<\/li>\n<\/ul>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_text admin_label=&#8221;H2 &#8211; Appendix\/Further Resources&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h2>Appendix\/Further Resources<\/h2>\n<p>[\/et_pb_text][et_pb_toggle title=&#8221;W3C Resources&#8221; admin_label=&#8221;Toggle &#8211; W3C Resources&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/design-develop\/\">More details from WAI<\/a>: all the above bullet points (and more) in detail as you write, design, and produce a website. This is more readable.<\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/\">Web Content Accessibility Guidelines <\/a>(WCAG) Reference. More of a quick reference guide that includes EVERYTHING.<\/li>\n<\/ul>\n<p>[\/et_pb_toggle][et_pb_toggle title=&#8221;AA Compliance List&#8221; admin_label=&#8221;Toggle &#8211; AA Compliance List&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>There are three levels of conformance:<\/p>\n<ul>\n<li>Level A is the minimum level (beginner)<\/li>\n<li>Level AA is intermediate and includes all Level A and AA requirements. Many organizations strive to meet Level AA.<\/li>\n<li>Level AAA is Advanced and includes all Level A, AA, and AAA requirements.<\/li>\n<\/ul>\n<p>We\u2019re going for AA, which includes everything below:<\/p>\n<p><strong><a href=\"https:\/\/www.wuhcag.com\/wcag-checklist\/\" target=\"_blank\" rel=\"noopener\">To be compliant<\/a> at the beginner level<\/strong>, your website must:<\/p>\n<ul>\n<li>Provide text alternatives for non-text content<\/li>\n<li>Provide an alternative to video-only and audio-only content<\/li>\n<li>Provide captions for all videos which include audio<\/li>\n<li>Use more than one sense for all instructions<\/li>\n<li>Not use presentation that relies solely on color<\/li>\n<li>Make all functionality accessible by keyboard only<\/li>\n<li>Ensure users have control over time limits<\/li>\n<li>Provide user controls for moving content<\/li>\n<li>Provide a \u201cskip to content\u201d link<\/li>\n<li>Use clear and helpful page titles<\/li>\n<li>Present items in a logical order<\/li>\n<li>Make the purpose of every link clear from its context<\/li>\n<li>Ensure page elements do not change when they receive focus on input<\/li>\n<li>Clearly identify input errors<\/li>\n<\/ul>\n<p><strong>To be compliant at the intermediate level<\/strong>, your site must, in addition to the above:<\/p>\n<ul>\n<li>Ensure the contrast ratio between text and background is at least 4.5:1<\/li>\n<li>Ensure text can be resized to 200% without loss of content or function<\/li>\n<li>Not use images of text<\/li>\n<li>Offer several ways to find pages<\/li>\n<li>User clear headings and labels<\/li>\n<li>Ensure the keyboard focus is clear and visible<\/li>\n<li>Inform users when the language on a page changes<\/li>\n<li>Use all menus consistently<\/li>\n<li>Use all icons and buttons consistently<\/li>\n<li>Suggest fixes when users make errors<\/li>\n<li>Reduce the risk of input errors for sensitive data<\/li>\n<\/ul>\n<p>[\/et_pb_toggle][et_pb_toggle title=&#8221;Getting Technical&#8221; admin_label=&#8221;Toggle &#8211; Getting Technical&#8221; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>ARIA is a W3C specification that stands for \u201cAccessible Rich Internet Applications.\u201d It consists of markup that can be added to HTML in order to communicate the roles, states, and properties of user interface elements to assistive technologies (AT). This information helps screen readers and other AT to better understand the elements on a web page and to provide a user interface that enables their users to effectively interact with those elements.<\/p>\n<ul>\n<li>See an example of <a href=\"https:\/\/a11y-guidelines.orange.com\/en\/articles\/accessible-name\/\">how a screen reader reads links<\/a>, and how we can control how it reads.<\/li>\n<li><b>Best Practice:<\/b> If you can use a native HTML element or attribute with the semantics and behavior you require <i>already built in<\/i>, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.\n<ul>\n<li><a href=\"https:\/\/www.washington.edu\/accessibility\/websites\/aria\/\">Overview of ARIA<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/et_pb_toggle][et_pb_toggle title=&#8221;Example Checklist 1&#8243; admin_label=&#8221;Toggle &#8211; Example Checklist 1&#8243; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; link_option_url=&#8221;https:\/\/krisrivenburgh.medium.com\/the-ada-checklist-website-compliance-guidelines-for-2019-in-plain-english-123c1d58fad9&#8243; link_option_url_new_window=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>Section 1: Alternatives<\/p>\n<ul>\n<li>Alt text (1.1.1): All images and non-text content needs alt text (there are exceptions)<\/li>\n<li>Video &amp; Audio alternatives (1.2.1): All video-only and audio-only content has a text transcript. Transcripts are clearly labeled and linked below the media.<\/li>\n<li>Closed captioning (1.2.2): All video with sound contains accurate closed captioning.<\/li>\n<li>Audio description (1.2.3): For any video with relevant information not conveyed by audio, add an audio description of information conveyed visually or include a text transcript.<\/li>\n<li>Live captions (1.2.4): Any more formal, live presentations must have closed captions.<\/li>\n<li>Audio description (1.2.5): An audio description is optional under 1.2.3 level A but not in 1.2.5 AA.<\/li>\n<\/ul>\n<p>Section 2: Presentation<\/p>\n<ul>\n<li>Website structure (1.3.1): Use proper markup techniques to structure your website\u2019s content (e.g. use correct heading tags and HTML for ordered and unordered lists)<\/li>\n<li>Meaningful order (1.3.2): Present content in a meaningful order and sequence so that it reads properly.<\/li>\n<li>Sensory characteristics (1.3.3): When providing detailed instructions, make it so they aren\u2019t reliant on a single sensory ability.<\/li>\n<li>Use of color (1.4.1): Do not rely on color alone to convey information.<\/li>\n<li>Audio control (1.4.2): Any audio must be able to be paused, stopped, or muted.<\/li>\n<li>Color contrast (1.4.3): There must be a color contrast ratio of at least 4.5:1 between all text and background.<\/li>\n<li>Text resize (1.4.4): Text must be able to be resized up to 200% without negatively affecting the ability to read content or use functions.<\/li>\n<li>Images of text (1.4.5): Do not use images of text unless necessary (e.g. logo).<\/li>\n<\/ul>\n<p>Section 3: User Control<\/p>\n<ul>\n<li>Keyboard only (2.1.1): All content and functions on a website must be accessible by keyboard only (i.e. no mouse).<\/li>\n<li>No keyboard trap (2.1.2): Keyboard-only users must never get stuck on any part of the website; they must be able to navigate forwards and backwards.<\/li>\n<li>Adjustable time (2.2.1): If there any time limits on a website, users have the ability to turn it off, adjust it, extend it.<\/li>\n<li>Pause, stop, hide (2.2.2): If there is content that blinks, scrolls, moves, users must have the ability to pause, stop, or hide it.<\/li>\n<li>Three flashes or below (2.3.1): Web pages do not contain anything that flashes more than three times in any one second period.<\/li>\n<li>Skip navigation link (2.4.1): A \u201cSkip to Content\u201d or \u201cSkip Navigation\u201d link allows users to bypass the header \/ navigation menu and go straight to the main content.<\/li>\n<\/ul>\n<p>Section 4: Understandable<\/p>\n<ul>\n<li>Page titles (2.4.2): Each page of a website needs to have a unique and descriptive page title.<\/li>\n<li>Focus order (2.4.3): Users must be able to navigate through a website in a logical sequential order that preserves meaning.<\/li>\n<li>Link anchor text (2.4.4): The purpose of each link should be clear based on its anchor text (e.g. don\u2019t use \u201cclick here\u201d)<\/li>\n<li>Multiple ways (2.4.5): There are multiple ways to access different pages\/information on a website (e.g. search bar, nav menus, sitemap, breadcrumbs, helpful links after content).<\/li>\n<li>Descriptive headings and labels (2.4.6): Headings and programmatic labels must be clear and descriptive. They do not need to be lengthy.<\/li>\n<li>Focus indicator (2.4.7): Any \u201cuser interface control\u201d that receives focus from a keyboard user should indicate that focus on the current selected element (e.g. add a visible border around a text link).<\/li>\n<li>Website language (3.1.1): Set the language for your website.<\/li>\n<li>Language changes (3.1.2): Indicate any language changes for an entire page or within the content.<\/li>\n<\/ul>\n<p>Section 5: Predictability<\/p>\n<ul>\n<li>No focus change (3.2.1): Nothing changes merely because an item receives focus; a user must actively choose to activate an item (e.g. hit enter to submit) before a change takes place.<\/li>\n<li>No input change (3.2.2): Nothing changes just because information is inputted into a field (e.g. form doesn\u2019t auto submit once all fields are filled out).<\/li>\n<li>Consistent navigation (3.2.3): Keep navigation layout consistent throughout all pages of the website (e.g. same links in the same order).<\/li>\n<li>Consistent identification (3.2.4): Components that have the same function within a website are identified consistently (but not necessarily identically) (e.g. two check marks can indicate two different things as long as their function is different \u2014 one indicates \u201capproved\u201d on one page but \u201cincluded\u201d on another).<\/li>\n<li>Error identification (3.3.1): Make any form errors easy to identify, understand, and correct.<\/li>\n<li>Form labels and instructions (3.3.2): Programmatically label all form or input fields so that a user knows what input and what format is expected.<\/li>\n<li>Error suggestions (3.3.3): If an input error is automatically detected, then suggestions for correcting the error should be provided.<\/li>\n<li>Error prevention on important forms (3.3.4): For pages that create legal commitments or financial transactions or any other important data submissions, one of the following is true: 1) submissions are reversible, 2) the user has an opportunity to correct errors, and 3) confirmation is available that allows an opportunity to review and correct before submission.<\/li>\n<li>Parsing (4.1.1): Make sure HTML code is clean and free of errors, particularly missing bracket closes. Also, make sure all HTML elements are properly nested.<\/li>\n<li>Name, role, value (4.1.2): For all user interface components (including forms, links, components generated by scripts), the name, role, and value should all be able to be programmatically determined; make sure components are compatible with assistive technology.<\/li>\n<\/ul>\n<p>[\/et_pb_toggle][et_pb_toggle title=&#8221;Example Checklist 2&#8243; admin_label=&#8221;Toggle &#8211; Example Checklist 2&#8243; _builder_version=&#8221;4.19.2&#8243; _module_preset=&#8221;default&#8221; link_option_url=&#8221;https:\/\/brianshim.com\/website-accessibility-checklist\/&#8221; link_option_url_new_window=&#8221;on&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<p>APPEARANCE<\/p>\n<ul>\n<li>Text at least 16 px in size. (There is no standard, but 16 px is generally agreed to be a safe minimum size. )<\/li>\n<li>Minimum color contrast rules are followed (see below for links to tools to help you do this)<\/li>\n<li>States are not communicated just by color<\/li>\n<\/ul>\n<p>KEYBOARD ACCESS<\/p>\n<ul>\n<li>All links are keyboard-accessible (usually by using the tab key)<\/li>\n<li>All navigation (menus) are keyboard-accessible<\/li>\n<li>All dynamic elements (i.e., accordions, tabs, etc.) can be operated by keyboard<\/li>\n<li>All other functionality is operable by keyboard (i.e., doesn\u2019t require a mouse)<\/li>\n<li>Keyboard focus is visible<\/li>\n<\/ul>\n<p>LINKS<\/p>\n<ul>\n<li>&lt; a &gt; tag is used for links<\/li>\n<li>Links in body are distinguished from surrounding text (usually by underlining)<\/li>\n<li>Link text is descriptive<\/li>\n<\/ul>\n<p>STRUCTURE<\/p>\n<ul>\n<li>Only one h1 per page<\/li>\n<li>Headings should be in sequence<\/li>\n<li>Heading levels should not be skipped<\/li>\n<\/ul>\n<p>IMAGES<\/p>\n<ul>\n<li>Images have relevant alt text or captions unless purely cosmetic<\/li>\n<li>Images do not have title attributes<\/li>\n<\/ul>\n<p>VIDEOS<\/p>\n<ul>\n<li>Video does not auto-play<\/li>\n<li>Video can be paused<\/li>\n<li>Video has accurate transcript or captions (read how to edit YouTube captions)<\/li>\n<\/ul>\n<p>FORMS<\/p>\n<ul>\n<li>Fields have label tags<\/li>\n<li>Fields are keyboard-accessible<\/li>\n<\/ul>\n<p>PDFS<\/p>\n<ul>\n<li>PDFs are accessible or have HTML equivalents. Note that making PDFs accessible is the responsibility of the client. Check out this guide on how to make PDFs accessible. Here are PDF techniques for WCAG 2.0 from W3C.<\/li>\n<\/ul>\n<p>[\/et_pb_toggle][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What to consider when thinking about accessible websites: Color vision impairment General vision impairment Auditory impairment And how these users can navigate a website. A website should be able to be entirely navigated with keyboard only! Four Principles of Accessibility: Perceivable Operable Understandable Robust Development ChecklistAppearance\/Design Color Color can\u2019t be the ONLY way that information [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[57],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Accessibility Best Practices - SpinUp Creative<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/spinupcreative.com\/accessibility-best-practices\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibility Best Practices - SpinUp Creative\" \/>\n<meta property=\"og:description\" content=\"What to consider when thinking about accessible websites: Color vision impairment General vision impairment Auditory impairment And how these users can navigate a website. A website should be able to be entirely navigated with keyboard only! Four Principles of Accessibility: Perceivable Operable Understandable Robust Development ChecklistAppearance\/Design Color Color can\u2019t be the ONLY way that information [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/spinupcreative.com\/accessibility-best-practices\/\" \/>\n<meta property=\"og:site_name\" content=\"SpinUp Creative\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-02T18:30:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-02T18:35:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/spinupcreative.com\/wp-content\/uploads\/2023\/04\/SpinUpFacebook-ChugachMountains.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"820\" \/>\n\t<meta property=\"og:image:height\" content=\"312\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Natalie Osborne\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Natalie Osborne\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/spinupcreative.com\/accessibility-best-practices\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/spinupcreative.com\/accessibility-best-practices\/\"},\"author\":{\"name\":\"Natalie Osborne\",\"@id\":\"https:\/\/spinupcreative.com\/#\/schema\/person\/1e0808c65bbe210799d957e7f2e55ee4\"},\"headline\":\"Accessibility Best Practices\",\"datePublished\":\"2022-12-02T18:30:16+00:00\",\"dateModified\":\"2022-12-02T18:35:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/spinupcreative.com\/accessibility-best-practices\/\"},\"wordCount\":2851,\"publisher\":{\"@id\":\"https:\/\/spinupcreative.com\/#organization\"},\"articleSection\":[\"Knowledgebase\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/spinupcreative.com\/accessibility-best-practices\/\",\"url\":\"https:\/\/spinupcreative.com\/accessibility-best-practices\/\",\"name\":\"Accessibility Best Practices - SpinUp Creative\",\"isPartOf\":{\"@id\":\"https:\/\/spinupcreative.com\/#website\"},\"datePublished\":\"2022-12-02T18:30:16+00:00\",\"dateModified\":\"2022-12-02T18:35:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/spinupcreative.com\/accessibility-best-practices\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/spinupcreative.com\/accessibility-best-practices\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/spinupcreative.com\/accessibility-best-practices\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/spinupcreative.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accessibility Best Practices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/spinupcreative.com\/#website\",\"url\":\"https:\/\/spinupcreative.com\/\",\"name\":\"SpinUp Creative\",\"description\":\"Building Better Websites\",\"publisher\":{\"@id\":\"https:\/\/spinupcreative.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/spinupcreative.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/spinupcreative.com\/#organization\",\"name\":\"SpinUp Creative\",\"url\":\"https:\/\/spinupcreative.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/spinupcreative.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/spinupcreative.com\/wp-content\/uploads\/2022\/12\/SpinUp_Color_Favicon.png\",\"contentUrl\":\"https:\/\/spinupcreative.com\/wp-content\/uploads\/2022\/12\/SpinUp_Color_Favicon.png\",\"width\":512,\"height\":512,\"caption\":\"SpinUp Creative\"},\"image\":{\"@id\":\"https:\/\/spinupcreative.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/spinupcreative.com\/#\/schema\/person\/1e0808c65bbe210799d957e7f2e55ee4\",\"name\":\"Natalie Osborne\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/spinupcreative.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/37f48ca76aa3b8d95e49e92dc162bb4f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/37f48ca76aa3b8d95e49e92dc162bb4f?s=96&d=mm&r=g\",\"caption\":\"Natalie Osborne\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accessibility Best Practices - SpinUp Creative","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/spinupcreative.com\/accessibility-best-practices\/","og_locale":"en_US","og_type":"article","og_title":"Accessibility Best Practices - SpinUp Creative","og_description":"What to consider when thinking about accessible websites: Color vision impairment General vision impairment Auditory impairment And how these users can navigate a website. A website should be able to be entirely navigated with keyboard only! Four Principles of Accessibility: Perceivable Operable Understandable Robust Development ChecklistAppearance\/Design Color Color can\u2019t be the ONLY way that information [&hellip;]","og_url":"https:\/\/spinupcreative.com\/accessibility-best-practices\/","og_site_name":"SpinUp Creative","article_published_time":"2022-12-02T18:30:16+00:00","article_modified_time":"2022-12-02T18:35:33+00:00","og_image":[{"width":820,"height":312,"url":"https:\/\/spinupcreative.com\/wp-content\/uploads\/2023\/04\/SpinUpFacebook-ChugachMountains.jpg","type":"image\/jpeg"}],"author":"Natalie Osborne","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Natalie Osborne","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/spinupcreative.com\/accessibility-best-practices\/#article","isPartOf":{"@id":"https:\/\/spinupcreative.com\/accessibility-best-practices\/"},"author":{"name":"Natalie Osborne","@id":"https:\/\/spinupcreative.com\/#\/schema\/person\/1e0808c65bbe210799d957e7f2e55ee4"},"headline":"Accessibility Best Practices","datePublished":"2022-12-02T18:30:16+00:00","dateModified":"2022-12-02T18:35:33+00:00","mainEntityOfPage":{"@id":"https:\/\/spinupcreative.com\/accessibility-best-practices\/"},"wordCount":2851,"publisher":{"@id":"https:\/\/spinupcreative.com\/#organization"},"articleSection":["Knowledgebase"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/spinupcreative.com\/accessibility-best-practices\/","url":"https:\/\/spinupcreative.com\/accessibility-best-practices\/","name":"Accessibility Best Practices - SpinUp Creative","isPartOf":{"@id":"https:\/\/spinupcreative.com\/#website"},"datePublished":"2022-12-02T18:30:16+00:00","dateModified":"2022-12-02T18:35:33+00:00","breadcrumb":{"@id":"https:\/\/spinupcreative.com\/accessibility-best-practices\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/spinupcreative.com\/accessibility-best-practices\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/spinupcreative.com\/accessibility-best-practices\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/spinupcreative.com\/"},{"@type":"ListItem","position":2,"name":"Accessibility Best Practices"}]},{"@type":"WebSite","@id":"https:\/\/spinupcreative.com\/#website","url":"https:\/\/spinupcreative.com\/","name":"SpinUp Creative","description":"Building Better Websites","publisher":{"@id":"https:\/\/spinupcreative.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/spinupcreative.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/spinupcreative.com\/#organization","name":"SpinUp Creative","url":"https:\/\/spinupcreative.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spinupcreative.com\/#\/schema\/logo\/image\/","url":"https:\/\/spinupcreative.com\/wp-content\/uploads\/2022\/12\/SpinUp_Color_Favicon.png","contentUrl":"https:\/\/spinupcreative.com\/wp-content\/uploads\/2022\/12\/SpinUp_Color_Favicon.png","width":512,"height":512,"caption":"SpinUp Creative"},"image":{"@id":"https:\/\/spinupcreative.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/spinupcreative.com\/#\/schema\/person\/1e0808c65bbe210799d957e7f2e55ee4","name":"Natalie Osborne","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spinupcreative.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/37f48ca76aa3b8d95e49e92dc162bb4f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/37f48ca76aa3b8d95e49e92dc162bb4f?s=96&d=mm&r=g","caption":"Natalie Osborne"}}]}},"_links":{"self":[{"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/posts\/2222"}],"collection":[{"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/comments?post=2222"}],"version-history":[{"count":5,"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/posts\/2222\/revisions"}],"predecessor-version":[{"id":2229,"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/posts\/2222\/revisions\/2229"}],"wp:attachment":[{"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/media?parent=2222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/categories?post=2222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spinupcreative.com\/wp-json\/wp\/v2\/tags?post=2222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}