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 71
Structure HTML properly
Target skills
HTML5?
HTML is the language used for structuring and presenting content on a webpage. It has some native features to make websites more accessible, by being more semantic. Most browsers now support HTML5, which is the most modern version of HTML, released in 2008.
If you are not familiar with the HTML language, you can use these illustrations to help you with your reading:
It uses tags that provides meaning to the structure of the page, by indicating what kind of element is a block. Using semantic HTML doesn’t mean we don’t have to follow accessibility guidelines, such as aria tags, but it’s another tool for building accessible websites. Landmarks allow a screen reader to skip some sections and access a specific region on the webpage.
Structure? Landmark!
There exist several kind of block elements in HTML5. It helps structuring the layout of the page. For example, <header> is equivalent to a <div> element, but with specific indications: generally it’s a banner, and often contains another landmark, a <nav> for navigation.
The <main> landmark is unique in a page, and is where the content lies. It’s convenient to find when using a screen reader.
There is also the <footer> landmark, at the bottom of the page.
We can indicate an element is independent from others kind of the same element by using an <article> tag, so it’s easier to spot content in a <main> landmark.
Designing with landmarks in mind
When you design a web page, you can separate the layout in different areas: menus, sidebar, main content etc. You can use this visual separations to identify your HTML5 landmarks. You will be able to convey your web page structure to screen readers and make your web page more accessible.
Landmarks are not supposed to constrain your design, but instead giving indications on what kind of information can be found in a specific area of your page.
To go further
- Thoughts about HTML5 landmarks and ARIA usage: http://www.clarissapeterson.com/2012/11/html5-accessibility/
- Overview of HTML5 landmarks: https://www.w3schools.com/accessibility/accessibility_landmarks.php