10 easy-to-use website usability tips for Everyone

1. Add alternate text to the logo

There are two benefits: screen readers can identify the meaning of the logo image, the picture is not loaded, you can also tell the non-visually impaired users there is your logo.

Several methods:

Or, if you use a background map to implement your logo, you can also add the title attribute to achieve:

<span title= "Front End Interface" ></span></code>

Of course, the way to link + background map is the best, but it is also best to add the title attribute:

<a title= "front end" > Front End Interface </a>

2. Add a basic landmarks

ARIA Landmark is a set of Web site availability rules defined by the Web site, adding descriptive landmark--or direct role to the different modules of the website, which facilitates the reading screen software to better understand your Web page, thus allowing visually impaired users to better use your site.

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

And so on, specific rules, please see the recommendations of the Consortium.

3. Enhanced Focus Definition

In fact, a lot of Web sites will use all means to remove the browser : Focus style, especially for IE browser, in fact, the browser default: The focus style is reasonable, it can indicate the user's current mouse focus position is where. This is especially important for keyboard flow.

So please do not remove: Focus style, or even, you think the default style is not good or not uniform (ie is a dashed box, WebKit is a highlighted solid wireframe, and Safari is blue, chrome is orange) can also be defined by themselves a high light:

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 and tell TA to just switch the link with the tab.

4. Define the required form-fill item

You can use the Aria-required property to define the required fields in the form--well, mostly to tell the screen reader software:

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

5. Add a H1 to the page

The reason is very simple, not only for the benefit of SEO, the overall usability and readability of the site is very helpful. Besides, don't you have code cleanliness?

6. Define the table header

Usually many people used to use the form all TD label, in fact, the table is not only the HD tag, as well as th, col, scope and so on.

So in a nutshell, change the table head to th tag:

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

7. Define the table description

Don't simply add a p to the front/back of the table, the table has a dedicated caption tag available, just like a picture.

<table>    <caption>class schedule</caption><tr>    ...

For the table section, it is highly recommended to re-discover the HTML table

8. Avoid "click here"

Although this kind of link description does not matter to the ordinary people, but to the reading screen software, is quite bad, it is actually a kind of interference of the visually impaired user.

So, just use the link to the right place.

9. Remove TabIndex

Once, many people used tabindex to "enhance" the user experience, but this property will disrupt the normal reading order of the page, visually impaired users are disastrous, for ordinary users may not be friendly.

So don't abuse the TabIndex attribute.

10 easy-to-use website usability tips for Everyone