Clickable icon button Accessibility ARIA accessibility

Simplest: <input type= "image" Src= "Email.png" width= "+" height= "+" alt= "email" >  using CSS Sprites:<style>     EMAIL-BTN {        width:14px;        height:14px;    & nbsp   Background:url (activities.png) 0-85px no-repeat;   }</style><input type= "image" src= " Transparent.gif "class=" email-btn "alt=" email ">input in the pattern is transparent, really displayed by the CSS in the Activities.png control in the" case, the major Screen readers (JAWS, NVDA, VoiceOver) announce "e-mail button" in all major browsers, reading The alt text and I Dentifying the image as a button  using the icon font case: <a href= "#" >    <span class= "Icon-home" ></ span>    <span class= "Visuallyhidden" >home</span></a>.visuallyhidden {    border:0;    Clip:rect (0 0 0 0);    height:1px;    margin: -1px;    overflow:h idden;    padding:0;    position:absolute;    width:1px;} how people with disabilities use the Web:overview http://www.w3.org/WAI/intro/people-use-web/Improve accessibility: The first step, check the <title></title>, do not allow empty, do not allow too long, concise and clear the second step, Provide text alternatives, images, iframe, object, check whether these elements fill in the appropriate ALT attribute or the value of the title property in the third step, check the form. Whether there is a label label, whether the label's for property is bound to each other by filling in the ID of the corresponding form element, such as a button's style is a magnifying glass, then the content of the alternative text must not be "Magnifier", but "search". Fourth step, use heading to do information architecture. Assistive technology, especially the reading screen software, will generally provide a shortcut key H, press the H key, the focus can be switched between heading, thus improving the efficiency of browsing. Fifth step, whether there is blur (). Assistive technology generally relies on focus to get content, so this event essentially makes the auxiliary content inaccessible to the elements that have applied this method. This.onfocus=this.blur () This is the stupidest line of code. Sixth step, press CTRL + or command+ to see if the page can be scaled. Older people and bosses who use 11-inch high-end notebooks are very fond of using the ability to magnify pages. Seventh step, add the landmark role. This is the least expensive method, and the way to add this is to add the role attribute to the element of the function and give the landmark value of the response. A total of 8 values, generally you can only use 6: Banner (Banner), complementary (secondary content area), ContentInfo (website information and copyright), form (form), main (main content area), navigation (navigation area), Search (lookup area). If a form is simply providing a search function, then the role is set to search, not to form. Eighth step, set the shortcut key. 1 is the link that points to the homepage. ESC is stop playing the audio and video, is stopped, not paused. These two keys are by far the most common shortcut to reach consensus. The Nineth step is to set the focus on the trigger interface switch. If you trigger a component window with a button, when you close the component window, move the focus back to the button that triggered the window. Http://isux.tencent.com/ten-steps-enhance-web-accessibility.html

Clickable icon button Accessibility ARIA accessibility