skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible design for the Third Sector
Creating inclusive websites since 1996
Jim Byrne Web Designer

Ten tips to make your web text easier to read

1. Left align text

Align your text to the left and leave it ragged on the right. Left-aligned text increases reading speed. The straight left edge helps to anchor the eye when starting a new line.

Never fully justify text as it can create serious readability problems. Even if you personally like the look of fully justified text, don’t do it. Word spacing is likely to go awry and you will end up with large gaps between words and ‘rivers’ of white space running down your pages. Those rivers make reading your content difficult, if not impossible, for people with dyslexia. Anything other than left-aligned text can cause problems for people using screen magnifiers.

2. Think about line length

There seems to be little agreement on what is the best line length for optimum reading speeds. The most commonly held view is that limiting line length to 9 or 10 words can increase speed and comprehension (based on the assumption that the eye can only focus on about 3 inches of a page at a time). However recent research appears to show that the rules that apply to off-line print don’t necessarily apply to online print.

It is suggested that line length can actually be longer for online content. However, having said that, don’t go beyond about 80 characters as at that point readability will start to suffer.

Reading speed and user preferences are not simple matters, consider the following conclusions by Melissa Youngman and Dr. Lauren Scharff (1998)

“Users read faster when line lengths are long, although they tend to prefer shorter line lengths. When designing, first determine if performance or preference is important. If user performance is critical, use longer line lengths to increase reading speed. However, if user preference is critical, use shorter line lengths.” Usability.gov

3 Get your ‘leading’ (line-height) right

Set the leading larger than the default – as a rough guide 1.3em of leading (130%) will make a big difference to the readability of a web page. Leading and line length however are related; the longer the line the bigger you need to make the leading.

Newspapers have very short line lengths and very little leading. They do this so that they can fit as much text into a small space as possible. However, given the variable nature of the devices people use to view web pages, we can never be sure what the line length is going to be for every user. In relation to leading my rule of thumb would be, if in doubt go bigger.

As an aside: you might be wondering why line-height is called ‘leading’. Well, in the olden days typesetters used pieces of lead to set the space between text lines. If you like typography and typography jargon – which I do – here’s a couple more. The space between characters is called kerning and the space between groups of characters is called tracking.

Need more exciting typography jargon? Here’s a glossary of typography terms.

4. Use the correct font

Choose a font that is suitable to your subject matter. An article about ancient manuscripts can justify the use of a flowery old font whereas an article about the design of modern art galleries can’t. For the article about the design of modern art galleries you will be looking at using a clean and uncluttered san-serif font.

Don’t use more than two fonts on a page. It will look like a ransom note. Clearly that will be distracting for visitors and draw attention away from your content.

Off-line, headings are commonly set in a sans-serif* font, with body text set in serif. However, on-line, sans-serif are often used for both headings and body text; the cleaner outlines of the sans-serif fonts tends to make them easier to read on low resolution screens.

Don’t mix serif and sans-serif fonts in your body text, as it makes you look like an amateur, which isn’t good. You may not have considered it as important but poor typography decisions can damage the credibility of you and your organisation.

* Serif fonts are those with little decorative flourishes on them and sans-serif fonts are the clean and tidy ones. Compare Times New Roman with Helvetica and you will get it.

5 Avoid large blocks of italics

Avoid using italics for small text sizes. Italicized fonts can look particularly bad at small sizes as italics are not easy to render using a square pixel grid. If you must use italics, avoid using them for large blocks of text.

6 Be spare in your use of capitals

Don’t use all caps for bodytype – or even capitalise all words in headings. The uniformly of size and shape of capitals make them harder to read than lower case letters.

Readability is increased when only the first letter in a heading is in capitals; each capital – being less recognizable – acts as an interruption to the eye as it scans across the text.

7 Ensure adequate contrast

