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