The principal availability tests

Availability tests allow you to optimize your web site. For each visitor. By thinking about availability, you’re in fact thinking about your layout, using multimedia and textual content, and the construction of your web site. The World Wide Web Consortium (W3C) has a list of availability tests for you. In this post, I’ll dive into the primary, priority 1 checkpoints in that checklist and see how these apply to a contemporary (WordPress) site.

accessibility checks

Priority 1 Accessibility checks

Let us work our way down and begin in the very beginning of that record of availability checks.

Text equivalents

This really is really rather an extensive test, so the reason why they made it the first one I get. For each non-text component, you need to supply a textual equivalent. That goes for things like pictures, but in addition for everything ranging from animated GIFs and image map areas to stand alone audio files and video. This is done for example, with alt or longdesc tags. For your YouTube video, it could be achieved with the addition of closed captions to your videos:

[embedded content]

It’s not that difficult if your video is not overly long. This goes for almost any multimedia demonstration, incidentally. It may be simplest to just add additional text right below powerpoint or a video for that matter, summarizing what’s in the multimedia demo, so screen readers will not have any problem describing what the demo is all about. If time, or seeing time, is an issue (for instance in online tests), synchronize the text with all the multimedia demo.

On a related note, make sure you alter these textual equivalents when the non-textual part changes. Only do not forget to do this, although that appears reasonable.

Mind your colours and contrast

We have discussed this before. There are lots of means if colours work together and to assess contrast. Rapid evaluation: convert your web site to white and black. Develop a bookmarklet using this snippet:

javascript:(function()(e.style[“-webkit-filter”]=”grayscale(1)”,e.style.filter=”grayscale(1)”)())

One of the things that actually attracts my attention recently is the variety of links that simply have that distinct colour and no other sign a word or sentence is linked. I may be homesick in this, but occasionally I truly believe we should just agree to underline each link that’s in a text (post, page, etc). That would make an immense difference.

Do not understand how to create a bookmarklet? Assess this page. In this post on availability tools, I mention more indepth availability tests for colour and contrast.

Flickering

There are things like scripts that cause computer screens to flicker more than thought. I’ve really never thought of it this manner, however there are individuals which have a serious problem with flickering videos that autoplay or excessive utilization of animated gifs blinking text. The unexpected flicker (at a specific speed) of the display might cause what’s known as photo-epileptic seizures.

Describe what is going to occur and ensure this flickering may be enabled/disabled by the user.

Use clear and simple language

This really is clearly not only for SEO, but in addition for availability and user experience in general. The Flesch Reading Ease score in our plugin allows you to compose better text. This really is really something we’ll be adding considerably more focus on later on.

Obviously, your language should be adjusted by you to your audience. If you’re coping with serious issues like law or politics, your text should not read something like “This new doggyfizzle televizzle gon’ be off the hizzle, fo shizzle.” Accommodate to your crowd, and allow it to be reachable on the way.

The ‘clear’ things

There are more priority 1 checkpoints. I want to sum these up for you in layman’s language:

Add proper lang= statements to your HTML tag, but in addition add these when altering the language at the center of the sentence, als je begrijpt wat ik bedoel. That can only be done by adding an in this instance. Do not forget to close that tag to return to the first language.
Your web page still ought to be readable, in the event you remove your stylesheet. Here‘s a bookmarklet for it.
Use client-side image maps rather than server-side image maps. When the clickable region is in some weird contour, an exception can be. Recall when image maps were created by us like that in Dreamweaver? Rather do not do that 🙂
Besides that, image maps desire adequate text links to go with each active region of a server-side image map. More on reachable image maps here.
Who uses tables, right? Most of us bloggers do not, and I have not seen a layout constructed in tables for a long time (happily). Make sure to in case you have a need for a table, for instance for a scientific post:
Identify column and row headers, and
In case your table has two or more logical levels of row or column headers, use markup to associate data cells and header cells.

You are likely not using frames, but in the event you are: add a name to every frame so these browsed and can readily be identified as such.
In case your web site depends on scripts (or applets)m but certain to analyze your site with these items turned off. For example, in case your site uses a loader per page (WHY!?), turn JavaScript away in for instance the web developer toolbar and see in case your theme still works. Otherwise, fix this or supply exactly the same info on another page that’s not inaccessible.

Read More