Ensure good contrast between the text colour and the background colour. If the contrast between your text and background colours is low, some of your visitors won’t be able to access your content. That’s why the WCAG contains guidelines for colour contrast. For complying with WCAG AA standard text the contrast ratios need to be 4.5:1 for standard text and 3:1 for large text. Large text means 14 point and larger (typically 18.66px).

8. Underline links

Make it easy for visitors to understand what is a link and what is not a link. Don’t rely exclusively on mouseovers to identify links, as this can be confusing and reduces usability. (From Usability.gov).

9. Use lots of headings

For service based websites in particular, arrange your text for scanability, i.e. have lots of headings and provide the most important ideas at the start of paragraphs. Use lists rather than dense passages of text when possible.

Most of your visitors will not be interested in reading every word on your page. So make it easy for them to find the information they are seeking quickly by using headings as signposts; signposts for the various issues and topics you are covering in you text.

10 Use appropriate language

Use a writing style and language that is appropriate for your audience. Don’t dumb down or dumb up. Think about who you are writing for and write for that audience.

Ignore the idea that you should never use jargon. If your audience expects it and when using it will actually make your meaning clearer, use it.

On the other hand if you are not writing for a specialist audience don’t try to be clever by using jargon just for the sake of it. Think about your audience and tailor your style to suit.

Don’t strive to use ‘easy read’ thinking that that will make your content accessible to a wider audience. It will accommodate one part of your audience but it will put another part off (probably the larger part). Easy read is designed for people with learning difficulties – an easy read version is an alternative version, i.e. a version aimed at a particular audience.

Jim Byrne

Contact me If you value experience (over 20 years as a web developer) and unrivalled technical know-how. Do you need a new beautiful responsive, accessible website? Get in touch. Tel: 07810 098119. 




25 years on the Web: have I learned anything yet?

An article I’ve just written for Disability Today: 25 years on the Web: have I learned anything yet?

Yes people did wander the earth when there was no Facebook, no Google and no World Wide Web. I can’t say I remember it well (my memory is not the best) but I was certainly there. I lived through the invention of the web, its enormous growth, its unprecedented speed of development and its current ubiquitousness in the developed world, so, do I have any insights?

Read the full article: 25 years on the Web: have I learned anything yet?

Organising Website Content: 14 tips

Organisation of items on shelves

  1. Know your audience and what they want from you: i.e. aim to make the things they are likely to look for the easiest to find.
  2. Create a priority list of your target users; and a priority lists of what they will be looking for on your site. That way you can address the main needs of the most important groups first.
  3. It can be helpful to Imagine typical users, how they might navigate through your site and how they might find what they are after.
  4. Review your website statistics. The most popular pages and search terms will be obvious: ensure you make them even easier to find. (Install Google Analytics and you can see the route people take through your site, the page they were viewing when they left – and much more).
  5. Create more than one way to find the same thing: Some users prefer search and some prefer browsing. Just like when a person visits a real store; some people ask staff and some just walk around. Some obvious ways to find things you could offer to visitors would be: search, browse via the main navigation, browse via the site map, ask via email, contact form or telephone.
  6. Explore different organisation schemes, e.g. alphabetic, by subject, by audience, by date. Most websites use a mixture of schemes; e.g. at the top level your scheme could be based on the needs of your audience (e.g for a site about a conference your audience groups could be exhibitors, visitors, press) – down a level the scheme used could be based on subject or alphabetical order. For example on a site selling books, a PHP programmer might click in to the technical books’ area; then click Programming books, then PHP books – then browse those PHP books alphabetically. Or more likely – they will just search for PHP books from the home page.
  7. Use a site-map tool to visualise your site such as the free online tool http://writemaps.com
  8. A content management system can make it easy to offer several different schemes automatically: e.g. it can be easy to organise your content alphabetically, by topic or by date at the click of a link.
  9. Group similar things together. Group navigation visually: e.g. information related links in one place; dynamic things (discussion, social media) on another, play things (weather, games), organisation related things together (about us, press releases, employment opportunities, contact, staff…).
  10. Decide whether your navigation will be shallow or deep. Is everything going to be accessible from the home page, or do you need to burrow down to find things? One approach isn’t necessarily better than the other; it’s all about how easy and quickly things can be found.
  11. Label things clearly and use familiar labels. Clear and consistent labeling is obviously important. Is it clear what the person will get when they click that link? Does the page they go to have the heading they expect? Use conventions; e.g. Information about your organisation is in the ‘About’ area, information about your services in the ‘Services’ area, information about your products in the ‘Products’ area. ‘Information for the press is in the ‘Press’ area – use ‘Contact’ for the contact form link.
  12. Use search engine friendly urls, e.g.. websitedomain.com/category/sub-category/pagename.php. Use all lower case, no spaces, don’t use any ‘funny characters’.
  13. Navigation should be based on your content and visitor research. Your navigation scheme should become clear from the way you have organised your content. I.e. it should be created with your users in mind: it should not reflect your internal organisation chart.
  14. Use conventions to place navigation on the page: horizontal main navigation across the top, left-hand for subsection navigation; right hand for navigation related to page topic. Search – is usually top right, at the very top and bottom is where you usually find contact information and a site-map.

