The Easiest and Quickest Ways to Improve Your Web Accessibility

Are you wondering how to handle web accessibility and are concerned about time? We have compiled a list of the easiest and quickest ways to improve your web accessibility.
The accessibility icon

Page Titles

Accurate page titles help orientate people with disabilities and positively affect your SEO.

Check that the page title:

  • Is different from other titles on your website 
  • Adequately summarises the content on the page
  • Is ‘front-loaded’ with the important information so it is displayed first. Eg. ‘Contact Us - Have Questions?’ not ‘Monsido Contact Us.’

Color Contrast

Some people, including those with a visual impairment or those who lose color sensitivity due to aging, cannot read text if the color of the text is too close to the background color. A quick way to check if your text has an adequate color contrast is to use our free Color Contrast Checker. Simply select your background and text colors and see whether your color contrast ratio complies with the WCAG standards.

Headings

Headings help organize the structure of content to make the content more navigable. Unfortunately, simply bolding or underlining a heading isn’t helping your accessibility. Headings need to be marked up (coded) correctly to show their hierarchy. Correctly marked up headings also positively affect your SEO.

 

For example:

Heading Level 1 <h1>

    Heading Level 2 <h2>

        Heading Level 3 <h3>

    Heading Level 2 <h2>

        Heading Level 3 <h3>

            Heading Level 4 <h4>

Alt Text

Alt text (alternative text), found in the HTML code, describes the purpose of the image or graphic so people who have a visual impairment that use screen readers and search engines can understand the image. 

If the image shows useful information about the topic or how to interact with a page, it needs an alt text. Keep it concise and avoid keyword stuffing. If the image is decorative and does not have a purpose, the image should be reconsidered or the alt text should be ‘null’ (alt="").

Resize Text

Some people need to enlarge or change the display of web content in order to read it. This can happen more when users view websites on smartphones or tablets. Web browsers can change the text size but sometimes this is not usable when a website is not designed well. 

To test this, zoom on your web page to 200% (in multiple browsers) and check that:

  • All information can be clearly read
  • Content isn’t cut and hasn’t disappeared
  • Content doesn’t need a horizontal or vertical scrolling bar to read the text
  • Space in between content blocks, images, and buttons are adequate.

Keyboard Navigation

Keyboard navigation is important for users with visual impairments and sighted users with motor impairments. The good news is keyboard navigation is relatively easy to test for.

In browsers that support keyboard navigation with the Tab key (Firefox, IE, Chrome, and Safari):

  1. Click the address bar.
  2. Press the ‘Tab’ key on your keyboard and move through the page elements. ‘Shift-Tab’ will move backwards.
  3. Use arrow keys to move within drop-down lists and menu bars. To select an item within a list or bar, press the ‘Enter’ or ‘Space’ bar.

 In Mac browsers:

  1. Go to ‘Select System Preferences’, then ‘Keyboard’, ‘Shortcuts’, and click the ‘All controls’ button.
  2. Follow the steps in the paragraph above.

Check that:

  • You can use the tab key to get to all elements including media player controls, buttons, and links 
  • You can use the tab key to get out of elements (sometimes the media player controls can trap people)
  • You can use your keyboard controls to get to all elements and interact with them
  • The tab order has a logical flow from left to right and top to bottom
  • The element that you are on is clearly visible (eg. by a grey outline or highlighted text)
  • Images that are links are clearly visible and can be activated with the keyboard (eg. with the ‘Enter’ key)
  • Drop-down lists and menus can be navigated by arrows.

Accessibility Scanning Software

A magnifying glass scanning a website

Another way to save time and effort in improving your website compliance is to investigate website accessibility checkers and accessibility scanners, such as Monsido. Monsido automates identifying, prioritizing, and fixing web accessibility errors. Our easy to use software makes web accessibility understandable, even if you haven’t had prior training. Easily track your website accessibility compliance and see your site improve with every issue you fix.


Do you want to know how accessible your website is? Get your free website scan.