Beranda > Web Development > Beyond guidelines: Advanced accessibility techniques

Beyond guidelines: Advanced accessibility techniques

When creating accessible websites, most web developers and web managers tend to follow the W3C accessibility guidelines. And rightly so – they are the most comprehensive accessibility resource on the Internet after all.

The W3C accessibility guidelines, or Web Content Accessibility Guidelines as they’re officially known, could go slightly further however. Fulfilling the guidelines will give you a very accessible website (remember though, they are just guidelines so shouldn’t always be taken literally). For ultimate accessibility though, try implementing some of these techniques too:

Hidden text

Hidden text can be very useful for screen reader users. If there isn’t sufficient text for these users to gain an understanding of a particular section, then you can simply create this extra information and hide it from sighted users.

The most common and useful page items to insert invisible text for screen reader users include:

– Headings – Every single section on each page should have a heading placed immediately before it. This way, screen reader users always know that the preceding section has finished and a new section has begun. So, before the main navigation begins, you should insert a heading labelled, ‘Site navigation’. Although this heading is extremely useful for screen reader users, it may look rather unsightly visually, so you can just make the text invisible.

– Form labels – Every form item must have a label immediately preceding it – otherwise, screen reader users won’t know what the form item is about. Date of birth fields, with three separate fields for date, month and year, are common culprits of not providing form labels for each form field. So, place the date of birth label before the three form fields, and then insert an invisible label before each of the other two form fields, ‘Month of birth’ and ‘Year of birth’.

– Skip links – A skip link is an invisible link that’s placed at the very top of the HTML file. It’s a relative link within the page, allowing users to jump straight to a section on the page, usually the main content. Skip links are really useful for both screen reader and keyboard-only users who can jump straight to the content, without having to work through the navigation.

Succinct, front-loaded and conventional link text

As a method of browsing through a page, screen reader users can call up a list of links on a page and jump to the link in which they’re most interested. It’s common knowledge that link text should make sense out of context, and this is indeed a W3C guideline. Link text such as ‘Click here’ would obviously make no sense in a list like this. It’s also crucial that link text is:

– Succinct – so that it’s quick and easy for screen reader users to work through this list
– Front-loaded – so that screen users can understand the meaning of the link straightaway and jump down to the next one if they’re not interested
– Conventional – so screen reader users can alphabetise the list and jump to the link they’re looking for (e.g. if the ‘Contact us’ link was labelled as ‘Enquiries’ it would be harder to find the website’s phone number)

Link text is additionally important for users that finds it difficult to read online, such as screen magnifier users and those with learning difficulties and dyslexia. For these users when they scan through web pages, they’ll often be unable to make out specific words – instead, they’ll see shapes and colours. Anything that’s in a high contrast colour is obviously a link, so they can stop and read it.

By making link text succinct and front-loaded, and using conventional link text, it’s far easier for users that finds it difficult to read online to immediately comprehend links and what their destination is.

Visible font resizer

It’s crucial that text is resizable for web users with poor or limited vision – or so the theory goes. In actual fact, user testing has shown time and time again that few web users actually know how to resize text, or that this functionality even exists.

By providing a visible font resizer all users are of course made aware that they can resize the text should they need to. To find out how to put a font resizer on to your website, read this article about stylesheet switching at http://www.alistapart.com/stories/alternate.

(Incidentally, if you don’t know how to resize text simply select ‘View > Text size’ in either Internet Explorer or Firefox; alternatively, scroll with the wheel of your mouse whilst holding down the control key.)

Place instructions first

If you provide instructions for any kind of functionality on your site, make sure that the instructions are placed before the functionality. This of course sounds obvious, but it’s amazing how many times this rule isn’t adhered to.

Screen reader users listen to pages in the order that they’re written in, so if any instructions come after what they’re relating to then that’s obviously going to be too late.

Placing instructions first is also crucial for screen magnifier users. Screen magnifier users can only see a small section of the screen at any one time, so if instructions are placed in an out-of-the-way place they’ll likely be overlooked.

Web forms are perhaps the most common type of functionality to contain instructions. Do be sure that any instructions are placed above the form and not below it. Mis-placed instructions usually include explaining which fields are required and error messages.

Large headings

Headings are crucial for all users to find what they’re looking for quickly and efficiently. They are however particularly useful for any user that finds it difficult to read online, such as screen magnifier users and those with learning difficulties and dyslexia.

When these users scan through web pages, they’ll often be unable to pick up words and instead will see shapes and colours. By using a large font size for headings, these users will easily be able to spot these important headings.

Focus state for links

Keyboard-only web users can navigate through web pages by tabbing from link to link (and form item to form item). It can however sometimes be difficult to know exactly where you are on the page when relying on the tabbing method. By assigning a background colour to the focus state of each link, it becomes much easier for these users to orientate themselves on the page.

Large link target

Many web users with dexterity problems will use only the keyboard to browse through a website. Some will still continue to use a mouse but with rather limited control, so wherever possible do try increase the area of the link target. This is of course not possible for regular links, but for vertical based navigation lists it’s easy to extend the clickable area to the full width of the column by assigning the style, display: block to each link.

Conclusion

The W3C accessibility guidelines are of course important, but if you want your website to be truly accessible then there’s more that you can do. Following the advice in this article is of course a great start!

Kategori:Web Development
  1. Juli 7, 2013 pukul 2:27 am

    Wow that was odd. I just wrote an incredibly long comment but after I clicked submit
    my comment didn’t appear. Grrrr… well I’m not writing all that over again.
    Anyhow, just wanted to say fantastic blog!

  2. Juli 9, 2013 pukul 3:27 pm

    Hi there, always i used to check website posts here early in the break of day, because i love to find out more and more.

  3. Juli 10, 2013 pukul 6:55 am

    This piece of writing will help the internet people for building up new blog or even a blog from start to end.

  4. Juli 24, 2013 pukul 4:38 pm

    My partner and I stumbled over here by a different page and thought I
    should check things out. I like what I see so now i am following you.

    Look forward to looking at your web page repeatedly.

  5. September 1, 2013 pukul 4:12 am

    Hi there, You have done an excellent job. I will definitely digg it and personally suggest to my friends.
    I am sure they’ll be benefited from this web site.

  6. September 12, 2014 pukul 9:22 pm

    Optimized press releases have an added advantage that is they are highly readable,
    simple, directional, and help to gain higher search engine rankings, market exposure
    and enhanced credibility. As part of your overall link building strategy, there are
    a few reasons why press release writing can be beneficial: get one
    way links from quality sites, earn links from sites that find you
    via a press release, and get placed on relevant
    directories that re-distribute press releases.
    Is the incoming user traffic on your website extremely low.

  7. Oktober 7, 2014 pukul 7:47 am

    Gօod post. I absolutely ɑppreciate this site. Stick աith іt!

  8. September 9, 2015 pukul 9:51 pm

    Everything is very open with a very clear explanation of the challenges.
    It was definitely informative. Your site is very useful.

    Many thanks for sharing!

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: