We all know how important website accessibility is but, for one reason or another, many don’t put it into practice. Its almost seen as an ideal state that we all want to achieve but don’t want to put the effort in to achieving. We live in a very diverse, digital world and websites don’t come in a one size fits all type of category. Some people have a visual, hearing or physical impairment that prevents them from enjoying fully accessibility to the web that we all hold near and dear to our hearts. Personally, I feel that they make up a large underserved population in digital world. Websites aren’t created with them in mind and I would argue few marketers or web designs even consider such population groups when designing their sites and marketing campaigns. I can speak from personal experience. I suffer a visual impairment, now I am nowhere near blind but I do have a significant impairment of my vision and I can attest to the difficulty in navigating various websites that I am sure their designers didn’t even think about accessibility when they were being created. I recently had the opportunity to sit down with Stacy Keller, the Assistive Technology Coordinator at East Stroudsburg University. Stacy is hands down an expert on the topic of web accessibility and she was able to provide a list of 5 quick wins that businesses and organizations can use to make their sites more accessible. For Stacy, it isn’t about creating a site that is accessible to specific groups of people but rather, creating a site that is accessible to everyone regardless if they have an impairment of not.
What is Web Accessibility?
When most people think of the word “accessibility” the first thoughts that comes to mind is of ramps, curb cuts or even the button that opens the door to your office building when our hands are full coming into the office. When we think about accessibility, we tend to go straight to the idea that it’s only good for persons with disabilities but, it is utilized by more users than we think. Accessibility is embedded in everything that we do from how a product is designed and how we communicate on a daily basis to our buying experiences on our favorite websites. Sadly, most people think that “accessibility” only refers to those with severe disabilities and unfortunately, most businesses do not take accessibility into account because they wrongly believe that the only people that would benefit from it are those that need accommodation. In my opinion, web accessibility goes far beyond that. In my view, web accessibility is about making your website accessible to as wide a population as possible while leaving no one behind. It is a standard UX best practice that many do not follow. I do believe that those with disabilities are an underserved market and many business need to start thinking with these individuals in mind but even larger than that, we need to start being all-inclusive in our web design. We must drop the idea that one-size fits all in our website design and marketing communications. In the business world, marketers and business owners focus on how they reach and communicate with their clients and customers yet few take the time to think about if they are truly reaching everyone and if their site is as inclusive as they think.
I attended a Deaf and Hard of Hearing Conference in June of 2016 and during that conference I spoke to an older gentleman with a visual impairment about the various assistive technologies that exist in the marketplace and he told me a story about how he shopped in his local grocery store with a phone app that would read and compare food labels. Something as simple as the label design on a bag or box made a huge impact on his shopping experience. When his app tried to read a shiny silver label with a dark gray font versus a matte label with two high contrasting colors, the shiny label created a barrier and could not be read by the app. That brand was no longer an option because he didn’t know it if it was beans or beats due to the design they chose not being readable to the assistive app. A simple design error led to the loss of a customer! This opened my eyes to the fact that the concept of universal design and web accessibility are as closely followed as they should be. MarketingModo did a survey of over 100 web designs and found only 4 of them were knowledgeable of universal design and web accessibility. The results were even lower for graphic designers. This is a problem and fortunately, one that can be fixed relatively quickly. Below you will find the top five quick fixes to improve the accessibility of your website. There are many more and there are many plugins that you can utilize for improving web accessibility but these five will certainly put you far ahead of the rest.
Lack of Contrast
A website’s contrast is of vital importance in insuring an accessible website. Just think of the example that I gave above and apply it to your site. Does it’s design encompass low contrast? Does the font seem to merge with the background? Does your website look like the one below?If so, you have a contrast issue.
You may think that your site looks good but how good is it if people can’t read them? Let me be clear, aesthetics are important in web design but aren’t the ultimate goal of design. And often poor readability doesn’t get noticed during the design process, as we are not like our users. We don’t read the texts as our visitors do. You always want to make sure your website content is as easy to read as possible. The amount of light that gets through our eyes at age 40 is only half the amount of light that gets through our eyes at age 20. This drops to 20% by age 60. On top of that, nearly 9% of Americans are visually impaired.
With these stats in mind, do you really want to make it harder for visitors to read your content, especially after you’ve paid so much and worked so hard to get them to your site in the first place.
Low contrast also causes issues when your site is viewed with a low quality monitor, when its being viewed in bad lighting or when there is a glare and when its being red on a tiny screen such as a mobile device. Color contrast is rather simple to evaluate due to numerous color contrast checkers that are available such as ConstrastChecker and W3C explains it nicely with additional resources. Color contrast also goes beyond text against a background, but also think about icons or action items that might get lost by having low contrast. Want an example of a website with good contrast? Check out Evernote. The only thing we would recommend that they change is the text in the lower right hand side as well as to darken the menu text to a darker grey or black but overall, its a good use of contrast.
Still looking for some ideas as to what works and doesn’t work with contrast on a website? The chart below should be of some assistance:
Identify Important Content For Your Visitors
A website is information and when you have a lot of information it can get confusing quickly. Another quick win with web accessibility is to identify areas of important content. You need to visually show the difference between sections and important areas of information that you want your visitors to notice. Take the areas of your site that people use more often and need to use and put them in easy accessible areas such as in large icons on the homepage or within the main navigation of the site. This is another universal design best practice because it applies to a huge swath of the population from individuals who are tired and are quickly scanning your site for the important information they need (try scanning a website when you have a migraine and you will quickly find out how tedious and disorganized some websites actually area) but it also greatly assists those with cognitive disabilities and visual impairments. I should be able to identify the key parts of your site within 10 seconds of landing on it. If not, I’m gone. Many sites cannot pass that test. They think more is better but they fail to take into account that we are bombarded by information and are forced to scan through information so much so that it has become second nature to many of us. Imagine if you lose your ability to scan and have to read everything from top to bottom to get the information that you were looking for or at the end find out it wasn’t there in the first place. A good strategy to use is to use clear task flows with minimal steps and linear navigation. Make your visitors go through as few steps as possible to get to where they want to go. A second strategy and one I alluded to earlier is to place items according to level of importance, such as locating them on the top or the bottom so they can be accessed through shortcuts (quick test is to try tabbing through your website to see if it goes through to the bottom of the page) and have related items of similar hierarchy near to each other.
Look at Navient’s new website. Even though I’m not entirely a huge fan of the organization – find me anyone who is who has graduated higher education – I will admit that from a design and accessibility standpoint they do a great job. They make good use of contrast and certainly highlight the important areas of the site that their visitors will need. I can get to exactly where I need to within seconds (unsurprisingly get to the student loan payment section is very easy to get to) and even better is I don’t even need a mouse to do it especially on the page where I input my account particulars. It works well from an accessibility standpoint.
Use Captions and Transcripts
In recent years, the use of YouTube, podcasts and other audio/visual content have really taken off as viable marketing channels. However, these mediums are not accessible for persons who are Deaf or hard of hearing. One way of making these mediums accessible is by using transcriptions of the audio. Audio and video are used by users differently. Audio can be accommodated by a text file because there is nothing else to compete with the content from a sense perspective. If you are listening to the audio you can easily follow along by reading transcripts simultaneously. YouTube offers a great instructional outline of how to create your own transcripts. The alternative is writing out the transcript manually or finding a freelancer to do the grunt work for you. There is however, another option – speech-to-text software. If you have a podcast, for example, or another medium that is purely audio, it would be a good idea to look into a good speech to text software solution. If you are willing to purchase software, the $60 – $130 Dragon Naturally Speaking is a good speech-to-text software. There is also a Dragon Naturally Speaking app which runs around $15 per month. Speech to text freeware can be used as a starting point but due to its lower accuracy rate should not be relied on entirely. Also, keep in mind that non-speech artifacts in the audio, like music or even static, will probably complicate matters, so you might want to keep that in mind. Having transcripts is also great for SEO since it provides Google with a ton of content about your video.
Where it is fairly easy to listen to audio and read a transcript at the same time, the same cannot be said of video mediums. Try watching a video and reading separate transcripts at the same time and you’ll quickly understand the issue. Therefore, captioning is necessary to make video content accessible. Unlike audio files, video requires captioning. Captioning is facilitated in different ways from a plug-in to the native interface depending on where the video resides. With YouTube you have three ways to create captions for your videos. Captions can be created by typing the words as they are being said -a very manually process but extremely accurate since you are the one creating the captions. Another method is to upload an existing text transcript to YouTube’s Video Manager which is very straight forward though still very manual since you are writing out the transcripts. The last method you can use to get captioning in your videos on YouTube is to utilize the auto caption feature on YouTube which will create the captions for you which you can review and correct any errors. Too many content creators utilize this method but unfortunately don’t correct any errors that the system creates. The results can be similar to what you see below. Not exactly a accessible piece of content.
Since most of you reading this will likely be utilizing YouTube as the host for your video content you may find YouTube’s article on how to create your own subtitles and closed-captioning very helpful as well as this article from WikiHow.com
Text Descriptions and Descriptive Text
We live in a visual age. This is the generation of Pinterest and Instagram. Website are utilizing more visually driven designs. We communicate through visuals but, communicating with images can create its own barriers. Not everyone can see the images. Blind and visually impaired individuals may need ALT text to understand images or a screen reader will read the image as “img035a4sda6s584gf3.” Not the best in terms of making the web accessible to all is it? The good news is that the method for resolving this is already a widely-used best practice for SEO – Alt Text. Unfortunately, not every organization uses Alt text in its images and if they do I’m willing to bet that 90% of them utilize it for SEO – to improve their rankings but Alt Text is also a fantastic tool for web accessibility.
Go to your website right now and place your mouse pointer over an image on the site and let it hover. See the text that appears? That’s the Alt Text. If you see nothing, that means you don’t have Alt Text for that image. Something you should fix quickly. Adding Alt Text to the visuals on your site is fairly easy and straightforward. Simply go to where the images are hosted on your site. In WordPress this is in the Media Library and select an image. On the image detail page, you will see all the information that exists on that image – what the title of the image is, what the URL to that image is, its size, etc. There is also a field for Alt Text. Fill that in. Now you are probably wondering what to write for Alt Text. That really is up to you and depends on what the image is. Think about what text equivalent would communicate the same meaning as the visual element. Say we have an image of a chart for a business website. What is the point of the graph? Say you want to communicate to your audience that there is a significance correlation between two factors as seen on the graph. You can write “correlation between X and Y demonstrates exponential growth”
Another strategy is to avoid vague descriptions such as “click here” for a link by specifying the task that clicking the link will perform such as “Submit an Inquiry” or the universal “Contact Us”. Above all else, be consistent with the same description everywhere the same element is used. Once again this is a standard best practice for on-page SEO internal linking.
As consumers, we want an authentic, meaningful experience and communication. Authenticity is applied through the language we use, service style and multi-sensory elements such as design and multi-media that we use. Organizations have a tremendous opportunity to open the communication channels between them and their customers/site visitors. Too many web designers and digital marketing professions think they know what the visitors want based on their own personal assumptions. I’ve never seen a situation where those assumptions turned out to be entirely accurate. Organizations, whether they are in the B2B, B2C, Nonprofit or Municipal arenas need to understand their visitors and customers. Learn about their needs and how they can provide a great online experience. That is what web accessibility really is. It isn’t difficult to open up these communication channels either. It can be as simple as having a page on your site asking for feedback. There are also a ton of plugins available for all the major CMSs out there that allow for this. Feedbackify and Feedback Cat are two of our favorites. If you have deeper pockets than an enterprise solution such as Foresee may be for you.
Web accessibility isn’t just about making a site user-friendly for specific populations. Its about making the web accessible for everyone by following universal design principles. Many sites today don’t follow these principles and as a result, close themselves off to large groups of people. Organizations should keep in mind that Google is moving SEO in a direction that focuses more and more on user experience that a website provided. The fact that many of the principles we discuss above, UX in terms of site contrast and content hierarchy, captioning and transcripts, the use of alternate text for images, clear link descriptions are all best practices for on-page SEO. Just as we had the 2014 HTTPS algorithm update which improved rankings for sites utilizing HTTPS and the 2015 mobile algorithm update designed to give a boost to mobile-friendly sites- Google is focused on improving the internet and they seem intent on doing so by boosting sites with a great UX experience. In my opinion it is only a matter of time before they focus on how accessible your website is. They are already looking at bits and pieces of that now. Businesses have the opportunity to reach more people with accessible design. Besides being compliant with the ADA, the Americans Disability Act, it is also a good business decision and a matter of good customer relations to provide access to information. Remember the last time that you that you tried to get a gadget to work and get frustrated enough to chuck it out and just get something else. When information or a product is too difficult to use the product loses its value. Customers, clients and users come in all shapes and sizes. Thinking about your website through these filters allows you to better communicate with your audience and provide an authentic effort to eliminate barriers and provide equal access to your business.