Perceivable – The information and user interface components must be presentable to users in a way they can perceive
Operable – The user interface components and navigation must be operable
Understandable – The information and the operation of the user interface must be understandable
Robust – The content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologie
Don’t Forget to provide text alternatives for any non-text content
Non-text content such as images will need descriptive alt-text to illustrate what is going on in the picture that is provided. As for videos, captions help to describe the dialog and any background noise going in each scene.
These text alternatives are needed in order to be changed into other forms that other people need, such as large print, braille, speech, symbols, or simpler language.
Alt text provided for image. (blog.prototypr.io)
Don’t Forget to create adaptable content
The information needs to be presented in a way that can be adapted to different situations without losing information or structure.
Don’t make it harder for users to see and hear content
Provide enough color contrast between the foreground and background. WebAIM is one of the resources that we use to ensure that the color contrast meets ADA compliance. It is recommended to have a color contrast of at least 4.5:1 , but it is preferred to be 7:1.
There should be mechanism available for users to control audio volume that is independent from the overall system volume level.
Text should be re-sizable for those who need larger text.
Input text and border against the light background do not meet the contrast ratio guidline. (blog.prototypr.io)
Don’t forget to make all functionality available from a keyboard
There are many people that are unable to use a mouse, so it is important to keep all functionality accessible from the keyboard. All functional and interactive elements, such as links or input fields should also have a clear focus state to guide users to their location on the page. Make sure that there are no keyboard traps that prevent the user from continuing to access your content.
Don’t rush timed content
Any type of moving or auto-updating information should implement some sort of feature that can turn off the time limit, adjust the time limit at least 10 times the length of the default setting, or warns the user before the time expires.
Don’t design content in a way that is known to cause seizures
There should not be any flashing lights that occurs more than three times per second.
Don’t forget to provide ways to help users find the content they need, navigate, and determine where they are on a website
Be sure to provide a link for users to skip to the page’s main content. This is important especially for sites that have large, multi-layered navigation menus. This allows users to bypass blocks of content in order to go straight to the information they need.
Use the content text to determine the purpose of the link that is within the anchor tag itself.
Provide more than one way to locate a web page. Examples of this would include providing a Site map page, a search function and links to all the pages in the navigation bar and/or footer.
Provide the user with information about their current location. This can be indicated by the following:
- breadcrumbs, trailing the pages the user has accessed to get to their current page
- site map
- highlighting the current location in the navigation bar
Content text used as the purpose of the link. (bitsofco.de)
Don’t make web pages appear and operate in unpredictable ways
It helps to keep navigation elements consistent throughout the whole website. Components that have the same functionality within a set of web pages should be identified consistently.
Don’t forget to help prevent user errors
When presenting input elements on forms, provide labels and simple instructions to clearly indicate its purpose. It also helps to provide error messages that describe what is needed in simple and understandable text when the input is incorrect. Also give the user chances to go back to correct information before submission.
Instructions for creating a strong password. (bitsofco.de)
Don’t forget to maximize capability
The usability and accessibility needs to be understood by current and future users, including assistive technologies such as screen readers.
1Responsive Design As more people use tablets and phones to access the web, a tailored experience across devices is vital. Responsive design means the site will scale and reorder content an optimal way for the appropriate device. For many websites, over 50% of traffic...
Developing an efficient website can be tricky. It is not enough to look beautiful, it must also function well. The previous Mango’s website focused on aesthetics over user experience. It took multiple clicks to get from the homepage to the antiquated reservation...
If you’ve ever considered starting your own business, especially if it involves selling goods or services, you’ve likely come across the thought of developing your own ecommerce storefront. When it comes to which platform to use one of the most widely used is...