Category Archives: Web Design

html5 and css3

Accessibility in HTM5 and CSS3

INTRODUCTION
The web has now become an important aspect of our daily lives. This means that everyone needs to have access to it including the disabled. Accessibility on the internet has become a very important issue. People with disabilities need to have equal opportunities accessing resources on the web. The W3C set international standards for the web. Their Web Accessibility Initiative (WAI) published guidelines for making websites accessible. The guidelines are categorized into three levels, Level A, Level AA, and Level AAA. These guideline rates a website based on how accessible it is.

HTML is the basic technology for the web. A recent improvements made to it is known as the HTML5, adds new features with enhances accessibility. CSS3 is also an improvement made to the old CSS with new added features. These new features make the structure of information more presentable on the web.

This report investigates HTML5 and CSS3 technologies, and points out those new features in which a web developer could use to design a more accessible website.

WEB ACCESSIBILITY

WHAT IS WEB ACCESSIBILITY?
Accessibility generally refers to the ability of the abled and disabled persons to use a website. For example, a site consisting of images without alt tags is considered to be worthless for bland persons and therefore considered to have poor accessibility. When websites are correctly designed, it gives an equal opportunity for access to information and functionality. The needs that accessibility needs to address includes the following; visual, mobility, auditory, seizures, cognitive/intellectual.

The Web offers the possibility of unprecedented access to information and interaction for many people with disabilities. That is, the accessibility barriers to print, audio, and visual media can be much more easily overcome through Web technologies (www.w3.org).

Accessibility is required by laws and policies in some cases.

MAKING THE WEB ACCESSIBLE

  • Your website must be able to function with all different browsing technologies
    The most important rule of web accessibility, not everyone uses the same web technology. Different browsers are compatible with different plugins and programs that are required for your website. This basically means that you ensure that you provide alternatives to images, JavaScript, flash, audio and video. Also you also need to be aware of support for CSS and how the web pages look where it is not supported.
  • Forms need to be accessible to web users
    Web forms must be accessible. For example, prompt text must be in appropriate position, visible form validations and more
  • It should be easy for all users to quickly process the content on your website
    Most users browse through a web page a quickly as possible to look for what they need or what stands out. Ensure the use of headings, links, bold text, and bullet points. Also use descriptive texts.
  • Structure and presentation should be completely separated
    This is to make it more accessible from devices success as PDAs, mobile browsers, WebTV, IPads and more. Structure is how the document is organized and presentation is how the words, images are presented to the end users.
  • The end user should ha control over your web pages
    All web users have different attitude on how they browse the internet, depending on browsers or kind of disability they may have. By handling control back to the users, it will enhance the accessibility of your website. This could mean allowing users to resize text, change background colour, font colour, and more.

WHY IS ACCESSIBILITY IMPORTANT?

The web has become an increasingly important part of life in the sense of education, employment, government, commerce, healthcare, recreation, and many more. It is important for the web simple in such a way that it provides equal opportunity and access to people with ability and disability. It helps disabled persons to be involved more in the society.

The Disability Discrimination Act states that the service provides must not discriminate against disabled people. A website is regards as a service to people and therefore falls under this law, and as such must be made accessible to everyone.

BENEFITS OF AN ACCESSIBLE WEBSITE

  • Increase in reach
    The website will have more users, because it is accessible by both the able and disabled users.
  • Website will be easier to manage
    An accessible website separates contents and presentation of each page. Each web page has a HTML document that’s contains the words and images of that page and calls up a CSS document that contains the presentation information. This CSS document is shared with all pages in the website. So to adjust the layout of your website, you only have to make changes to the CSS document, saving time and money.
  • Website becomes compatible with new web technologies
    PDAs, IPads, Mobile phones, in –car browsers are now regularly used to access the internet. You need to make you website accessible to these machines to be able to reach these target users.
  • Higher ranking in search engines
    Making a website more accessible to users, you are making it more accessible to search engines as well. Search engines cannot usually understand images and, JavaScript, flash, audio and video content. By providing alternative text and content to each of these, it will be more accessible to search engines (Moss, 2005).
  • Avoid legal fees
  • Download time will be improved
    Accessible websites generally download quicker than poorly accessible website. Just 25% of web users in the UK are connected to the Internet via broadband (source: National Statistics). If your website takes long to download, users may be clicking away (Moss, 2005).
  • Usability will be enhanced
    There is a certain amount of overlap between accessibly and web usability. A more accessible website enhances usability of that website.(Moss, 2005).
  • Better publicity
    A more accessible website surely gets better publicity amongst internet users.

