WHAT IS IT?
Accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites/applications, for all users, not only those with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality. A design is only useful if it’s accessible to the user: any user, anywhere, anytime. It is the “degree to which a product, device, service, or environment is available to as many people as possible.”
TYPES OF USER NEEDS FOR ACCESSIBLE DESIGN
The areas of user needs we should consider for accessible design are:
- Visual: Long-sightedness, blindness, color blindness, are all forms of visual disability you need to cater for in your design.
- Motor/Mobility: This category doesn’t just extend to problems with the use of the hands and arms, but also with other muscular or skeletal conditions. eg. Dystrophy, Arthritis, Repetitive Strain Injury
- Auditory: Auditory disabilities affect the hearing and come in varying degrees of severity, up to and including total deafness.
- Seizures: Some individuals can be affected by light, motion, flickering, etc. on screen, thus triggering seizures. The most common issue in this category is photosensitive epilepsy.
- Cognitive: It’s also important to remember that not all disabilities are physical. Learning and cognitive disabilities can also influence accessibility. eg. Dyslexia, Attentive Deficit Disorder.
- Create text alternatives for non-text content.
- Write captions for multimedia.
- Properly mark up sections of your web page.
- Create easy to read content with an appropriate color palette.
- Make your website navigable via a keyboard.
- Ensure users have enough time to read content.
- Avoid flashing or distracting content.
- Keep your website well-organized.
- Ensure your text is readable and understandable by eyes and screen reading tools.
- Plan a predictable and consistent user experience.
- Provide the opportunity to correct mistakes.
- Ensure your content is compatible with different browsers and reader tools.
- Maximize compatibility with current and future user agents, including assistive technologies.
HOW TO MAKE IT ACCESSIBLE?
- Use a content management system that supports accessibility standards. For example. WordPress and Drupal. Using CMS will save time, effort and money.
- Use header tags to create headings in your text; ideally, ensure that you use CSS to make this consistent throughout the site. Try not to skip from one heading level to the next; this can confuse screen reader software. Users with more severe visual impairments may access your site using a refreshable Braille display or terminal, which depends on screen readers.
- Use alt text on your images; if you use images to enhance content, then a screen reader will need to explain them— that’s what the alt text is for. However, if your image is purely for decoration and adds no other value, you should skip the alt text to avoid confusion.
- Have a link strategy. Screen readers sometimes stutter over links and stop on the first letter. That means it’s important not to have “click here” links scattered through the text. The best link descriptions have a text description before the link and then a unique name for the link. (E.g., “Read more about Bridge UX Studio, read now”) Consider offering a visual cue (such as a PDF icon) by links to make it clear what the link will deliver. Use underlines on links (they help color blind people distinguish links from a text). Highlight menu links on mouseover to assist with locating the cursor.
- Choose colors carefully; if in doubt, test your color schemes with some color-blind people. Color blindness is an incredibly common disability, and the wrong palette can make it difficult for a color-blind person to read your text or navigate your site. You also need to ensure that you provide high levels of contrast between text and background; the elderly, for example, can find it hard to see text unless the contrast is high. You can use colororacle.org to test your application.
- Use shapes and forms to help guide users rather than relying on color alone.
- Use the design of forms Screen readers can struggle with forms. Label fields, and use the tag to offer the description to a screen reader. Ensure that the Tab order on forms follows the visual order as otherwise, the screen reader can miss any field. Make sure to assign an ARIA (Accessible Rich Internet Applications) required or not required the role in each field, too. Screen readers don’t understand the asterisk, for mandatory fields, convention.
- Avoid tables for layout. Screen readers can handle tables, but they start explaining how many columns and rows are present, which can be annoyingly distracting when the table is simply a layout technique. Keep tables for data presentation. Make certain to use the HTML scope attribute to explain relationships between cells, too.
- Learn to use the proper HTML elements for lists and don’t put them on the same line as the text. This helps screen reading software to parse lists.
- Put your mouse away, and see if your site works with a keyboard only. People with motion disabilities often only use a keyboard to access the application.
- Familiarize yourself with ARIA (Accessible Rich Internet Applications) standards and learn to use them when necessary.