Article introduction of Wulin.com (www.vevb.com): 10 ease of use tips for websites that everyone can use.
1. Add alternative text to your logo
This has two benefits: the screen reader can recognize 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:
<img src=logo.png alt=web teaching website>
Or, if you use the background image to implement the logo, you can also add the title attribute to implement it:
<span title=Web page teaching website></span>
Of course, the link + background image is the best way, but it is best to add the title attribute as well:
<a title=Web Teaching Network>Web Teaching Network</a>
2. Add basic Landmarks
ARIA Landmark is a set of website usability rules defined by W3C. Adding descriptive Landmark to different modules of the website - or directly called role, is conducive to screen reading software to better understand your web pages, so that visually impaired users can better use your website.
<nav role=navigation>
<div id=maincontent role=main>
<form action=search.php role=search>
3. Enhance the focus definition
In fact, many websites will try every means to remove the browser's focus style, especially for IE browser. In fact, it makes sense to have the browser with the default focus. It can indicate where the user's current mouse focus is. This is especially important for keyboard streaming.
So please do not remove the:focus style. Even if you think the default style is not good-looking or unconsistent (IE is a dotted box, Webkit is a highlighted solid box, and Safari is blue, Chrome is orange) you can also define a highlight color yourself:
a:focus{
outline:1px solid red;
background:yellow;
}
If your product manager or visual designer insists on removing the focus state, just take away your mouse for a day and tell him that you can only use Tab to switch links. . .
4. Define required form items
Use the aria-required attribute to define the required items in the form - Well, it is mainly to tell the screen reading software:
<input type=text name=username aria-required=true>
5. Add an h1 to your page
The reason is simple, not only for SEO, but also for the overall usability and readability of the website. Also, do you have no code obsession?
6. Define the table header
Usually many people are used to using TD tags for all forms. In fact, the tables have not only hd tags, but also th, col, scope, etc.
So simply put, change the header to the th tag:
<th scope=col>Date</th>
7. Define the table description
Don't simply add a p in front of/after the table. The table has a dedicated caption tag, just like a picture.
<table>
<caption>Class Schedule</caption>
<tr>
...
8. Avoid clicking here
Although such a link description doesn't matter to ordinary people, it is quite bad for screen reading software. It is actually an interference to visually impaired users.
So, just use the link in the right place.
9. Remove tabindex
Once upon a time, many people used tabindex to enhance the user experience, but this attribute would disrupt the normal reading order of the page, which is disastrous to visually impaired users, and may not be friendly to ordinary users.
So don't abuse the tabindex attribute.
10. Check it online
Well, when I saw this, I found that it was actually an advertisement, but if the website usability problem can be detected, it is also a good thing. A web tool developed by WebAIM will automatically detect it by entering the URL. Tested it was pretty good.