Layout and
hierarchy.
Hierarchy of information is very important for accessibility for fonts, but it mainly focuses on the layout.
Having a logical and consistent layout is very important for accessibility, and is also relevant for design itself.
This is also about designing for all screens and to make sure design is user-friendly.
Learning Disabilities
Use consistent and clear layout throughout the website.
Use breadcrumbs to go back and navigate easily.
Have an easy access to Help, FAQ and/or Search.
Have a clear and consistent structure.
Visual impairments
Have consistent content and big sizes.
Be thorough when designing for tablet - this is particularly valid for users over 60+ who are the main users.
Make sure the menu is clear and understandable for all users.
AAA Accessible
The website is predictable, adaptable and information is consistent (such as buttons or links).
Even on landscape mode, the website is still navigable and understandable.
The website is navigable with keyboard only.
Compliant
The website is navigable, with clear links, instructions and page titles.
Content is adaptable.
Not keyboard accessible.
Click anywhere to reveal
WARNING - This tab can cause headaches, dizziness and unsettling vision.
Not accessible
Layout is non-consistent and lacks hierarchy.
Design is not responsive on all screens, and can’t be used on certain devices.
Menu is confusing and contains dead-ends.
Learning Disabilities
Use consistent and clear layout throughout the website.
Use breadcrumbs to go back and navigate easily.
Have an easy access to Help, FAQ and/or Search.
Have a clear and consistent structure.
Low vision deficiency
Have consistent content and big sizes.
Be thorough when designing for tablet - this is particularly valid for users over 60+ who are the main users.
Make sure the menu is clear and understandable for all users.
AAA Accessible
The website is predictable, adaptable and information is consistent (such as buttons or links).
Even on landscape mode, the website is still navigable and understandable.
The website is navigable with keyboard only.
Compliant
The website is navigable, with clear links, instructions and page titles.
Content is adaptable.
Not keyboard accessible.
Click anywhere to reveal
WARNING - This tab can cause headaches, dizziness and unsettling vision.
Not accessible
Layout is non-consistent and lacks hierarchy.
Design is not responsive on all screens, and can’t be used on certain devices.
Menu is confusing and contains dead-ends.
Quick Tips
Use clear and consistent layout.
Don’t forget the nav bar and footer
Design for all screens
Desktop design
All designers will design for desktop screens - ensure you start by designing for a 1440 screen. Not only will it make your life easier, but this will also make it easier for your website to be responsive and therefore accessible.
To also make sure that you notice mistakes and disrepencies in the navigation, make sure to build your website on a software designed for web design (Figma, Adobe XD or similar).
In the QA phase, make sure you check that the website is accessible on different browsers and odd desktop screen sizes!
Mobile
Most web designers consider mobile screen sizes when designing for web (at least for key pages!). A lot of users today use phones to access websites, and making sure your website is optimised for mobile is key to ensure that it is accessible. Designing for landscape-mode on mobile might seem excessive, but it’s important to check that it works this way too (check this with the developer or when doing QA).
Make sure the navigation and identifications are thought through for touch-screens as well.
Don’t forget to check how the website looks on multiple phones and phones sizes (iPhone, Android or similar).
Tablet
Designing for tablet is not strictly necessary, but it ensures that the website works on all screens. Depending on your client and how their audience access the website, it might even be very useful. For example, more and more schools and special needs students study on tablets.
Check that tricky section of your websites as well as navigation and layout work at tablet (even if it’s just during QA).
Responsive Web Design
Desktop design
All designers will design for desktop screens - ensure you start by designing for a 1440 screen. Not only will it make your life easier, but this will also make it easier for your website to be responsive and therefore accessible.
To also make sure that you notice mistakes and disrepencies in the navigation, make sure to build your website on a software designed for web design (Figma, Adobe XD or similar).
In the QA phase, make sure you check that the website is accessible on different browsers and odd desktop screen sizes!
Mobile
Most web designers will think of designing at mobile (even if it’s just the homepage!). A lot of users today use the phones to access websites, and making sure your website in optimised for mobile is key to ensure that it is accessible. Designing for landscape mode might be a bit too thorough, but it’s useful to check that it works (check this with the developer or when doing QA).
Make your the navigation and identifications are thought through for touch-screenns as well.
Don’t forget to check how the website looks on multiple phones and phones sizes (iPhone, Android or similar).
Tablet
Designing for tablet is not necessary, but it ensures that the website works on all screens. Depending on your client and how their audience access the website, it might even be very useful. For example, more and more schools and special needs students study on tablets.
Check that tricky section of your websites as well as navigation and layout work at tablet (even if it’s just during QA).
A Accessibility
- Create adaptable Content
- Information, structure and relationship can be programmatically determined
- Meaningful sequences an be programmatically determined
- Instruction are not solely related to the sensory characteristics of components
- Navigable (users are helped in navigating content)
- Page’s title describes the topic or purpose
- Available mechanism to bypass blocks of content
- Focus order that preserves operability
- Link purpose (in context) can be determined
- Easier input modalities
- Pointer gesture and cancellation
- Label in the name
- Functionality can be operated by device motion
- Page appears in predictable ways in focus and input
AA Accessibility
- Orientation - a page needs to still be legible in portrait or landscape mode.
- Content can be presented without loss of information or functionality, for vertical and horizontal scrolling
- Navigable (users are helped in navigating content)
- Multiple ways to locate a page
- Headings and labels describe topic and purpose
- Focus is visible when being keyboard operated
- Predictable
- Navigation needs to be consistent, wether in design or mechanism
- Identification needs to be consistent
AAA Accessibility
- Keyboard accessible with no exceptions
- Navigable (users are helped in navigating content)
- Information about location on a page
- Link purpose (link only) can be determined
- Section headings are used to organise content
- Easier input modalities
- Concurrent input mechanism - web content does not restrict use of input modalities
A Accessibility
- Create adaptable Content
- Information, structure and relationship can be programmatically determined
- Meaningful sequences an be programmatically determined
- Instruction are not solely related to the sensory characteristics of components
- Navigable (users are helped in navigating content)
- Pages are titled in a way that describes their topic and purpose
- Available mechanism to bypass blocks of content
- Focus order that preserves operability
- Link purpose can be determined by text alone or in context
- Page appears in predictable ways in focus and input
AA Accessibility
- Orientation - a page needs to still be legible in portrait or landscape mode.
- Content can be presented without loss of information or functionality, for vertical and horizontal scrolling
- Navigable (users are helped in navigating content)
- Multiple ways to locate a page
- Headings and labels describe topic and purpose
- Focus is visible when being keyboard operated
- Predictable
- Navigation needs to be consistent, wether in design or mechanism
- Identification needs to be consistent
AAA Accessibility
- Keyboard accessible with no exceptions
- Navigable (users are helped in navigating content)
- Information about location on a page
- Link purpose (link only) can be determined
- Section headings are used to organise content
- Easier input modalities
- Concurrent input mechanism - web content does not restrict use of input modalities
Designing for all screens might seem tiring, but this will easily make you a better designer, that focuses on key detail. Having a consistent layout is something that is found in print design as well, so don't let it limit creativity.
Have a look at our other guides
Have a look at our other guides