Portable Document Format (PDF)Download Organising website content as a PDF document.

“Jim’s patience and close work with his designer meant we got a vibrant new image that we could use across all media.” Clare MacGillivray, Development Coordinator Edinburgh Tenants Federation

Contact us today to discuss your project’s digital marketing needs

Or phone to talk over your ideas: 0141 576 9446.

Photo by yvestown on Flickr – used under a Creative Commons licence

What is responsive website design and how does it relate to accessibility?

Responsive design is about creating sites that change their layout according to the device they are being displayed on. for the most part, this means altering the layout to accommodate different screen sizes.

Responsive Web DesignHowever, this doesn’t mean that responsive sites are automatically accessible. It doesn’t imply anything about the many requirements of making website accessible to people with different needs. For example images will need to have text labels for people who can’t see images, links will need to make sense when read out of context for people who use a keyboard to jump from link to link on the page. And for everyone – but critical for people with cognitive impairments – content needs to be well structured and easy to navigate. 

In very (very) simple terms; a responsive website responds to screen size and an accessible website responds to a users’ access needs.

For example, in a responsive design, an image will resize itself to fit within the parameters of a smaller or larger screen; for accessibility the function of the image responds to the users’ needs by ensuring that function can be accessed in additional ways – other than just visually. For example, by having a text label attached to the image. So if the image is a search button; the text will say ‘Search’; if the images is a bar graph the information displayed in the bar graph will be available as text – perhaps via link to a different web page if a long explanation is needed.

Responsive design and usability

To be fair – for many developers – responsive design is about making a site ‘usable’ on different devices – not just viewable. So for example the site doesn’t just adjust to accommodate the smaller screen size of a tablet computer, it also modifies the navigation scheme to suit the needs of tablet users (this could mean for example, having navigation that can be accessed by the users’ thumbs while they hold the device).

From this point of view responsive design could have have something to offer for people using alternative devices to access web content; if the website itself is responsive to how the users’ access device works that is a good thing and helps accessibility in the wider sense of the word; for example, by automatically adding skip links to a page to help someone who is using a screen reader.

It’s about being flexible about how content is presented

Flexibility – is an important principle of accessible website design; content presentation should be flexible enough to accommodate the users’ needs; some of those needs are related to the device the person is using so a responsive website design is not the same as accessible website design, however, it can help make a site more accessible.Contact me if you need a responsive accessible website.

Get in touch if you would like a responsive, accessible website.

“…went above and beyond whilst working for me, as he often helped me with technical queries that I was unsure of or didn’t know how to do.” Nicola Beaumont

The WCAG 2 principles translated to simple ‘Jim speak’

