{"id":79,"date":"2005-06-13T03:37:50","date_gmt":"2005-06-13T03:37:50","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2005\/06\/media-attribute-accessibility"},"modified":"2006-04-30T23:45:48","modified_gmt":"2006-04-30T23:45:48","slug":"media-attribute-accessibility","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2005\/06\/media-attribute-accessibility","title":{"rendered":"Media Attribute Accessibility"},"content":{"rendered":"

Recently, Anne van Kesteren<\/a> demonstrated\r\n a\r\n\t\tnice technique<\/a> with the XHTML\r\n\t\t2.0 media<\/code> attribute<\/a> designed to deliver a contact form to screen users, while giving\r\n\ta postal address for print users. Faruk Ates<\/a> also published an interesting article\r\n\tabout XHTML\r\n\t2.0 and Google<\/a>, specifically focussing on the potential abuse of\r\n\tthe media<\/code> attribute to hide content from screen users, but not from Google.\r\n\tHowever, this got me thinking about some of the accessibility issues involved\r\nwith this technique.<\/p>\r\n

Take a look at Anne\u2019s example:<\/p>\r\n

<section>\r\n  <h>Contact<\/h>\r\n  <div media="screen">\r\n    Contact form to be inserted here.\r\n  <\/div>\r\n  <div media="print">\r\n    <address layout="relevant">Anne van Kesteren\r\n    Crosestijn 4629 \u2026<\/address>\r\n  <\/div>\r\n<\/section><\/code><\/pre>\r\n<\/blockquote>\r\n
As you can see, this clearly provides suitable alternate content for users\r\n\tdepending on whether they\u2019re using a screen<\/code> medium, or print<\/code> medium. However,\r\n\twhat about other media\r\n\ttypes<\/a> like braille<\/code>, embossed<\/code>, handheld<\/code>, projection<\/code>,\r\n\tspeech<\/code>, tty<\/code>, tv<\/code> or any other media? They get nothing!<\/p>\r\n
Clearly, the intention of this example is that the contact form is not suitable\r\n\tfor any static media (embossed<\/code> and print<\/code>), while the postal address is. There\r\n\tis also no reason why a postal address isn\u2019t suitable for all<\/code> media. One solution,\r\n\tand currently the only usable solution, is to explicitly list all suitable media\r\n\tin the attribute (it\u2019s a comma separated list). However, what happens when CSS\r\n\textends the list of possible media in the future? Would the media attributes\r\n\tthen need to be updated to reflect this?<\/p>\r\n
Another solution I can think of would be to allow for the CSS media groups\r\n\tto be used instead, but AFAICT, that\u2019s not possible at this stage. For example,\r\n\tthe above example could become:<\/p>\r\n
<section>\r\n  <h>Contact<\/h>\r\n  <div media="interactive<\/strong>">\r\n    Contact form to be inserted here.\r\n  <\/div>\r\n  <div media="all<\/strong>">\r\n    <address layout="relevant">Anne van Kesteren\r\n    Crosestijn 4629 \u2026<\/address>\r\n  <\/div>\r\n<\/section><\/code><\/pre>\r\n","protected":false},"excerpt":{"rendered":"The media attribute can cause unintentional accessibility issues.","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,2],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/79"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=79"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/79\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=79"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=79"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=79"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}