アクセシビリティを加速するWAI-ARIA

&#x3082;&#x3068;&#x3082;&#x3068;HTML&#x306F;Web&#x30A2;&#x30D7;&#x30EA;&#x3092;&#x5FF5;&#x982D;&#x306B;&#x7F6E;&#x3044;&#x3066;&#x4F5C;&#x3089;&#x308C;&#x305F;&#x3082;&#x306E;&#x3067;&#x306F;&#x306A;&#x3044;

&#x5185;&#x5BB9;&#x304C;&#x53E4;&#x304F;&#x306A;&#x3063;&#x3066;&#x3044;&#x308B;&#x70B9;&#x306B;&#x306F;&#x6CE8;&#x610F;&#x3092;

tree : &#x30C4;&#x30EA;&#x30FC;&#x30A6;&#x30A3;&#x30B8;&#x30A7;&#x30C3;&#x30C8; treeitem : &#x30C4;&#x30EA;&#x30FC;&#x30A6;&#x30A3;&#x30B8;&#x30A7;&#x30C3;&#x30C8;&#x306B;&#x304A;&#x3051;&#x308B;&#x500B;&#x3005;&#x306E;&#x9805;&#x76EE; group : &#x30DA;&#x30FC;&#x30B8;&#x306E;&#x8981;&#x7D04;/&#x76EE;&#x6B21;&#x306B;&#x542B;&#x307E;&#x308C;&#x306A;&#x3044;&#x3001;UI&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x306E;&#x96C6;&#x5408;

aria-expanded : &#x958B;&#x3044;&#x3066;&#x3044;&#x308B;&#x304B;&#x9589;&#x3058;&#x3066;&#x3044;&#x308B;&#x304B;&#xFF08;true&#x307E;&#x305F;&#x306F;false&#x304C;&#x5165;&#x308B;&#xFF09;

aria-controls : &#x5F53;&#x8A72;&#x8981;&#x7D20;&#x304C;&#x3069;&#x306E;&#x8981;&#x7D20;&#x306E;&#x5185;&#x5BB9;&#x3084;&#x8868;&#x793A;&#x3092;&#x5236;&#x5FA1;&#x3059;&#x308B;&#x304B;

IE5&#x3067;&#x6700;&#x521D;&#x306B;&#x5B9F;&#x88C5;&#x3001; &#x305D;&#x306E;&#x5F8C;&#x4ED6;&#x306E;&#x30D6;&#x30E9;&#x30A6;&#x30B6;&#x3082;&#x8FFD;&#x968F;

&#x652F;&#x63F4;&#x6280;&#x8853;&#x3068;&#x3069;&#x3046;&#x5171;&#x540C;&#x3059;&#x308B;&#x304B;&#xFF1F; &#x3055;&#x307E;&#x3056;&#x307E;&#x306A;UA&#x3068;AT&#x306E;&#x7D44;&#x307F;&#x5408;&#x308F;&#x305B;&#x3067;&#x7D39;&#x4ECB;

alert&#xFF1A;&#x91CD;&#x8981;&#x306A;&#x30E1;&#x30C3;&#x30BB;&#x30FC;&#x30B8; aria-invalid : &#x5165;&#x529B;&#x5024;&#x304C;&#x4E0D;&#x6B63;&#x304B;&#x5426;&#x304B;&#xFF08;&#x30B9;&#x30C6;&#x30FC;&#x30C8;&#xFF09; &#x5024;&#x30C1;&#x30A7;&#x30C3;&#x30AF;&#x306E;&#x7D50;&#x679C;&#x304C;&#x4E0D;&#x6B63;&#x3067;&#x3042;&#x308C;&#x3070;&#x4E21;&#x5C5E;&#x6027;&#x3092;&#x4ED8;&#x4E0E;

