{"id":72,"date":"2020-11-05T22:00:44","date_gmt":"2020-11-05T22:00:44","guid":{"rendered":"http:\/\/sites.msudenver.edu\/accessible-design\/?page_id=72"},"modified":"2020-11-19T08:46:13","modified_gmt":"2020-11-19T08:46:13","slug":"html-css","status":"publish","type":"page","link":"https:\/\/sites.msudenver.edu\/accessible-design\/html-css\/","title":{"rendered":"HTML\/CSS"},"content":{"rendered":"<h2><span style=\"font-family: verdana, geneva, sans-serif\">Accessible HTML\/CSS<\/span><\/h2>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">Creating accessible design for websites would be much simpler if one began from within the code itself. In previous sections of this content, it mentioned several cosmetic items which could be altered to create an accessible design. Here, however, one can address the programming aspect which can affect how plugins, accessible aids, and programs work with one\u2019s site.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-159 aligncenter\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Capture-300x147.png\" alt=\"This is a sample image of the correct coding of HTML layout for accessibility.\" width=\"704\" height=\"345\" srcset=\"https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Capture-300x147.png 300w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Capture-1024x503.png 1024w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Capture-768x377.png 768w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Capture-1536x754.png 1536w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Capture-2048x1005.png 2048w\" sizes=\"auto, (max-width: 704px) 100vw, 704px\" \/><\/p>\n<h2><span style=\"font-family: verdana, geneva, sans-serif\">Use of Semantics &#8211; For Text Layouts<\/span><\/h2>\n<p>Accessible use of semantics involves the most recent version of both HTML and CSS coding language. These have been crafted with incorporated elements that when used organize the content for the reader. Use headers, paragraphs, and list items correctly to ease the access of items such as screen readers.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-238 size-large\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Sample_Coding-semantics_3-01-1024x768.jpg\" alt=\"This image is an example of both the accessible and accessible use of coding hierarchy for HTML which translates to CSS.\" width=\"640\" height=\"480\" srcset=\"https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Sample_Coding-semantics_3-01-1024x768.jpg 1024w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Sample_Coding-semantics_3-01-300x225.jpg 300w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Sample_Coding-semantics_3-01-768x576.jpg 768w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Sample_Coding-semantics_3-01-1536x1152.jpg 1536w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Sample_Coding-semantics_3-01-2048x1536.jpg 2048w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<h2><span style=\"font-family: verdana, geneva, sans-serif\">Use of WAI-ARIA &#8211; Advanced Coding<br \/>\n<\/span><\/h2>\n<p>Wai-Aria is a more advanced form of accessible coding used to make full-fledged sites and applications coded for accessible users. it creates accessible options for things such as drag and drops, drop-downs, and much more.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-161 aligncenter\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/tree-nav-165x300.png\" alt=\"This is an image of an example of the use of WAI-ARIA coding. It uses a dropdown menu and selction wth the content info of dinosaur classifications.\" width=\"350\" height=\"636\" srcset=\"https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/tree-nav-165x300.png 165w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/tree-nav.png 212w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accessible HTML\/CSS Creating accessible design for websites would be much simpler if one began from within the code itself. In previous sections of this content, it mentioned several cosmetic items which could be altered to create an accessible design. Here, however, one can address the [&hellip;]<\/p>\n","protected":false},"author":860,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"class_list":["post-72","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/users\/860"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":0,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/72\/revisions"}],"wp:attachment":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/media?parent=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}