Web Accessibilty

accessibility iconsThe Americans with Disability Act (ADA), was passed in 1990 “to [eliminate] discrimination against people with disabilities.” Tim Berners-Lee is credited with inventing the World Wide Web in 1989 and developing in 1990 both the first web server, and the first web browser, called WorldWideWeb and later renamed Nexus.

The Internet and the WWW provided both new opportunities for those with disabilities and new challenges.

Making things accessible to all in a digital environment takes extra thought and effort and, unfortunately, that is still not being done in all case. I am sensitive and aware of many of these issues but willing to admit that I don’t always run every check on webpages or add relevant alt tags to every image.

I have worked on a number of online projects that required focus groups and user testing, but those tests did not usually include people with disabilities or specifically address all the issues of accessibility testing.

using a touchscreen with a head dauber
A voter with a manual dexterity disability is making choices on a touchscreen with a head dauber

There have been design jobs I have done that required accessible checks because they were government sites or grant-funded by government agencies. The website for the Poetry Center at PCCC is an example of a site that because of its funding support

There are now free tools that will check many, but not all, of the most important accessibility issues on your website. WAVE Toolbar is an extension originally designed for the Firefox browser but now available in Chrome. It’s an interesting example because if you view it using Firefox you get the message: “The WAVE Firefox Toolbar is no longer available. It is no longer compatible with new Firefox versions and the Mozilla add-on developer environment no longer supports the functionality required for toolbar evaluation. We recommend that you install the updated WAVE Chrome extension.” Even accessibility tools aren’t always accessible.

Each of these tools requires interpretation in the same way that using a spellchecker or grammar checker or plagiarism-detecting tool require user interpretation. On the Poetry Center website, I will get “errors” that say “Heading markup should be used if this content is intended as a heading” but the noted line of code is not intended as a heading, so I can dismiss the error.

This post itself will produce dozens of errors in a check and some of them are out of my control because they are built into the WordPress theme I am using and I don’t have complete control over things like built-in anchors and semantic tags. Still, it is still worth running the checks to see if there are things I can address, such as images without tags (descriptions for visually-impaired users) or tables that will not present the information intended correctly to someone using a screen reader.

Do I always run a check on every page I produce. No. I am guilty of doing general checking when I first produce a site and then getting lazy as I add pages (especially true for blogs). Did I run a check on this post because it is about accessibility? Yes.

A more customizable and detailed tool (perhaps harder to use and interpret for some) is HTML_CodeSniffer which is a bookmarklet that works with most browsers.

Do you ever view your site in all the current browsers? Though you might dismiss Internet Explorer as old school, if 35% of your site visitors are using it, you can’t dismiss it.

Is your site mobile-friendly and more than just friendly to phone and tablet users?

Another tool is Tota11y which is described as “an accessibility visualization toolkit…a single JavaScript file that inserts a small button in the bottom corner of your document.” When you click on the button, you see where your web page has accessibility problems.

Good places to start are probably not with the tools as much as with some sites with information about accessibility in general. The W3C Web Accessibility Initiative provides both. They have a Web Evaluation Tools List and also information such as “How People with Disabilities Use the Web.

WebAIM is another source offering “Considering the User Perspective: A Summary of Design Issues,” and information on the “Principles of Accessible Design” as part of its “Introduction to Web Accessibility.

A search will also provide many simple articles, such as “25 Ways to Make Your Website Accessible,” that can get you started as a designer with making your designs more accessible.

The first step is simply being aware that there are always potential problems for some users when you present information in a digital environment. For example, will someone using a screen reader know that I put “aware” in italics in the previous sentence, and how important is my use of italics, bold and especially colors to the meaning of the information? What is left when all of that is stripped away?

Current Trends for Designing Your Website

If you are designing or redesigning your website now, you should look at some of the current design trends.

