10 Website Usability Tips Everyone Should Know
|
Let’s not waste any more time and get straight to the point. 1. Add alternative text to your logo Copy code The code is as follows:<img src="logo.png" alt="Front-end"> Alternatively, if you use a background image to implement the logo, you can also add a title attribute to achieve it: <span title="Front-end world"></span> </code> Of course, the link + background image method is the best, but it is also better to add a title attribute: Copy code The code is as follows:<a title="Front-end world">Front-end world</a> 2. Add basic landmarks ARIA Landmark is a set of website usability rules defined by W3C. Adding descriptive landmarks, or simply called roles, to different modules of a website will help screen readers better understand your web pages, allowing visually impaired users to better use your website. Copy code The code is as follows:<nav role="navigation"> <div id="maincontent" role="main"> <form action="search.php" role="search"> Wait, for specific rules, please check W3C's recommendations. 3. Enhance focus definition In fact, many websites will try their best to remove the browser's :focus style, especially for IE browser. In fact, it makes sense that the browser has the :focus style by default, which can indicate to the user where the current mouse focus is. This is especially important for keyboard flow. So please don't remove the :focus style. Even if you think the default style is ugly or inconsistent (IE is a dotted box, Webkit is a highlighted solid box, and Safari is blue and Chrome is orange), you can define a highlight color yourself: Copy code The code is as follows:a:focus{ outline:1px solid red; background:yellow; } If your product manager or visual designer insists on removing the focus state, just take away their mouse for a day and tell them to only use Tab to switch links. 4. Define required form items The aria-required attribute can be used to define required fields in a form - well, it mainly tells screen readers: Copy code The code is as follows:<input type="text" name="username" aria-required="true"> 5. Add an h1 to the page The reason is simple. It is not only good for SEO, but also helps the overall usability and readability of the website. Also, don’t you have a code obsession? 6. Define the table header Usually many people are accustomed to using td tags for all tables. In fact, tables have more than just hd tags, there are also th, col, scope, etc. So to put it simply, replace the header with the th tag: Copy code The code is as follows:<th scope="col">Date</th> 7. Define table description Don’t just put a “p” before or after a table. Tables have dedicated caption tags, just like images. Copy code The code is as follows:<table> <caption>Class Schedule</caption> <tr> … Regarding tables, I strongly recommend rediscovering HTML tables 8. Avoid “click here” Although such link descriptions do not matter to ordinary people, they are quite bad for screen reading software, and they are actually a kind of interference to visually impaired users. So, just use the link in the right place. 9. Remove tabindex In the past, many people used tabindex to "enhance" the user experience, but this attribute would disrupt the normal reading order of the page, which is disastrous for visually impaired users and may not be friendly to ordinary users. So don't abuse the tabindex attribute. 10. Check it online Uh, I realized it’s actually an advertisement. But it’s also a good thing if it can detect website usability issues. WebAIM is a web tool that automatically detects website usability issues by inputting a URL. The above content shares with you 10 website usability tips that everyone must know through the 123WORDPRESS.COM platform. I hope you like it. |
<<: How to center your HTML button
>>: Detailed explanation of computed properties in Vue
Recommend
A practical tutorial on how to quickly insert tens of millions of records into MySQL
1. Create a database 2. Create a table 1. Create ...
Example of using Nginx to implement port forwarding TCP proxy
Table of contents Demand Background Why use Nginx...
MySQL 8.0.12 installation configuration method and password change
This article records the installation and configu...
Detailed example of Linux all-round system monitoring tool dstat
All-round system monitoring tool dstat dstat is a...
Simple steps to write custom instructions in Vue3.0
Preface Vue provides a wealth of built-in directi...
Web front-end performance optimization
Web front-end optimization best practices: conten...
How to safely shut down MySQL
When shutting down the MySQL server, various prob...
Summary of B-tree index knowledge points in MySQL optimization
Why do we need to optimize SQL? Obviously, when w...
Detailed explanation of the MySQL MVCC mechanism principle
Table of contents What is MVCC Mysql lock and tra...
Weird and interesting Docker commands you may not know
Intro Introduces and collects some simple and pra...
Vue simple registration page + send verification code function implementation example
Table of contents 1. Effect display 2. Enhanced v...
CentOS 7.9 installation and configuration process of zabbix5.0.14
Table of contents 1. Basic environment configurat...
Example code for implementing timeline and animation effects using JavaScript (front-end componentization)
Table of contents Code cleaning "Frames"...
Detailed tutorial on installing ElasticSearch 6.x in docker
First, pull the image (or just create a container...
Vue implements multi-tab component
To see the effect directly, a right-click menu ha...