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
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.
Don’t Forget to provide text alternatives for any non-text content
Alt text provided for image. (blog.prototypr.io)
The information needs to be presented in a way that can be adapted to different situations without losing information or structure.
Don’t Forget to create adaptable 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.
Don’t make it harder for users to see and hear content
Input text and border against the light background do not meet the contrast ratio guidline. (blog.prototypr.io)
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 forget to make all functionality available from a keyboard
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 rush timed content
There should not be any flashing lights that occurs more than three times per second.
Don’t design content in a way that is known to cause seizures
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)
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 make web pages appear and operate in unpredictable ways
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.
Don’t forget to help prevent user errors
Instructions for creating a strong password. (bitsofco.de)
The usability and accessibility needs to be understood by current and future users, including assistive technologies such as screen readers.
Don’t forget to maximize capability
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...
With the invention of the Internet, the world’s information has become accessible, literally, within the palm of our hands. Technology has grown throughout the past three decades and web design has shown its own evolution over time. We’ve come a long way from the...