HTML5

HTML was developed by the W3C until 2004, when members of the HTML working group grew disturbed with the direction the W3C was going with HTML. They felt that the W3C was not paying enough attention to the real-world development needs of the language and focusing too much on XML and XHTML. So they formed a new group called WHATWG (Web Hypertext Application Technology Working Group) devoted to evolving the Web. They started by working on a new specification of HTML – HTML 5 (Kyrnin, 2011).

HTML has been has been in continuous evolution since its formal introduction to the World Wide Web in the 1990s. HTML5 is the next major revision of HTML. It is the latest specification of HTML.

NEW FEATURES

  • New semantic elements
    HTML5 comes with new semantic headers such as <nav>, <header>, <footer> and <article>. Semantics are very important in HTML.
  • New form features
    HTML 4.01 already allows us to create usable, accessible web forms, but some common form features are fiddler than they should be, and require hacking to implement. HTML5 provides a standardized, simple way to implement features such as date pickers, sliders and client-side validation.
  • Native video and audio
    Video and audio on the web has been done using flash. This is because open standards failed to provide a cross browser compatible mechanism for implementing such things. HTML5 includes <video> and <audio> elements for implementing native video and audio players really easily with nothing but open standards, and it also includes an API to allow you to easily implement custom player controls.
  • Canvas drawing API
    The <canvas> element and associated API allows you to define an area of the page to draw on, and use JavaScript commands to draw lines, shapes and text, import and manipulate graphics and video, export in different image formats, and a whole lot more.
  • Web sockets
    This API allows you to open a continuous connection between a sever and a client on a specific port and send data in both directions until the port is closed. This improves the efficiency of web applications a great deal, as data can be continuously and accurately exchanged between client and server without constant page reloads, and without constantly having to poll the server to see if updates are available.
  • Offline web applications
    This feature allows a number of features of the website to run offline. Application Caches allow you to save a copy of all the assets and other files needed to run web applications locally, and Web SQL databases allow you to save a local copy of a web application’s data. Together, these allow you to continue using an application when it goes offline, and then synchronize changes with the master version on the server when the network is available again.
  • Web storage
    Cookies allow us some degree of local data storage, but their use is fairly limited. HTML5 Web Storage allows us to store a lot more data, and do a lot more with it.
  • Geolocation
    It’s a new API in the HTML5 in which an object can be used to programmatically determine the location information through a device’s user agent. Eg, mobile devices (Source: dev.opra.com)

CSS3

CSS3 is the style sheet language used to describe how the look and feel of a document is written in a mark-up language. In CSS3, there some new elements that take the web design to a whole new ball game. Such as the ability to allow a 4th field to define alpha value (rGBA colour), create rounded borders, drop shadow behind an element or even allow multiple images to be layered on the background. Even text is getting a makeover with the ability to define what happens if text overflows its space, use of drop shadows, breaking the flow of text into multiple columns based on the width of their containing element (Curto, 2010).

