随笔分类 - HTML 5
摘要：For small viewports, we want to save bandwidth and we may be dealing with slow speeds; so it's very important that images' filesizes are not too big.
阅读全文
摘要：There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and
阅读全文
摘要：Icon buttons are very common in web applications, yet they often have accessibility problems. Learn how to make your icon buttons accessible to keyboa
阅读全文
摘要：See if you can do a better job styling this button using ARIA states. One huge benefit to styling with ARIA is that it provides visual feedback that y
阅读全文
摘要：Together 'aria-live', we can use 'aria-atomic', 'aria-relevant' and 'aria-busy' to give more information to screen reader, when should announce the ch
阅读全文
摘要："aria-live" is a method to tell the information to the screen reader once value changed. aria-live has three value: 1. off: nothing will happen 2. pol
阅读全文
摘要：You want to use aria-hidden to prevent screen reader to access some content should be hidden from users. For example, slides, you want to remove previ
阅读全文
摘要：
阅读全文
摘要：'aria-labelledby' overwrite 'aria-label' overwirte native element label. TOP-LEFT: aria-label overwrite native element label, so it is Gumnut. TOP-RIG
阅读全文
摘要：For some reason, you build a custom checkbox component, if without ARIA in mind, basiclly this site is unusable for screen reader. DEMO site. In the e
阅读全文
摘要：Most of times, we need 'alt' to the images, so it can tell the screen reader what is this image about. But sometimes, we can leave alt="", make alt to
阅读全文
摘要：For example, when we use checkbox, if we do like this: When we use screen reader, it will lose the semantics meaning, it only say: Instead, we want to
阅读全文
摘要：Sometime when some component is offscreen, but still get focus when we tab though the page. This can cause users' confusion. One easy to to find out t
阅读全文
摘要：When you developing a complex component by your own, one thing you cannot ignore is Accessibility. Checkout this link. It lists all things you need to
阅读全文
摘要：It is a good pratice to add ref="noopener" <a href="/some/domain" target="_blank" rel="noopener" /> Because when the new page is opened, in the new pa
阅读全文
摘要：The main reason you want to do I"nlining images with SVG and data URIs" is to reduce http request. If you doing "Inlining images with SVG and data URI
阅读全文
摘要：We can use 'setSelectionRange(start, end)' to set cursor postion, in which start postion = end position.
阅读全文
摘要：@HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { if(keyCode !== TAB) { $event.preventDefault(); } // get value for the key ...
阅读全文
摘要：Something important to consider when coding a web application is managing the user's focus. For keyboard and screen reader users, we must ensure their
阅读全文
摘要：You can make any element keyboard interactive with the HTML tabindex attribute. But you might need a little extra JavaScript and ARIA to support keybo
阅读全文
