Accessibility Importance

  • Accessibility, Standards

Accessibility issues can effect anyone at any time. They are not specific to someone who is blind or deaf but can be anyone, including people who use their cell phones and tablets to surf the web on sunny days and can't read the screen. Accessibility is a vital part in creating a successful website for all.

Picking the right colors

Use the Color Contrast Calculator. Content should be the first priority in the development of your site but no matter how well written it is, it is useless if users cannot easily read it. By using a Color Contrast Calculator, you can make smarter decisions about the background colors you are using and the foreground color of text you are placing on those backgrounds.

Alternative Text for images

Use Alternative Text. Adding Alternative Text to all of your images will not only help your Search Engine Optimization (SEO) but will also provide a description for screen readers for the blind. It's so important that by leaving off Alt tags on your images, it will make your website fail validation! It's worth mentioning that Alternative Text is not visibly displayed with the image unless you are adding a caption in Mura. Though it isn't alwasy visible, Alternative Text is very important to fill in.

Example of Alternative Text

Squirrel eating a nut on a snowbank

Alternative Text: Squirrel eating a nut on a snowbank.

How to add Alt tags in Mura

Open Image Properties by adding a new image (see below) or by double clicking on a current image.

In Image Properties your Alternative Text will go under the URL option in the "Alternative Text" field (See image below)

Descriptive text goes here

After adding the text and selecting your image (if applicable), click OK.

Chunk Your Content

Break up your content. Readability is a key component of an accessible site. Large paragraph blocks of content with a few or no breaks tend to make it more difficult to read. Two ways to deal with this are by using bullet points and proper headings to content sections.

Headings

When using headings on your pages, ensure that you are using them properly. 

When designing your page, think of it as an outline. Headings should appear within and follow a natural order. Don't have a "Heading 2" on a page? Then why are you adding a "Heading 3"? Use sub-headings just like you would in any other type of document.

As an example, let us create a page about apples. Within it, we want to talk about color, taste and shape. The outline for that might look like:
 


Apple Color

Red

Bright Red

Dull Red

Green

Bright Green

Dull Green

Yellow

Bright Yellow

Dull Yellow

Taste

Sweet

Sour

Tart

Shape

Round

Oval

Oblong


Notice how we have three main headings: Color, Taste, Shape? Notice how each of those has a sub-heading, and in the cast of color, each of those has their own sub-heading? By properly structuring your content with headings, your pages will be easier to navigate.

Link Accessibility

Being able to pull a link out of a block of text can be a difficult task. Keeping your links underlined might not be the most stylish option but it makes it easier for all users to find a link in text.

Another important aspect of link accessibility is to make the text being linked as descriptive as possible. An example of a good link in text is: "If you're looking for a tool to help with contrast color, take a look at our Color Contrast Calculator." A bad example would be "Click here to view our Color Contrast Calculator".