03 2018 档案
摘要:The Ionic framework provides several built-in CSS Utilities or directives that you can leverage when styling your application. Instead of writing your
阅读全文
摘要: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
阅读全文
摘要:High availability apps require that no distinction be made between local and remote services. Attached resources should be accessed by environment var
阅读全文
摘要:Storing configuration in files instead of the environment has many downsides, including mistakenly checking in the wrong configuration in the wrong en
阅读全文
摘要: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
阅读全文
摘要:In this lesson we'll walk through setting up an updater function that can receive an action argument. We'll also dive into how to separate your state
阅读全文
摘要: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
阅读全文
摘要:In this lesson I refactor a React component that utilizes the graphql higher-order component to the new Query render prop component baked into react-a
阅读全文
摘要: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
阅读全文
摘要:http://udacity.github.io/responsive-images/examples/3-08/pictureFullMonty/
阅读全文
摘要:What if the image won't be displayed at the full viewport width? Then you need something more than srcset, which assumes the image will be full viewpo
阅读全文
摘要:1. Pure CSS 2. Responsive 3. No need to recalculate on resize or font’s load event 4. Cross browser
阅读全文
摘要:In this lesson we'll explore using setState to synchronously update in componentDidMount. This allows for us to use getBoundingClientRect or other syn
阅读全文