You can now download WCAG 2 Defining The Principles as an MS Word document. This is the one where I translate the rather confusing language of the WCAG 2 website accessibility principles into ‘Jim speak’ i.e. easy to understand language.

This is the shortest possible summary of the WCAG 2 guidelines; it just outlines the basic principles and makes it clear what they mean.

Contact us today. We are hugely experienced award winning web designers and developers. Please read what our clients are saying about how we helped them meet their aims.

Or phone to talk over your ideas: 0141 576 9446.

Tags:

Your business website? What the %!*l is it for?

Millions of new websites get built every year by business owners who haven’t thought very deeply about why they want a website; what it can or cannot do for them.

And after it’s up and running those same business owners silently accept that their website gets very little traffic and attracts very little business.

That’s not going to be you! In the course of this article we will take the time to figure out just why you should have a website and how you can design it to do a job for you.

Your website is part of your marketing strategy

“97% of shoppers research local products and services online. Your website stands a good chance of being a prospect’s first impression.”

A definition of marketing for service based businesses:

“Marketing for service based businesses: the entire process of building the relationship between your business and your customer or potential customer.”

To market your business successfully – you need to:

  1. Be clear about what you do and what is your unique selling point.
  2. Know who/where your target market is.
  3. Build credibility within that market.
  4. Attract new customers and keep existing customers; and you do that by creating and maintaining business relationships.

Your website is for marketing your services/products

It is just another tool you use to meet your marketing aims. Think of nothing else when designing or redesigning your website; it’s not just about how it looks (that’s is very important as we will see later – but you aren’t creating visual art, or a set of magazine pages) and it’s not a vanity project to make you look good.

You website needs to:

  • Clearly explain what your service or product is.
  • Identify your target market (the visual design and content should reflect that).
  • Help build your credibility within that market.
  • Both attract new clients and help you keep in touch with existing clients.

In short – you need to

  • Be clear about who you want to attract
  • Be clear what action do you want them to take

The action you usually want them to take is to register for your mailing list or get in touch via phone, e-mail or your contact form.

You are doing this so that you can keep in touch with them and build a relationship that shows you in a credible light. Remember —we said marketing was about building relationships.

Ok — so let’s take each of these things in turn and look at examples

1.Clearly explain what your services are

Ideally you should be able to express this in no more than a couple of paragraphs. It should be easy to read and easy to understand.

It should also identify your niche, your target market and what makes you special.

Exercise 1: ignoring for now your target market and your unique selling point: write a single paragraph (or at a push two) that says exactly the service or products you provide. This should be written is such a way that it could become the introductory text on your website.

What makes you unique?

How do you make it sound like choosing you is the only logical choice? Here are some ideas to get you thinking:

  • Features or additional services you add for free
  • The way you deliver your service or product
  • A unique guarantee
  • Showing that you uniquely understand your potential customers’ problems — and can provide the solutions to those problems
  • Showing clearly how your service benefits your customer? This is the old ‘benefits not features’ mantra: how specific can you be about defining the benefits of using your service
  • Demonstrating that you are the most up to date with new developments in your sector
  • Being the very best at what you do

Exercise 2: Write down the thing that make you stand out. Your unique selling points.

2. Your target market?

