Checking This Website with Inclusive Design Principles
Published on .
Provide comparable experience
The interfaces on this website should be accessible to different users without loss of quality of content.
An example from the Inclusive Design Principles that are related to this website is content for alternatives.
I add alternative text to important images.
The users can also view the blog posts in reader mode.
This website should be usable regardless of the users' circumstances.
Two examples are related to this website, color contrast and context sensitive help.
The color contrast of this website is 11.71:1. The contrast ratio has satisfied the 1.4.3 Contrast (Minimum) — Level AA and 1.4.6 Contrast (Enhanced) — Level AAA. Both are the criteria of Web Content Accessibility Guidelines (WCAG) version 2.1.
For context sensitive help, users can skip to the main content by clicking the "Skip to main content" link at the top of every webpage. This way, the users do not have to navigate through links inside the header over and over again to access the main content.
Another situation that I consider is users with slow connections—including myself.
The homepage of this website has a page weight of 5.79 Kilobytes (KB). This website does not use custom font families. Also, about 90% of the content on this website is text. This helps to keep the page weight low.
- Understanding Success Criterion 1.4.3: Contrast (Minimum) | WAI | W3C
- Understanding Success Criterion 1.4.6: Contrast (Enhanced) | WAI | W3C
- Color contrast test result — WebAIM: Contrast Checker
This website should use familiar conventions and consistent design.
The layout of this website is consistent. It always contains a banner followed by the main content and a footer.
All links are underlined. I follow the default conventions for links.
This website has two colors. Both are applied consistently across all elements and pages.
People should be able to interact with this website in their preferred way.
One of the examples is to allow zoom.
This website allows users to zoom in and out on mobile browsers without having to enable force zoom. It also allows them to change the orientation and font size.
The users can also control the theme of this website. If the browser's theme is set to dark, this website will change to a dark theme.
People should have more than one choice to complete a task.
The users can visit a blog post from the archive page or the home page. The home page shows only the 10 most recent blog posts, while the archive page shows all blog posts.
People should be provided with information to complete a task.
The home page of this website provides the purpose of this website which is to read blog posts.
This website should provide a feature to improve the experience for different users.
I provide a custom focus indicator for all links on this website. This helps keyboard users to know the elements that they are about to interact with.
Those are my implementations of the Inclusive Design Principles based on my limited knowledge.
You can send me an email to discuss or improve this blog post.
Inclusive Design Principles