iASP Client Login

Blog

Viewing tag: web development | View All

Is Your Content Accessible?

Is Your Content Accessible?

Is Your Content Accessible?

The Internet has created a platform to provide solutions to many every day problems. From basic websites that share information or entertainment, to highly complex applications that allow people to complete banking transactions on-line or see other parts of the world in real-time, we have been able to open our world like never before.

Just like in the real-world however, website owners must consider how their website or on-line application is used by visitors, including people with a disability.

For a web developer or a content author, this means that there are some techniques and tactics that need to be considered when creating a website or a piece of content that is published in the Internet.

So, we'll take you through what Web Accessibility is all about, and what you need to do to play your part in building an accessible World Wide Web.

What is Web Accessibility?

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Very simply, Web Accessibility ensures that the same detail of information is accessible to a viewer with a disability as is accessible to a viewer without a disability, so that the end experience for all users is as equal as possible.

The disability could be from a visual impairment, or a hearing impairment or a physical or mental disability that affects how the user is able to interact with the website and the content.

The Web Accessibility Initiative

The World Wide Web Consortium (W3C) has been ensuring that all areas of the World Wide Web are accessible to everyone since 2005 as part of their Web Accessibility Initiative (WIA).

As stated on the Web Accessibility Initiative website, web accessibility depends on several components working together in order for the Web to be accessible to all, and content is one of the essential components that, when formatted to meet the WAI guidelines, could substantially improve Web accessibility.

The Web Accessibility Initiative website provides strategies, guidelines and resources for website developers, software developers and user agent developers to make the Web accessible to people with disabilities.

For website content, this standard is outlined in the Web Content Accessibility Guideline, and it is up to version 2.0.

Web Content Accessibility Guidelines 2.0

The Web Content Accessibility Guidelines (WCAG) 2.0 was first introduced in 2008 and it defines how to make Web content more accessible "with a goal of proving a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally". The recommendations and techniques provided to achieve WCAG 2.0 compliance are updated once a year to stay current with changing technology.

The guidelines, along with the resources that come from the guidelines, are all built upon a foundation of four principles of accessibility, such that anyone who wants to use the Web must have content that is:

  1. Perceivable
    Which means users must be able to perceive the information being presented, it must be visible to at least one of their senses). For content, this means providing text based alternatives for non-textual content like images or audio. Multimedia content should have captions which are accessible to screen readers, or should also provide an alternative version such as a written transcript. The guidelines also cover techniques of displaying content that should be avoided, such as time-based media that may not be displayed for long enough to be read properly; or styling content in a way that makes it difficult to read or hides content from view.

  2. Operable
    Which means users must be able to operate the interface (or put more simply, navigate around a website) using in the very least, a keyboard. In most cases, users have a keyboard and a mouse to interact with a website, but alternative means to navigate around a website must be provided. This alternative is typically provided through the functionality of the web browser (using the TAB or arrow keys to scroll through navigation elements on the page), or it is handled by assistive technologies that are based upon keyboard commands to a web browser.

  3. Understandable
    Which means users must be able to understand the information as well as easily determine how to use the website. Authors of websites must make their text readable without much effort by the visitor. This includes choices of font, size of text as well as the layout of the page. Content must also be structured in a predictable format so as to not leave the user guessing. For example, providing the user with clear and meaningful feedback after interacting with the website, such as after submitting a form.

  4. Robust
    Which means users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible). From a content point-of-view, this principles means that content is structured in a way that is future-proof. Using valid HTML with correct semantic mark-up is the best way to ensure that your content will be future-proof.

So what does it mean for you?

As a website owner or content author, you should check your website to see whether it meets the current WCAG 2.0 standards, and then take steps to address any areas that are not up to standard.

For most websites, this will typically be ensuring that meaningful images also have meaningful text alternatives (so background images don't count), and that hyper-links and anchors have meaningful titles and can be activated (clicked) by using the keyboard. If your website has video, then ensure that your videos provide subtitles and/or a transcript that users can read instead if they are unable to watch the video.

Services like AChecker will let you check if your website meets the WCAG 2.0 standard of accessibility for free. Several other such services are available online and can be found in a list of tools provided on the WAI website.

It is also highly recommended that you read the Techniques for WCAG 2.0 document to give you an idea of what to consider when creating content to ensure that it will be WCAG 2.0 compliant.

Further Resources:



Do you think Web Accessibility is important? Join our discussion on the iASP Central Facebook Page, or Get in Touch.


QR Codes Explained - 8 Do's and Don'ts

QR Codes Explained - 8 Do's and Don'ts

QR Codes Explained - 8 Do's and Don'ts

There have been many articles recently that suggest the only time to use a QR Code is Never. 

When used correctly (read appropriately), QR Codes can be an highly effective method of linking offline with on-line.

QR Codes (Quick Response Codes), are a 2-D barcode invented in Japan in 1994 to provide a means of storing more information in barcodes than the standard 1-D vertical lined barcode. Originally used in vehicle manufacturing plants as a method of tracking parts from delivery to installation, thanks to the fact SmartPhones can be used to scan QR Codes, they quickly spread into other industries, particularly marketing and advertising.

A fantastic example of QR Codes being used effectively is by a wildlife refuge in the US displaying QR Codes on posts along a walking trail to instantly direct visitors to a website with information about local flora and fauna along the trail. Perfect! The codes deliver convenience and something of value.

HCD Tactic: Be selective about where you place a QR Code, and what the destination will deliver.

So here's our 8 Do's and Don'ts for using QR Codes:

  1. Placement : Don't put a QR Code on a billboard. It's way too hard scan!
  2. Placement : Do put a QR Code on a poster in a bus shelter. You have a captive audience in easy reach.
  3. Content : Don't put a QR Code on a poster relating to personal or sensitive issues such as health disorders. No one wants to be seen accessing that information in public. In this case it's much better to include a website address or phone number that can be actioned without having to scan the message for all the world to see.
  4. Content : Do use QR Codes on a poster advertising your non personal or sensitive products and services. Customer sees product, likes product, gets taken directly to buying the product.
  5. Placement : Don't put a QR Code on a poster in a toilet. Hands are too busy with other things (or they should be!)
  6. Placement : Do put a QR Code in a press advertisement linking directly to the page on your website where customers can buy the product you are advertising. Customer gets an instant result. Their original activity (reading the paper) isn't interrupted.
  7. Incentive : Don't just link a QR Code to the same information they can already see alongside the Code. Give the visitor a reward for their effort - like a "QR Code Discount or Bonus". 
  8. Incentive : Do use a QR Code to enter visitors into your latest competition.  

Remember, QR Codes have practically unlimited uses, but the majority of them just don't fit with audience's habits and expectations. Use them wisely, and you can create positive associations with your audience and build positive results.

You can find several free and subscription (which provide tracking services) based QR Code creation tools on the Internet with a simple search for 'QR Code generator'. Free generators allow you to create static QR Codes quickly, while the subscription based providers include additional features such as customisation and dynamic QR Codes (allowing you to change the information in the code without needing to update/reprint the code) and code tracking data.

For more information about the QR Code, visit the Denso Wave QR Code website.


5 Alternatives to the CAPTCHA test

5 Alternatives to the CAPTCHA test

5 Alternatives to the CAPTCHA test

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) tests in on-line forms are a frustration, but seemingly necessary to prevent spam and malicious activities. Often it is difficult to read the characters that are displayed, and sometimes require a number of attempts.