Be clear about who and where your potential customers are. If that’s clear you can:

  • Ensure the look and feel of your site is appropriate; you don’t want it to look like CBBC’s if you are targeting local garage owners.
  • If your target market is defined as those within a particular geographic area, e.g. Accountants in the Glasgow area; ensure that your website URL, headings, keywords, key phrases and so on include that area name. If I’m looking for someone to help me market my services in Glasgow then I’m more likely to type, ‘Glasgow Marketing Services’ into Google than just ‘Marketing Services’.
  • Being clear about your target market will allow you to tailor your content, your offers and services to a specific group/sector/individual
  • For example you can Blog about subjects of interest to your potential customers; this makes you look like ‘the expert’ in the area. if you can blog consistently and find ‘addictive’ subjects to blog about; people will continue to come back to your site to read your latest thoughts. Don’t use a formal ‘voice’ when you write your blog, be conversational.
  • You can develop and demonstrate your expertise via your site content and publications you produce. For example you can write expert guides that you give away to encourage people to register for your mailing list.
  • Customer testimonials should be by those in the same sector you are marketing to.
  • Testimonials can also come from people who provide the same or similar services to you.. For example if you are a web developer and you are part of a friendly web developer network – you can exchange positive comments within your network. Even your peers think you are good!
  • If you are sociable – encourage the development of a community of readers by regularly asking for their opinions and feedback. Always reply to people who add comments to your pages.
  • If you have the resources and time, make videos and post these on your site. The subject could be anything as long as it is related to your subject area and relevant to the interests of your target market. For example you could create videos containing tips and tutorials related to your area of expertise.
  • A quick way to get a sense of what content your site should contain and how it should be organised is to list and rank your main target group(s) and then list and rank the needs of those groups/potential clients, i.e. the needs that you will meet with your services. This helps ensure that the most important content is easiest to find.

An example

If you have identified your target market to be time-starved small business owners and you run a virtual PA service, what would be the appropriate content for your website?

Clearly there will be the basic stuff; services you can provide; your rates, contact details etc. But there should also be content that is on there because you have a very clear idea of your target market.

Perhaps publications you have written? For example, you know small businesses are always worried about costs — so you could write some publications that address exactly that issue:

  • “Why using a virtual PA can increase the turnover of even a one man/woman business? “
  • “10 reasons business support from a virtual PA makes sense for small businesses?” Features about top tips are particular popular on the web.
  • “Did you know a virtual assistant can save your business money?”
  • You could have a calculator that demonstrates the return on investment when you use a virtual PA: e.g. your time is worth this amount per hour; but you can get a virtual PA for this amount per hour. Highlighting the ‘opportunity costs’ of the business owner doing everything themselves.

Exercise 3: Write down who your target market is and how you can ensure the content on your website is targeted at meeting their precise needs.

3. Build your credibility: a major job for your website

If you don’t look trustworthy; no-one will hang around long enough to give you their email address or purchase your services. Looking credible is central to the success or failure of your website.

How do you use you website to build credibility?

  • Ensure any photographs of people on your site are real people who work in your business — not stock photos. Provide short biogs for you and/or your staff.
  • Add logos of clients you have worked for — particularly those whom you deem to be important in the sector you work with.
  • Take advantage of the idea of ‘social proof’; i.e. ways to demonstrate that other people care about and appreciate what you do.
  • Add a Facebook ‘Like’ button to each of your pages
  • Include testimonials from clients and from important figures in your industry.
  • Add social media ‘likes’, Linked in testimonials, Twitter followers – up-to-date blog with comments.
  • Show the Facebook ‘facepile’ of your community
  • Use articles, news items your have featured in.
  • Add good things people have said about you on Twitter (you don’t need permission to republish a Tweet):

Make good use of any review you have had

  • 41% say they read 4 to 7 reviews before feeling comfortable about a purchase decision
  • 63% are more likely to buy from a website with reviews and ratings

Source: http://www.peopleclaim.com

Exercise 4: Brainstorm ideas for content you can add to your website to demonstrate and build upon your credibility.

Ensure your website is professionally designed!

Visual design is very important: but website design is not about providing cool graphics; it’s about solving problems, usability, readability, accessibility – it is about standing out

There is a study titled “Trust and mistrust of online health sites.” In it 15 participants review health sites that they find via Google. 94% of the factors mentioned for mistrusting a website were design related.

When talking about trusting or mistrusting a site, design related issues were mentioned 15 times more than content issues.

Specific problems included:

  • Boring web design, especially use of colour.
  • Busy layout with too much text.
  • Pop up advertisements.
  • Poor navigation.
  • An inappropriate name.
  • Slow to load.
  • Small print
  • Corporate feel.
  • Poor search facilities.

