Avoiding directional language
You might have seen wording on websites like “click the button on the right” or “look for x in the menu on the left”. Giving directions can be confusing for audiences who don’t see the page layout the same way you do – or who may not be able to see the page at all.
For example, content will be arranged differently on mobile devices, so a visitor might not be able to see what you’re talking about on their screen – and “right” and “left” become irrelevant because content is now above or below. Someone using a screen reader won’t easily be able to find the next step based on words alone.
Instead of using directional language, make sure the elements of your web page are easy to see and follow a logical order. For example, create a call-to-action button to link people to a form rather than trying to escribe where it is in the menu.
Tables versus columns
Not sure whether to use a table or not? Here’s a simple ;guideline to follow: use tables for data, use columns for layout. Screen readers will read out table cells row by row, column by column, so it’s important to show and properly format tables to show relationships.
In contrast, using columns for layout offers you more control when it comes to design, and the content will automatically adjust for different screen sizes.
Tips for tables:
- Use headers for your columns and rows (as needed).
- Avoid empty cells. You can use “N/A” for instance.
- Use the table summary and table caption fields to provide a quick description of what the table contains.
- Seek some expert help for complex tables involving a lot of data and merged cells. It’s important to get the code right for screen readers.
Using columns
In WCMS 3, you can add blocks to your layout that include up to four columns and columns of different proportions – for instance, the first column spans 2/3 of the page and the second column spans the remaining 1/3. Layout builder makes it easy to add text, video, and images and to move your blocks around to try different arrangements.
Let’s say you wanted to create a block of six story teasers. You can create two rows of three columns.
The important thing to keep in mind with columns is the reading order, especially on mobile devices. For instance, on a phone, the content in the right-hand content will appear below the content in the left-hand column to create a single stream of content for users to scan through. It’s important to make sure headings, lists and images are arranged accordingly to the reading order still makes sense on different devices.
When in doubt, test it out on different devices. Send a link to yourself and your team and try it out on a computer, tablet, and phone – Apple, Microsoft and Android if possible.