There is a constant pushback from not even developers but many people - Why we need accessibility?
The reason is:
"Web, by default, is accessible and if we (developers) are making it un-accessible than this is our job to fix our bugs. Also, there are many people who are not able to learn or access the information available online, only because we haven't done our job well. Moreover, when we develop web apps/sites we cannot predict most of the time that who will be the end-user and in which conditions someone would be accessing your app/site. So, we have to make sure that we are keeping accessibility as one of the to-dos."
Types of Accessibility Requirements?
We can divide the Accessibility requirements into 2 categories :
1) Permanent
Permanent are those problems/diseases which are permanent. Such as blind, deaf, broken arms and so on.
2) Temporary
Temporary is those problems/disease which is not permanent such as - fracture hand, eye-infection, sore throat, or could be the conditional or weather dependent. Such as - accessing the app, site or product while in bright sun etc.
We can further divide the accessibility requirements :
1) Speech
Under this category, people who are suffering from speech problems come. People who can't speak, have stammer problems and so on. Now, if you are developing an application which requires the voice to enable any feature or just voice-based then these people won't be ever able to access your product/app. So, you need to make sure that how you can make your product/app accessible for them.
2) Hear
People who have hearing problem comes under this category. If your app, product or site has audio then you need to make sure that section is accessible to these people too. Might be providing the sub-title of the audio.
3) Vision
People who are not able to see, have color blindness, or not able to see properly. Now, these people won't be able to access your product, site, and app ever. As well as, people with color-blindness will be very tricky - as for them it is black and grey and only. Now, as a developer, we have to make a website which is accessible to the users who have vision problems.
4) Neural
There are people who have neural problems and can't be able to do mental basic stuff. Eg. if you are doing validation where they have to Maths or answer a question for them it could be non-accessible. As a developer, we have to think of the fall-back for such cases.
5) Touch
There are people who are suffering from physical problems such as a broken arm or fingers. In this case, accessing the site, product or app by mouse or keyboard is tricky. As a developer, we need to make sure that the site is still accessible by text-to-speech software too.
PS: The all above mentioned cases could be permanent or temporary.
Making your website/app accessible is not a big job. If the developer is doing his/her job right then you won't worry about accessibility ever. Here is the checklist of the same:
Developers Role:
1) Use Semantic Markup
2) title and alt tags: All images should have the title, alt tag.
4) CSS Images: All representational images should come from CSS, not from HTML.
5) Multimedia Content: Video and Audio content should have the subtitles too.
6) ARIA: Use the ARIA labels where you are not able to use the semantic tags.
7) Your site code will be the script for the text-to-speech software do keep your code clean and same as you want your users to understand.
8) skip the navigation: Always keep the option of skip the navigation.
9) Tab key: to make your website accessible by keyboard.
10) "Go to Top" link if your site is very long to scroll
Designer's Role:
1) Design should be accessible, it should not be too complex to perceive
2) 3-click Rule: Follow the rule of 3-clicks. In 3-clicks user should get the information he/she is looking for.
3) Colors: Colors should be accessible. If you are using dark background then font-color over that should be readable. Chrome has a color-contrast checking tool which you can use to check.
4) Fonts: Select the fonts which are clear, crisp and easy to read rather than using cursive and hard to read fonts.
5) UI Indicators: UI indicators such as form validations should be very clear to understand. If you are just showing red color on an error then users with vision problem won't be able to understand. Provide the alternative text with the error too.
6) Keep the font-size options from Large to small. Make sure the website is not breaking while changing the font-size.
Tools to Test Accessibility:
1) Lighthouse - A chrome extension as well as now come inbuilt with chrome browser.
2) Real-users testing - Nothing can beat the real-time users testing.
3) Manual Testing - As a tester do a manual testing of your site rather than dependent upon software
4) Chrome' color testing tool - In Chrome, there is "color-contrast" checker which tell you if your selection of color is accessible or not.
5) Text-to-speech software: There is much software available that test your site by converting the text to speech.
Happy Learning!!
No comments:
Post a Comment