C1 – Design Simple Webpage Layouts – Week 02

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

• Accessibility
  • Web Standards
  • Browser Compatibility
  • Contrast and Colour Blindness
  • Alt text for Images
  • Drop-down Menus
  • HTML Code
  • Self-closing HTML Tags
  • Site  Maps
  • Text Size – Resizeable Text
  • Text Resizing Link
  • Accessibility Validation
  • Accessibility Levels
  • Alternative Content for Flash
  • Semantic Markup
  • Accessibility Checklist
• Feedback

Accessibility

Web accessibility is the requirement to create websites that can be accessed and understood by as many people as possible. You can relate it to the accessibility of a room in a university. Every student has to be able to access the room regardless of injury, disability or other hindering circumstances. A lot of schools had to build ramps to allow students in wheelchairs easier access to the facilities.

Web Standards

Accessibility has been integrated into the web standards. The web standards are decided on by the W3C (World Wide Web Consortium). Please click on this link now to visit the W3C: www.w3.org. Can you find the definition of accessibility? (>http://www.w3.org/WAI/intro/accessibility.php)

Please look up what impairments and disabilities are the focus of accessibility!

Browser Compatibility

Make sure to code your websites to W3C web standards to allow for the widest range of web browsers.

Contrast and Colour Blindness

Colour blindness is a common problem today with sources claiming that most people have levels of colour blindness. It affects mostly males, and it is excepted that about 10% of males have some form of colour blindness.

Web designers need to ensure that text and other interface elements can be read and understood by everyone. Here is some advice on the use of contrast:

• Any time you use colour to convey information in an interface also use clear, secondary cues to support the information.
• Use grey scale differentiation
• Use graphics to support the information
• Use text label associated with each colour

Spend 10 minutes to find websites that help with contrast and colour blindness. List 5 sites that help with contrast and 5 sites that help when designing for accessibility and colour blindness. Add your links to this post in form of a comment!

A great validator for colour has been recommended by Paul Murphy (see comment): Snook’s Color Contrast Check

See also below: Accessibility Validation!

Alt Text for Images

You add an image to your web page with this code in HTML: <img src=”smile.jpg” alt=”girl smiling”> or <img src=”\images\smile.jpg” alt=”girl smiling”>

If a visually impaired user is trying to access your web page they rely on screen reader software. Using the alt attribute allows all users to get an idea of the image regardless if they can view it or not.

What could be other reasons for users not to be able to view images?

Click on this W3Schools Link and access the TryIt-Editor. Read the code for inserting an image and try to rewrite it from memory adding a descriptive alt attribute.

I will walk around and look at your results.

Drop-down Menus

Drop-down menus are a smart way to navigate. Drop-down menus tend to look very attractive. Many successful websites avoid their use in total: eBay, Yahoo!, Amazon.

Drop-down menus are bad for accessibility.

HTML Code

Using the example of bold text and strong text, the code for bold <b>I love Football!</b> boldens that section. Using the code for strong has the same visual impact, but the difference is quite important. If you write <strong>I love Football!</strong> it will look bold, but a speech reader will interprete the text as important.

So, use strong rather than bold.

Self-closing HTML Tags

The old style of a tag is not self-closing: <br>. This is the tag for a line break and most browsers will have no trouble to read it. The web standard-compliant version is self-closing: <br />. Start to use self-closing tags to ensure that your websites will show on the widest range of web browsers in the future as well.

Site Maps

Site maps are a good way to support accessibility. Anyone with trouble navigating your site will benefit from a clear, text-based site map.

What is a site map? It is an index or guide to the different pages and hyperlinks on your website.

Example of a Site Map found at MelbourneIT

Read here for Tips on Sitemaps  Example of WAI Sitemap – is it too complex?

Homework

Read the updates below on the weekend!

Text Size – Resizeable Text

Make sure to use text size that is suitable for a variety of users. Smaller text looks neet and modern, but not everyone will be able to read small text (think of older users).

Recommendations regarding the ideal text size vary significantly: various sources recommend sizes for body text (main text) from 12px-14px as well 16px. W3Schools recommends a default size for paragraphs of 16px.

With a change towards responsive web design, a design approach that aims at flexible website dimensions to provide an optimal viewing experience on any platform, there has also been a shift towards maesuring text size in em, rem or in percentages.

Text set in em or rem (they are different)  can be resized by all browsers, which allows for ideal viewing on a screen as much as on a tablet or mobile phone.

Read more on text size at: W3Schools CSS Font  Sitepoint: Relative Font Size Rem  Sitepoint: CSS Font Sizing  W3C: The Amazing Em Unit

Text Resizing Link

It is recommended to add a link that allows the user to change the font size within the website. To achieve this you need to include a link that uses JavaScript to swap between two CSS style sheets.

Accessibility Validation

It is important to check your website for accessibility! Make use of one of several  online accessibility validators.  Bobby used to be the most successful free online validator, which has been disabled recently by IBM.

A great validator for colour has been recommended by Paul Murphy (see comment): Snook’s Color Contrast Check

Find a list of numerous accessibility validators below at: W3C: Complete List of Accessibility Evaluation Tools

Accessibility Levels

Automated validators give only an indication of the accessibility of your website. Accessibility is measured at three levels from basic accessibility to advanced: A, AA, AAA. Each level relates to a priority checklist that can be found at: W3C website.

The W3C website is rather cumbersome and that is being friendly. It is fine to use an accessibility validator and you can refer to the checklist below (see Accessibility Checklist)

What level do you need to reach as a web developer? W3C states:

• A Web content developer must satisfy all priority 1 points. This will give the site a Level A-Accessibility rating, which can be labeled on the website.
• A Web content developer should satisfy all priority 2 points. This will give the site a Level AA-Accessibility rating, which can be labeled on the website.
• A Web content developer may satisfy all priority 3 points. This will give the site a Level AAA-Accessibility rating, which can be labeled on the website.

Alternative Content for Flash

There has been a problem with Flash content online. Flash content has not been accessible until later versions of Adobe Flash. If you use Flash make sure to provide the content in alternative format.

It is recommended to describe your Flash file (SWF) in words by offering users a link to a text version.

Semantic Markup

The W3C has declared its intention to create a Semantic Web, meaning a World Wide Web of structured data, that is transparent. Using ‘Semantic Markup’ means that you will write HTML that is self-descriptive and written for other humans rather than just for machines (software, parsers, Google etc).

Semantic Markup means that HTML code is used appropriately. This is achieved by using the HTML standard classes accordingly: <h1> will be used for the main heading followed by <h2> and these tags will be used for headings and not to emphasise or enlargen text. <p> will be used for a paragraph (rather than <br /> for line break).

Above I mentioned the examples of using <strong> rather than <b> to emphasise text. The same applies to the <em> tag (which actually stands for emphasis, while strong represents prominent text) to be used rather than the <i> tag which stands for italic or sloped text.

The point is that <b> and <i> are purely representational or visual, while <strong> and <em> offer semantic meaning that will be interpreted differently by screen reader software. The other point is that the visual representation for <strong> and <em> may change over time from bold and italic to something else (eg high-lighted).

You can also add comments to important sections of your code. Comments will only display in your HTML code and not on your website. The use of comments is to help understand long passages of code. Other team members will benefit. But it also helps understanding code that you wrote a while ago.

Example of a comment in HTML: <!–This is a comment. Comments are not displayed in the browser–>

HTML5 offers new semantic elements to clearly define different parts of a web page:

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figcaption>
• <figure>
• <footer>

Example of Semantic HTML5 Tags, Source: W3Schools.com

Accessibility Checklist

Finally, here is a checklist that you may want to use.

• Add valid DOCTYPE declaration
• Keep the content simple, avoiding jargon and complex words
• Avoid justified text, as users with dyslexia find it harder to read than left-aligned text
• Use sans-serif (eg Verdana, Calibri, Arial)
• Avoid images of text
• Allow that font size can be adjusted
• Allow for large clickable area of links
• Use descriptive links (avoid ‘click here’) This is important for users with visual impairment who rely on screen reader software.
• Provide a sitemap
• Provide ‘Back to Top’ and ‘Skip’ links
• Ensure functionality of keyboard and mouse (eg tab)
• Use images and icons
• Provide meaningful alternative text for images: <alt>
• Provide enough contrast in your colours of text and background
• Avoid distracting animations and sounds or allow for them to be paused, skipped or switched off
• Make use of white space (empty space around filled space with either text or images)
• Provide a consistent design and navigation throughout the website

(The checklist is an altered version based on the original that can be found in ‘How to Design Websites’ by Alan Pipes, Laurence King Publishing, 2011, p.73.)

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!