8 May Web Accessibility 101: Designing for All People, Not Most May 8, 2020 Accessibility, Case Studies, General, Technology, Trends, Web Design Web design is about accessibility. Most web designers aim to create products for the largest swath of people within their audience, casting their designs out like gaping nets to yield them the greatest influx of users. And while there's logic to that design principle, it overshadows a somewhat simpler and more inclusive principle: Design for all people, not most. Optimize content so that every possible user can enjoy and interact with your website, and access the information and data available. Engaging in this practice will help develop a wider market and diversify your customer base. 15% of the world's population has some level of disability. These are people whom, like everyone else, use the internet often, and rely heavily on digital communication and tools. Optimizing your website to ensure users can enjoy a great experience can expand your web of interaction. Through practising inclusion in your design, you'll be able to reach millions of people who are often overlooked. Designing for accessibility doesn't have to be hard, it just needs to be simple and considerate of all potential users. Here's how to optimize your website for maximum accessibility. Understand Your Users Knowing your audience is crucial in any project, so it's the best place to start. Understand that your users can include individuals with different capabilities. Some of your users may be hearing or visually impaired, others may have seizure disorders, others still may have mobility issues. While you can't design for every possible scenario, you'll broaden your design horizon if you take the time to think of as many as you can. After you've thought about your expanded audience, do some research. Read case studies, talk to friends who have experiences, consult accessibility guides. Maybe try taking a page from the educational field, principles of universal design is a good reference. Think UX Now that you've developed an understanding with your future users, put that understanding into your user experience (UX) framework. This step will help you empathize with your users and consider things you might not have thought of before. It'll also point you in the direction of a wide variety of assistive technology definitions. Just as a designer should consider the behavior of a website in every major browser, assistive technologies should be part of the functionality checklist. Sometimes, even the smallest changes in web design can open new doors for disabled users. A Simple Change For instance, possibly the easiest change to implement is how you use emphasis tags. Visually, there's no difference between and , nor does appear any differently than . But for people with disabilities, these tags can change their user experiences sharply. While they render the same, effectively bold and italics, the difference between these tags is their function. While the simpler bold and italic tags are presentational (changing the way the text renders), strong and emphasis indicate different speech patterns for assistive technology. But it's not as simple as blindly replacing all with . Many headers use bold text for contrast for example, but perhaps it's not best for users with disabilities to experience a tag here. Think, "Does this text need to be spoken differently for a user to experience its full meaning?" If not, consider dropping the or unless they are really necessary. Subtle changes and considerations like this can make all the difference for users with disabilities. It's important to upgrade, and not downgrade the UX. Designing for the Visually Impaired While the above advice already benefits the visually impaired, not everyone with visual problems will have the same impairment level or type. It's equally as important to offer options that can accommodate those who retain use of their sight. Consider these elements: Allow users to enlarge font. Most browsers will do this with or without your consent, but it'll look nicer if you have CSS prepared for it. Avoid certain color combinations like red and green or blue and yellow. Instead, why not use color to increase conversions while increasing accessibility? Code in the "alt text". Alternative text can be read by assistive technology and explain any graphics on the page. Use periods in abbreviations, even the well-known. The way a screen reader processes information is often phonetic: imagine hearing "Fibby" vs. F.B.I. For more information on ways to incorporate elements for visually impaired users, check out the American Foundation for the Blind. Designing for the Hearing Impaired Although the hearing impaired require fewer accommodations, recent trends in video use on websites has increased the need for smart design choices. So if your website incorporates any auditory components, use closed captioning or sign language interpretation. Avoid the temptation to use automatic closed captioning – stop by any random video that's been processed using automated transcription to see word translations that simply don't make sense, and can be count-productive. For specific captioning guidelines, the National Association of the Deaf's recommendations can be found here. Designing for Photosensitive Epilepsy One of the design concerns around the prevalent use of video, especially video that uses an autoplay function, surrounds users who have photosensitive epilepsy. These users can experience seizures triggered by strobe light type effects or moving images. Web designers can use the Photosensitive Epilepsy Analysis Tool to check the likelihood of their content triggering a seizure. If content is identified as at risk but cannot be changed to reduce the risk, always warn about the potential and don't automatically play the video. Make sure the warning is visible and near the play button. Designing for Mobility Impairment Some mobility impairments will range from total loss of fine motor control to a mild tremor. Either level of impairment results in the same user experience on a website that hasn't considered them: Users must exert greater effort to reach links and may tire quickly. Users cannot navigate the website because it does not allow keyboard use. Having to scroll through a long page results in fatigue because there's no "back to top" or skip option available. Sites that are optimized for touch screen or fine mouse input can present with more severe consequences for the mobility impaired, possibly rendering the site unusable. Incorporating design elements like a navigation that can be operated using the keyboard and frequent anchor links that can draw the user to different sections of the page can go a long way to helping these users. Create a "Basic" Website Option Your design is flawless, interactive, and striking, uses the latest and greatest trends available on the open market – and is barely accessible for any of the above-described users. If that sounds like your web design, an easier alternative can be creating a "simple" layout that users can toggle on and off. This will appeal to more than just disabled users: For users who suffer from high contrast triggered migraines, for instance, having an easy to access toggle can be the difference between becoming a customer or leaving to contend with a three-hour migraine. Don't stop there, either. Apply the same option for your subscription lists, allowing users to easily edit their preferences before receiving email marketing. Keep understanding your different users. Keep thinking about them. The more you understand and empathize with your users, the easier accessible UX design will become. Who knows? You may even change someone's world. Related Posts The Challenges Web Designers Face in Ensuring Website Accessibility Over the past several years, accessibility has become one of most-discussed topics in web design. And that’s a good thing. As more of our daily lives are moved online, making sure that content and services are available to as wide an audience as possible is crucial. The obligation to do so is both moral and, in some cases, legal. Web Accessibility Checklist Wallpaper Today we have an awesome freebie for you - a useful Web Accessibility Checklist desktop wallpaper with a grungy feel that features some super simple yet often forgotten reminders for the accessibility of your website. A Look at the Proper Usage of the alt Attribute By now, most of the web design industry knows the importance of accessibility. We talk about it incessantly and implore our clients to take it seriously. There is no denying the impact it has on the web and those who use it. But sometimes the finer points get lost in the shuffle. For instance, we often hear screams from the virtual mountaintop of “Use alternative text on your images!”. This is good and well-intentioned advice. Still, it’s also a bit vague. While it’s good to know that the alt attribute can be beneficial in terms of accessibility, what we really need is context. What is the right way to use them? Are there times when we shouldn’t use them? These questions were inspired by a Twitter conversation I followed between designers and developers. It helped me realise that I’m not the only one out there who sometimes struggles with how to build websites that do right by users. Today, we’ll attempt to clarify the proper usage of this vital attribute. 2019 UI and UX Design Trends It feels like we’re getting somewhere with all the tools, advancements in technology, and growth of our understanding of how user-facing products really have to work. Sooner than later, we’ll develop the mindset for universal design that encompasses everything we produce, and not just sell. The way we do things for ourselves needs better design choices. The way we even sound as nations can be designed in a better way. Still, a far cry from where we could be in the future, let’s get into the interface and experience design trends of 2019. Can the Visually Impaired Access Your Site? When designing a website, it’s important to take all potential visitors into consideration. This includes the visually impaired – those afflicted with color blindness, low vision and even total blindness. The first thing to think about when improving the accessibility of your site for the visually impaired is the level of the impairment. Is your site suitable for users with color blindness, low vision, partial blindness and even total blindness? Fortunately, there are several online tools and software available that can help make your site more accessible. The Ups and Downs of Being a Self-Taught Web Designer Not so long ago, web design was a brand-new industry. Because it was so new, there weren’t many opportunities to get a formal education on its fundamentals. Thus, the most direct path to becoming a professional was to teach yourself the necessary skills. That’s how my career started. I studied the source code of different websites and figured out how things worked. I experimented with Photoshop, CSS and eventually other, more challenging languages. Over the years, most of what I know has come from the process of trial and error.