Website Design

Shaun Cronin via tutsplus.com Ideally, accessibility should be considered as part of every web project in order to increase availability to the widest possible audience. In the real world however, it can be easily overlooked. In this article we will look at easy ways that you can improve the accessibility of your site without having to make drastic or time consuming changes. Introduction “Unfortunately, the power and adaptability of the Web is not always fully utilised” The World Wide Web is an incredible resource and it has opened up exciting new possibilities. Many more people are now able to access information and entertainment previously unavailable to them through traditional forms of media. The World Wide Web is especially significant for those with disabilities as the vast amount of digital information stored can be manipulated to meet differing requirements. Unfortunately, the power and adaptability of the Web is not always fully utilised and those with disabilities can find it difficult to navigate websites and have a negative experience with the Web in general. There are numerous reasons why you should aim to improve the accessibility of your site, one of which is that it is the law in many countries. In the UK for example, web accessibility falls under the Disability Discrimination Act and if your website fails to comply, legal action could be brought against you. Legal issues aside however, why would you not want to open your site to the widest possible audience by making it accessible to everyone? The Web Accessibility Initiative (WAI) was set up by the W3C to promote accessibility on the Web. The WAI attempts to educate people on how those with disabilities use the Web and has created guidelines for web designers and developers to follow. You will find that many of the guidelines are easy to follow and implement. Below we will discuss some easy methods that will help you meet these guidelines and improve the accessibility of your site. Tip 01: Consider Your Colors It is estimated that around ten million men suffer from some form of color-blindness in the U.S. The most common types are Protanopia and Deuteranopia; and those who suffer from these have trouble distinguishing between red, green and similar colours. With such a high prevalence of this condition, it really is worth considering when designing and coding your website. For the most part, there are no radical measures that need to be taken when designing with color-blindness in mind – as is the case with the majority of the suggestions within this article. A well designed website will generally not cause any major problems for color-blind users. It is worth taking extra consideration however, when designing interactive or call-to-action elements. For example; a simple text link, styled red with no other decoration may be impossible to see if it is within a block of grey or black text. No one is suggesting that you need to stick with default link styling, but it is helpful to use more than one type of decoration such as an underline or background-color. A useful tool for designers can be found at colorfilter.wickline.org which provides several different filters that mimic how different types of color-blind users would perceive a website. Simply type in the URL of a website and select the filter you wish to use – it does take a bit of time to load however so you will have to be patient. It is also worth taking into account the level of contrast between foreground and background elements of your website. A high level of contrast will benefit everyone, not just those who are visually impaired. The Web Accessibility Guidelines suggest a minimum contrast ratio of 4.5:1 and an ideal ratio of 7:1 for standard sized body text. Obviously the safest option is always black text on a white background or vice versa. You can check the contrast ratio of multiple elements on a site using Juicy Studio’s Color Contrast Analyser Firefox extension. It will analyse each element on the page and provide a report on whether or not it conforms to the WAI’s guidelines. Tip 02: Contextual Links Those who use screen readers will often have the option to navigate a web page by skipping through the links to find something of interest. In the case of text links, the user would simply hear the word in isolation, regardless of the content that surrounds it. It is therefore extremely unhelpful when all that the user hears is ‘click here’ or ‘more’ – these types of links provide no information of where they direct the user or to what they are referring to. A much better option is to provide a more descriptive link. A link that takes the user to the complete article on a blog could read ‘learn more about S.E.O’ or ‘click here for the full article on S.E.O’. Tip 03: Alternative Content One of the core principles of the Web Accessibility Initiative is to make content on the web available to all regardless of any disability they may have. There are a number of techniques, such as the ones discussed in this article, which will help towards the WAI’s goal. There will always be some types of content however, that cannot be made accessible to some users, such as audio to those who are deaf. In this scenario, you should always provide alternative content where possible. Web Content Accessibility Guideline 1.1: Provide text alternatives for any non-text content so that it can be changed into other forms people need such as large print, Braille, symbols or simpler language. For example, if you have a video of an interview on your site, you could consider including a transcript of the conversation for users to download or read on the site. Another method is to add captioning to the video – a method that YouTube is experimenting with using speech recognition software. An even more complete approach is to provide a link to a text-only version of your website. This method will also make your site a lot more accessible to those with slow internet connections such as those still using a dial-up connection or browsing for a mobile device. Tip 04: Tab Indexes The Tab Index basically establishes the order of elements that a user will cycle through when using the ‘Tab’ key. In the majority of cases, if a page design follows a logical order and establishes a strong hierarchy using headings, sub-headings etc. then you need not worry about this too much. It is with the use of forms however that this function is really valuable. Forms can incorporate many small elements such as checkboxes and radio buttons that can require precise movement and clicks of the mouse. Someone with a motor disability may not have the control needed to perform such precise actions. With a correct Tab Index established a user will be able to cycle through and interact with each form element using simple presses on the keyboard. A Tab Index will also benefit those who do not have access to a mouse and rely solely on the user of a keyboard to navigate a website. Tip 05: Proper Use of the Alt Attribute We all know about alt text. It’s that text that we need to add to images in order for our site to validate. Everyone uses them right? Actually there are plenty of websites that don’t and those that do often use them incorrectly. In fact, there is much debate about the correct use of the alt attribute. The alt attribute serves three main purposes: Assistive technologies such as screen readers use alt text and read it aloud to the user. Alt text is displayed instead of the image when images have been disabled by those with a slow internet connection or those using a text-only browser. Search engines also use alt text to store information about the page as they cannot read the content of images. “The truth is that alternative text for images depends on the context in which it is placed” So essentially alt text is the text equivalent of an image or other media source and it is used when the image cannot be accessed for various reasons. So what information exactly do we use for the alt attribute? Some people place detailed descriptions of the image while others load it up with keywords in an effort to help their search rankings. The truth is that alternative text for images depends on the context in which it is placed. For example, it is common for a relevant image to accompany a blog post, such as a typewriter for an article about freelance writing. The article itself makes no reference to the image so therefore it is pretty superfluous. Some people may give the alt attribute the value of ‘typewriter’ or ‘image of a typewriter’ or perhaps they would give the value of the title of the article. All of these methods are wrong however. Let us see why. Firstly we need to imagine that we cannot see the image. So if the value of the alt attribute was ‘typewriter’ we would see the title of the blog post, the word ‘typewriter’ on its own then the main text of the article – this makes no sense when viewed as text and it would be even more confusing if you were using a screen reader and randomly heard ‘typewriter’. As a general rule, it is best that you do not use phrases such as ‘an image of’ or ‘a picture of’ when providing alt attribute values. The alt attribute will only benefit those who cannot see the image for various reasons so therefore telling these users that there is an image there offers no real value other than clearing up some of confusion caused by the above method. Lastly, giving the alt attribute the value of the title of the blog post would only result in the title being displayed twice as text or repeated twice when using screen readers. Alt text should not repeat any information that is already provided as text, it is simply unnecessary and potentially confusing. The best option in this scenario is simply to provide a blank alt attribute value. A blank value ensures no potentially confusing or irrelevant information is communicated and there is no detriment to the understanding of the article as the image is not essential to this. Some may argue that since the image is purely aesthetic, then it is not content and therefore does not belong in the HTML and should be displayed using CSS, there are differing views on this however. As you can see, providing correct alt attribute values can be tricky and very much depends on the situation. The best advice is to asses each scenario individually, deciding on whether the image is required for understanding and use your best judgement. Tip 06: Access Keys Like Tab Indexes, Access Keys are a valuable feature for those users who rely on a keyboard to navigate a website. Unfortunately, Access Keys are one of the least used HTML elements, primarily because a lot of people are not aware of them and those who are choose not to implement them despite it being extremely simple. Access Keys are basically keyboard shortcuts that help a keyboard user navigate to certain sections of a website quickly. Access Keys can be used by holding down a function key (usually Alt on Windows or Ctrl on Macs) and pressing a specific letter or number key that corresponds to a section of the site. As I mentioned earlier, Access Keys are incredibly simple to implement. All it involves is a simple piece of HTML code added to the navigation anchor tags of your site – view plaincopy to clipboardprint? Home Home Simple. A problem with Access Keys is that there is no universal set of assigned keys that users can expect to be utilised and combined with no real standard of informing users of the ones that have actually been used results in Access Keys being pretty ineffective. The UK government does however have a set of recommended Access Keys to assign, they are as follows: S – Skip navigation 1 – Home Page 2 – News/Updates 3 – Site Map 4 – Search 5 – Frequently Asked Questions (F.A.Q) 6 – Help 7 – Complaints Procedure 8 – Terms and Conditions 9 – Feedback Form 10 – Access Key Information Final Thoughts As you can see, many of the above methods are very easy to implement and only require a basic knowledge of HTML. Making your website more accessible need not be time consuming, require massive modification or be detrimental to the appeal of a website. I believe it is important for designers as well as developers to be knowledgeable about accessibility and consider it within the various stages of building a website. The earlier in the design process that attention and thought are paid to accessibility, the easier it will be to incorporate these methods and achieve better results. It is also important to remember that the majority of the methods detailed above will not only help those with disabilities, but will benefit all users of your website. Some of the tips may even improve your rankings with search engines. We have discussed just a few tips that will make your website more accessible, but if you are really committed, you may want to check out how you can conform to the full list of Web Content Accessibility Guidelines.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

6 Tips for Improving Website Accessibility

7 Tips for Building a Better Branded App

Evolution of Websites: A Darwinian Tale

5 years of blogging

250 Quick Web Design Tips (Part 1)