10 easy-to-use website usability tips for Everyone

1. Add alternate text to your 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 toggle the link.

4. Define the required form-fill item

With the Aria-required property (The Aria properties are similar to the ARIA state, but are relatively static on the page as other properties of the HTML element. Widget properties are similar to widget states, but the value remains unchanged within the page range. You can define the required fields in the form--well, it's mostly telling the screen reader software:

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

This makes the input field of the table a required field.

5. Add a H1 to your 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

Instead of simply adding a p to the front/back of the table, the table has a dedicated caption tag (which defines the table title) available, just like a picture.

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

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.

TabIndex Property--represents the traversal order using the "tab" key

You can use the TAB key to traverse all links and form elements in a page, and when you traverse a link, press ENTER. The order of TabIndex is determined by the size of the traverse.
When traversing to a link, a dotted box surrounds the link, and the ENTER key is entered to enter the linked page.
Value:
number, range of [1~32767]

Example:

<a href="http://www.dreamdu.com/xhtml/"tabindex="1">1</a><a href="http://www.dreamdu.com/css/"tabindex="3">3</a><a href="http://www.dreamdu.com/xhtml/tag_a/"tabindex="2">2</a><!--Continuous Press"Tab", you can change the focus position. The order of traversal is 1-2-3.-->

10. Check online

Er, see here is actually an advertisement, but if can detect the website usability question, also is a good thing, webaim development of a web tool, input URL will automatically detect. It's a good test, http://wave.webaim.org/.