{"id":146,"date":"2016-12-01T03:05:46","date_gmt":"2016-12-01T03:05:46","guid":{"rendered":"http:\/\/www.inspired-evolution.com\/blog\/?p=146"},"modified":"2022-01-30T00:41:37","modified_gmt":"2022-01-30T00:41:37","slug":"websites_and_web-applications-accessible","status":"publish","type":"post","link":"https:\/\/www.inspired-evolution.com\/blog\/websites_and_web-applications-accessible\/","title":{"rendered":"website accessibility should not be an afterthought or ignored"},"content":{"rendered":"

\"WebIt is a requirement that all government related websites meet section 508 accessibility guidelines, and your business website should as well. Accessibility is a right, not a privilege<\/strong>.<\/p>\n

Common visual problems are due to cataracts, glaucoma, age-related macular degeneration, corneal opacity, diabetic retinopathy, childhood blindness, trachoma and onchocerclasis.<\/p>\n

There are many ways to help make your website more accessible to those with disabilities.<\/p>\n

Semantic HTML<\/h2>\n

Way back in the later part of the 1990's I took a web design class at Wake Tech focusing on HTML coding. I remember the instructor was site impaired and stressed how important accessibility was and that it should not be ignored when developing a website. I have not forgotten that and accessibility is very important to me and I wanted to learn as much as I could in regards to website accessibility.<\/p>\n

I have taken measures to make my website, Inspired-Evolution.com<\/a> to be accessible. For the site I made sure I develop using semantic HTML markup, aria roles, alt text for images and following WCAG 2.0 guidelines. <\/p>\n

website coders should also make use of the built-in HTML5 landmark tags such as:
\n
\n<header>
\n<footer>
\n<aside>
\n<article>
\n<nav>
\n<main>
\n<section>
\n<\/code><\/p>\n

Image alt tags<\/h2>\n

All images on your site should contain an alt tag. The alt tag should explain what the image is about if the image adds meaning to the content. If the image is just used for backgrounds purposes it does not need an alt tag.<\/p>\n

ARIA tags<\/h2>\n

ARIA stands for Accessible Rich Internet Applications, and can be used as an attribute along with HTML to give meaning to an element. An example would be:
\n
\n <span role=\"button\">
\n<div role=\"banner\">
\n<a aria-label=\u201cRead More about this great blog posts\u201d href=\u201c\/path\/to\/your\/page\u201d>Read More<\/a>
\n<\/code><\/p>\n

Many websites and web applications utilize dynamic content and there is an ARIA solution for that as well. Aria Live Regions will notify site impaired users whenever there is a notification on the page without a page refresh. This is done from a development standpoint via JavaScript. The solution via Aria is as follows per the Mozilla Developer website<\/a>.<\/p>\n


\naria-live: The aria-live=POLITENESS_SETTING is used to set the priority with which screen reader should treat updates to live regions - the possible settings are: off, polite or assertive. The default setting is off. This attribute is by far the most important.
\n<\/strong><\/p>\n


\nNormally, only aria-live=\"polite\" is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.<\/strong><\/p>\n


\naria-live=\"assertive\" should only be used for time-sensitive\/critical notifications that absolutely require the user's immediate attention. Generally, a change to an assertive live region will interrupt any announcement a screen reader is currently making. As such, it can be extremely annoying and disruptive and should only be used sparingly.<\/strong><\/p>\n


\nAs aria-live=\"off\" is the assumed default for elements, it should not be necessary to set this explicitly, unless you're trying to suppress the announcement of elements which have an implicit live region role (such as role=\"alert\").<\/strong><\/p>\n

Accessibility testing tools<\/h2>\n

Some of my favorite tools to test for web site accessibility are the HTML5 Validator<\/a>, CSS3 Validator<\/a>, Chrome Vox<\/a>, and Chrome Accessibility Developer Tool<\/a>. Other effective accessibility testing tools are these screen readers: Voice Over for Mac computers<\/a>, and Jaws for PC computers<\/a>. <\/p>\n

As far as CMS (Content Management Systems) platforms go, both WordPress<\/a> and Drupal<\/a> offer advanced accessibility features. If you are using a Content Management System to build and maintain your website I would strongly consider one of these two platforms. This blog site you are reading now was built using WordPress. <\/p>\n

A lot of websites and web applications are built using JavaScript Frameworks such as Angular, Vue and React. There should be proper accesibility considerations used for these technologies. Here is a good read on accessibility and JS frameworks<\/a><\/p>\n

Learning more about Accessibility<\/h2>\n

I have come across several good online resources to learn about website accessibility. Some of them are:<\/p>\n