Skip to main content
Siteimprove logo
Content & Accessibility icon

Content & Accessibility

Prepare for a new era of content.

SEO icon

SEO

Rise above the ranks once and for all.

Analytics icon

Analytics

Prove your website's impact and ROI.

GDPR icon

GDPR

Protect personal data on your website.

Product Overview

A solution for every website challenge

Digital Certainty Index™

Website performance at a glance

360º Integrations

Platform insights anywhere you need them

What is Accessibility

Every visitor deserves the same experience. Here's why and how.

Blog

Expert insights into analytics, SEO, GDPR, and more.

Events

We're out and about. Come meet us!

Content Library

Your hub for e-books, checklists, and other Siteimprove content.

Customers Support Partners
Siteimprove logo
  • Request a demo
  • Contact us
  • Request a quote
Sign in
  • Home
  • Blog
  • Creating Accessible Websites, Part 1:For Web Designers

Creating Accessible Websites, Part 1:For Web Designers

Siteimprove x

Jul 19, 2016

Web Accessibility Website Redesign

Are you developing your website for many types of users, or are you primarily developing for people who access websites in much the same way as you do? Do you know how dyslexic users, people who are colorblind, people with impairments and others navigate the web? Users can have disabilities, reading difficulties, visual impairments, color blindness, or age related issues or may be using different platforms. In all of these instances, this can result in accessibility problems. As a web designer, several accessibility criteria are especially important to help you ensure as many users as possible can use your web application. In three separate blog posts, website accessibility will be covered from role-based standpoints: Web designers, web developers, and web editors, respectively. This first contribution is meant for web designers, and provides concrete tips on how to create an accessible web design.

Consistent design

Some users may not be accustomed to using the Internet at all, and other users may have a disability that makes it difficult to get an overview of a webpage or navigate a website. Therefore, it's important that the navigation is consistent across all your web pages, and global elements like menus and help facilities are in the same order across the site. It's also important that elements with identical functions (such as icons and references) are ordered in the same way on every page (Success criteria 3.2.3 and Success criteria 3.2.4).

Navigation

In order to make it easy for users to locate the information they need from your web pages it's important to have more than one way of finding specific content. A user can find content on a page by navigating through the intended page hierarchy, but it should also be possible to find the content in alternative ways, such as through a sitemap, an index, or a search function (Success criteria 2.4.5).

Headings

When designing the look, feel, and architecture of a website, it's important to keep in mind that some users cannot get a visual overview of a web page. They have to do this structurally. Make sure pages are divided into logical sections with each given a descriptive heading (coded as an <h> tag), so that assistive technologies can render them as section headings (Success criteria 1.3.1 and Success criteria 2.4.6).

Use of color

In order to make sure that all users are aware that an element on a web page has a certain function or status, it is important not to give information solely by the use of color. For users who cannot see colors, that information can be lost. An example of conveying information through colors could be to show links within a text by giving links a different color than the text. Be sure to supplement this with a non-color specific way of indicating the links (such as underline, a symbol etc.) (Success criteria 1.4.1).

In order for visually impaired users to be able to read all the text on web pages it is important that the color of the text and the color of the background are in sufficient contrast to each other. This can be ensured by conforming to the requirement of keeping a

contrast ratio of 4.5:1 for regular text and 3:1 for large text. There are a number of tools available to quickly assist in measuring the contrast ratios on your web pages (Success criteria 1.4.3).

Links

When an element on a web page is to be a link or something clickable, it's important that the element text/description makes sense when read out of context. Part of this is ensured by the technical implementation but the design should consider using descriptive link texts also. Link texts such as: 'Read more,' 'here,' 'Click here,' and 'publication' are examples of poor link text if read out of their context (Success criteria 2.4.4).

Interactive elements

When designing for interactive elements, i.e. content that the user can interact with, there should always be a clear explanation of what is to be entered/chosen/checked. The design should make sure that when text fields, drop downs, check boxes and radio buttons are used, they have text connected to them describing their purpose (Success criterion 2.4.6 and Success criterion 3.3.2).

Want more information on how to get started with web accessibility? Download our

web accessibility checklist.

 

Click here to request a web accessibility review of your website.

Post a comment

Categories

  • All
  • Web Analytics
  • Web Accessibility
  • Website Management
  • SEO
  • Website Redesign
  • Web Governance
  • Quality Assurance
  • GDPR
  • Digital Certainty

Popular blog posts

9 Ways to Keep SEO During a Website Redesign

Oct 17, 2013 — Siteimprove

The Roles and Responsibilities of Web Governance

Nov 07, 2013 — Siteimprove

7 Keys to a Successful Visual Design in Website Redesign

Feb 18, 2016 — Siteimprove

Share this post

Share on Facebook Share on Twitter Share on LinkedIn Share on Xing

Connect with us

Siteimprove on Facebook Siteimprove on Twitter Siteimprove on LinkedIn Siteimprove on Xing Siteimprove on Instagram

Subscribe to the Blog

Receive bi-weekly updates on expert analytics tips, content creation hacks, accessibility news, and more.

Start Tackling Your Website Challenges

Request a demo of Siteimprove to start analyzing, optimizing, and protecting your website from one platform.

Request a demo

My Siteimprove

  • Sign In
  • My Dashboard
  • My Profile

Company

  • About Us
  • Contact
  • Press
  • Meet the Team
  • CSR

Support

  • Getting Started
  • Guides and FAQs
  • Community
  • System Status
  • For Developers

Careers

We're hiring like crazy. Join us!

Help Center

Questions? We've got answers.

Siteimprove is proudly part of:

Siteimprove on Facebook Siteimprove on Twitter Siteimprove on LinkedIn Siteimprove on Instagram Siteimprove on Xing

© 2018 Siteimprove — Security VPAT Legal Privacy Policy

Canada (English )

You accept the use of cookies by continuing to browse the site or closing this banner. Read more about cookies in our Privacy Policy.