1.3.1 Info and relationships

The guidance states: 

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.

What does that all mean?

It basically means you need to stop and think about what information you get by seeing and consider how someone with a screen reader will get that same information.

The structure of a document or web page is easy to get, if you can see. When we look at a page, headings are often on their own line, bold, bigger than the rest of the text. Lists are usually indented and have a number or a bullet point in front of each item. Paragraphs have a larger space between them than normal lines. Hyperlinks are usually underlined and/or in a different colour. These are all things that you see. 

What about people who can't see? How would they know what is a heading, a list item, a paragraph, a hyperlink, etc? The only way is if your document or web page is structured correctly and designed using the correct tags or style elements. This works differently, depending on what you are creating.

Microsoft Word

I am frequently sent documents to check that they are WCAG compliant. The email will often say something like this:

It should be fine. It's just text really. I'm fairly sure it will be fine.

So I start checking it and there is nothing that would tell a screen reader what is a title, a heading, a subheading, a list or just normal text. This is really easy to do. It is easier though, to show you. I hope the video below will help you to do this in future. It's a video I made a little while ago, as part of a series, so don't worry about the 'see you tomorrow' at the end.

If you have a slightly different version of Word, you might have to find out how to adapt this but the general principles are the same... in fact, the same for all decent word processing apps.

Web pages and blogs

Most people use some kind of app to produce web pages and blogs. For example, I use Blogger (by Google) to make this blog. The alternative is how I do my main website, using raw code: HTML5 for the content and CSS to make it look pretty. 

If you are using something like Blogger or Wordpress, you will work in a text editor that will largely offer you the structural elements to help you. You just need to stop yourself, every time you are about to make a word or phrase bold or make it bigger because it's a heading, and instead, highlight it and select heading or subheading from the text editor. It is usually a drop down arrow with the word normal showing.

If you are coding your own web pages, chances are, you already use the correct tags. There are six levels of heading, <h1> to <h6> and then paragraph, <p>, unordered lists (bullets), <ul> and ordered lists (numbers), <ol>. You can also use various <div> tags to label sections of the page. This information will be used by screen readers to tell the user what you and I can see. You can then set up a style sheet (CSS) to give each of those structural elements their size, colour, etc. 

Summary

There are things we all do without thinking. We need to stop and give extra thought in at least these situations:

• when changing the font size
• when making something bold
• when changing the colour of text or a shape
• when using tables (especially if it is for layout)
• when putting decorative items on a page
• when creating a hyperlink
• when creating white space, using the space bar or enter, especially if it is lots of times.

Stop! Think about what a screen reader would do with it. How would a visually impaired person perceive it? Is there a better way of doing it?

This is possibly the WCAG issue that needs the most undoing of bad practice. It takes a conscious effort. You will sometimes forget and gradually, as you work at it, you will get better and more consistent. But please, do it. Take a step in the right direction.