Is there a better way to determine if a form is being submitted by a human?

We've put together a short list of some alternative methods to determine if the user is a Bot or a real person:

  1. Hidden form fields - Hidden from the human user using CSS or JavaScript, a Bot will "see" this field and fill it in. One downside is it can create a problem for screen readers.
  2. Confirmation Check-boxes - Like the hidden field, a human can distinguish between "Is a human" and "Is a robot", only selecting one option. Bots aren't able to tell between the two questions and fill both check-boxes, allowing you to reject the submission.
  3. Timestamps on forms - A human takes time to read the form, and fill in their information. A Bot will fill in all the fields much faster. If a form is submitted in under a certain amount of time, you can almost determine that it is from a bot.
  4. Verified Sign In - Require your users to sign into your website beforehand. This allows you to remove the need for any testing as the human user has already been verified.
  5. The logic test - Create a simple logic test like match the colour displayed, or complete a simple puzzle or game that a human could easily solve but a Bot can't determine. This one could also create problems for screen-readers however.

The Beginning of the End for Internet Explorer?

The Beginning of the End for Internet Explorer?

The Beginning of the End for Internet Explorer?

Microsoft developed its Internet Explorer (IE) web browser with the express intention of killing off the incumbent market leader (Netscape Navigator) and dominating the planet - and it did exactly that!

By 2002 of the more than 600 million global Internet Users, IE had around 90% of the market.

Today, according to NetMarketShare, IE still dominates the global desktop web-browser market with a 55% share.

That dominance however does not translate to the booming mobile space where IE's 2.31% share falls well short of Apple's Safari (53.91%) and Google's 2 x mobile browsers - Android Browser (23.44%) and Chrome (12.94%).

Even Opera Mini (3.51%) out performs IE in the mobile browser space.

But IE's future is now even more shaky after Microsoft admitted on Saturday that all versions from IE6 - IE11 have a serious security problem.

According to a Microsoft security advisory, "An attacker who successfully exploited this vulnerability could take complete control of an affected system...could then install programs; view, change, or delete data; or create new accounts with full user rights."

What's even more troubling is that Microsoft can only resolve the issue for the latest versions of the Microsoft Operating System: Users operating Windows XP or earlier versions have no way to protect against this vulnerability - ever.

If you're running Windows XP or older - stop using IE immediately and permanently!

Microsoft has suggested a couple of steps to take for Users with more recent Windows versions to address the problem until they can resolve the issue, but our recommendation (and that of the Australian Government) is to simply download, install and start using an alternative browser. The two most popular are Google Chrome and Mozilla Firefox.

3 Killer Responsive Frameworks: Bootstrap, Foundation, & Skeleton

3 Killer Responsive Frameworks: Bootstrap, Foundation, & Skeleton

3 Killer Responsive Frameworks: Bootstrap, Foundation, & Skeleton
Bootstrap is a popular, modern, front-end UI development framework. It has a 12-column grid responsive layout and includes custom buttons and form elements of its own. Additionally, Bootstrap includes several JavaScript components such as carousels, modals, alerts, and tabs. The component and plugin library is large and community support continues to grow. Overall, Bootstrap is a full featured solution for making a responsive website.

Foundation is another popular responsive front-end framework. Like Bootstrap, Foundation includes a responsive grid system, base CSS, CSS components, and JavaScript plugins. It's also a 12-column flexible grid, but it can scale out to an arbitrary size that's also easily nested. Foundation was built using the mindset of "Mobile First". With the Foundation framework, the grid classes account for mobile devices first, and treat larger devices as the exception. Foundation will be a great choice if you focus on your mobile site more.

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size. Skeleton seems to be most ideal for simple concise websites that don't require a lot of extra features as it's got just the bare essentials and nothing more. The Skeleton template only works up to a 960 pixel width. For those users who want to get started with responsive design quickly, you should look into this open source project.