NEW FEATURES

  • Rounded corners 
    CSS3 implements a new property called border radius that allows you to easily add rounded corners to any element with border (Curtis, 2010).
  • Text shadow
    You will also be able to add a drop shadow to your text using CSS. This has been implemented in Opera 10, Chrome, Safari and Firefox 3.5. However, each browser renders it slightly differently, which might be very frustrating (Curtis, 2010).
  • Multiple backgrounds
    CSS3 will allow you to add multiple background images to a single element. This should significantly reduce the amount of wrapper and container divs that are created simply to add an extra background (Curtis, 2010).
  • RGBA, HSL and HSLA
    CSS3 implements three new methods for declaring an element’s colour. They are RGBA (red, green, blue, alpha), which allows you to specify the colour in RGB and specify its opacity; HSL, which allows you to specify your colour in hue, saturation and lightness; and HSLA (hue, saturation, lightness, alpha), which allows you to specify an HSL colour and its opacity (Curtis, 2010).
  • Attribute selectors
    You will be able to use a great deal of nice attribute selectors with CSS3, including being able to select specific child nodes of an element (including the ability to implement styles on every other child – particularly useful for alternating table rows), and being able to style your form elements more easily (Curtis, 2010).
  • Multi-column layout
    This is a huge new addition. With CSS3, you will be able to specify a specific width of columns or a specific number of columns and have your content automatically overflow properly into the columns (Curtis, 2010).

IMPROVEMENTS IN WEB ACCESSIBILITY FOR HTML5 AND CSS3

HTML 5 is not yet a standard, but browsers are set to support its features before it becomes a standard in the future. This is a welcome development in terms of accessibility, the new features in HTML 5 and CSS3 helps to break the current barriers that developers have been encountering trying to make a website more accessible. Most importantly web developers won’t have to do anything extra to enable most of this added accessibility features. It comes standard with the proper use of HMTL. The new features in HTML5 make HTML more powerful, and suitable for building accessible web applications.

  • New semantic elements – these include the header, footer, nav, section, article and aside tags. Usually, web developers make use of div tags to mark sections on a web page. The new semantic elements allow the web developer to specify different section with the appropriate section tags like header, footer, and articles. This makes the web page more presentable and more accessible.
  • SVG Support – HTML 5 broadens SVG support even though most browsers support it. SVG images are vector images; this makes it important for more accessibility because they can be scalable without loss of quality. This feature is important for those who need magnification.
  • Audio and Video elements – these have been a pain to web developers trying to make it accessible. Audio and video have been implemented through flash in the past. It has always been thought that is if these are embedded to the web page it will drastically improve its accessibility.
  • Drag and Drop – this is a great addition to the HTML, The element has been a difficult implementation. Complex websites can now be easily accessible. This is a feature which can be used to make a web page complex and accessible.
  • Advanced features like date/time picker, sliders, email. These add an extra functionality to the old form controls. This will make this more consistent as against the use of JavaScript.
  • Access Keys – CSS3 implements access keys which make web experience memorable and more accessible. It offers a convenient mechanism for people with motor skill disabilities , such as Cerebral palsy, Parkinson’s disease, Alzheimer’s disease, etc., to access links or interface elements without having to cycle through all of the other links and interface elements in the content. A developer could use this technique to assign shortcut keys that enable certain functionalities on a web page, and hence avoid the need of moving the cursor to the link or button, hence saving time and improve the work flow and experience.
  • Transformation in CSS3 makes it possible to use plain text and rotate, twist and tweak its looks via CSS. This is important to screen readers where they will still read the text OK because their reading order is not influenced by the visual appearance of the text. So even text rotated by 45 or 90 degrees will appear correctly in a screen reader’s virtual buffer (Marco, 2010).

CONCLUSION

Developing web applications can be so complex and overwhelming for anyone not groomed in computer programming. The advancements in HTML 5 and CSS3 technologies have allowed beginners to be able to create good accessible websites which could have been trickier with older versions. There is a lot of talk these days with regards to proper development practices and accessible web design. Many web developers overlook the importance of coding a website in proper and meaningful HTML. Utility programs for the blind such as text to speech software make use of alternate text for images and links name properly. Search engine send out their robots to browse through your website. These computers can learn more about your website if it is properly coded and better with the use of the HTML5 features.

