9 code optimization tips to improve website usability that webmasters should pay attention to

9 code optimization tips to improve website usability that webmasters should pay attention to

1. Add alternative text to your logo

This has two advantages: the screen reader can identify the meaning of the logo image, and when the image is not loaded, it can also tell non-visually impaired users where your logo is.
Several methods:

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:

Copy code
The code is as follows:
<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>
…


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.

<<:  Examples of implementing progress bars and order progress bars using CSS

>>:  HTML Basics Must-Read - Comprehensive Understanding of CSS Style Sheets

Recommend

Detailed process of compiling and installing Storm on Kylin V10 server

1 Introduction Apache Storm is a free, open sourc...

How InnoDB cleverly implements transaction isolation levels

Preface In the previous article Detailed Explanat...

Solve the problem of Navicat for Mysql connection error 1251 (connection failed)

Because what I wrote before was not detailed enou...

Sharing tips on using Frameset to center the widescreen

Copy code The code is as follows: <frameset co...

The most common mistakes in HTML tag writing

We better start paying attention, because HTML Po...

How to use vs2019 for Linux remote development

Usually, there are two options when we develop Li...

Causes and solutions for slow MySQL queries

There are many reasons for slow query speed, the ...

Website User Experience Design (UE)

I just saw a post titled "Flow Theory and Des...

MySQL select, insert, update batch operation statement code examples

In projects, batch operation statements are often...

Introducing the code checking tool stylelint to share practical experience

Table of contents Preface text 1. Install styleli...

Detailed explanation of the points that need to be paid attention to in HTML standards that comply with W3C standards

XML/HTML CodeCopy content to clipboard <!DOCTY...

Comprehensive understanding of html.css overflow

Comprehensive understanding of html.css overflow ...

Complete steps to use element in vue3.0

Preface: Use the element framework in vue3.0, bec...

MySQL character set garbled characters and solutions

Preface A character set is a set of symbols and e...

How to dynamically add modules to Nginx

Written in front Often, after we install Nginx ba...