{"type":"doc","content":[{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":960,"id":"02e8a0cf-c71d-41ad-b54e-c0d27f42c4d0","collection":"contentId-1767145497","type":"file","height":471}}]},{"type":"paragraph","content":[{"text":"In this article, we explain what web accessibility means and why it matters, and provide a handful of recommendations you can use to make your websites available to a broader audience.","type":"text"}]},{"type":"paragraph","content":[{"text":"You have an idea for a website. You spend half of your time concerned about how it looks and functions, and the other half focused on implementation. At some point, oftentimes late in the process, you start to ask questions such as:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"How will the website look on mobile devices?","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"How do I get the website to rank highly in search results?","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"How do I track the effectiveness of my website?","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"Too often missing from this list are questions around web accessibility, or accessibility is an afterthought. But it’s important to build accessibility into the design and architecture of a website early, as part of the website’s “foundation.” It’s like constructing a house — do you build a ramp or elevator for wheelchair access into the plans, or wait until the house is built to “retrofit” it for wheelchair or walker access to the second floor?","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"What is web accessibility?","type":"text"}]},{"type":"paragraph","content":[{"text":"Web accessibility is the practice of making a website accessible to people with disabilities. Those disabilities can range from people who are color blind and can’t easily differentiate between similar colors, to people with motor impairments who can’t use a mouse, to people with dyslexia who have trouble reading large walls of text.","type":"text"}]},{"type":"paragraph","content":[{"text":"People with disabilities may access and/or interact with content on websites differently than most, so the goal in making a website accessible is to ensure that your content can be accessed in different ways. Here are some disabilities and how users with them may interact with your website:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Visual:","type":"text","marks":[{"type":"strong"}]},{"text":" Users with vision issues may forgo the use of a mouse and rely only on a keyboard to navigate websites. They may also use a ","type":"text"},{"text":"screen reader","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/Screen_reader"}}]},{"text":".","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Auditory","type":"text","marks":[{"type":"strong"}]},{"text":": Users who have trouble hearing rely on captions and transcripts when digesting media. This is also useful for users who do not natively speak the language used on the website.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Physical","type":"text","marks":[{"type":"strong"}]},{"text":": Users with motor issues may have trouble with tasks that require hand coordination, and will sometimes use specialized tools to interact with a website including a customized keyboard/mouse, eye-tracking software, or voice recognition software.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Cognitive","type":"text","marks":[{"type":"strong"}]},{"text":": Users who have trouble understanding large amounts of text or dealing with complicated website layouts may rely on screen readers, transcripts, and captions to help with processing content.","type":"text"}]}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Why make your website accessible?","type":"text"}]},{"type":"paragraph","content":[{"text":"Developing a website with accessibility in mind results in a website that can be accessed by a wider audience. A ","type":"text"},{"text":"US Census report","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html"}}]},{"text":" found that in 2010, 19 percent of the US population (56.7 million people) had a disability. That’s a lot of people. And keep in mind some disabilities can be temporary and sudden. For example, in constructing a house you might think that no one in your family uses a wheelchair, and not consider accessibility issues until someone is injured and on crutches or in a wheelchair and struggles to navigate the steps, doorways and stairs.","type":"text"}]},{"type":"paragraph","content":[{"text":"Another added benefit to making your website accessible is that a lot of the techniques needed to make a website accessible overlap with ways to optimize your website for search engines.","type":"text"}]},{"type":"paragraph","content":[{"text":"And beyond the above benefits, it’s also the law. There are several laws, including ","type":"text"},{"text":"Section 504 and 508 of the Rehabilitation Act of 1973","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://en.wikipedia.org/wiki/Rehabilitation_Act_of_1973#Section_504"}}]},{"text":", which can be summarized the following way:","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"“No otherwise qualified individual with a disability in the United States… shall, solely by reason of her or his disability, be excluded from participation in, be denied the benefits of, or be subjected to discrimination under any program or activity receiving Federal financial assistance.”","type":"text"}]}]},{"type":"paragraph","content":[{"text":"This means that publicly funded universities such as UCLA need to ensure that their services, including their websites, are accessible to people with disabilities. Universities that have failed to meet this standard have faced ","type":"text"},{"text":"several lawsuits","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"http://www.d.umn.edu/~lcarlson/atteam/lawsuits.html"}}]},{"text":" in recent years.","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Accessibility guidelines","type":"text"}]},{"type":"paragraph","content":[{"text":"There are many things to keep in mind to make a website accessible, but I’ve simplified them into three categories: ","type":"text"},{"text":"Design","type":"text","marks":[{"type":"strong"}]},{"text":", ","type":"text"},{"text":"Code","type":"text","marks":[{"type":"strong"}]},{"text":", and ","type":"text"},{"text":"Content","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Accessible design","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Colors","type":"text"}]},{"type":"paragraph","content":[{"text":"Think twice about the colors you use when designing a website. Color combinations that may look great to you may prove difficult for visually impaired users. The goal is to ensure there is adequate contrast. Look out for light and dark colored text on backgrounds that don’t provide enough contrast (e.g., a light blue button with white text on top). ","type":"text"},{"text":"WebAim’s Color Contrast Checker","type":"text","marks":[{"type":"underline"},{"type":"link","attrs":{"href":"https://webaim.org/resources/contrastchecker/"}}]},{"text":" is a great tool to assist with this.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Links","type":"text"}]},{"type":"paragraph","content":[{"text":"Make sure your links stand out. Links should be easy to differentiate from the text around them, which can be accomplished by bolding and/or underlining links, in addition to choosing a unique color. If link colors are not unique, users may get confused about what text is and isn’t clickable.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Font size","type":"text"}]},{"type":"paragraph","content":[{"text":"The size of the text on your website should be larger than you think. Whatever size you may put in your design, you might want to increase it 1 or 2 points more. I’ve found 15px to be a good base font size. Also think about the space between each line and block of text. I’ve found it useful to set line heights to at least 10px higher than my base font size, and space between blocks of text to be 1.5 times as big as the base font size.","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Keep it simple","type":"text"}]},{"type":"paragraph","content":[{"text":"Be careful not to “over-design” your website. Keep it simple. If your design is too unique, users may become frustrated trying to understand how to navigate your website or may get distracted by objects that are flickering or moving, especially moving objects that can’t be paused or controlled.","type":"text"}]},{"type":"rule"},{"type":"heading","attrs":{"level":3},"content":[{"text":"Accessible code","type":"text"}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Semantic HTML","type":"text"}]},{"type":"paragraph","content":[{"text":"Writing your HTML semantically gets you a long way towards accessibility. To write semantic HTML means to make sure that the HTML elements you choose correlate with the content’s meaning. For example, your navigation should use the ","type":"text"},{"text":"

","type":"text","marks":[{"type":"strong"}]},{"text":" element. Your footer should use the","type":"text"},{"text":"

Browser not supported