10 easy-to-use websites that everyone can use,

10 easy-to-use websites that everyone can use,
1. Add alternative text for logo

There are two advantages: screen readers can recognize the meanings of logo images. When images are not loaded, they can also tell non-visually impaired users that their logo is yours.

Several Methods:

Alternatively, if you use a background image to implement the logo, you can also add the title attribute to implement it:

<Span title = "front-end"> </span> </code>

Of course, the link + background image method is the best, but it is best to add the title attribute:

<A title = "frontend"> frontend </a>

2. Add basic Landmarks

ARIA Landmark is a W3C-defined set of website availability rules. Adding descriptive Landmark for different website modules-or calling role directly, is helpful for the screen reading software to better understand your webpage, this allows users with visual impairment to better use your website.

<nav role="navigation"><div id="maincontent" role="main"><form action="search.php" role="search">

And so on. For specific rules, see W3C suggestions.

 

3. Enhance the definition of focus

In fact, many websites will use every means to remove the "focus" style of the browser, especially for IE browsers. In fact, it makes sense to bring the "focus" style to the browser by default, it indicates where the user's current mouse focus is. This is especially important for keyboard streams.

So please do not remove: focus style, or even, you think the default style is poor or not uniform (IE is a dotted box, Webkit is a highlighted solid box, and Safari is blue, chrome is orange) You can also define a highlighted color:

a:focus{    outline:1px solid red;    background:yellow;}

If your product manager or visual designer insists on removing the focus state, take the TA's mouse away for one day and tell him that he can only switch the link with Tab ......

 

4. Define a required table item

You can use the aria-required attribute to define the required items in the form-Well, the main thing is to tell the read screen software:

<input type="text" name="username" aria-required="true">

5. Add an h1

The reason is very simple. It is not only beneficial to SEO, but also helpful to the overall availability and readability of the website. Besides, do you have no code cleanup?

 

6. Define the table Header

Many people usually use td tags for tables. In fact, there are not only hd tags, but also th, col, scope, and so on.

To put it simply, replace the header with the th Tag:

<th scope="col">Date</th>

7. Define the table description

Do not simply add p to the front or back of the table. The table has a dedicated caption label available, just like an image.

<table>    <caption>Class Schedule</caption><tr>    ……

For the table section, we strongly recommend that you rediscover HTML tables.

 

8. Avoid "Click here"

Although such a link description does not matter to ordinary people, it is rather bad for the screen reading software. It is actually a disturbance to users with visual impairment.

Therefore, directly use the link to the correct location.

 

9. Remove tabindex

In the past, many people used tabindex to "Enhance" the user experience, but this attribute will disrupt the normal reading order of the page, which is disastrous for users with visual impairment and may not be friendly to common users.

Therefore, do not abuse the tabindex attribute.