Poor design means people don’t hang around for long – which means they don’t buy-in to your service.

Good design = trust = more conversions = more money in your pocket

“As aesthetically orientated humans, we’re psychologically hardwired to trust beautiful people, and the same goes for websites. Our offline behaviour and inclinations translate to our online existence.” Dr. Brent Coker, who studied the impact of attractive websites on human behavior.

Attractive well designed websites look professional and inspire trust in site visitors. In short, design matters.

4. Attract new customers and keep existing customers

Attracting new customers: your website is the central hub of your sales funnel

Your marketing funnel is the system that draws people to your website and channels them towards your contact form or newsletter subscription form.

Encourage signups using:

  • Landing pages: landing pages are pages that only consist of a powerful sales message (which could include a video) and a subscription form. Visitors choices are restricted to either leaving the site or signing up via the form. There are no other links on the page (i.e. no ‘about’, ‘home’, ‘our services’ and so on).
  • Think of your social media pages as ‘the spokes’ of your marketing funnel – your website is the hub. In your social media profile text always provide a link to your site – with an incentive for people to click it (e.g. a free publication); the link goes straight to a page on your website with a signup form for your mailing list.
  • You should have many ‘calls to action’ on your page. Ask people to get in touch (e.g. to take advantage of your current offer) at various points on the page; not just at the end.
  • Use an online mailing list service such as Mailchimp to manage your subscription lists and newsletters. Integrate subscription forms in to your website. If you use WordPress there is a Mailchimp plugin that makes this easy.
  • Use buttons rather than text links for form submit fields. This increases conversion.
  • Keep existing customers; ‘front of mind marketing’
  • Keep in touch with your existing customers and provide them with on-going fresh content on your website. Only by keeping in touch will you be the person who comes to mind when it is precisely your service that they need. If you are not in their mind at that point someone else will be.

Keeping in touch via a regular newsletter; that after all is why you attracted them to your site in the first place; so you could get them on your mailing list – and develop a long-term relationship, this allows you to demonstrate your expertise.

In conclusion

Marketing for services based businesses is all about building and maintaining relationships with customers.

The aim of your website is to get that relationship started; to do that you need a site that inspires trust. Ideally to the point where visitors are happy to register for your mailing list, email you or fill in your contact form.

If people visit but don’t get in touch then your website is not doing its job.

Contact us today to discuss your project

Or phone to talk over your ideas: 0141 576 9446.

How to make client-side image maps accessible

Although client-side images are preferred over server-side image maps – as equivalent text can be provided for each image map ‘hot-spot’ – server-side image maps are sometimes necessary. For example, a server side image can be used when the active regions of a client-side image map cannot be easily defined using an available geographic shape. In such cases the answer is to provide redundant text links relating to each link provided by the server side image map.

The following markup example is typical of the code used to reference a server side image map.

<a href="/cgi-bin/mymap.map">
<img ismap src="imagemap.gif" >
</a>

The web pages accessed by the clicking the mage map in the above example would be completely hidden to someone using a screen reader or a text-only web browser, as there is no alternative way of accessing the links provided.
An example of the server side image with alt attribute added and an alternative set of links to the same content:

<a href="/cgi-bin/mymap.map">
<img ismap src="imagemap.gif"
alt="Alternative text links are provided at the foot of the page.">
</a>

You then make the following links available at the foot of the page,

<p><a href="about.html">About Us</a> | <a href="research.html">Research</a> </p>

As you can see in the example above the alt attribute provided information about where to find the text based links. The alternative text based links provided at the bottom of the page imply that the image map has two hot-spots, one to find information about the organisation and another for information related to research.

What is the British Standard (BS) 8878 Web Accessibility Code?

BS 8878 Web accessibility guideBritish Standard 8878 (BS 8878) is the Web Accessibility Code of Practice developed by the British Standards Institution, launched on December 2010.

