See your page with different eyes. If you want to get a general sense of how a web page addresses a few accessibility issues you can check it via the Easy Checks page.

Content Strategy is a field where many disciplines are combined. One discipline that is neglected far too often is the accessibility of websites. This is the reason why Eric Eggert teaches the future content strategist from #cos15 in this matter. When building up your website content, making it accessible for everyone in advance won’t be an additional effort but a logical first step of a content strategy.

If you want to get a general sense of how a web page addresses a few accessibility issues you can check it via the Easy Checks page. This page provides checks for important aspects of a web page and helps you assess the accessibility of a web page. If you are going through this page and apply it to your website you can ascertain if your website is accessible or not.

Page titles

The page title is very important. It is the main text that describes a web page. You can find the page title in the window title bar. The page titles are shown in search engine results and they are used for browser bookmarks. It is also shown in browsers tabs when there are multiple web pages open. You can easy navigate within your tabs when you create an itemized and clear page title.

Best practice: Use unique page titles and insert the most concrete term first. From concrete to general . For example if you have a webshop selling trousers, you should start your title like this: “Levis Jeans – Jeans -Trousers….”
And not like this
“Trousers – Jeans – Levis Jeans”
If a lot of tabs are open you probably see the first term only, that is why you should use the most concrete term first.

How you check if your page title is accessible?

Look at the page’s title and titles of other pages within the website.
Check that the title is unique, accurate and briefly describes the content of the webpage.

Image text alternatives

The text alternatives (“alt text”) describes what is on an image (pictures, illustrations, charts etc.) or the function of the image on the page.

What to check for?

Every image has an alt attribute with accurate and descriptive alternative text.

You can easily check whether your images have alt attributes or not, using the web accessibility evaluation tool WAVE.

Headings

Headings are very important to structure your content. The headings need to be marked up. Heading levels should have a meaningful hierarchy: Use Heading tags from h1 to h8. H1 means heading of the first order with the highest rank, h2 means heading of the second order etc…

Example:

<h1> Exotic Birds </ h1>

<h2> Toucans </ h2>

<h3> Diet</ h3>

<h3> Life </ h3>

<h2> Aras </ h2>

<h3> Diet</ h3>

<h3> Life </ h3>

<h3> Intelligence </ h3>

<h4> Language </ h4>

Contrast ratio “Color contrast”

The contrast ratio is defined as the ratio of the luminance of the brightest color (white) to that of the darkest color (black) that the system is capable of producing. For example: High contrast is needed by some visually impaired people.
You can check the ratio with this tool.

What to check for:

Web pages should have a minimum contrast by default: a contrast ratio of at least 4.5:1 for normal-size text.

 

Resize text

Some people need to enlarge web content in order to read it. But what should not happen is that texts get overlapped. This happens quite a lot of times when the text size is changed.

What to do?

Increase the text size! You can check the text-only zoom in all the different browsers and have a look how your text does change when it gets enlarged.


Keyboard access and visual focus

Many people cannot use a mouse and rely on the keyboard to interact with the web. For example people who are blind rely on keyboard commands, such as voice input. Websites need to enable people to access all content and functionalities — links, forms, media controls, etc. — through a keyboard. So there are several things you should check:

  • Check that you can tab to all the elements, including links, form fields, buttons, and media player controls. AND the other way round:
  • Check that you can tab away from all elements that you can tab into.
  • Check that the tab order follows the logical reading order (e.g., for left-to-right languages: top to bottom, left to right) in sequence.
  • Check that you can do everything with the keyboard.

Forms, labels, and errors

Form fields and other form controls usually have visible labels, such as “E-mail Address:” as the label for a text field. When these labels are marked up correctly, people can interact with them using only the keyboard, using voice input, and using screen readers. Also, the label itself becomes clickable, which enables a person who has difficulty clicking on small radio buttons or checkboxes to click anywhere on the label text.

Basic structure check

To sum it all up: You have to learn how the website is seen by other people. In order to be able to do so, make a basic structure check: Look at the web page without images, styles, and layout.

Web pages are often designed with multiple columns, sections, colors, and other visual aspects that help organize information for people who see the page in its default display. But what about people who can’t see the page in this way? People who are blind listen to the page with a screen reader or read it from a Braille display. Some people with low vision and others change the way the page is displayed so they can read it: They change from multiple columns to one column, change the text size, and more.

So what you can do is the following:

  • Turn off images and show the text alternatives.
  • Turn off style sheets.
  • Linearize the page or the tables.

And last but not least: Share your findings! Ask people how to proceed and where to set priorities in all the findings of your checks. And for sure: There will be several people who will be thankful for all the effort you put in.


Further information

If you want to have a deeper look at your webpage accessiblity check this webpage:
Website Accessibility Conformance Evaluation Methodology (WCAG-EM). WCAG-EM is an approach for determining how well a website conforms to Web Content Accessibility Guidelines (WCAG) 2.0.