Lesson 10The design process: how to make room for web accessibility?
- Notion 67 - Consider the layout
- Notion 68 - How you can use design to optimise your content
- Notion 69 - Make initial mock-ups
- Notion 70 - Usability is key!
- Notion 71 - Structure HTML properly
- Notion 72 - Your use of language matters
- Notion 73 - How to work with visual content
- Notion 74 - The importance of keyboard-only navigation
- Notion 75 - Pro-tips on design that are universally useful
- Notion 76 - Types of content to avoid at all costs
- Notion 77 - Check for conformance to accessibility standards and best practices
- Notion 78 - Review of the main concepts
Notion 67
Consider the layout
Target skills
By paying attention to the structure and layout of your web page, it will be more readable. Your users will be able to find their way through the site more easily and find the information they are looking for.
Think about the mock-up!
Whether for the design or the layout, it is recommended to start your thinking process about accessibility by making a mock-up of your web page or website in order to be able to foresee what you are going to put on it, and to do it according to the accessibility principles listed throughout this module. A mock-up is a first draft, a prototype that allows you to see what your site could look like (whether it is its code, its structure, its design), to compare, to avoid mistakes and thus to move towards a solution that is as close as possible to your expectations and the various needs identified here.
About the layout
The different elements of a web page should be differenciated from other and a clear layout can help. The important elements are navigation menus, interactive elements such as links and texts sections. Forms are a specific kind of element that can be complex and need to be simple and accessible. It is also essential to make sure that all content and information is well structured with clear titles, from which the user can find his way around, locate information and navigate easily from one content to another.
How to make structure identifiable
To reach this goal, some UX rules coming from psychology and human perception can help, such as :
- The proximity law, objects near to each other are considered grouped together. For example, buttons of a navigation menu should be in the same area and not all over the page.
- The similarity law, objects with similar shapes are considered linked together. For example, articles card have all the same structure to showcase the content of an article. We would avoid to have too many variations in the articles card template.
- The size law, important elements should be bigger than less important ones. It applies to buttons for example: a big button calls for being clicked, while a small one is supposed to be less used.
To go further
- Clear Layout and Design defined: https://www.w3.org/WAI/perspective-videos/layout/
- Proximity, similarity and size laws explained: https://ezako.com/en/web-ergonomics/
- Laws of UX https://lawsofux.com/von-restorff-effect/