The standard outlines procedures to help ensure that websites (and other web based services) are accessible to disabled people. In short, it provides guidance on good practice; how to develop your strategy and what practical steps to take to implement that strategy.

One assumption it makes is that accessible website design is a good thing and that it is something every organisation should be working on.

When building your new website:

  • You should put someone in charge of ensuring accessibility and clearly outline their remit
  • Make website accessibility part of your organisational policy; BS 8878 provides policy templates.
  • Document your thoughts and decisions throughout the process of building your website.
  • Make reference to the guidelines and standards you are aiming to adhere to.
  • Set out how you will ensure the website stays accessible once it is up and running.

What makes it different from WCAG 1 and WCAG 2.0

BS 8878 aims to be more ‘holistic’ than other guidelines such as the Web Content Accessibility Guidelines (WCAG) which focus much more on technical issues.

Given this wider approach, it covers:

  • The law and accessibility.
  • Inclusive design.
  • Accessibility on devices that are not computers.
  • Accessibility for older people.
  • How to make accessibility a part of your tendering process.

Do you need to adhere to this standard?

There are positive and negative factors that would influence you in considering whether you should adhere to BS 887.

  • If you don’t make your website accessible you risk falling foul of the law: e.g. the Equality Act 2010.
  • Making your site accessible increases the audience you will have for your goods and serves; research suggests that you will increase your audience by up to 17% if you make your site accessible. (Nomensa report)

The Importance of The BS 8878 Web Accessibility Code of Practice

In my opinion The BS 8878 is an extremely useful and important document as it recognises that website accessibility is a more complex subject than just applying the right techniques to a web page (i.e adding text labels to images).

It is also about how organisations operate in relation to equality (e.g. policy development), how organisations tender for website developers, how accessibility is tested and who tests it (e.g. disabled people) among other things.

Contact us today. We are hugely experienced award winning web designers and developers. Please read what our clients are saying about how we helped them meet their aims.

Or phone to talk over your ideas: 0141 576 9446.

Structure your menus by marking them up as lists

A navigation menu is – if we are speaking structurally – a list.

I still see websites that don’t markup their navigations links as lists; I guess the reason for this is that designers don’t want to have ugly big bullet points littering their menu’s, or seemingly uncontrollable margins throwing out their carefully crafted layouts.

Is it possible to use the correct structural markup, and still make your menus look the way you want them to?

The simple answer is yes; you can use CSS to style lists to look more-or-less any way you want.

First, undermine your previous assumptions by visiting the Listamatic website to see examples of different list styles (with the CSS used for each).

Then visit Mark Newhouse’s Taming Lists tutorial to learn how to make your own.

And finally – if you can’t be bothered learning how to do it yourself – have a look at Accessify’s List-o-matic – where you fill in a few forms, and the List-o-matic tool does all the hard work for you.

Why is this relevant to accessible web design?

Using the appropriate markup for all the structures in your web documents is the first step towards making them accessible; web pages need to be accessible to the ‘user agents’ people use first, before they can be accessible to the people themselves. Using valid standards based markup means you have the best chance of your pages being understood by those intermediate ‘user agents’ (usually that means computers and web browsers).

Links

So how do you add character encoding information?

For HTML 4.01, you can indicate the character encoding in the head of your page using the following meta tag:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

ISO-8859-1 (commonly called Latin 1) is the default characters set for HTTP .1.1, and indicates a set of common English characters. Generally this is the most common character set indicated in web pages, and is likely to be the one you will use.

Creating valid HTML is one of the most important steps you can take when designing accessible websites. If you do not provide the appropriate character encoding this could lead to characters in your page not displaying correctly, which of course will have an impact on the accessibility of your content.

Links

Other posts in this category

Give me a phone if you would like me to test the accessibility of your website:

I provided feedback on the WCAG 2 (as representative of Guild of Accessible Website Designers) have two decades of experience and worked with hundreds of organisations.

07810 098 119