Ways To Improve Website Accessibility

This week’s blog post is on ways to improve website accessibility. This article is full of tips on features to add and ways to make your website 100% user-friendly. This is our third post for this month’s blog series on user accessibility and company compliance!

Perceivable

When a website’s information and components are designed to fit all users it is perceivable. This can be done in many ways text alternatives, time-based media, adaptability, and distinguishability.

Text alternative:

• Allowing all texts to be changed into large print, speech, symbols, easier language, and braille.

Time-based media:

• Having both audio-only and video-only options
• Offering pre-recorded captions
• Displaying audio descriptions or closed captions
• Showing live captions that are synchronized with the media
• Option for pre-recorded sign language
• Provide extended audio descriptions with all videos and clips

Adaptable elements:

• Using landmarks to identify regions of the page
• Providing information with easy access (ex: banners, landmarks, tabs, etc.)
• Allowing for both portrait and landscape views
• Providing instructions to operating elements for easy understanding
• Having a proper reading sequence
• Providing textual identification for all items

Distinguishable components:

• Using different colors to distinguish separate groups of information
• Allowing the user to control any audio played on site
• Having a contrast ratio of at least 4:5:1
• Option to resize text
• Providing information on the images shown
• Having a contrast ratio of at least 7:1
• Using text spacing
• Always having the hover visible

Operable

A website is completely operable when all users can navigate the components. It’s important to make your website functional through various inputs beyond just a keyboard.

Keyboard accessibility:

• Proving keyboard handling functions to get around specific time strokes and specific movements.
• Making sure users can exit information in multiple ways and not just via keyboard.
• Allowing users to turn off single-key shortcuts

Enough time:

• Allow for time adjusting (turn off, adjust, and extend time limits)
• Allow for pausing, stopping, and hiding videos
• Minimize interruptions
• Allowing the user to continue an activity without losing data after re-authentication
• Provide a warning of the time limit of each activity

Seizures and Physical Reactions:

• Don’t allow components to flash up on the screen more than three times
• Allowing motion animations to be disabled

Navigable:

• Adding links to different parts of your webpage to make navigation easier
• Having all page’s titles with a description or purpose
• Allowing for multiple ways to access each part of your page
• Label all headings
• Putting all information in an easy-to-understand location
• Making sure the keyboard focus indicator is visible

Input Modalities:

• multipoint or path-based gestures for operation on a single pointer
• Ensuring drag-drop actions can be removed
• Providing labels with text for all images of text or text alone
• Having the target for pointer inputs is at least 44 by 44 CSS pixels
• Making sure your content does not restrict various input mechanisms

Understandable

It’s important to make sure all text is readable and easy to understand

Readable:

• Allowing HTML element for all language components on a page
• Providing a definition for uncommon/unusual words
• Having all expanded forms or meanings for abbreviations
• Providing text summary with lower secondary education
• Providing a glossary

Predictable:

• Limiting or eliminating new windows opening
• Providing submit buttons and informing the user what is happening
• Making sure all repeated components are shown in the same order each time
• Providing consistent identification for content such as labels and names
• Always giving the option to update rather than automatically updating

Input assistance:

• Providing descriptions to identify the areas that were not complete
• Allowing users to review and correct answers before submitting
• Providing a checkbox before submitting
• Providing a help link on your website
• Providing frequently answered questions page

Robust

The website content must be robust for different assistive technologies to interpret it

Compatible:

• Validate all web pages and links
• Always include a name, role, and value for all interface components.
• Providing a status message for assistive technology