website accessibility should not be an afterthought or ignored

It 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.

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

There are many ways to help make your website more accessible to those with disabilities.

Semantic HTML

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.

I have taken measures to make my website, Inspired-Evolution.com 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.

website coders should also make use of the built-in HTML5 landmark tags such as:

<header>
<footer>
<aside>
<article>
<nav>
<main>
<section>


Image alt tags

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.

ARIA tags

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:

<span role="button">
<div role="banner">
<a aria-label=“Read More about this great blog posts” href=“/path/to/your/page”>Read More</a>


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.

aria-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.

Normally, 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.

aria-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.

As 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").

Accessibility testing tools

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

As far as CMS (Content Management Systems) platforms go, both WordPress and Drupal 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.

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

Learning more about Accessibility

I have come across several good online resources to learn about website accessibility. Some of them are:

• WCAG (Web Content Accessibility Guidelines)
• Section 508 Accessibility Program
• Accessibility in HTML5
• Google Accessibility

I have also gained a lot of insight on website accessibility by watching the A11Y video series on YouTube from Rob Dodson a Google Developer and accessibility advocate.

I also follow the twitter account of John Kuperman (@jkup) who is also an accessibility advocate and offers an online course on accessibility via Front-End Masters(@frontendmasters).

Conclusion

Accessibility should not be a privilege, it should be a right for those to be able to access websites just as those without disabilities can access digital content. Currently many websites are putting the business at a risk for a legal lawsuit for not being accessible. There are many benefits to making your digital content accessible. The most important being it is simply the right thing to do and well worth the effort put into it.