Responsive and flat design have both been trendy in the past year, but plenty of older sites have never upgraded. If these terms are unknown to you, that might be a reason to hire a designer! But put simply, flat design is a style with minimum use of  elements meant to give the illusion of three dimensions. That means not using drop shadows, gradients or textures, and employing simple typography and flat colors. Designers like flat design because it allows interface designs to be more streamlined and efficient.  The current version of  the CondeNast.com site is a nice example of flat design. (More on responsive design)

Lack of updating is also a cause for not having a real mobile alternative for your site. That doesn’t mean just that your site can be viewed on a mobile device – any site can be viewed, but does it work efficiently on that platform? This requires a completely different view of the site.

This graphic from Coastal Creative shows 8 trends they expect to influence designs this year. Not every one works for your site. For example, the “cards” design is very popular, but it’s not for all applications.

 

 

Source: 8 Design Trends You Can Expect to See in 2016 | Red Website Design Blog

Being Responsive

You might have heard the term responsive web design. It is generally associated with designing to give an optimal user experience on all devices.

Since more people may be viewing your website on tablets, smartphones (or just feature phones), and large TV screens than are looking at it on the more traditional computer and laptop screens, it has become incumbent on designers to learn responsive web design.

It is something that anyone who is involved in the process of creating websites should know something about. That means more than just developers and coders. Marketers, social media workers, UX (user experience) and UI (user interaction) designers all need to understand how a site works on other screens and with their users.

Of course, it is more than screen size, but also about improving the user experience based on how we use devices and maximizing their capabilities. If your website can be viewed in a vertical and horizontal format, how can you maximize that?  What does a touchscreen or a retina display allow you to do? Or, on the bad side, if you do not design with all of that in mind, how bad will your site look on other screens?

All this means that you start with content strategy before creating a visual design. (It turns out most designers start with the default design being for the narrowest screens.) A lot of this is still using HTML elements and CSS properties, plus media queries to display different CSS styles based on a device’s viewport width. And you need to rethink all the “old” design elements like images, typography, and navigation.

I also like to think of responsive design as meaning that the designer responds to the needs of the client and their users. That is an area that takes more than tech skills. It seems a bit insulting to call those “soft skills” but sometimes they are viewed as softer than than the hard coding types pf skills.

Designers use performance optimization techniques to make sites lighter and faster, especially on mobile browsers. The answer is not to design two websites – one for mobile and one for larger displays – but to have the site know what type of device is being used and adjust automatically.

I’m no pro at this and I am still learning responsive web design. and how to think outside the desktop box. As with many things in technology, we all need to be, like these new designs, flexible and wanting to deliver the best experience to our users no matter who they are and how they interact with us. That is why you will also hear about having a  responsive design “workflow.”

I made demo sites in Blogger and WordPress using a responsive web template. It is getting easier and easier for people to build websites (including responsive ones) using WYSIWYG tools like Blogger or WordPress without knowing much about HTML, CSS, or responsive design. But it definitely helps to know some of that.

There are plenty of templates for sites like a portfolio site to showcase your work that includes the ability to display an image carousel and that automatically adjusts according to the device. If you resize your browser window or switch devices, you can see how that template responds.

Want to learn some responsive design on your own? Try these two titles:

       

Web Design Samples

A sampler of some of my website designs ranging from free to paid hosting, designs using templates and custom-built ones.

  1. Design Advisor  NJ School of Architecture
  2. MariaGillan.com a hosted poet’s site which includes a separate blog at mariagillan.blogspot.com (using Blogger)
  3. PoetsOnline.org and its companion Poets Online blog
  4. Faculty site at NJIT
  5. One Page Schoolhouse  site using Blogger
  6. Soledad O’Brien  information site and blog
  7. Paterson Literary Review – journal
  8. Endangered NJ blog
  9. PCCC Writing  Center
  10. Weekends in Paradelle
  11. Why Name It That?
  12. NJIT.edu site revision done as Manager in Web Services at NJIT in moving existing site to a new content management system, 2006-2007
  13. eLearning Orientation – NJIT site with (now old-fashioned) Flash intro, 2004
  14. Design Advisor (School of Architecture, NJIT)