- 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
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)
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.
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:
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.
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".