先日、新入社員というか、ジュニア開発者に対して、チームレベルのアクセシビリティ研修が行われました。結構効果的でした。一番聞かれたことはどうやって Form を実装するか、Screen Reader はどう使うかと。
その中に、ちょっと理解の間違いが気づきました。一つはアクセシビリティは Screen Reader のことを全てだと思われているそうです。アクセシビリティはそれだけではありません。キーボードのみユーザーや、目に障害ある方や、いろんな対象があります。
実は良い HTML を書けば、自然に Screen Reader が動きます。aria の属性は通常の HTML tag や、属性が動的ではない場合、転用された場合を使うのので、メインではありません。例えば、HTML に fieldset という tag があります。それはラジオボタンなどを一つの括りとして表示する場合使います。それを使うと、 Screen Reader は自然にそれを認識して、Role - Function - current situation の順に読みます。もし div タグを使うと、通常のコンテンツとして認識しますので、同じようには読みません。ラジオボタンの選択を変更する場合、何が読まれたかをよく聞いて、すぐ区別がわかります。
次に、全てのコンテンツが tab キーで読ませると。それは間違っています。tab キーは interactive element のみ stop します。もし、むやみにすべてのコンテンツを止まるようにしたら、それは通常と違うので、逆にわかりづらくなります。例えば、a tag など、href があれば、tab stop は起きます。順番として、top - bottom, left - right に stop すべきです。
ユーザーは通常 Shortcut key を使って、例えば、Insert - L とか、画面にある全部の a link をリストして、画面に表示します。これは [learn more] という link が良くないことをわかるはずです。コンテキストがわからないから、learn more というのは何の more になるかわかりません。だから、ボタンなら button を使って、link なら a tag を使うべきです。
最後に、色の Contrast Ratio も注意すべきですし、文字のサイズも対象です。それに、High Contrast モードもあるので、それを使うときのサイトも一度チェックした方がいいでしょう。
まぁ、Screen Reader だけ対象にすべきではないです。
ちなみに、Screen Reader を使うとき、IE を使うべきです。驚くかもしれませんが、今 JAWS とか Chrome でのサポートが IE ほど良くありません。全て一つのブラウザーでテストすべきではないです。
それでは、また。
2017年6月25日日曜日
2017年6月10日土曜日
Angular 4 vs React.js vs Polymer and some thinking of component
# I posted the same article on Medium, and will use Medium from now on.
https://medium.com/@newying61/angular-4-vs-react-js-vs-polymer-and-some-thinking-of-component-596085325d5
This week, I got some time to have a look at Angular 4 and Polymer, the two frameworks for developing component based SPA. As I have used React.js for about 2 years, just wanted to write down what I feel about these two comparing with React.
First about Angular 4. It is said to be component base, but when I saw other projects which are using it, I just feel, it's kind of like Angular 1. Component becomes controller, and all the logic are still in services. Also, it's quite confusing about directives, when and where to use it...
I should say, Angular 4 's learning curve is too high, and if you use it, it's very easy to get effected by the former experience with Angular 1.
For Polymer, it's quite well organised and because of it's shadow dom is a standard, it can make HTML so easy to understand. Although, it has two way bindings just like Angular, it is still a UI library, not like Angular as a framework.
So, Polymer can easily re-organised with Redux by adding a store component and pass it anywhere by using a singleton pattern.
Compared to React.js, I think Polymer may be a good competitor. It also batch the changes to DOM and can make some operations easier by two way binding.
Then I started to think about what component means for SPA. React.js and Polymer let you define a component and by wrapping it with other components or using higher order components you can organise an app with good structure. Angular 4 can do the same thing, but compared the effort, I would say, React.js and Polymer are much better.
A component should be kind of dumb, which means it should only care about itself and only work with the attributes passed in. It can has it's own state (state in React.js component and property in Polymer component) to control how it looks like.
Also, it doesn't care about what it's children looks like. By wrapping anything, we can just create a new component with new functions.
This can dramatically increase the usability of the components. We can use it anywhere and it should just work. :)
Also by doing this, it can easily integrate with other libs like Redux to control model data.
A warning is, if a state is only related to a specific component, then it should not be put in store, don's abuse Redux to store everything.
A good example is Polymer's iron-page, by defining the selected attribute and the target attribute, it just select the right child component and add a new attribute to it.
The same as react-router, just define the structure, and it just work.
By the way, compared to these two, Angular 4's router is kind of ugly. It needs a json object... which is not direct at all...
https://medium.com/@newying61/angular-4-vs-react-js-vs-polymer-and-some-thinking-of-component-596085325d5
This week, I got some time to have a look at Angular 4 and Polymer, the two frameworks for developing component based SPA. As I have used React.js for about 2 years, just wanted to write down what I feel about these two comparing with React.
First about Angular 4. It is said to be component base, but when I saw other projects which are using it, I just feel, it's kind of like Angular 1. Component becomes controller, and all the logic are still in services. Also, it's quite confusing about directives, when and where to use it...
I should say, Angular 4 's learning curve is too high, and if you use it, it's very easy to get effected by the former experience with Angular 1.
For Polymer, it's quite well organised and because of it's shadow dom is a standard, it can make HTML so easy to understand. Although, it has two way bindings just like Angular, it is still a UI library, not like Angular as a framework.
So, Polymer can easily re-organised with Redux by adding a store component and pass it anywhere by using a singleton pattern.
Compared to React.js, I think Polymer may be a good competitor. It also batch the changes to DOM and can make some operations easier by two way binding.
Then I started to think about what component means for SPA. React.js and Polymer let you define a component and by wrapping it with other components or using higher order components you can organise an app with good structure. Angular 4 can do the same thing, but compared the effort, I would say, React.js and Polymer are much better.
A component should be kind of dumb, which means it should only care about itself and only work with the attributes passed in. It can has it's own state (state in React.js component and property in Polymer component) to control how it looks like.
Also, it doesn't care about what it's children looks like. By wrapping anything, we can just create a new component with new functions.
This can dramatically increase the usability of the components. We can use it anywhere and it should just work. :)
Also by doing this, it can easily integrate with other libs like Redux to control model data.
A warning is, if a state is only related to a specific component, then it should not be put in store, don's abuse Redux to store everything.
A good example is Polymer's iron-page, by defining the selected attribute and the target attribute, it just select the right child component and add a new attribute to it.
The same as react-router, just define the structure, and it just work.
By the way, compared to these two, Angular 4's router is kind of ugly. It needs a json object... which is not direct at all...
登録:
投稿 (Atom)