13 Impressive tips that will make your Website Accessible
One of the aims to have a website is to attract as much visitors as possible. But often than not, millions of people living with some or the other disability are ignored because of websites made haphazardly and in a hurry. If you could just make it accessible to them, your website page hits will shoot up considerably along with potential new customers.
The World Wide Web Consortium (W3C) and other organizations including the UN have made certain guidelines for minimum accessibility standards to ensure the Internet will be used equally by every human being on the planet. With just these simple but clever tips, you will open the possibility of millions of new visitors and potential customers for your website:
Select a CMS that supports Accessibility
So many Content Management Systems are available to choose from; they have different levels of accessibility support. Choose the one that will be best suitable for your website. While selecting the theme/template, read the documentation for accessibility; also do this when you finalize the widgets, modules, plugins, etc.
The editing toolbars and video players should support accessible content creation. Even the CMS administration options should be accessible.
All the content and headers should be structured for accessibility
Content is the most important and main part of a website. At every step of the website designing process, make sure that the content is actually accessible. Structure it systematically by using headers carefully, such that it should go in a proper flow. This will make it easier to understand.
Precise headers also help the screen readers to interpret the website. The ideal way to go about all of it is to give only one H1 for a website page. Next will come the subheadings with H2; these can be further nested with H3 and then with H4. Always keep this order intact, never skip any one H and go directly for H3 after an H1, etc.
Have a keyboard-friendly functionality for your website
It is crucial for any website to be able to function only with a keyboard from the accessibility point of view. Some people are unable to use a mouse or trackpad because of mobility issues, also many assistive technologies depend on keyboard-only functionality.
Testing your website is easy, just use it on a keyboard yourself and address issues if any. Make clever use of the tab, function and all other keys present on it. Break pages with a lot of content into jump lists (anchor links), so that keyboard-only users will be able to skip the unwanted content.
Add proper alt-texts for images
Giving Alt-text for images is helpful in many situations like for people using speech input software, screen readers, browsing speech-enabled websites. It is also important when images fail to load due to various factors. Hence, give context to users and describe the images using an alt-text for each image on the website. The alt-text should describe the image aptly and if the image contains any text, include that also in the alt-text.
Carefully select colors on your website
Color blindness is not a simple, direct black-and-white issue, it has different levels to it, people perceive the same colors in different ways. About 1 in 12 people have some degree of color blindness; which is why your website should be visually appealing and accessible for such people too.
The text should stand out clearly against the background. There should be a good amount of contrast between various elements on the webpage. You can use more borders and white space to distinguish between blocks of content.
Design forms for accessibility
Take great care while designing the forms as they are very much useful for a website. Each field should be well positioned and clearly labeled. Related fields can be grouped together. You can use ARIA property to associate the form field with the label text. Focus on giving clear instructions and information regarding the form.
Use tables only for tabular data
Although tables make it easy for us to understand a large amount of data in a short space, they are exactly opposite for the screen readers. The columns and rows distract the screen reader from the content and it goes haywire from the visual order of the tables. Hence, use tables only when necessary, don’t use them for anything like lists, layouts, etc.
Use descriptive and unique names for links
The words “click here” or “read more” may be understood by regular internet users, but for people with disabilities, the screen readers or speech recognition software are unable to comprehend these. Use text that will describe where the link will go. Hence, always use “read detailed Product catalogue” in place of “read more.”
Include ARIA roles
ARIA or the Accessibility Rich Internet Applications is a powerful but complex tech specification that can add accessibility info for elements that are not usually accessible. But whenever possible, use native HTML elements, as most of the functions used to require ARIA attributes are now implemented in HTML5. ARIA attributes allow visitors with impairments to navigate dynamic websites.
Provide accessibility for dynamic content
The problem with dynamic content is that it updates automatically and mostly it goes unnoticed by the screen readers. Accessibility should be kept in mind for the lightboxes, popups, in-page updates, screen overlays, and modal dialogs because the keyboard-only users may be trapped in any of the above. These functions can be made accessible easily by front-end development frameworks or any of ARIA alerts or roles.
Don’t use automatic media and navigation
Media files which play automatically are a hindrance for accessibility. Even those who don’t need accessibility get annoyed with any video or audio which starts playing on its own. It is difficult to turn off such media using a screen reader. Try to avoid even any automatic navigation like sliders or carousels. Some people need more time to absorb all the information on the web page.
Enable resizable text for various devices
This is very much essential in today’s world where browsing websites on mobile and tablet size devices have increased manifold. If your website doesn’t support this feature and is made keeping in mind only the desktop screen, then resized text in the mobile devices will make it difficult for the differently-abled people to interact with the website and break it.
Always turn on the user scalability and avoid absolute units like pixels to specify text size, use relative text size that will change according to screen size and other elements of the website.
Embedded videos should have captions
People who have a varying degree of hearing impairment aren’t fully able to understand the story or message of the videos. As such, captions or subtitles should be provided in the video. You can use open captions which are directly embedded in the video file or go for closed captions which can be turned on and off whenever desired. This can also be helpful to those who don’t have audio devices.
For those who have already built a website, even they can make it accessible with some changes in it. By excluding this large and special group of people, you are losing out on a good amount of revenue. The above tips will also let search engines understand your website better and boost up the search rankings positively.