People find it difficult to control a mouse with precision, and easily become frustrated while attempting to select a link. Websites need to allow enlargeable links and create larger clickable link whenever possible. With the new CSS3 Links could be styled better and made different from the body so even colour blind users could locate what they want immediately. Users can also be allowed to have control over the font colour and background colour. They could change them to suit their needs. Websites never used to rely on audio and video for accessibility. But HTML5 and CSS3 has made it possible to have some level of confidence using audio and video for accessibility. Video and audio, SVG and Canvas can be used in ways that will help people with cognitive disabilities.

REFERENCE

  1. Canon, Aaron. “With HTML 5, Much Accessibility Will Come Free – Straightforward Web Accessibility for Designers and Developers.” Cannon Access – Straightforward Web Accessibility for Designers and Developers. 20 Apr. 2010. Web. 15 Jan. 2011. <http://www.cannonaccess.com/2010/04/html5-much-accessibility-free/>.
  2. CSS3.com. “Posts Tagged “accessibility”” CSS3.com: CSS Reference Guide, and Blog. 30 Apr. 2009. Web. 15 Jan. 2011. <http://www.css3.com/tag/accessibility/>.
  3. Curtis. “A Look Into HTML5 and CSS3.” Web Development Blog – HTMLCenter. Web. 15 Jan. 2011. <http://www.htmlcenter.com/blog/a-look-into-html5-and-css3/>.
  4. Curto, Jackie. “An Introduction to HTML 5 & CSS 3.” EzineArticles. 1 Apr. 2010. Web. 12 Jan. 2011. <http://ezinearticles.com/?An-Introduction-to-HTML-5-and-CSS-3&id=3996563>.
  5. Davers, Chris. “Things To Consider About Web Accessibility | HTML 5.” Html 5 Sample. Web. 11 Jan. 2011. <http://www.html5sample.com/things-to-consider-about-web-accessibility/>.
  6. Kyrnin, Jennifer. “What Is HTML 5 – The Newest Version of HTML Is HTML 5.” Web Design – HTML XML – Web Development – Web Site Design. Web. 12 Jan. 2011. <http://webdesign.about.com/od/html5/qt/what_is_html5.htm>.
  7. Marco. “New Accessibility Support for HTML5 Elements and Attributes « Marco’s Accessibility Blog.” Marco’s Accessibility Blog. 9 Nov. 2010. Web. 12 Jan. 2011. <http://www.marcozehe.de/2010/11/09/new-accessibility-support-for-html5-elements-and-attributes/>.
  8. Mills, Chris. “Get Familiar with HTML5!” Dev.Opera. 14 Jan. 2011. Web. 16 Jan. 2011. <http://dev.opera.com/articles/view/get-familiar-with-html5/>.
  9. Moss, Treton. “Benefits of an Accessible Website – Part 2: The Business Case.” Webcredible.co.uk. Mar. 2005. Web. 13 Jan. 2011. <http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/benefits-of-accessible-websites-2.shtml>.
  10. Playford, Robert. “HTML 5 and CSS 3 Elements: Forms, Web Sockets, Offline Access and Geo-Location (Part 2).” EzineArticles Submission – Submit Your Best Quality Original Articles For Massive Exposure, Ezine Publishers Get 25 Free Article Reprints. 23 Nov. 2010. Web. 15 Jan. 2011. <http://ezinearticles.com/?HTML-5-and-CSS-3-Elements:-Forms,-Web-Sockets,-Offline-Access-and-Geo-Location-(Part-2)&id=5425243>.
  11. Van Kesteren, Anne. “HTML5 Differences from HTML4.” World Wide Web Consortium (W3C). 13 Jan. 2011. Web. 15 Jan. 2011. <http://www.w3.org/TR/html5-diff/>.
  12. WC3. “Summary of Web Accessibility Standards and Guidelines.” VORD Web Design – Bedford UK. World Wide Web Consortium. Web. 14 Jan. 2011. <http://www.vordweb.co.uk/accessibility_standards.htm>.
  13. “Web Accessibility: The Basics.” Webcredible.com. Jan. 2004. Web. 14 Jan. 2011. <http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/basics.shtml>.