&#x30E9;&#x30F3;&#x30C9;&#x30DE;&#x30FC;&#x30AF;&#xFF1A;&#x76EE;&#x5370;&#x3001;role&#x5C5E;&#x6027;&#x5024;&#x306E;&#x4E00;&#x7A2E; search : &#x691C;&#x7D22;&#x6A5F;&#x80FD;&#x3092;&#x69CB;&#x6210;&#x3059;&#x308B;&#x30A2;&#x30A4;&#x30C6;&#x30E0;/&#x30AA;&#x30D6;&#x30B8;&#x30A7;&#x30AF;&#x30C8;&#x7FA4;&#x3092;&#x542B;&#x3080;&#x30E9;&#x30F3;&#x30C9;&#x30DE;&#x30FC;&#x30AF;&#x30EA;&#x30FC;&#x30B8;&#x30E7;&#x30F3; main : &#x6587;&#x66F8;&#x306E;&#x4E3B;&#x8981;&#x30B3;&#x30F3;&#x30C6;&#x30F3;&#x30C4; navigation : &#x30CA;&#x30D3;&#x30B2;&#x30FC;&#x30B7;&#x30E7;&#x30F3;&#x8981;&#x7D20; contentinfo : &#x89AA;&#x6587;&#x66F8;&#x306B;&#x3064;&#x3044;&#x3066;&#x306E;&#x60C5;&#x5831;&#x3092;&#x542B;&#x3080;&#x30EA;&#x30FC;&#x30B8;&#x30E7;&#x30F3;

&#x30E9;&#x30F3;&#x30C9;&#x30DE;&#x30FC;&#x30AF;&#xFF1A;&#x76EE;&#x5370; banner : &#x30DA;&#x30FC;&#x30B8;&#x56FA;&#x6709;&#x3068;&#x3044;&#x3046;&#x3088;&#x308A;&#x30B5;&#x30A4;&#x30C8;&#x56FA;&#x6709;&#x306E;&#x5185;&#x5BB9;

polite&#xFF1A;&#x652F;&#x63F4;&#x6280;&#x8853;&#x306F;&#x6B21;&#x306E;&#x6A5F;&#x4F1A;&#x306B;&#x60C5;&#x5831;&#x3092;&#x5229;&#x7528;&#x8005;&#x306B;&#x4F1D;&#x3048;&#x308B; &#x5358;&#x8A9E;&#x306E;&#x610F;&#x5473;&#x306F;&#x300C;&#x793C;&#x5100;&#x6B63;&#x3057;&#x3044;&#x300D;

region&#xFF1A;&#x30DA;&#x30FC;&#x30B8;&#x306E;&#x8981;&#x7D04;/&#x76EE;&#x6B21;&#x306B;&#x542B;&#x3081;&#x308B;&#x7A0B;&#x5EA6;&#x306B;&#x306F;&#x91CD;&#x8981;&#x306A;&#x77E5;&#x899A;&#x53EF;&#x80FD;&#x306A;&#x30BB;&#x30AF;&#x30B7;&#x30E7;&#x30F3; assertive&#xFF1A;&#x652F;&#x63F4;&#x6280;&#x8853;&#x306F;&#x305D;&#x306E;&#x5185;&#x5BB9;&#x3092;&#x3059;&#x3050;&#x3055;&#x307E;&#x5229;&#x7528;&#x8005;&#x306B;&#x4F1D;&#x3048;&#x308B;&#x3079;&#x304D; &#x8A00;&#x8449;&#x306E;&#x610F;&#x5473;&#x306F;&#x300C;&#x7A4D;&#x6975;&#x7684;&#x306B;&#x4E3B;&#x5F35;&#x3059;&#x308B;&#x300D;

&#x4ED5;&#x69D8;&#x3068;&#x3057;&#x3066;&#x306F;&#x7D50;&#x69CB;&#x5DE8;&#x5927; role&#x5C5E;&#x6027;&#x306B;&#x3057;&#x308D;aria-*&#x5C5E;&#x6027;&#x306B;&#x3057;&#x308D;&#x5B66;&#x3076;&#x306E;&#x306F;&#x5927;&#x5909;

&#x30B9;&#x30DA;&#x30FC;&#x30B9;&#x30B7;&#x30E3;&#x30C8;&#x30EB;&#x306E;&#x3088;&#x3046;&#x306B; &#x4ECA;&#x307E;&#x3067;&#x306F;&#x3086;&#x3063;&#x304F;&#x308A;&#x3060;&#x3063;&#x305F;&#x304C; &#x4ECA;&#x5F8C;&#x306F;&#x30A2;&#x30AF;&#x30BB;&#x30B7;&#x30D3;&#x30EA;&#x30C6;&#x30A3;&#x5BFE;&#x5FDC;&#x306F;&#x3050;&#x3063;&#x3068;&#x52A0;&#x901F;&#x3059;&#x308B;&#x306F;&#x305A;

アクセシビリティを加速するWAI-ARIA

More Related Content

Editor's Notes