Website Accessibility Made Easy: Your 2020 Ultimate Guide
This is a very detailed article on website accessibility by Mark Holden. He starts with who needs accessible website and why accessible website are good for all of us. The author further provides details about laws of website accessibility and elaborates on how to make a website accessible.
Mark further explains about each types of disabilities from visual, auditory, physical, and cognitive. He has provided detailed tips on each of the disabilities and provides information which could help anyone to build an accessibility compliant website.
Interested? Keep reading :)
Website accessibility means making your website easy for everybody to access, including users with disabilities or impairments of some type or other. The Internet is a non-physical space, so it should be equally accessible to all – but only if we all plan for accessibility.
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” — Tim Berners-Lee, inventor of the World Wide Web.
Who Needs an Accessible Website?
Think about some common issues with inaccessible websites. Have you ever visited a website with a tiny font that you can barely read, confusing pages where it’s not obvious what to do next, or small buttons that aren’t clearly defined? It probably left you feeling frustrated, to say the least. That’s what website accessibility comes to fix.
Some common disabilities that are considered by website accessibility planners include:
Blind visitors
Users with poor or partial sight
Deaf or hearing-impaired users
Users with dyslexia who struggle to understand long texts
Users with cognitive or neurological impairments
Users with a physical disability
Accessible Websites Are Good for Us All
Accessible websites are not only for users with disabilities. They help everybody:
Older internet users can struggle to click on small buttons on a website.
Users who aren’t familiar with the internet find it difficult to understand where to click on a new tab.
If you’re in a noisy train station and want to watch a video, but you forgot your headphones, you rely on the captions for the hearing-impaired.
When using your tablet in the bright sunlight you need better contrast options that aid users with visual disabilities.
You might need to use accessible website practices if you broke your arm and can’t use a mouse effectively, or you’re holding a baby with one hand and completing an important form online with the other.
When you build an accessible website, you check a lot of other boxes at the same time. Mobile web design, usability, SEO, and optimal user experience all overlap with accessible design. Plus, if your website is easy to use, frustration-free, and open to users with disabilities, it’s going to be a lot more attractive to everyone who visits. Accessible websites usually have improved SEO results, greater reach, lower maintenance costs, and a higher level of corporate social responsibility.
The Laws about Website Accessibility
Although there are many benefits to accessible websites, it’s important to remember that they aren’t just optional. The United Nations Convention on the Rights of Persons with Disabilities defines access to information and communications technologies, which includes the internet, as a basic human right. Most countries, including the US, have laws that require websites to meet certain accessibility standards. The web’s governing body, the Worldwide Web Consortium (W3C) has published accessibility guidelines based on four pillars:
Perceivable, meaning that users can perceive websites with their senses (mainly sight and hearing);
Operable by mouse, keyboard and assistive device;
Understandable without confusion;
Robust so as to be accessible by a range of technologies new and old.
In the US, government websites, educational organizations, and nonprofit groups are generally required to have accessible websites by Section 508 and 504 of the US Rehabilitation Act 1973. All websites have to comply with the requirements of the Americans with Disabilities Act (ADA) 1990, and Section 255 of the Communications Act which legislates that websites must be available equally to users with disabilities.
Some organizations have been successfully prosecuted for not having accessible websites. They were punished with hefty fines and their reputation was affected by the process. In many cases where the law isn’t clear about accessibility requirements, businesses have chosen to do all they can to be accessible instead of risking falling foul of the law.
Making your Website Accessible
Certain accessibility fixes are relatively easy to implement on your site, like changing your background color to white or adding captions to your videos. Others are a lot more complex to solve and require programming skills, such as setting heading hierarchies. We outline some of the main solutions for website accessibility and give advice on how to achieve them.
Accessibility for Users with Visual Disabilities
The internet is very visual, so one of the main types of disability to plan for when building an accessible website is visual disabilities. These can include:
Total or partial blindness
Poor vision
Color blindness
Difficulty distinguishing colors and contrasts
When you plan to accommodate users with visual disabilities, you’ll also be helping anyone who:
Is visiting your website on a mobile or tablet with a smaller screen
Has dyslexia and struggles to follow text instructions
Is using their device in bright sunlight or trying to cope with a lot of glare on the screen
Has epilepsy which can be triggered by flashing or blinking images
How to Make Your Site More Accessible for Visitors with Visual Disabilities
Accessible design includes:
Content – The site must be easy to understand even when read aloud out of context by a screen reader tool.
Formatting – Poorly formatted pages cannot be easily enlarged, navigated, or adjusted for better visibility.
Design and layout – Many visitors with visual disabilities will find it hard to see contrasts or certain colors.
Here are the first things to check on your website to make sure that it is accessible for visitors with visual impairments:
Make sure that your titles describe the page clearly and are different from the titles of other pages so that blind users listening to an assistive screen reader can understand without the context of layout, and users with poor vision can get the information they need.
Optimize your site for voice search SEO, to make sure visually-impaired visitors can find it easily on search engines.
Check that there are alt image texts for every image. Alt image texts should briefly and clearly describe the image. For example, the alt image text for a search button should be “search” not “magnifying glass.” These can be read out by a screen reader.
Ensure that all your text has a high contrast ratio, meaning that it contrasts sharply with the background such as black text on a white background or light text on a dark background. Bear in mind that some people such as dyslexics have trouble reading bright colors. It’s best to enable users to set their own colors for texts on your site.
Blind and visually impaired users tend to use keyboard commands or voice commands instead of a mouse. They need buttons and drop-down lists which show which option is currently chosen. This could be by highlighting the current choice or adding a border.
Your texts all need to be in a font that’s large enough to be easily read by your visitors. Fonts should also be clear and easy to read, without a lot of extra decoration. If you choose to use a smaller font, be sure that the page still renders correctly if your user decides to manually increase the font size.
Don’t have any text, buttons, or images that flash or blink. This can trigger a seizure in epileptics, but it’s also very hard for users with poor vision to read and take in the information.
Make wise color choices. Don’t choose anything too bright, which can dazzle and confuse the eyes, or too faint that can’t be easily seen.
8% of men and 0.5% of women have color blindness, so never use a color to define a button or an instructional field.
Very large images can be confusing for many viewers, especially if they are viewing on a screen that isn’t large enough to show the entire image. They also take a long time to load or might be blocked from loading due to their size, so able users will be affected too.
Make sure that every piece of video content has an audio alternative or a text transcript which can be accessed by a screen reader.
Advanced Accessibility Tips for Users with Visual Impairments
Many of the more advanced visual accessibility practices are better done by a programmer. Here are some advanced accessibility tips for developing for accessibility:
Make sure that headings are clearly described in your HTML markup, so that screen readers can navigate between them.
CSS coding and visual formatting effects often make it difficult or impossible for blind users to access the information in the text. It’s best to avoid CSS and to style clean, unfussy texts.
Design your texts for easy enlargement. Use relative size values so that when a user makes their screen view bigger, the letters won’t overlap, remove spaces between lines, or cut off the ends of sentences in a way that requires horizontal scrolling. Avoid bitmap images of text which are difficult to enlarge.
Enable users to navigate the website using voice input, voice to text and text to voice tools, screen readers, and other assistive technologies.
Offer key information in audio form as well as visually. For example, permit users to hear captcha texts that screen for bots as an audio media as well as visually.
Set text contrast and color choices to be adjustable so that each user can adjust their browser for the color and contrast that they find easiest to read.
Provide descriptive labels for your links, so that a blind user who encounters a list of links on a page without any context knows where each link leads.
Provide full keyboard support, including an intuitive and logical navigation structure and keyboard focus that highlights fields in a form and choices in a drop-down menu or list when using keyboard controls, not only with a mouse.
Accessibility for People with Auditory Disabilities
There are many ways that people with auditory disabilities struggle to use the internet. Website visitors with auditory disabilities include:
People who are profoundly deaf with severe hearing loss in both ears
People who are hard of hearing in one or both ears
People who can hear sounds but not clearly enough to distinguish speech
Some internet users who have auditory disabilities use sign language to communicate and can struggle to read text. This means that the language used on websites needs to be simple and easy to understand, with explanatory images alongside written instructions.
When you accommodate users with auditory disabilities, you also make it easier for:
Users in a noisy setting like a train station
Users who wish to keep their activity private, like at work or when sharing a room
Your own site to archive videos by content and subject matter
How to Make your Site Accessible for Visitors with Auditory Disabilities
To make websites accessible for visitors with auditory impairment, it’s necessary to begin by thinking about the content. Some deaf users primarily use sign language and need text instructions to be written in very simple terms. The formatting is another potential issue, including features like adjustable volume control. Finally, accessible design for deaf users should include the use of explanatory images, among other steps.
To improve your site’s accessibility for visitors with auditory impairments, begin by looking at these issues:
Explanatory images that accompany audio or written instructions, to accommodate deaf users who are more familiar with sign language than with the written word.
Sign language instructions and comments
Videos and other media that have captions should come with closed captions which are easy to turn on and off using keyboard commands, not just with a mouse. They should be available in a number of languages, and/or as an international sign language accompaniment.
Make sure that there is nothing that is audio-only, such as beeps, error warning alarms, or audio prompts.
All audio materials should have a written transcript that is clearly available on the same page as the audio file.
No voice-only controls. Everything should be operable through keyboard controls as well as with the mouse.
Advanced Accessibility Tips for Users with Auditory Impairments
You’ll need the help of a programmer or some programming knowledge to incorporate these advanced accessibility features for hearing-impaired users:
Make it easy for users to adjust the volume of an audio file separately to the volume level of the rest of the computer system.
Ensure that all audio files are the highest quality possible, without background noises, buzz or other auditory distractions
Implement adjustable captions that can be set to the right size, contrast, and color for each user’s preference
Include easy-to-use controls to stop, pause and move backward within an audio or video file
Add an audio description as well as a transcript. This tells deaf users about other interactions within the video or audio file, not only the words that were spoken.
Accessibility for People with Physical Disabilities
Internet users can have physical disabilities from a whole range of causes, but they tend to need the same set of solutions. Physical disabilities that affect internet use include:
People with amputated limbs or fingers
Users with arthritis, rheumatism or other conditions that cause pain in the joints
Older users and people with conditions that cause trembling fingers
Those who suffer from muscular dystrophy
Users with reduced dexterity and poor hand-eye coordination
Paraplegics or quadriplegics
Internet users who have neurological disabilities or disorders often suffer from physical disabilities as a result. Designing a website that’s accessible for users with physical disabilities also assists users who are:
Using keyboard controls instead of a mouse
Struggling to click on the correct space on a page, such as when traveling on a bumpy train
Unable to use two hands, such as a parent holding a baby while typing or someone with a broken arm
Very slow at typing or navigating a webpage, and/or new to using the internet
How to Make your Site Accessible for Visitors with Physical Disabilities
When you design a site that’s accessible for users with physical disabilities, the first thing to consider is making it usable without a mouse. For users with physical disabilities and weaknesses, keyboard controls are much easier to use than a mouse. Some users might be using mouth or foot controls, which are difficult to direct accurately, or eye tracking software which cannot interact with every type of webpage.
Here are some steps to take to make your website more accessible for users with physical disabilities:
Create much larger buttons so that it is easier for users with trembling fingers or limited coordination to click within the button field.
Allow plenty of time for tasks to be completed before letting a page “time out,” since users with physical disabilities may take longer to enter text, type, or click on a button.
Make sure that all content is organized in a logical fashion, with clear and well-organized titles and headings, so that users using keyboard controls can navigate through the website in a logical sequence without becoming confused at the next option.
Advanced Accessibility Tips for Users with Physical Disabilities
Many more accessible features are open if you have a programmer who can change your backend coding:
Make sure that your website fully supports keyboard controls. This should include different ways to highlight or indicate a choice in a drop-down menu or when completing a form.
Format and enter content in a way that makes it accessible to assistive readers and other tools that are used by people with physical disabilities.
Make sure that all commands can be activated using single keystrokes. Most users with physical disabilities can only type one key at a time.
Build a website that can respond to touch-free controls, such as voice controls, foot controls, mouth controls, or eye movement trackers.
Set up easy options for correcting errors and mistakes, since users with physical disabilities frequently hit the wrong key or enter the wrong text.
Build mechanisms that allow users to skip page headers, navigation bars, and other design blocks without using a mouse.
Accessibility for Users with Low Cognitive Ability
Website users with low cognitive ability generally have a lower short-term memory, struggle to concentrate and are easily distracted. They can include:
Individuals with developmental, learning, perceptual or intellectual disabilities
Individuals with mental health issues
Aging users suffering from early stages of dementia
Users with ADD or ADHD, autism spectrum disorders
Users with short-term memory loss and short attention spans
People with mental health disorders such as anxiety or schizophrenia, which can cause difficulties in focusing on, processing and/or retaining information
People with multiple sclerosis, especially during relapses
When you design a website to be accessible for users with low cognitive ability, you also help users who:
Are not native speakers of your language
Have low literacy
Are not used to using the internet
Are suffering from the effects of aging
How to Make your Site Accessible for Visitors with Low Cognitive Ability
Designing a website that’s accessible for users with low cognitive ability begins with the content, which needs to be phrased in simple language, short phrases, and very direct instructions. Low cognitive ability does not always come hand in hand with low intelligence, so it’s important not to talk down to these users. Many of the accessibility needs of users with low cognitive ability overlap with those of users who have visual or auditory impairments, such as support for keyboard controls and assistive readers, consistent labeling and clear navigational design.
Here are some important steps to take when designing for accessibility for users with low cognitive ability:
Use simple, direct language that is not full of slang or confusing metaphors
Include explanatory illustrations and images alongside the text (as for users with auditory impairments)
Avoid using long, dense blocks of text that are unbroken by images or spacing. Short groups of text along with clear, instructional images are much easier to take in
Don’t use text that flashes, blinks or scrolls across the page, because it takes longer for users to read and assimilate it and they’ll be held back by the visual distractions
Advanced Accessibility Tips for Users with Low Cognitive Ability
More accessibility features can be added by programmers. Advanced accessibility tips include:
Allow enough time for slower readers to respond, complete forms or comment on a webpage before it times out
Make sure that your website markup can be read by assistive screen devices for those who have trouble understanding written instructions
Implement a logical, hierarchical navigation structure to make it easy for users to move between pages and sections
Provide a search function and a hierarchical menu for easier navigation
Be consistent in your web design, link placement, webpage structure and labeling protocols
Make it easy for users to suppress confusing and distracting animations and audio on web browsers and media players. Make sure that media doesn’t start automatically on the opening of a webpage, and that it is easy to stop it when it does start.
Avoid using visual page designs that can’t be easily adjusted with CSS or web browser controls.
How to Check Your Website’s Accessibility
If you’re not sure that your website meets general standards and guidelines for accessibility, there are plenty of tools and checkers that can help you to verify compliance and identify where you need to improve. First of all, you can run basic accessibility checks without downloading any tools, just by trying actions like resizing text, scanning titles and checking for alt image tags. You’ll find a selection of basic accessibility review actions on the W3C website, or you can use tools like User1st and AChecker for a quick review.
It is faster and easier to run checks if you download evaluation tools. W3C recommends the Web Developer Toolbar for Chrome, Opera, and Firefox and the Web Accessibility Toolbar for Internet Explorer, which are all free extensions and available in a few languages. There are also many more free and paid evaluation tools out there to help you out.
Some things to look out for when choosing a website accessibility checker include:
Which languages it operates in
Which set of standards it takes as guidelines
What formats it checks
Which type of tool it is – for web browsers, mobile or desktop apps, command tools, etc.
How much it can check automatically
Whether it provides reports, in-page feedback, transformations, and more
Ultimately, there is no one tool that can check your website’s wraparound accessibility. You’ll need to combine a number of different tools so as to evaluate different aspects of your website. But even the largest toolkit of accessibility checkers can’t clear your website. It requires human oversight and someone to test out various aspects such as magnifying text, viewing pages using specific viewers and considering all the barriers that could face disabled users.
Read about how over 95% of government websites exclude images of disabled people here!
Conclusion
Creating an accessible website takes a little more time and forethought, but it reaps many rewards. Apart from the need to comply with the laws and regulations in your country, an accessible website is easier to use for everyone, boosts your SEO, and helps all your visitors to have a smoother and more enjoyable experience on your site. It also opens your website up to the 15-20% of the population who have some type of disability.
While some steps are more complicated and need the help of a developer, you can make your website accessible from day one with some simple and quick changes. An accessible website may involve more work, but there’s no question that it’s worth it, for everyone.
Reference:
Published at Website Planet please click on below link to read there:
https://www.websiteplanet.com/blog/website-accessibility-made-easy-ultimate-guide/